/* assets/nav.css — shared header additions (build 07-19q)
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS. The header is a shared DESIGN, not shared code: five
   pages (index, live, live-game, pnl, support) each carry their own <nav> copy,
   and they had already drifted to five different link sets. Adding the live dot
   and the coming-soon entries inline would have made that six divergent copies
   of the same three features. Everything the rework adds therefore lives here
   and in assets/nav-live.js, and each page only loses the archived links and
   gains the two includes.

   Paired with assets/nav-live.js, which injects the markup these rules style.
   Nothing here targets .nav-links a, so every existing link is untouched. */

/* ---- LIVE, the primary call to action — treatment N2 -----------------------
   QUIET UNTIL LIVE. Offline the item is a neutral pill: muted label, a thin
   neutral outline, and NO dot. The moment the server says a game is in
   progress it turns red and the dot lights and pulses. That split is the whole
   point: "this is the thing to click" and "a game is on right now" are two
   different claims, and only the second one is allowed to light up.

   THE PILL HUGS ITS LABEL, AND GROWS LEFT WHEN A GAME IS LIVE.
   Offline there is no dot, so there is nothing to leave room for: the padding is
   equal on both sides and the label sits in the middle of the pill. When a game
   is live the pill grows to the LEFT only, by exactly the dot's 13px, and the
   label does not move — because every bit of padding here is cancelled by an
   equal negative margin, so the content box is pinned wherever the padding puts
   it and the element's occupied width is always just the label.

   That is what keeps Meta, Players and Pricing at the same x in both states AND
   at the same x they sit at on the build before this one. The outline is an
   inset shadow rather than a border for the same reason: a border would grow
   the box.

   It also means a JS-off visitor gets the full offline treatment and simply
   never sees it light, rather than getting a plain label.

   Matched on href, the same three spellings nav-live.js matches, so the
   treatment does not depend on JS having run or on a class a page forgot.

   Own keyframe name (`de-nav-pulse`, not `pulse`) on purpose: index/live/
   live-game each define their own `@keyframes pulse` but pnl and support do
   NOT, so borrowing that name would have animated on three pages and sat
   frozen on two. A namespaced keyframe works the same everywhere. */
@keyframes de-nav-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.nav-links a[href="/live"],
.nav-links a[href="/live/"],
.nav-links a[href="live.html"] {
  position: relative;
  color: var(--text-muted);
  /* Equal on both sides: the label is centred in the pill. */
  padding: 6px 12px;
  margin: -6px -12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

/* The dot sits in the room the live state opens up on the left. It is absolutely
   positioned, so it takes no layout space in either state and cannot be what
   moves anything; offline it is simply transparent. */
.nav-links a[href="/live"]::before,
.nav-links a[href="/live/"]::before,
.nav-links a[href="live.html"]::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

/* LIVE. The only state that is red, and the only state with a lit dot.
   `is-live` is set by nav-live.js from /api/games and from nothing else.
   The label red is NOT var(--red): #C70E2D on the near-black bar is about
   2.5:1 at 14px, which fails even the large-text floor. This is the same hue
   lifted to about 5.7:1. */
.nav-links a[href="/live"].is-live,
.nav-links a[href="/live/"].is-live,
.nav-links a[href="live.html"].is-live {
  color: #FF4259;
  background: rgba(199, 14, 45, 0.16);
  box-shadow: inset 0 0 0 1px rgba(199, 14, 45, 0.5);
  /* 13px more padding on the left and 13px more negative margin: the pill's left
     edge moves out by the dot's width plus its gap, and the label stays exactly
     where it was. */
  padding-left: 25px;
  margin-left: -25px;
}
.nav-links a[href="/live"].is-live::before,
.nav-links a[href="/live/"].is-live::before,
.nav-links a[href="live.html"].is-live::before {
  background: #FF4259;
  box-shadow: 0 0 8px var(--red);
  animation: de-nav-pulse 1.8s infinite;
}

.nav-links a[href="/live"]:hover,
.nav-links a[href="/live/"]:hover,
.nav-links a[href="live.html"]:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* CURRENT PAGE. On /live the item is also "you are here", and the page's own
   `.nav-links a.active { color: var(--text) }` would otherwise leave it looking
   like any other link. One class more specific than the page's, so it wins
   without depending on which stylesheet loaded last — and still quiet while
   nothing is live. */
.nav-links a[href="/live"].active,
.nav-links a[href="/live/"].active,
.nav-links a[href="live.html"].active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.nav-links a[href="/live"].active.is-live,
.nav-links a[href="/live/"].active.is-live,
.nav-links a[href="live.html"].active.is-live {
  color: #FF8A99;
  background: rgba(199, 14, 45, 0.30);
  box-shadow: inset 0 0 0 1px rgba(199, 14, 45, 0.85);
}
.nav-links a[href="/live"].active.is-live::before,
.nav-links a[href="/live/"].active.is-live::before,
.nav-links a[href="live.html"].active.is-live::before {
  background: #FF8A99;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a[href="/live"]::before,
  .nav-links a[href="/live/"]::before,
  .nav-links a[href="live.html"]::before,
  .nav-links a[href="/live"].is-live::before,
  .nav-links a[href="/live/"].is-live::before,
  .nav-links a[href="live.html"].is-live::before {
    animation: none;
  }
  .nav-links a[href="/live"],
  .nav-links a[href="/live/"],
  .nav-links a[href="live.html"] { transition: none; }
}
}

/* ---- Coming-soon entries: TOOLTIP ONLY -------------------------------------
   07-19t — the shipped treatment, chosen by Lucas from the five in the 07-19s
   gallery (variant B). The nav shows two plain dimmed labels and nothing else;
   "Coming soon" appears only on hover, keyboard focus, or tap.

   History, so nobody re-proposes a rejected form: 07-19q put a bordered SOON
   pill inline on the link baseline (read as a game badge / broken control);
   07-19r stacked a COMING SOON micro-label above each word (rejected as a
   two-row nav). B removes the tag from the nav flow entirely, which is why it
   survived both objections — there is nothing left to compete with the label.

   THE KNOWN TRADE, accepted deliberately: with no tag at rest, the entries are
   not self-explanatory until someone reaches for them. Three things stop them
   reading as broken links instead:
     - they are <span>, never <a>, so there is no href to dead-end on;
     - the cursor stays `default`, so nothing invites a click;
     - the tag text is ALWAYS in the DOM and only visually faded, so assistive
       tech announces "Meta, coming soon" whether or not it is on screen.
   If they ever do read as broken, the fix is a visible tag, not a link. */
.nav-soon {
  display: inline-flex;
  align-items: baseline;
  color: var(--text-dim);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  /* Anchors the absolutely-positioned tooltip below. */
  position: relative;
}

/* No :hover colour change on the LABEL. A hover response on the text itself is
   the nav's strongest "this is clickable" signal, so only the tooltip reacts. */

.nav-soon-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-3px);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 5px 8px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  /* Never intercepts the pointer, so it cannot block the nav underneath it or
     flicker by stealing its own trigger's hover. */
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  /* nav is z-index 100; the tooltip hangs below the bar and must clear the
     page content it overlaps. */
  z-index: 120;
}

/* `.is-tapped` is set by nav-live.js for touch, which has no hover at all.
   :focus-within is what makes the reason reachable from the keyboard. */
.nav-soon:hover .nav-soon-tag,
.nav-soon:focus-within .nav-soon-tag,
.nav-soon.is-tapped .nav-soon-tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav-soon-tag { transition: none; }
}

/* ---- Phone ----------------------------------------------------------------
   ONLY index.html has a real collapsed menu (nav.open .nav-links, driven by
   #navToggle). On live / live-game / pnl / support the nav links are simply
   `display: none` below 700px and there is no menu to open — pre-existing
   behaviour this does not change, so on those four pages the dot and the
   coming-soon entries are a desktop-only surface by construction.

   In index's panel the dividers come from `.nav-links a { border-bottom }`,
   which cannot match a <span>, so the entries get the same row treatment and
   the "no rule under the last row" rule is re-targeted at the last CHILD. */
/* The pill inside index's collapsed panel. Rows there are full width with a
   divider under each, so the desktop geometry — a pill hugging the label with
   negative margins — does not transfer. The row itself becomes the pill and
   gives up its divider, because the outline already closes it. Every other
   page simply hides .nav-links below 700px, so this is index's panel only.

   Matching index's own panel query, `(max-width: 700px), (max-height: 500px)`:
   a landscape phone is ~844px wide and would otherwise get the desktop pill
   inside a collapsed panel. */
@media (max-width: 700px), (max-height: 500px) {
  .nav-links a[href="/live"],
  .nav-links a[href="/live/"],
  .nav-links a[href="live.html"] {
    display: block;
    margin: 0 0 8px;
    padding: 14px;
    border-radius: 10px;
    border-bottom: none;
  }
  /* Same idea in the panel: the row grows LEFT into the panel's own 20px gutter
     when a game is live, so the label does not shift and the row cannot widen
     past the panel. box-sizing is border-box here, so the width stays put. */
  .nav-links a[href="/live"].is-live,
  .nav-links a[href="/live/"].is-live,
  .nav-links a[href="live.html"].is-live {
    padding-left: 34px;
    margin-left: -20px;
    width: calc(100% + 20px);
  }
  .nav-links a[href="/live"].is-live::before,
  .nav-links a[href="/live/"].is-live::before,
  .nav-links a[href="live.html"].is-live::before { left: 16px; }
}

/* The leftward growth has to clear the wordmark. Between 700 and 900px the bar is
   at its tightest while the inline links are still shown, so the dot's gap narrows
   there rather than letting the pill run into the logo.

   The height clause is not decoration: index opens its panel on
   `(max-width: 700px), (max-height: 500px)`, so a phone on its side is 844px WIDE and
   gets the PANEL - and 844 also sits inside 701-900. Without `min-height: 501px` this
   block, being further down the file, would reach that one device and undo the panel's
   own geometry. The floor applies where the inline bar does, and nowhere else. */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px) {
  .nav-links a[href="/live"].is-live,
  .nav-links a[href="/live/"].is-live,
  .nav-links a[href="live.html"].is-live {
    padding-left: 21px;
    margin-left: -21px;
  }
  .nav-links a[href="/live"].is-live::before,
  .nav-links a[href="/live/"].is-live::before,
  .nav-links a[href="live.html"].is-live::before { left: 8px; }
}

@media (max-width: 700px) {
  .nav-links .nav-soon {
    display: flex;
    padding: 16px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links > :last-child { border-bottom: none; }
  /* Left-anchored, not centred: on a full-width panel row a centred tooltip
     points at the middle of the row rather than at the label that owns it. */
  .nav-soon-tag {
    left: 0;
    transform: translateX(0) translateY(-3px);
  }
  .nav-soon:hover .nav-soon-tag,
  .nav-soon:focus-within .nav-soon-tag,
  .nav-soon.is-tapped .nav-soon-tag {
    transform: translateX(0) translateY(0);
  }
}