/* ──────────────────────────────────────────────────────────────────────
   header.css — the ONE shared header for every signed-in shell page
   (account · stats · rewards · leaderboard).

   Single source of truth: each page used to copy-paste this block into its
   own inline <style>, which is how the desktop logo broke on some pages but
   not others. Now it lives here once — fix it here, every page gets it.

   Depends only on vars every page already defines: --gold --dim --cream
   --border --border2 --bg2 --font-d --font-m. No page-specific vars.

   ⚠ Desktop bug this fixes: pages set `html { font-size: 150% }` to lift the
   tiny rem-based body text, which makes 1rem = 24px. The old logo rule was
   `clamp(2.4rem, 6vw, 3.8rem)` → 57–91px, and 6vw on a wide screen pinned it
   near the 91px max, overflowing the header. The wordmark is now sized in px
   (viewport-independent) so it can't balloon again.
   ────────────────────────────────────────────────────────────────────── */

/* The bar. position:relative is the anchor for the absolutely-placed dice
   arena; overflow:hidden makes the bottom border the "table" — dice that fall
   past it are clipped, so the felt line reads as a real surface. Taller than
   before (140px) on purpose: the wordmark sits up top and the dice need a band
   below it to rain down onto. */
.casino-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; min-height: 156px; overflow: hidden;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  background-image:
    linear-gradient(rgba(139,92,246,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* "← LOBBY" — pinned left. margin-left clears the fixed Music button (top-left)
   so the link isn't hidden under it. z-index lifts it above the dice arena. */
.ffl-link {
  position: relative; z-index: 4; flex-shrink: 0;
  width: 90px; margin-left: 40px;
  font-family: var(--font-m); font-size: 0.38rem; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.32); text-decoration: none; transition: color 0.15s;
}
.ffl-link:hover { color: var(--dim); }

/* Centre stack: wordmark + subtitle + page label. Sits above the dice (z3 dice,
   z4 here) so it reads as the emitter the dice burst out of. */
.header-center { position: relative; z-index: 4; text-align: center; }

/* The wordmark. px-sized (see header note) — big but bounded, can't overflow.
   This is what the dice physics reads its emitter box from (querySelector).
   Same shimmering brand as the lobby: a violet→cyan→gold gradient clipped to the
   text and slowly swept across. Literal colors (not the page's --gold/--gold2)
   so it matches index.html's wordmark exactly. Because the fill is transparent,
   the glow is a drop-shadow filter, not text-shadow. */
.logo-name {
  display: block; text-decoration: none; line-height: 1; margin-bottom: 6px;
  font-family: var(--font-d); font-weight: 900; font-size: 72px; letter-spacing: 0.08em;
  background: linear-gradient(110deg, #7c5cff 0%, #19b8d4 42%, #f0d57a 52%, #19b8d4 62%, #7c5cff 100%);
  background-size: 240% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(124,92,255,0.45));
  animation: brandShine 7s linear infinite;
}
@keyframes brandShine { to { background-position: 240% center; } }
.logo-sub {
  display: block;
  font-family: var(--font-m); font-size: 0.36rem; letter-spacing: 0.65em;
  color: rgba(244,243,247,0.2); text-transform: uppercase;
}
.header-sub {
  margin-top: 4px;
  font-size: 0.48rem; letter-spacing: 0.5em; color: var(--dim);
}

/* Right zone: auth nav row + avatar/balance + sign-out. Each page fills this
   (#auth-zone) from JS once it has the balance. z-index lifts it over the dice. */
.right-zone {
  position: relative; z-index: 4; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 130px;
}
.auth-nav { display: flex; gap: 6px; }
.auth-nav-link {
  font-family: var(--font-d); font-size: 0.36rem; letter-spacing: 0.15em;
  color: var(--dim); text-decoration: none; padding: 5px 10px;
  border: 1px solid var(--border2); background: transparent;
  transition: all 0.15s; text-transform: uppercase;
}
.auth-nav-link:hover { color: var(--cream); border-color: var(--border); }
.auth-nav-link.active { color: var(--gold); border-color: var(--gold); }

.auth-info { display: flex; align-items: center; gap: 10px; }
.auth-avatar-sm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.auth-tokens { font-family: var(--font-d); font-size: 0.82rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 10px var(--gold); }
.auth-btn {
  font-family: var(--font-d); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.2em;
  padding: 0.5rem 1.1rem; background: transparent; border: 1px solid var(--border2);
  color: var(--dim); cursor: pointer; transition: all 0.15s; text-transform: uppercase;
}
.auth-out { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.15); color: var(--dim); }
.auth-out:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── Dice arena — ported from the lobby header. Spans the whole bar; the
   physics loop in header-dice.js erupts dice from the wordmark and rains them
   onto the floor (the bar's bottom border). Pure transform-driven, GPU-cheap.
   pointer-events:none so it never eats clicks on the nav/links above it.
   z-index 3 = above the grid background, below the text/nav (z4). */
.hdr-dice { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.die {
  position: absolute; top: 0; left: 0; width: 26px; height: 26px;
  transform-origin: 50% 50%; will-change: transform;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6));
}

/* ── Mobile: restack to a centered column. The 150% root bump makes the inherited
   scale too big once stacked, so header text is explicitly shrunk here. The dice
   arena is re-anchored to the TOP band only (top:0, fixed height — not the full
   stacked header) so dice toss + land under VANTA instead of raining down through
   the nav/balance/sign-out below. LOBBY pins top-left. ── */
@media (max-width: 600px) {
  .casino-header {
    min-height: 0; height: auto; padding: 0.7rem 0.8rem;
    flex-direction: column; align-items: center; gap: 0.5rem;
  }
  .ffl-link { width: auto; align-self: flex-start; font-size: 0.34rem; margin-left: 60px; }
  .logo-name { font-size: 62px; letter-spacing: 0.06em; margin-bottom: 2px; }
  .logo-sub { font-size: 0.3rem; letter-spacing: 0.4em; }
  .header-sub { font-size: 0.36rem; letter-spacing: 0.3em; }
  .right-zone { align-items: center; min-width: 0; gap: 0.5rem; }
  .auth-nav { justify-content: center; }
  .auth-nav-link { font-size: 0.32rem; padding: 4px 8px; }
  .auth-info { gap: 10px; }
  .auth-tokens { font-size: 0.6rem; }
  .auth-avatar-sm { width: 28px; height: 28px; }
  .auth-btn { font-size: 0.42rem; padding: 0.4rem 0.9rem; }
  /* Dice live in the top band (LOBBY + VANTA zone), not the full header — they
     erupt from VANTA and land on this band's floor, clear of the nav below.
     A little extra space below the wordmark gives them somewhere to settle. */
  .hdr-dice { inset: 0 0 auto 0; height: 150px; }
  .header-center { padding-bottom: 38px; }
}