/* ============================================================================
   GAMERS ESCAPE — WATCH PARTY BRAND TOKENS
   Mint-teal + deep purple on a dark "arena" canvas. Russo One + Chakra Petch.
   Imported by every page: <link rel="stylesheet" href="/css/brand.css">
   ============================================================================ */
/* NOTE: the webfonts are NOT @imported here any more. An @import forces the
   browser to fetch this file, parse it, THEN discover and fetch the Google
   stylesheet, THEN the font binaries — a serialised 3-hop chain with no
   preconnect on every QR-scanned page. Each page now carries the <link> and
   both preconnects itself, so the fonts start downloading in parallel. */

/* The `hidden` attribute is only display:none in the UA stylesheet, at
   specificity (0,0,1) — so ANY class rule that sets display (.tile, .ge-card,
   .play-card, .md …) silently beats it and the element stays on screen. Make
   hidden mean hidden. */
[hidden] { display: none !important; }

:root {
  /* Neon core — matched to the gamersescapeiq.com homepage (cyan + purple + pink) */
  --ge-mint:        #22D3EE;
  --ge-mint-bright: #67E8F9;
  --ge-mint-deep:   #0E9DC0;
  --ge-purple:      #7C3AED;
  --ge-purple-lt:   #A78BFA;
  --ge-purple-deep: #3B1E78;

  /* Arena surfaces (homepage dark canvas) */
  --ge-bg:        #08060F;
  --ge-bg-2:      #0F0F23;
  --ge-surface:   #16132E;
  --ge-surface-2: #1E1942;
  --ge-border:    #2C2658;
  --ge-border-lt: #473C82;

  /* Status / accents */
  --ge-gold: #FFC24B;
  --ge-hot:  #FF2D9B;
  --ge-win:  #22D3EE;

  /* Text */
  --ge-text:      #ECEAF6;
  --ge-text-dim:  #B9AEDB;
  --ge-text-mute: #9A93B8;

  /* Type */
  --font-display: 'Russo One', system-ui, sans-serif;
  /* The fallback chain used to start with ui-monospace, so with display=swap
     every page using this file rendered its BODY COPY in a monospace face
     while Chakra Petch downloaded — while the homepage (which does not load
     this file) fell back to sans. Same brand, two different loading looks. */
  --font-body:    'Chakra Petch', 'Segoe UI', system-ui, sans-serif;

  /* Radius / spacing */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Glow */
  --glow-mint:   0 0 28px rgba(34, 211, 238, 0.45);
  --glow-purple: 0 0 36px rgba(124, 58, 237, 0.55);
  --glow-gold:   0 0 30px rgba(255, 194, 75, 0.5);

  --z-toast: 60;
  --z-modal: 50;
  --z-nav:   30;

  /* --- Tokens the marketing pages (index/menu/studio) need ------------------
     These are NOT the same as --ge-surface / --ge-border. --ge-panel is a
     TRANSLUCENT WHITE overlay that composites over whatever is behind it
     (the .bgfx glow, section gradients); --ge-surface is an opaque navy.
     Swapping one for the other would flatten every card, chip, tile, input and
     nav on the homepage at once. They coexist deliberately. */
  --ge-panel:     rgba(255, 255, 255, 0.04);
  --ge-panel-brd: rgba(255, 255, 255, 0.10);
  --ge-rose:      #F43F5E;
  --ge-maxw:      1180px;

  /* --- Type scale ---
     Defined for new code and the primitives below. Deliberately NOT retrofitted
     across the ~200 existing font-size declarations: that is a lot of chances
     to regress on typography nobody has complained about. */
  --fs-xs:  12px;
  --fs-sm:  13.5px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  clamp(22px, 5vw, 28px);
  --fs-2xl: clamp(26px, 7vw, 36px);
  --fs-3xl: clamp(34px, 9vw, 54px);
  --lh-tight: 1.1;
  --lh-body:  1.55;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ge-bg);
  color: var(--ge-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arena backdrop: solid base + localized radial glows + faint grid.
   (No full-screen linear gradients — they band on projectors.) */
.ge-arena {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(34,211,238,0.10), rgba(8,6,15,0) 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(124,58,237,0.22), rgba(8,6,15,0) 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(255,45,155,0.16), rgba(8,6,15,0) 60%),
    var(--ge-bg);
  overflow-x: hidden;
}
.ge-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px, rgba(8,6,15,0) 1px),
    linear-gradient(90deg, rgba(124,58,237,0.07) 1px, rgba(8,6,15,0) 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%);
  z-index: 0;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.5px; }

a { color: var(--ge-mint); text-decoration: none; }
a:hover { color: var(--ge-mint-bright); }

/* ---- Reusable bits ------------------------------------------------------- */
.ge-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--ge-mint);
}

.ge-card {
  background: linear-gradient(180deg, var(--ge-surface), var(--ge-bg-2));
  border: 1px solid var(--ge-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

.ge-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}
.ge-btn:focus-visible { outline: 3px solid var(--ge-mint); outline-offset: 2px; }
.ge-btn:active { transform: translateY(1px) scale(0.99); }

.ge-btn--primary {
  background: var(--ge-mint);
  color: #07221d;
  box-shadow: var(--glow-mint);
}
.ge-btn--primary:hover { background: var(--ge-mint-bright); box-shadow: 0 0 38px rgba(91,255,224,0.6); }

.ge-btn--ghost {
  background: rgba(91,71,160,0.16);
  color: var(--ge-text);
  border-color: var(--ge-border-lt);
}
.ge-btn--ghost:hover { background: rgba(91,71,160,0.32); border-color: var(--ge-mint); }

.ge-btn--gold { background: var(--ge-gold); color: #2a1c00; box-shadow: var(--glow-gold); }
.ge-btn--gold:hover { filter: brightness(1.06); }

.ge-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.ge-input, select.ge-input, textarea.ge-input {
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  padding: 14px 16px;
  background: var(--ge-bg-2);
  border: 1px solid var(--ge-border-lt);
  border-radius: var(--r);
  color: var(--ge-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ge-input::placeholder { color: var(--ge-text-mute); }
.ge-input:focus { outline: none; border-color: var(--ge-mint); box-shadow: var(--glow-mint); }

label { font-weight: 600; color: var(--ge-text-dim); font-size: 14px; }

.ge-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--ge-border-lt); color: var(--ge-text-dim);
  background: rgba(91,71,160,0.14);
}
.ge-chip--live { color: var(--ge-bg); background: var(--ge-hot); border-color: transparent; }
.ge-chip--open { color: #07221d; background: var(--ge-mint); border-color: transparent; }
.ge-chip--gold { color: #2a1c00; background: var(--ge-gold); border-color: transparent; }

.ge-logo-glow { filter: drop-shadow(0 6px 22px rgba(46,230,192,0.35)); }

.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; display: inline-block;
  box-shadow: 0 0 0 0 currentColor;
  animation: gePulse 1.6s infinite;
}
@keyframes gePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,45,155,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,45,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,155,0); }
}

/* ============================================================================
   SHARED PRIMITIVES
   Every page used to hand-roll its own container, masthead, footer and toast —
   6 mastheads with 4 logo sizes and 3 heading sizes, the same footer rule
   copy-pasted 5 times, the same toast twice. These exist so there is one of
   each. Additive: every selector below is a NEW class name, so adding them
   changes nothing until a page opts in.
   ========================================================================== */

/* --- Container ----------------------------------------------------------- */
.ge-container {
  width: 100%;
  max-width: var(--ge-w, 1100px);
  margin: 0 auto;
  padding: 0 var(--ge-gutter, 20px);
  position: relative;
  z-index: 1;
}
.ge-container--narrow { --ge-w: 560px;  --ge-gutter: 16px; }  /* imposter, predictions */
.ge-container--phone  { --ge-w: 640px;  --ge-gutter: 14px; }  /* bingo, caller, request */
.ge-container--wide   { --ge-w: var(--ge-maxw); --ge-gutter: 22px; }  /* marketing pages */
/* Requires viewport-fit=cover on the page, or env() resolves to 0. */
.ge-container--safe   { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* --- Masthead ------------------------------------------------------------
   Sizes are variables so a page that genuinely wants a bigger logo can say so
   inline instead of forking the component. */
.ge-masthead {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: 20px 0 8px;
}
.ge-masthead__logo  { width: var(--ge-mh-logo, 58px); height: auto; }
.ge-masthead__title { font-size: var(--ge-mh-title, 24px); margin: 4px 0 0; }
.ge-masthead__sub   { color: var(--ge-text-dim); font-size: 14px; margin: 2px 0 0; }
.ge-masthead__row   { display: flex; gap: 8px; justify-content: center; align-items: center;
                      margin-top: 6px; flex-wrap: wrap; }
.ge-masthead--row   { flex-direction: row; text-align: left; }
.ge-masthead--row .ge-masthead__row { margin: 0 0 0 auto; }

/* The five guest pages share the `header.top` markup shape rather than the
   class-based masthead above, so size them here instead of restructuring five
   pages of markup for the same result. They previously carried four different
   logo widths (52/54/58/62px) and three heading sizes (22/24/26px) for what is
   meant to be the same masthead.
   A page that genuinely wants different sizing sets the variables inline —
   see predictions.html, whose larger logo is deliberate. */
header.top {
  text-align: center;
  padding: 20px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
header.top img            { width: var(--ge-mh-logo, 58px); height: auto; }
header.top h1,
header.top .titles h1     { font-size: var(--ge-mh-title, 24px); margin: 4px 0 0; }
header.top p              { color: var(--ge-text-dim); margin: 0; font-size: 14px; }
header.top .row           { display: flex; gap: 8px; justify-content: center;
                            align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* --- Footer -------------------------------------------------------------- */
.ge-footer   { text-align: center; padding: 22px 0 calc(8px + env(safe-area-inset-bottom)); }
.ge-footer a { color: var(--ge-text-mute); font-size: 13px; display: inline-block; padding: 8px 4px; }
.ge-footer a:hover { color: var(--ge-mint); }
.ge-footer img     { height: 24px; opacity: .6; }
/* NOTE: the bare `footer` rules in mobile.css stay — index.html and menu.html
   have structurally different footers (a 3-column link grid, a copyright bar)
   and are deliberately NOT retrofitted. .ge-footer (0,1,0) outranks the bare
   element selector (0,0,1) on the five pages that opted in. */

/* --- Toast ---------------------------------------------------------------
   State class stays `.show` and the error modifier stays `.err` so the
   existing toast(msg,'err') callers keep working unchanged. */
.ge-toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  opacity: 0; transition: .3s; z-index: var(--z-toast);
  background: linear-gradient(100deg, var(--ge-mint), var(--ge-mint-deep));
  color: #06231d; font-weight: 700; padding: 12px 18px; border-radius: var(--r-pill);
  pointer-events: none; max-width: 90vw; text-align: center;
}
.ge-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ge-toast.err, .ge-toast--err { background: linear-gradient(100deg, var(--ge-hot), #b3186b); color: #fff; }

/* --- Modal ---------------------------------------------------------------
   For future use. The two existing modals (homepage events, menu detail) are
   deliberately NOT retrofitted — they differ structurally, live on the two
   just-redesigned pages, and deduping them saves about a dozen lines. */
.ge-modal {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(8, 6, 15, .80);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ge-modal.open  { display: flex; }
.ge-modal__box  { width: min(440px, 100%); max-height: 88vh; overflow: auto;
                  border-radius: var(--r-lg); position: relative; }
.ge-modal__x    { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
                  border-radius: var(--r-sm); border: 1px solid var(--ge-border-lt);
                  background: var(--ge-surface); color: var(--ge-text); cursor: pointer;
                  font-size: 20px; line-height: 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Neon touches ---------------------------------------------------------
   Small site-wide texture. brand.css is on all ~20 pages, so these are
   deliberately global. */

/* Text selection in the brand hot-pink instead of the OS default blue. */
::selection { background: var(--ge-hot); color: #fff; }

/* Desktop scrollbars in brand colours. Phones/tablets use overlay scrollbars
   and ignore all of this, so no media query is needed. The 2px bg-coloured
   border keeps the thumb off the glass edges of cards with inner scroll. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ge-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ge-purple), var(--ge-hot));
  border-radius: var(--r-pill);
  border: 2px solid var(--ge-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ge-mint); }
::-webkit-scrollbar-corner { background: var(--ge-bg); }
:root { scrollbar-color: var(--ge-purple) var(--ge-bg); } /* Firefox */

/* Opt-in neon-sign stutter: steady >95% of the cycle with two brief dips, like
   a real tube's occasional flicker — NOT a strobe. Animates opacity only
   (compositor-cheap) and uses steps(1) so nothing interpolates between frames.
   Used on the index/menu mastheads; keep it OFF the TV pages — a flickering
   header on a 100" screen reads as a broken panel, not a vibe.
   Reduced-motion: killed by the global rule at the bottom of this file. */
.ge-neon-flicker { animation: geNeonFlicker 9s steps(1) infinite; }
@keyframes geNeonFlicker {
  0%, 41%, 42%, 43.4%, 78%, 78.6%, 100% { opacity: 1; }
  41.5%                                 { opacity: .55; }
  43%                                   { opacity: .78; }
  78.3%                                 { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}