/* header.css — shared header bar styles.
 *
 * Stab 110 (introduced): styled only the right-cluster mount.
 * Stab 122 (this stab): rules now cover the FULL bar — gradient
 * background, gold border, safe-area padding, ::after underline accent,
 * left cluster (back/close button + game title), and right cluster
 * (wallet pill + person icon). Visual values copied verbatim from
 * 3DICE's pre-Stab-122 style.css (the .bar / .brand / .back-to-lobby
 * rules) so the bar looks pixel-identical to before — only the back
 * icon changes from a left arrow to an X.
 *
 * The container is conventionally <div id="shared-header"> placed
 * where the game wants its top bar. shared/header.js's init() mounts
 * the full markup inside that div.
 *
 * CSS variables (--cream, --gold-lt, --gold-glow, --gold) are expected
 * from the consumer's theme; inline fallbacks keep the module
 * self-sufficient on a bare page.
 */

/* ── Bar chassis ─────────────────────────────────────────────────────
 * The container itself: flex row, left cluster <-> right cluster
 * pushed apart, gradient background, gold border, iOS safe-area
 * padding-top, gold-shimmer ::after accent line. */
#shared-header {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background:
    radial-gradient(ellipse 35% 100% at 0% 50%, rgba(240, 194, 82, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 42, 100, 0.55) 0%, rgba(12, 26, 60, 0.85) 100%);
  border-bottom: 1px solid rgba(240, 194, 82, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.06),
    0 1px 0 rgba(255, 227, 154, 0.10),
    0 6px 18px -10px rgba(95, 183, 255, 0.30);
}
#shared-header::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 227, 154, 0.45) 30%, rgba(240, 194, 82, 0.35) 70%, transparent 100%);
  pointer-events: none;
}

/* ── Left cluster: back/close button + game title side-by-side ────── */
#shared-header .shared-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Back/close button — Stab 122: was .back-to-lobby with a left arrow.
 * Now a circular 32×32 button with an X icon (per the standing UI
 * rule). Same dimensions, same border/background/colour, so the
 * visual weight in the bar is unchanged. */
#shared-header .shared-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
#shared-header .shared-header-back svg { width: 18px; height: 18px; }
#shared-header .shared-header-back:active { transform: translateY(1px); }

/* Game title — gold-gradient text. Verbatim values from 3DICE's
 * pre-Stab-122 .brand .logo rule. Games configure the text via
 * header.init({ title: '…' }). */
#shared-header .shared-header-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, var(--cream, #f4e8c8) 0%, var(--gold-lt, #ffe39a) 45%, var(--gold, #f0c252) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(240, 194, 82, 0.35));
}

/* ── Right cluster: wallet pill + person icon side-by-side ────────── */
#shared-header .shared-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Wallet pill — crystal capsule with cyan inner light + gold rim.
 *    Verbatim values from apex (.wallet-btn). ───────────────────────── */
#shared-header .wallet-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  font-size: 15px; font-weight: 800;
  color: var(--cream, #f4e8c8);
  background:
    radial-gradient(ellipse 80% 100% at 30% 30%, rgba(95, 183, 255, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, rgba(31, 78, 168, 0.65) 0%, rgba(12, 26, 60, 0.85) 100%);
  border: 1px solid rgba(240, 194, 82, 0.55);
  border-radius: 100px;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 10px rgba(95, 183, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
#shared-header .wallet-btn .walletIcon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 227, 154, 0.6));
}

/* Wallet balance text — show only when data-state="positive", hide
 * when "empty" (apex convention). Logged-out / zero-balance / missing
 * user → empty → icon-only. */
#shared-header .wallet-btn[data-state="empty"]    .wallet-bal-text { display: none; }
#shared-header .wallet-btn[data-state="positive"] .wallet-bal-text { display: inline; }

/* ── Person icon — bare silhouette, no chrome around it. Tappable
 *    target stays 36×36 even though the visible glyph is smaller.
 *    Verbatim from apex (.lobby-person). ────────────────────────────── */
#shared-header .lobby-person {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; outline: none;
  color: var(--gold-lt, #ffe39a);
  filter: drop-shadow(0 0 6px rgba(255, 227, 154, 0.35));
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s, color 0.18s, filter 0.18s;
}
#shared-header .lobby-person:hover {
  color: var(--gold-glow, #ffd966);
  filter: drop-shadow(0 0 10px rgba(255, 227, 154, 0.55));
}
#shared-header .lobby-person:active { transform: translateY(1px); }
#shared-header .lobby-person svg { width: 26px; height: 26px; display: block; }