/* ===================================================================
   GABE GAMEWORKS: DESIGN SYSTEM
   Deep-space navy, neon arcade accents. Self-hosted fonts, no CDN.
   =================================================================== */

/* Self-hosted premium type system (Google OFL fonts, hosted locally — no CDN leak). */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/JetBrainsMono-400.woff2') format('woff2'); }

:root {
  /* Chairman-requested brightness lift (2026-07-17): base navys raised one
     step (~+6-8 luma each) and dim text raised for readability -- the estate
     read "a little dark" on his display. Keep the lift SUBTLE; the identity
     stays deep navy, not washed. */
  --navy: #0A1728;
  --navy-2: #0E1F3A;
  --navy-3: #142A50;
  /* Canonical gold pair (estate-wide, 2026-07-17 consistency pass).
     --gold is the primary/dim gold (#C9A84C); --gold-hot is the bright
     accent (#FFD56B). --gold-dim is kept ONLY as a legacy alias so old
     references (across ~9k lines of hand-written markup) keep resolving
     -- it now points at the same value as --gold. Every other stylesheet
     (studio.css) that used to hardcode its own --tk-gold/--tk-gold-hot
     hex now reads these two vars instead, so the whole estate shares one
     source of truth for gold. */
  --gold: #FFD56B;
  --gold-dim: #C9A84C;
  --gold-hot: #FFD56B;
  --cyan: #4DE1FF;
  --magenta: #FF4D9D;
  --cream: #F3EFE6;
  --text: #EAF0FF;
  --text-dim: #A3B0D2;
  --danger: #FF5C5C;
  --good: #5CFFB0;

  --font-head: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 20px;
  --radius-sm: 12px;
  --touch: 64px;

  --shadow-gold: 0 0 24px rgba(255, 213, 107, 0.45);
  --shadow-cyan: 0 0 24px rgba(77, 225, 255, 0.45);
  --shadow-magenta: 0 0 24px rgba(255, 77, 157, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(77, 225, 255, 0.10), transparent),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(255, 77, 157, 0.08), transparent),
    var(--navy);
  min-height: 100vh;
  position: relative;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font-family: inherit; }

/* ---------- Starfield canvas (fixed backdrop) ---------- */
#gw-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gw-page {
  position: relative;
  z-index: 1;
}

/* ---------- Headline mark ---------- */
.gw-mark {
  font-family: var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 18px rgba(255, 213, 107, 0.35);
}

.gw-mark .g { color: var(--gold); }
.gw-mark .a { color: var(--cyan); }
.gw-mark .b { color: var(--magenta); }
.gw-mark .e { color: var(--gold); }
.gw-mark .dot { color: var(--text-dim); margin: 0 0.06em; }

.gw-crown {
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255, 213, 107, 0.7));
  animation: gw-bob 2.4s ease-in-out infinite;
}

@keyframes gw-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

.gw-tagline {
  color: var(--text-dim);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* ---------- Buttons ---------- */
.gw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--touch);
  padding: 0 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  box-shadow: var(--shadow-gold), inset 0 -3px 0 rgba(0,0,0,0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.gw-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.gw-btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 0 10px rgba(255,213,107,0.35); }

.gw-btn.cyan { background: linear-gradient(135deg, var(--cyan), #1C9CC9); color: #041018; box-shadow: var(--shadow-cyan), inset 0 -3px 0 rgba(0,0,0,0.2); }
.gw-btn.magenta { background: linear-gradient(135deg, var(--magenta), #C22D6E); color: #200; color: #FFF4F9; box-shadow: var(--shadow-magenta), inset 0 -3px 0 rgba(0,0,0,0.2); }
.gw-btn.ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  box-shadow: none;
  border: 2px solid rgba(255,255,255,0.16);
}
.gw-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

.gw-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }

.gw-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.gw-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gw-card:hover, .gw-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255, 213, 107, 0.5);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255, 213, 107, 0.15);
}

/* ---------- Inputs ---------- */
.gw-input {
  width: 100%;
  min-height: var(--touch);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(6, 16, 31, 0.6);
  color: var(--text);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gw-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(77,225,255,0.15); }

/* ---------- XP / level bar ---------- */
.gw-xpbar {
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}

.gw-xpbar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 14px rgba(255,213,107,0.6);
  transition: width 0.5s cubic-bezier(.2,.9,.25,1);
}

/* ---------- Badges / chips ---------- */
.gw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}

.gw-chip.idea { color: var(--text-dim); }
.gw-chip.building { color: var(--gold); border-color: rgba(255,213,107,0.5); background: rgba(255,213,107,0.08); }
.gw-chip.live { color: var(--good); border-color: rgba(92,255,176,0.5); background: rgba(92,255,176,0.08); }

/* ---------- Layout helpers ---------- */
.gw-container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }
.gw-grid { display: grid; gap: 20px; }
.gw-grid.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gw-center { display: flex; align-items: center; justify-content: center; }
.gw-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.gw-shake { animation: gw-shake 0.4s ease; }
@keyframes gw-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.gw-pop { animation: gw-pop 0.35s cubic-bezier(.2,1.6,.4,1); }
@keyframes gw-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.gw-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 30px 20px 40px;
  letter-spacing: 0.03em;
}

.gw-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Avatar ---------- */
.gw-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-gold);
  background: var(--navy-2);
}

.gw-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  letter-spacing: 0.05em;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold), var(--cyan));
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-gold);
}

/* ---------- Family leaderboard rows ---------- */
.gw-roster-row {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 48px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: var(--touch);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.15s ease;
}

.gw-roster-row:hover { border-color: rgba(255,213,107,0.4); background: rgba(255,255,255,0.06); }
.gw-roster-row.active { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,213,107,0.2); background: rgba(255,213,107,0.06); }

.gw-roster-rank { color: var(--text-dim); font-weight: 700; font-size: 0.8rem; }

.gw-roster-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1rem;
}

.gw-roster-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-roster-name { font-weight: 700; }
.gw-roster-name em { color: var(--cyan); font-style: normal; font-size: 0.8rem; }
.gw-roster-role { color: var(--text-dim); font-size: 0.78rem; letter-spacing: 0.03em; }

.gw-roster-scores { display: none; gap: 10px; font-size: 0.75rem; color: var(--text-dim); }
.gw-roster-scores b { color: var(--text); }

.gw-roster-total { font-family: var(--font-head); color: var(--gold); text-align: right; }
.gw-roster-total small { display: block; color: var(--text-dim); font-family: var(--font-body); font-size: 0.65rem; }

@media (min-width: 760px) {
  .gw-roster-row { grid-template-columns: 32px 48px 1fr auto auto; }
  .gw-roster-scores { display: flex; }
}

/* ---------- Scrollbar (webkit, cosmetic only) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,213,107,0.3); border-radius: 999px; }

@media (max-width: 640px) {
  .gw-container { padding: 16px 14px 48px; }
}

/* ===================================================================
   ELEVATION PASS: shared premium-studio primitives (additive only).
   Ports the GST STUDIOS dashboard language -- corner-bracket panels,
   sharp rectangular tags, monospace micro-labels, cut-corner buttons --
   into any page that opts in. Nothing here changes an existing rule.
   =================================================================== */

/* corner-bracket framing, matches dashboard .panel::before/::after */
.gw-bracket { position: relative; }
.gw-bracket::before {
  content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); pointer-events: none;
}
.gw-bracket::after {
  content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px;
  border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); pointer-events: none;
}

/* sharp rectangular status tag: replaces the rounded-pill status chip
   in registers that should read as an operations console, not a toy */
.gw-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; border-radius: 3px;
  background: rgba(0,0,0,0.35);
}
.gw-tag .pip { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; }

/* monospace micro-label furniture (section eyebrows, meta rows) */
.gw-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}

/* cut-corner premium button: same touch target + colors as .gw-btn but
   sheared corners instead of a rounded pill, for launcher/console chrome */
.gw-btn.sharp {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* muted ghost variant with a hairline gold rule instead of a glow pill */
.gw-btn.line {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(255,213,107,0.45);
  box-shadow: none;
  border-radius: 4px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.85rem;
}
.gw-btn.line:hover { border-color: var(--gold); background: rgba(255,213,107,0.08); color: var(--gold); }

/* tame: strips the candy-arcade outer glow AND the two-tone gradient off a
   .gw-btn for consoles/launchers that want the same color-coding without the
   toy-CTA read (additive override, does not touch the base .gw-btn/.cyan/
   .magenta glow used on certified pages) */
.gw-btn.tame {
  background: var(--gold-dim);
  box-shadow: none;
  border-radius: 4px;
  padding: 0 20px;
  font-size: 0.92rem;
  min-height: 46px;
}
.gw-btn.tame.cyan { background: #1C9CC9; }
.gw-btn.tame.magenta { background: #C22D6E; }
.gw-btn.tame:hover { box-shadow: none; filter: brightness(1.12); transform: none; }

/* empty-state metric: quieter than a bright "0", for stat lines with no data yet */
.gw-stat-empty { color: var(--text-dim); font-weight: 400; }

/* ===================================================================
   ESTATE CONSISTENCY PASS (2026-07-17): one masthead, one footer, one
   set of motion/focus rules for every top-level page. Replaces the
   three near-duplicate `.top-nav` blocks (play/library/cloud), the
   bespoke jukebox `.header`, and gives dashboard's brand-band the same
   wing set. Markup contract lives in site/_nav-pattern.md.
   =================================================================== */

/* ---------- GST MASTHEAD ---------- */
.gst-mast {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #050505;
  border-bottom: 2px solid var(--gold);
}
.gst-mast-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.gst-mast-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.gst-mast-word:hover { filter: brightness(1.15); }
.gst-mast-word-text { display: flex; flex-direction: column; line-height: 1.15; }
.gst-mast-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--gold);
  opacity: 0.8;
}
.gst-mast-name {
  font-family: var(--font-head);
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
/* monochrome gold wordmark letters: a single restrained gold reads as a
   studio mark; the multicolor treatment is reserved for the index gate. */
.gst-mast-name .g, .gst-mast-name .a, .gst-mast-name .b, .gst-mast-name .e { color: var(--gold); }
.gst-mast-name .wing { color: var(--text-dim); font-weight: 400; }

.gst-wings {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}
.gst-wings::-webkit-scrollbar { display: none; }
.gst-wing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.gst-wing:hover { border-color: rgba(255,213,107,0.55); color: var(--gold); }
.gst-wing.active {
  background: linear-gradient(180deg, var(--gold-hot), var(--gold-dim));
  border-color: var(--gold-dim);
  color: var(--navy);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(255,213,107,0.35);
}
.gst-wing.active .ic svg { color: var(--navy); }

.gst-mast-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gst-mast-actions .gw-btn.line { min-height: 40px; padding: 0 14px; font-size: 0.68rem; letter-spacing: 0.1em; white-space: nowrap; }

@media (max-width: 760px) {
  .gst-mast-eyebrow { display: none; }
  .gst-mast-inner { padding: 10px 14px 8px; gap: 8px 10px; flex-wrap: wrap; }
  .gst-mast-name { font-size: 0.82rem; }
  .gst-wing { padding: 0 11px; font-size: 0.62rem; }
  /* the wings row rarely fits next to the wordmark + actions on a phone
     (was squeezed to ~1 pill of visible width) -- give it the full row
     to itself so at least 3 pills are visible before the scroll fade. */
  .gst-mast-word { order: 1; }
  .gst-mast-actions { order: 2; }
  .gst-wings { order: 3; flex-basis: 100%; padding-right: 22px; }
  /* 2026-07-18 critic fix (MAJOR #7): the row was scrollable
     (overflow-x:auto) but gave zero visual hint that the last pill was
     cut off rather than simply short -- this right-edge fade is the
     "there's more, scroll me" affordance. padding-right above keeps the
     last pill's label clear of the fade at rest. */
  .gst-wings::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 26px;
    background: linear-gradient(90deg, transparent, #050505);
    pointer-events: none;
  }
  html.gst-light .gst-wings::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92));
  }
}

/* ---------- GST FOOTER STRIP ---------- */
.gst-footer {
  text-align: center;
  padding: 26px 20px 44px;
}
.gst-footer-tagline {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.gst-footer-strip {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  opacity: 0.75;
}

/* ---------- PAGE-ENTER FADE (respects reduced motion) ---------- */
@keyframes gw-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.gw-page, .gst-page-fade { animation: gw-page-in 0.45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .gw-page, .gst-page-fade { animation: none; }
  .gw-pop, .gw-shake, .gw-crown { animation: none; }
}

/* ---------- CONSISTENT FOCUS STATE (keyboard nav, estate-wide) ---------- */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.gw-btn:focus-visible, .gst-wing:focus-visible, .gw-card:focus-visible {
  outline-offset: 3px;
}

/* ---------- GAME WRAPPER CHROME (estate-wide, 2026-07-17) ----------
   Uniform back-to-arcade pill + title badge for every games/gst-*.html
   wrapper. Replaces the four different back-button treatments that had
   drifted across titles (.float-back, .home, .gw-home-link, ad-hoc
   .btn.ghost). Sits over the game canvas, so it is fixed + compact and
   never competes with in-game HUD chrome. */
.gw-back-pill {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(6,16,31,0.72);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: all 0.15s ease;
}
.gw-back-pill:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.gw-back-pill svg, .gw-back-pill .ic { flex-shrink: 0; }
/* .inline: for wrappers whose back affordance must live inside an
   existing in-flow HUD bar (e.g. GST Hoops/Striker's top score bar)
   instead of floating fixed over the canvas -- same look, same label,
   participates in the surrounding flexbox instead of escaping it. */
.gw-back-pill.inline { position: static; top: auto; left: auto; transform: none; }

.gw-title-badge {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 39;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,213,107,0.3);
  background: rgba(6,16,31,0.72);
  backdrop-filter: blur(6px);
  color: var(--gold-dim);
  font-family: var(--font-head);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 600px) {
  .gw-back-pill { top: 10px; left: 10px; padding: 0 12px 0 10px; min-height: 36px; font-size: 0.6rem; }
  .gw-title-badge { display: none; }
}

/* ===================================================================
   GST LIGHT: high-tech WHITE design system (Chairman restyle verdict,
   2026-07-18). Purely additive -- every rule below is scoped under
   html.gst-light so no dark page (index.html previously, den.html,
   games/) is touched unless that page opts in by carrying the class.
   Ground: white/near-white, glass panels, soft layered shadow. Energy:
   an electric blue -> cyan -> violet gradient family replaces gold as
   the primary accent; gold is retired site-wide except the real Roblox
   group emblem PNG on roblox.html. Apple / Riot / Stripe register:
   airy, imagery-forward, premium, never babyish, never corporate-navy.
   =================================================================== */
html.gst-light {
  /* "SK26 Surge" gradient family, per the 2026-07-18 GST/SK26 brand design
     scrub (research/GABRIEL-BRAND-DESIGN-SCRUB-2026-07-18.md) -- applied
     verbatim. Variable NAMES kept stable (--e-blue/--e-cyan/--e-violet)
     so every component already wired to them re-skins automatically;
     only the hex VALUES change to match the signed Surge stops. */
  --e-blue: #4F7CFF;      /* Surge stop 1 -- electric-blue, cold end */
  --e-cyan: #7B5CFF;      /* Surge stop 2 -- violet-blue */
  --e-violet: #C24FFF;    /* Surge stop 3 -- purple */
  --e-hot: #FF5C8A;       /* Surge stop 4 -- hot pink, warm end */
  --gst-hot: #FF3D6B;     /* primary-CTA anchor / notification dot */
  --e-grad: linear-gradient(120deg, var(--e-blue) 0%, var(--e-cyan) 45%, var(--e-violet) 75%, var(--e-hot) 100%);
  --e-grad-cta: linear-gradient(135deg, var(--e-blue) 0%, var(--e-cyan) 45%, var(--e-hot) 100%);
  --e-grad-violet: linear-gradient(135deg, var(--e-blue) 0%, var(--e-cyan) 40%, var(--e-violet) 70%, var(--e-hot) 100%);

  /* two-white canvas (Apple pattern): page sits on --l-bg (soft off-white),
     every card/panel sits on --l-surface-solid (pure white) -- this
     separation is what reads "high-tech," not the flat single-white a
     one-plane page produces. */
  --l-bg: #F5F5F7;
  --l-bg-soft: #F5F5F7;
  --l-ink: #0B0E14;
  --l-ink-dim: #5B6270;
  --l-hair: #E7E8EC;
  --l-hair-soft: #EFEFF2;
  --l-surface: rgba(255, 255, 255, 0.78);
  --l-surface-solid: #FFFFFF;

  --l-shadow-card: 0 10px 30px rgba(11, 14, 20, 0.07), 0 2px 8px rgba(11, 14, 20, 0.05);
  --l-shadow-lift: 0 22px 46px rgba(79, 124, 255, 0.20), 0 6px 16px rgba(11, 14, 20, 0.07);
  --l-glow-blue: 0 0 26px rgba(79, 124, 255, 0.32);
  --l-glow-cyan: 0 0 26px rgba(123, 92, 255, 0.36);
  --l-glow-violet: 0 0 26px rgba(194, 79, 255, 0.30);

  /* ---- token takeover: every component that already reads var(--gold*),
     var(--cyan), var(--magenta), var(--good), var(--danger), var(--text),
     var(--text-dim) or var(--shadow-*) re-skins itself automatically. ---- */
  --gold: var(--e-blue);
  --gold-hot: var(--e-cyan);
  --gold-dim: #3454D1;
  --cyan: #3454D1;
  --magenta: #A93FE0;
  --good: #1FAE6E;
  --danger: #E24444;
  --text: var(--l-ink);
  --text-dim: var(--l-ink-dim);
  --shadow-gold: var(--l-glow-blue);
  --shadow-cyan: var(--l-glow-cyan);
  --shadow-magenta: var(--l-glow-violet);
}

/* ---------- TRUE root cause of the CRITICAL #2 dark-rectangle paint bug
   (reproduces on scroll on EVERY gst-light page, not just play.html --
   confirmed by testing archive.html, which has no heavy animation/card
   load, and still shows the same solid dark-navy rectangle mid-scroll):
   the base rule above is `html, body { background: var(--navy); ... }`
   -- it paints navy on the <html> element itself, not just <body>. Every
   light-mode override below this point only ever re-targeted `body`
   (`html.gst-light body { background: ... }`), so the <html> element's
   own background-color stayed permanently dark navy on every page,
   light or dark. Normally invisible because <body> fully covers the
   viewport -- but the moment the compositor repaints a tile before the
   body layer catches up (large/fast scroll jumps, exactly what the
   critic's automation reproduced), the <html> element's dark navy paints
   through as a solid rectangle. Fixing the <html> element's own
   background for gst-light closes the gap the body-only override left. */
html.gst-light, html.gst-light.studio {
  background: var(--l-bg);
}

/* ---------- ground: two-white canvas + airy, generative aurora-mesh (Stripe
   mesh-gradient atmosphere, scaled to a low-opacity backdrop wash).
   2026-07-18 critic fix (CRITICAL #2, play.html black-render/scroll-hang):
   this body background used to carry `background-attachment: fixed` on
   all 4 layers. A fixed multi-layer gradient forces the browser to
   recomposite the whole background on every scroll frame instead of
   letting the compositor scroll it for free, and on pages stacked with
   many backdrop-filter:blur() glass cards (play.html has 15+) that
   repaint cost compounds badly -- consistent with the reproducible
   solid-black paint failure + 30s scroll timeout the critic hit only on
   play.html. Dropped to normal (scrolls with content); visually a no-op
   since the wash sits at the page edges, not mid-scroll. */
html.gst-light.studio body,
html.gst-light body {
  background:
    radial-gradient(ellipse 60% 40% at 12% -6%, rgba(79, 124, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 55% 38% at 92% 4%, rgba(123, 92, 255, 0.09), transparent 60%),
    radial-gradient(ellipse 60% 46% at 85% 96%, rgba(255, 92, 138, 0.07), transparent 62%),
    var(--l-bg);
}
html.gst-light #gw-starfield { display: none; }
html.gst-light.studio #gw-starfield { display: none; }

/* animated aurora-mesh utility: drop onto any panel that lacks earned
   imagery -- slow drifting gradient blobs, opacity kept low so text
   stays legible on top. Motion is transform/opacity only. */
.gst-aurora {
  position: relative;
  overflow: hidden;
}
.gst-aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(79, 124, 255, 0.20), transparent 68%),
    radial-gradient(34% 40% at 82% 18%, rgba(123, 92, 255, 0.20), transparent 68%),
    radial-gradient(40% 46% at 55% 88%, rgba(194, 79, 255, 0.16), transparent 68%);
  animation: gst-aurora-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes gst-aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .gst-aurora::before { animation: none; }
}

/* ---------- GST monogram: replaces the navy/gold crown everywhere except
   the real Roblox group emblem on roblox.html. Pure CSS, self-hosted,
   electric gradient, modern/geometric -- reads as a gaming-tech mark. ---------- */
.gst-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: #fff;
  background: var(--e-grad-violet, linear-gradient(135deg, #4F7CFF, #7B5CFF 55%, #C24FFF));
  border-radius: 28%;
  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: -0.02em;
  position: relative;
  isolation: isolate;
}
.gst-mark::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.5), transparent 45%);
  pointer-events: none;
}
.gst-mark.sm { width: 30px; height: 30px; font-size: 0.62rem; border-radius: 9px; }
.gst-mark.md { width: 56px; height: 56px; font-size: 1.05rem; border-radius: 16px; }
.gst-mark.lg { width: 108px; height: 108px; font-size: 2rem; border-radius: 28px; box-shadow: 0 14px 40px rgba(79, 124, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); animation: gst-mark-bob 3.2s ease-in-out infinite; }
@keyframes gst-mark-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .gst-mark.lg { animation: none; } }

/* gradient wordmark helper: swap in for the old gold-foil text-clip
   pattern used across hero wordmarks (SK26, GABE, etc.) */
.gst-grad-text {
  background: var(--e-grad-violet, linear-gradient(120deg, #4F7CFF, #7B5CFF 55%, #C24FFF));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
/* headline shimmer sweep -- same diagonal-glint idiom used estate-wide,
   just recolored so it reads on a gradient instead of gold foil */
.gst-shimmer { position: relative; display: inline-block; }
.gst-shimmer::after {
  content: '';
  position: absolute; inset: -14% -6%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.9) 49%, transparent 56%);
  background-size: 260% 260%;
  mix-blend-mode: overlay;
  animation: gst-shine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gst-shine {
  0% { background-position: 170% -20%; opacity: 0; }
  8% { opacity: 1; }
  38%, 100% { background-position: -50% 90%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gst-shimmer::after { animation: none; opacity: 0; } }

/* ---------- masthead: opaque white, sticky, hairline border ---------- */
html.gst-light .gst-mast {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--l-hair);
  box-shadow: 0 1px 0 rgba(11, 14, 20, 0.02), 0 8px 24px rgba(11, 14, 20, 0.04);
}
html.gst-light .gst-mast-eyebrow { color: var(--e-blue); opacity: 0.85; }
html.gst-light .gst-mast-name { color: var(--l-ink); }
html.gst-light .gst-mast-name .g,
html.gst-light .gst-mast-name .a,
html.gst-light .gst-mast-name .b,
html.gst-light .gst-mast-name .e { color: var(--l-ink); }
html.gst-light .gst-mast-name .wing { color: var(--l-ink-dim); }
html.gst-light .gst-wing { border-color: var(--l-hair); background: rgba(11, 14, 20, 0.03); color: var(--l-ink-dim); }
html.gst-light .gst-wing:hover { border-color: rgba(79, 124, 255, 0.4); color: var(--e-blue); background: rgba(79, 124, 255, 0.06); }
html.gst-light .gst-wing.active {
  background: var(--e-grad-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 124, 255, 0.35);
}
html.gst-light .gst-wing.active .ic svg { color: #fff; }
html.gst-light .gst-mast-actions .gw-btn.line { border-color: var(--l-hair); color: var(--l-ink-dim); }
html.gst-light .gst-mast-actions .gw-btn.line:hover { border-color: var(--e-blue); color: var(--e-blue); background: rgba(79, 124, 255, 0.06); }

/* ---------- buttons ---------- */
html.gst-light .gw-btn {
  color: #fff;
  background: var(--e-grad-cta);
  box-shadow: 0 10px 24px rgba(79, 124, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
html.gst-light .gw-btn:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(79, 124, 255, 0.36), inset 0 -2px 0 rgba(0, 0, 0, 0.08); }
html.gst-light .gw-btn.cyan { background: linear-gradient(135deg, #4F7CFF, #7B5CFF); color: #FFFFFF; box-shadow: 0 10px 24px rgba(79, 124, 255, 0.28); }
html.gst-light .gw-btn.magenta { background: linear-gradient(135deg, #7B5CFF, #C24FFF); color: #fff; box-shadow: 0 10px 24px rgba(123, 92, 255, 0.3); }
html.gst-light .gw-btn.ghost {
  /* glass, not near-invisible: these sit on imagery-backed heroes as often
     as flat white, so they need a real backing to stay legible either way */
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--l-ink);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 16px rgba(11, 14, 20, 0.08);
}
html.gst-light .gw-btn.ghost:hover { border-color: var(--e-blue); color: var(--e-blue); background: rgba(255, 255, 255, 0.82); }
html.gst-light .gw-btn.line {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #3454D1;
  border-color: rgba(79, 124, 255, 0.4);
}
html.gst-light .gw-btn.line:hover { border-color: var(--e-blue); background: rgba(255, 255, 255, 0.78); }
html.gst-light .gw-btn.tame { background: #EEF2FF; color: #3454D1; box-shadow: none; border: 1px solid rgba(79, 124, 255, 0.18); }
html.gst-light .gw-btn.tame.cyan { background: #EEF0FF; color: #4A3FBF; border-color: rgba(79, 124, 255, 0.2); }
html.gst-light .gw-btn.tame.magenta { background: #F3EEFF; color: #6D28D9; border-color: rgba(123, 92, 255, 0.2); }
html.gst-light .gw-btn.sharp { box-shadow: 0 10px 24px rgba(79, 124, 255, 0.24); }
html.gst-light .gw-btn:disabled { background: #E7EBF3; color: #9AA6BE; box-shadow: none; }

/* ---------- glass cards ---------- */
/* 2026-07-18 critic fix (CRITICAL #2, play.html black-render/scroll-hang):
   .gw-card is the highest-count component on every page (play.html alone
   stacks 15+ instances) -- each one running backdrop-filter:blur(10px)
   simultaneously, over a body already repainting a fixed multi-layer
   gradient, is exactly the compositing overload the critic traced the
   paint bug to. Backdrop-filter is now reserved for the sticky nav only
   (the one place the design law calls for it -- "opaque glass sticky
   nav"); cards use a slightly more opaque flat surface instead, which
   reads just as crisp against the plain canvas without the per-card
   blur cost. */
html.gst-light .gw-card,
html.gst-light.studio .gw-card {
  background: #FDFDFE;
  border: 1px solid var(--l-hair);
  box-shadow: var(--l-shadow-card);
  color: var(--l-ink);
}
html.gst-light .gw-card:hover,
html.gst-light .gw-card:focus-within,
html.gst-light.studio .gw-card:hover,
html.gst-light.studio .gw-card:focus-within {
  border-color: rgba(79, 124, 255, 0.32);
  box-shadow: var(--l-shadow-lift);
  transform: translateY(-4px);
}

/* ---------- inputs, xp bar, chips, tags, brackets ---------- */
html.gst-light .gw-input { background: rgba(255, 255, 255, 0.9); border-color: var(--l-hair); color: var(--l-ink); }
html.gst-light .gw-input:focus { border-color: var(--e-blue); box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.14); }
html.gst-light .gw-xpbar { background: rgba(11, 14, 20, 0.06); border-color: var(--l-hair); }
html.gst-light .gw-xpbar-fill { background: var(--e-grad-cta); box-shadow: 0 0 14px rgba(79, 124, 255, 0.4); }
html.gst-light .gw-chip { background: rgba(11, 14, 20, 0.04); border-color: var(--l-hair); color: var(--l-ink-dim); }
html.gst-light .gw-chip.building { color: #3454D1; border-color: rgba(79, 124, 255, 0.35); background: rgba(79, 124, 255, 0.07); }
html.gst-light .gw-chip.live { color: #147A4B; border-color: rgba(14, 168, 107, 0.35); background: rgba(14, 168, 107, 0.08); }
html.gst-light .gw-bracket::before,
html.gst-light .gw-bracket::after { border-color: var(--e-blue); }
html.gst-light .gw-tag { background: rgba(255, 255, 255, 0.7); }
html.gst-light .gw-eyebrow { color: var(--l-ink-dim); }
html.gst-light .gw-back-pill { background: rgba(255, 255, 255, 0.85); border-color: var(--l-hair); color: var(--l-ink); box-shadow: 0 4px 16px rgba(11, 14, 20, 0.1); }
html.gst-light .gw-back-pill:hover { border-color: var(--e-blue); color: var(--e-blue); }
html.gst-light .gw-title-badge { background: rgba(255, 255, 255, 0.85); border-color: rgba(79, 124, 255, 0.3); color: #3454D1; }
html.gst-light .gw-avatar { border-color: var(--e-blue); box-shadow: var(--l-glow-blue); background: var(--l-bg-soft); }
html.gst-light .gw-monogram { background: var(--e-grad-cta); border-color: var(--e-blue); box-shadow: var(--l-glow-blue); color: #fff; }
html.gst-light .gw-roster-row { background: rgba(255, 255, 255, 0.6); border-color: var(--l-hair); color: var(--l-ink); }
html.gst-light .gw-roster-row:hover { border-color: rgba(79, 124, 255, 0.3); background: rgba(79, 124, 255, 0.05); }
html.gst-light .gw-roster-row.active { border-color: var(--e-blue); background: rgba(79, 124, 255, 0.07); box-shadow: 0 0 16px rgba(79, 124, 255, 0.15); }
html.gst-light .gw-roster-total { color: var(--e-blue); }
html.gst-light .gw-roster-name em { color: var(--e-violet); }
html.gst-light ::-webkit-scrollbar-thumb { background: rgba(79, 124, 255, 0.28); }
html.gst-light :focus-visible { outline-color: var(--e-blue); }

/* ---------- footer ---------- */
html.gst-light .gw-footer,
html.gst-light .gst-footer-tagline { color: var(--l-ink-dim); }
html.gst-light .gst-footer-strip { color: #3454D1; opacity: 0.7; }
html.gst-light .dedication { color: var(--l-ink-dim); }

/* ---------- image-led hero band: the shared shell every restyled hero
   opts into. A self-hosted keyart image, dark-to-transparent duotone
   scrim on the LEFT (copy sits over solid color for legibility) fading
   to full image on the right, plus a white gradient floor so the panel
   still feels grounded on the page rather than pasted. ---------- */
.gst-hero-light {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--l-hair);
  box-shadow: var(--l-shadow-card);
  background-color: var(--l-bg-soft);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.gst-hero-light::before {
  /* image duotone + legibility scrim: white glass fade left -> clear image right */
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 32%, rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.10) 78%, rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.55), transparent 40%);
}
.gst-hero-light::after {
  /* subtle electric wash to keep the imagery in-family */
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(120deg, rgba(79, 124, 255, 0.10), transparent 45%, rgba(194, 79, 255, 0.08));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.gst-hero-light > * { position: relative; z-index: 1; }
.gst-hero-light.parallax {
  background-attachment: fixed;
}
@media (max-width: 760px) {
  .gst-hero-light.parallax { background-attachment: scroll; }
}

/* ---------- section furniture used across the estate: bars/eyebrows that
   were gold now read electric-blue in light mode via the token takeover
   above; this covers the few spots that hardcoded the gold hex directly
   instead of going through var(). ---------- */
html.gst-light .section-title,
html.gst-light .shelf-title,
html.gst-light .door-title,
html.gst-light .rbx-plaque-eyebrow,
html.gst-light .rbx-wing-count,
html.gst-light .sk-slate-label { color: #3454D1; }
html.gst-light .section-title .bar,
html.gst-light .shelf-title .bar,
html.gst-light .door-title .bar { background: var(--e-blue); box-shadow: 0 0 10px rgba(79, 124, 255, 0.45); }
html.gst-light .section-rule,
html.gst-light .shelf-rule,
html.gst-light .door-rule { border-top-color: var(--l-hair); }

/* ---------- studio internal nav band (academy.html/library.html cluster) ---------- */
html.gst-light .studio-nav {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--l-hair);
}
html.gst-light .studio-nav .brand { color: var(--l-ink); }
html.gst-light .studio-nav a.tab { color: var(--l-ink-dim); }
html.gst-light .studio-nav a.tab:hover { color: var(--e-blue); }
html.gst-light .studio-nav a.tab.active { color: var(--e-blue); border-bottom-color: var(--e-blue); }
html.gst-light .studio-nav a.arcade-link { color: #4A3FBF; }
html.gst-light .studio-section-title { color: #3454D1; }
html.gst-light .studio-section-title .bar { background: var(--e-blue); box-shadow: 0 0 10px rgba(79, 124, 255, 0.45); }
html.gst-light .studio-rule { border-top-color: var(--l-hair); }
html.gst-light .studio-mono-value { color: var(--l-ink); }
html.gst-light .gw-term { color: #3454D1; border-bottom-color: #3454D1; }
html.gst-light .gw-term-tip { background: #fff; border-color: rgba(79, 124, 255, 0.3); color: var(--l-ink); box-shadow: var(--l-shadow-lift); }
html.gst-light .gw-term-tip b { color: #3454D1; }
html.gst-light .dedication { color: var(--l-ink-dim); }

/* WOW MAST (Chairman: menu bar too small, needs wow) — light theme only */
html.gst-light .gst-mast { padding: 14px 26px; backdrop-filter: blur(14px); background: rgba(255,255,255,0.82); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg,#4F7CFF,#7B5CFF,#C24FFF,#FF5C8A) 1; box-shadow: 0 4px 24px rgba(79,124,255,0.10); }
html.gst-light .gst-mast .gst-brand { font-size: 1.05rem; letter-spacing: 0.14em; }
html.gst-light .gst-mast .gst-brand-eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; }
html.gst-light .gst-wing { font-size: 0.78rem; padding: 10px 18px; border-width: 1.5px; transition: transform .18s ease, box-shadow .18s ease; }
html.gst-light .gst-wing:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(123,92,255,0.22); }
html.gst-light .gst-wing.active { box-shadow: 0 4px 16px rgba(194,79,255,0.35); }

/* MAST PROMINENCE v2 (Chairman: more prominent and visual) */
html.gst-light .gst-mast { padding: 18px 34px; background: rgba(255,255,255,0.9); box-shadow: 0 6px 30px rgba(79,124,255,0.16); }
html.gst-light .gst-mast .gst-brand { font-size: 1.22rem; letter-spacing: 0.16em; background: linear-gradient(90deg,#0B0E14 30%, #4F7CFF 75%, #C24FFF 100%); -webkit-background-clip: text; background-clip: text; }
html.gst-light .gst-wing { font-size: 0.86rem; padding: 12px 22px; font-weight: 700; }

/* COLORED ENVELOPE (Chairman: exterior never flat white) — light pages */
html.gst-light body { background:
  radial-gradient(50% 55% at 6% 4%, rgba(79,124,255,0.16), transparent 60%),
  radial-gradient(48% 52% at 96% 8%, rgba(194,79,255,0.13), transparent 58%),
  radial-gradient(52% 56% at 6% 94%, rgba(123,92,255,0.14), transparent 60%),
  radial-gradient(50% 54% at 96% 92%, rgba(255,92,138,0.13), transparent 58%),
  linear-gradient(160deg, #EFF3FF 0%, #F6F0FF 45%, #FFF0F7 100%) !important; }

/* MAST TEXT v3 (Chairman: stronger, darker font) — light pages */
html.gst-light .gst-wing { color: #0B0E14 !important; font-weight: 800; }
html.gst-light .gst-wing:not(.active) { opacity: 1; }
html.gst-light .gst-mast .gst-brand { -webkit-text-fill-color: initial; color: #0B0E14; font-weight: 900; }

/* ============ THE PICTURE FRAME (Chairman law): big image centre, 10 games as the frame ============ */
.gw-frame { max-width: 1280px; margin: 22px auto 8px; display: flex; flex-direction: column; gap: 14px; }
.gw-frame-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gw-frame-mid { display: grid; grid-template-columns: minmax(190px, 1fr) 2.4fr minmax(190px, 1fr); gap: 14px; align-items: stretch; }
.gw-frame-side { display: flex; }
.gw-frame-side .frame-card { width: 100%; }

/* the big centre image with the founder title over it */
.gw-frame-center {
  position: relative; min-height: 420px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #10203a, #06101f 70%);
  border: 3px solid transparent;
  box-shadow: 0 26px 80px rgba(79,124,255,0.30), 0 0 0 4px rgba(123,92,255,0.12);
}
.gw-frame-center::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.4) 34%, rgba(255,255,255,0.12) 64%, rgba(255,255,255,0.05) 100%);
}
.gw-frame-center::after {
  content: ''; position: absolute; inset: 0; border-radius: 22px; z-index: 2; pointer-events: none;
  background: linear-gradient(120deg,#4F7CFF,#7B5CFF,#C24FFF,#FF5C8A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px;
}
.gw-frame-center-inner { position: relative; z-index: 1; padding: 34px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; height: 100%; justify-content: center; }

/* the frame cards */
.frame-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; border-radius: 16px; text-decoration: none; padding: 14px;
  background: #fff; border: 1px solid rgba(79,124,255,0.22); box-shadow: 0 6px 18px rgba(11,14,20,0.07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.frame-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(123,92,255,0.22); }
.frame-card-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.frame-card-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.94) 100%); }
.frame-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.frame-card-title { font-family: var(--font-head); font-weight: 800; font-size: 0.92rem; color: #0B0E14; letter-spacing: 0.02em; }
.frame-card-genre { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5B6270; }
.frame-card-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6D3FD6; margin-top: 3px; }
.frame-card-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #7B5CFF; box-shadow: 0 0 6px #7B5CFF; }
.frame-card-status.live { color: #05B46A; font-weight: 800; }
.frame-card-status.live .dot { background: #05B46A; box-shadow: 0 0 8px #05B46A; }

/* mobile: frame collapses to image then cards below */
@media (max-width: 860px) {
  .gw-frame-mid { grid-template-columns: 1fr; }
  .gw-frame-center { min-height: 300px; order: -1; }
  .gw-frame-row { grid-template-columns: repeat(2, 1fr); }
}