/* ============================================================
   SWISS GAMEPLAY — HANDCRAFTED STYLESHEET
   No framework. No template. Every section styled on its own terms.

   TOKENS
   colour   ink #0A0C10 / panel #14171A / graphite #1E2126 /
            frost #F1F3F6 / silver #8B929C / cobalt #3D68E0 / gold #C6A467
   type     display  — 'Bricolage Grotesque'  (headlines, numerals)
            body     — 'Archivo'              (running text, UI)
            mono     — 'IBM Plex Mono'         (data, timestamps, coins)
   grid     12-column asymmetric, flush-left ragged-right, Basel margins
   ============================================================ */

:root{
  --ink: #0a0c10;
  --ink-2: #0d1015;
  --panel: #14171a;
  --graphite: #1e2126;
  --graphite-2: #262a30;
  --frost: #f1f3f6;
  --silver: #8b929c;
  --silver-dim: #565c65;
  --cobalt: #3d68e0;
  --cobalt-soft: #7c9bff;
  --gold: #c6a467;
  --line: rgba(241,243,246,0.09);
  --line-strong: rgba(241,243,246,0.16);
  --glass: rgba(255,255,255,0.035);
  --glass-strong: rgba(255,255,255,0.06);
  --shadow-deep: 0 30px 80px rgba(0,0,0,0.45);

  --disp: 'Bricolage Grotesque', 'Archivo', sans-serif;
  --body: 'Archivo', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --margin: clamp(20px, 4.5vw, 72px);
  --col-gap: clamp(12px, 2vw, 28px);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse){ body{ cursor: auto; } }

img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; background:none; border:none; color: inherit; cursor: pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--cobalt); color: var(--frost); }

:focus-visible{
  outline: 2px solid var(--cobalt-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.eyebrow em{ color: var(--gold); font-style: normal; }

/* ---------------------------------------------------------
   CUSTOM CURSOR
--------------------------------------------------------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: var(--frost); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--line-strong);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s;
}
.cursor-ring.is-active{ width:56px; height:56px; border-color: var(--cobalt-soft); }
@media (pointer: coarse){ .cursor-dot, .cursor-ring{ display:none; } }

/* ---------------------------------------------------------
   COMPLIANCE TICKER — split-flap strip, always visible
--------------------------------------------------------- */
.compliance-ticker{
  position: sticky; top:0; z-index: 500;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  height: 30px;
  display:flex; align-items:center;
}
.compliance-ticker .track{
  display:flex; gap: 48px; white-space: nowrap;
  animation: marquee 32s linear infinite;
  padding-left: 48px;
}
.compliance-ticker span{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--silver); text-transform: uppercase;
}
.compliance-ticker span em{ color: var(--gold); font-style: normal; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   NAV
--------------------------------------------------------- */
.site-nav{
  position: sticky; top: 30px; z-index: 400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--margin);
  background: rgba(10,12,16,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: padding .35s var(--ease-out), border-color .35s, background .35s;
}
.site-nav.is-compact{
  padding: 13px var(--margin);
  border-bottom-color: var(--line);
}
.site-nav .wordmark{
  font-family: var(--disp); font-weight: 700; font-size: 17px;
  letter-spacing: 0.01em;
  display:flex; align-items:baseline; gap:8px;
}
.site-nav .wordmark small{
  font-family: var(--mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--silver); text-transform:uppercase;
}
.site-nav .nav-links{
  display:flex; gap: clamp(14px, 2vw, 30px);
  font-size: 13.5px; color: var(--silver);
}
.site-nav .nav-links a{ position:relative; padding: 4px 0; transition: color .2s; }
.site-nav .nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--cobalt-soft); transition: width .3s var(--ease-out);
}
.site-nav .nav-links a:hover, .site-nav .nav-links a:focus-visible{ color: var(--frost); }
.site-nav .nav-links a:hover::after, .site-nav .nav-links a:focus-visible::after{ width:100%; }
.site-nav .nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-btn{
  font-size: 13px; padding: 9px 18px; border-radius: 2px; border:1px solid var(--line-strong);
  transition: border-color .2s, background .2s;
}
.nav-btn:hover{ border-color: var(--cobalt-soft); }
.nav-btn.primary{
  background: var(--frost); color: var(--ink); border-color: var(--frost); font-weight:600;
}
.nav-btn.primary:hover{ background: var(--cobalt-soft); border-color: var(--cobalt-soft); color: var(--ink); }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .site-nav .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------------------------------------------------------
   SECTION 01 — INTRO
--------------------------------------------------------- */
.sec-intro{
  position: relative; min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(61,104,224,0.16), transparent 60%),
    linear-gradient(180deg, rgba(10,12,16,.6) 0%, rgba(12,14,18,.72) 55%, var(--ink) 100%),
    url('assets/mountain-matterhorn.jpg');
  background-size: auto, auto, cover;
  background-position: center, center, center 62%;
  background-repeat: no-repeat;
}
.intro-fog{ position:absolute; inset:0; z-index:1; opacity:.55; filter: blur(1px); }
.intro-ridge{ position:absolute; left:0; right:0; bottom:0; width:100%; z-index:2; }
.intro-ridge path{
  stroke: var(--line-strong); stroke-width:1; fill:none;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  animation: ridgeDraw 2.6s var(--ease-out) 0.3s forwards;
}
.intro-ridge path.fill{ stroke:none; fill: rgba(20,23,26,0.9); animation:none; }
@keyframes ridgeDraw{ to{ stroke-dashoffset:0; } }

.intro-content{
  position: relative; z-index: 3;
  padding: 0 var(--margin) clamp(56px, 9vw, 108px);
  display:grid; grid-template-columns: 7fr 5fr; gap: var(--col-gap);
  align-items:end;
}
.intro-wordmark{
  font-family: var(--disp); font-weight:800;
  font-size: clamp(46px, 8.4vw, 132px);
  line-height: 0.94; letter-spacing: -0.01em;
  clip-path: inset(0 100% 0 0);
  animation: revealMark 1.1s var(--ease-inout) 0.15s forwards;
}
@keyframes revealMark{ to{ clip-path: inset(0 0 0 0); } }
.intro-wordmark span{ display:block; color: var(--silver); font-size: 0.32em; font-weight:500; font-family: var(--body); letter-spacing:0; margin-top: 14px; }

.intro-side{
  border-left: 1px solid var(--line);
  padding-left: clamp(16px, 2vw, 28px);
  align-self:end;
  opacity:0; transform: translateY(14px);
  animation: fadeUp .9s var(--ease-out) 1.1s forwards;
}
.intro-side p{ font-size: 15px; color: var(--silver); max-width: 34ch; }
.intro-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.intro-tags span{
  font-family: var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding: 5px 9px; color: var(--silver);
}
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; left: var(--margin); bottom: 22px; z-index:3;
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--silver);
  opacity:0; animation: fadeUp .8s var(--ease-out) 1.6s forwards;
}
.scroll-cue .stem{ width:1px; height:26px; background: var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .stem::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--cobalt-soft);
  animation: stemDrop 1.8s var(--ease-inout) infinite;
}
@keyframes stemDrop{ 50%{ top:100%; } 100%{ top:100%; } }

/* ---------------------------------------------------------
   SECTION 02 — LOBBY (mouse-reactive tilt tiles)
--------------------------------------------------------- */
.sec-lobby{
  padding: clamp(80px,11vw,140px) var(--margin);
  display:grid; grid-template-columns: 4fr 8fr; gap: clamp(24px,4vw,64px);
  border-top: 1px solid var(--line);
}
.lobby-head{ align-self:start; position: sticky; top: 120px; }
.lobby-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); line-height:1.05; margin: 14px 0 18px; }
.lobby-head p{ color: var(--silver); font-size:14.5px; max-width: 32ch; }

.lobby-floor{ perspective: 1400px; display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.lobby-tile{
  position:relative; grid-column: span 1; min-height: 190px;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--line); border-radius: 3px;
  padding: 20px; display:flex; flex-direction:column; justify-content:space-between;
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .3s, box-shadow .3s;
}
.lobby-tile:nth-child(2), .lobby-tile:nth-child(5){ transform: translateY(22px); }
.lobby-tile:hover, .lobby-tile:focus-within{ border-color: var(--line-strong); box-shadow: var(--shadow-deep); }
.lobby-tile .tile-index{ font-family: var(--mono); font-size:10.5px; color: var(--silver-dim); }
.lobby-tile h3{ font-family: var(--disp); font-size:19px; font-weight:600; }
.lobby-tile p{ font-size:12.5px; color: var(--silver); margin-top:4px; }
.lobby-tile .tile-glow{
  position:absolute; inset:0; border-radius:3px; opacity:0; pointer-events:none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(124,155,255,0.14), transparent 65%);
  transition: opacity .3s;
}
.lobby-tile:hover .tile-glow{ opacity:1; }

@media (max-width: 900px){
  .sec-lobby{ grid-template-columns: 1fr; }
  .lobby-head{ position:static; }
  .lobby-floor{ grid-template-columns: repeat(2,1fr); }
  .lobby-tile:nth-child(2), .lobby-tile:nth-child(5){ transform:none; }
}
@media (max-width: 560px){ .lobby-floor{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   SECTION 03 — FEATURED GAMES (asymmetric magazine spread)
--------------------------------------------------------- */
.sec-games{ border-top: 1px solid var(--line); padding: clamp(80px,11vw,140px) 0; }
.games-head{ padding: 0 var(--margin); display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: clamp(36px,6vw,64px); }
.games-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); }
.games-head p{ color: var(--silver); font-size:14px; max-width: 30ch; text-align:right; }

.spread{
  display:grid; grid-template-columns: repeat(12,1fr); gap: var(--col-gap);
  padding: 0 var(--margin);
}
.spread-entry{
  border-top:1px solid var(--line); padding-top:22px; margin-top:22px;
  display:grid; grid-template-columns: subgrid; grid-column: span 12; gap: var(--col-gap);
  align-items:start;
}
.spread-entry .num{ grid-column: span 1; font-family: var(--mono); color: var(--silver-dim); font-size:13px; }
.spread-entry .name{ grid-column: span 4; }
.spread-entry .name h3{ font-family: var(--disp); font-weight:700; font-size: clamp(24px,2.6vw,34px); }
.spread-entry .name .tag{ font-family: var(--mono); font-size:10.5px; color: var(--gold); text-transform:uppercase; letter-spacing:.1em; margin-top:6px; display:block; }
.spread-entry .desc{ grid-column: span 5; color: var(--silver); font-size:14px; }
.spread-entry .action{ grid-column: span 2; text-align:right; }
.spread-entry .swatch{
  grid-column: 1 / -1; height: 3px; margin-top: 18px; border-radius:2px;
  background: linear-gradient(90deg, var(--swatch-a,#3d68e0), var(--swatch-b,#1e2126));
}
.play-link{
  font-family: var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom: 1px solid var(--line-strong); padding-bottom:3px; white-space:nowrap;
  transition: border-color .2s, color .2s;
}
.play-link:hover, .play-link:focus-visible{ color: var(--cobalt-soft); border-color: var(--cobalt-soft); }

@media (max-width: 900px){
  .games-head{ flex-direction:column; align-items:flex-start; }
  .games-head p{ text-align:left; }
  .spread-entry{ grid-template-columns: 1fr; }
  .spread-entry .num,.spread-entry .name,.spread-entry .desc,.spread-entry .action{ grid-column: 1 / -1; }
  .spread-entry .action{ text-align:left; }
}

/* ---------------------------------------------------------
   SECTION 04 — VIRTUAL ECONOMY (ledger)
--------------------------------------------------------- */
.sec-economy{
  border-top: 1px solid var(--line);
  padding: clamp(80px,11vw,140px) var(--margin);
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(24px,5vw,80px);
}
.economy-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); line-height:1.06; }
.economy-head p{ color: var(--silver); font-size:14.5px; margin-top:16px; max-width:36ch; }
.coin-counter{
  margin-top: 28px; font-family: var(--mono); font-size: 13px; color: var(--silver);
  display:flex; align-items:baseline; gap:10px;
}
.coin-counter strong{ font-family: var(--disp); font-size: clamp(30px,3vw,40px); color: var(--frost); font-weight:700; }

.ledger{ border-top: 1px solid var(--line-strong); }
.ledger-row{
  display:grid; grid-template-columns: 32px 1fr auto; gap: 18px; align-items:center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13.5px;
}
.ledger-row .mark{ color: var(--gold); }
.ledger-row .status{ color: var(--silver); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.ledger-row .status.no{ color:#c9776b; }
.ledger-row .status.yes{ color:#7fbf8f; }

@media (max-width: 900px){ .sec-economy{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   SECTION 05 — DAILY MISSIONS (split-flap board)
--------------------------------------------------------- */
.sec-missions{ border-top: 1px solid var(--line); padding: clamp(80px,11vw,140px) var(--margin); }
.missions-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: clamp(32px,5vw,56px); }
.missions-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); }
.missions-head p{ color: var(--silver); font-size:14px; max-width:30ch; text-align:right; }

.board{ background: var(--panel); border:1px solid var(--line); border-radius:4px; padding: clamp(16px,3vw,28px); }
.board-row{
  display:grid; grid-template-columns: 1fr auto 120px; gap:18px; align-items:center;
  padding: 16px 6px; border-bottom: 1px solid var(--line);
}
.board-row:last-child{ border-bottom:none; }
.flap-word{ display:flex; gap:3px; flex-wrap:wrap; }
.flap-char{
  font-family: var(--mono); font-weight:500; font-size:14px;
  background: var(--graphite); border:1px solid var(--line-strong);
  color: var(--frost); width:20px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:1px; position:relative; overflow:hidden;
}
.board-row .progress-text{ font-family: var(--mono); font-size:12px; color: var(--silver); }
.progress-track{ height:3px; background: var(--graphite); border-radius:2px; overflow:hidden; }
.progress-fill{ height:100%; background: var(--cobalt); width:0; transition: width 1.1s var(--ease-out); }
.progress-fill.done{ background: var(--gold); }

@media (max-width:700px){
  .missions-head{ flex-direction:column; align-items:flex-start; }
  .missions-head p{ text-align:left; }
  .board-row{ grid-template-columns: 1fr; gap:8px; }
}

/* ---------------------------------------------------------
   SECTION 06 — LEADERBOARD (ascent / elevation motif)
--------------------------------------------------------- */
.sec-leaderboard{
  border-top: 1px solid var(--line); padding: clamp(80px,11vw,140px) var(--margin);
  position:relative; overflow:hidden;
}
.ascent-bg{ position:absolute; inset:0; opacity:.16; z-index:0; }
.ascent-bg path{ stroke: var(--silver); stroke-width:1; fill:none; }
.leaderboard-head{ position:relative; z-index:1; margin-bottom: clamp(32px,5vw,56px); }
.leaderboard-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); }
.leaderboard-head p{ color: var(--silver); font-size:14px; max-width:44ch; margin-top:10px; }

.ascent-list{ position:relative; z-index:1; max-width: 720px; }
.ascent-row{
  display:grid; grid-template-columns: 40px 1fr auto auto; gap:16px; align-items:center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.ascent-row .rank{ font-family: var(--disp); font-weight:700; color: var(--silver-dim); font-size:15px; }
.ascent-row.top .rank{ color: var(--gold); }
.ascent-row .handle{ font-size:14.5px; }
.ascent-row .station{ font-family: var(--mono); font-size:10.5px; color: var(--silver); text-transform:uppercase; letter-spacing:.06em; }
.ascent-row .points{ font-family: var(--mono); font-size:13.5px; color: var(--frost); }

/* ---------------------------------------------------------
   SECTION 07 — ACHIEVEMENTS (mosaic wall)
--------------------------------------------------------- */
.sec-achievements{ border-top: 1px solid var(--line); padding: clamp(80px,11vw,140px) var(--margin); }
.achievements-head{ margin-bottom: clamp(32px,5vw,56px); }
.achievements-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); }
.achievements-head p{ color: var(--silver); font-size:14px; max-width:44ch; margin-top:10px; }

.wall{ display:grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 96px; gap: 10px; }
.trophy{
  position:relative; border:1px solid var(--line); border-radius:3px;
  grid-column: span 2; display:flex; flex-direction:column; justify-content:space-between; padding: 14px;
  perspective: 800px;
}
.trophy.big{ grid-column: span 3; grid-row: span 2; }
.trophy.locked{ opacity:.42; }
.trophy .face{ transition: transform .5s var(--ease-inout); }
.trophy:hover .face, .trophy:focus-within .face{ transform: translateY(-2px); }
.trophy h4{ font-family: var(--disp); font-weight:600; font-size:14.5px; }
.trophy p{ font-size:11.5px; color: var(--silver); margin-top:4px; }
.trophy .glyph{ font-family: var(--mono); font-size:10px; color: var(--gold); letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 900px){ .wall{ grid-template-columns: repeat(3,1fr); } .trophy.big{ grid-column: span 3; grid-row: span 1; } }
@media (max-width: 560px){ .wall{ grid-template-columns: repeat(2,1fr); } .trophy{ grid-column: span 1 !important; } }

/* ---------------------------------------------------------
   SECTION 08 — RESPONSIBLE PLAY
--------------------------------------------------------- */
.sec-responsible{
  border-top: 1px solid var(--line);
  padding: clamp(80px,11vw,140px) var(--margin);
  background: linear-gradient(180deg, transparent, rgba(61,104,224,0.05));
}
.rp-grid{ display:grid; grid-template-columns: 6fr 6fr; gap: clamp(24px,5vw,80px); }
.rp-grid h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); line-height:1.06; }
.rp-grid .lead{ color: var(--silver); font-size:15px; margin-top:18px; max-width:42ch; }
.rp-facts{ border-top:1px solid var(--line-strong); }
.rp-fact{ padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.rp-fact strong{ display:block; font-family: var(--disp); font-weight:600; font-size:15.5px; margin-bottom:4px; }
.rp-fact span{ color: var(--silver); }
.rp-resources{ margin-top: 26px; }
.rp-resources h4{ font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--silver); margin-bottom:10px; }
.rp-resources ul{ display:flex; flex-direction:column; gap:8px; }
.rp-resources a{ font-size:14px; border-bottom:1px solid var(--line-strong); padding-bottom:2px; display:inline-block; }
.rp-resources a:hover{ border-color: var(--cobalt-soft); color: var(--cobalt-soft); }

@media (max-width: 900px){ .rp-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   SECTION 09 — COMMUNITY (contact-sheet)
--------------------------------------------------------- */
.sec-community{ border-top: 1px solid var(--line); padding: clamp(80px,11vw,140px) var(--margin); }
.community-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: clamp(32px,5vw,56px); }
.community-head h2{ font-family: var(--disp); font-weight:700; font-size: clamp(28px,3.6vw,44px); }
.community-head p{ color: var(--silver); font-size:14px; max-width:30ch; text-align:right; }

.sheet{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.frame{ background: var(--ink); padding: 20px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; }
.frame.news{ grid-column: span 2; }
.avatar-glyph{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--disp); font-size:12px; font-weight:700;
  background: var(--graphite); border:1px solid var(--line-strong);
}
.frame h4{ font-size:13.5px; margin-top:14px; }
.frame p{ font-size:12px; color: var(--silver); margin-top:4px; }
.frame .stamp{ font-family: var(--mono); font-size:10px; color: var(--silver-dim); margin-top:12px; text-transform:uppercase; letter-spacing:.06em; }

@media (max-width: 900px){ .community-head{ flex-direction:column; align-items:flex-start; } .community-head p{ text-align:left; } .sheet{ grid-template-columns: repeat(2,1fr); } .frame.news{ grid-column:span 2; } }
@media (max-width: 560px){ .sheet{ grid-template-columns: 1fr; } .frame.news{ grid-column:1; } }

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{ border-top: 1px solid var(--line); padding: clamp(56px,8vw,96px) var(--margin) 40px; }
.footer-top{ display:grid; grid-template-columns: 3fr repeat(4,2fr); gap: clamp(20px,3vw,40px); padding-bottom: clamp(40px,6vw,72px); }
.footer-brand .wordmark{ font-family: var(--disp); font-weight:800; font-size:20px; }
.footer-brand p{ color: var(--silver); font-size:13px; margin-top:14px; max-width:32ch; }
.footer-col h5{ font-family: var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--silver-dim); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13.5px; color: var(--silver); transition: color .2s; }
.footer-col a:hover{ color: var(--frost); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top: 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family: var(--mono); font-size:11px; color: var(--silver-dim); letter-spacing:.02em;
}
.footer-bottom .badge{ color: var(--gold); }

@media (max-width: 900px){ .footer-top{ grid-template-columns: repeat(2,1fr); } }

/* ---------------------------------------------------------
   REVEAL UTILITY (scroll-triggered, per-section variants)
--------------------------------------------------------- */
[data-reveal]{ opacity:0; }
[data-reveal="up"]{ transform: translateY(28px); }
[data-reveal="left"]{ transform: translateX(-24px); }
[data-reveal="right"]{ transform: translateX(24px); }
[data-reveal="scale"]{ transform: scale(.96); }
[data-reveal].is-visible{
  opacity:1; transform:none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* ============================================================
   PAGE HEADER (shared compact header for interior pages)
   ============================================================ */
.page-header{
  padding: clamp(56px,8vw,96px) var(--margin) clamp(32px,5vw,56px);
  border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: 7fr 5fr; gap: var(--col-gap); align-items:end;
}
.page-header h1{ font-family: var(--disp); font-weight:800; font-size: clamp(34px,5vw,64px); line-height:1.03; }
.page-header .lead{ color: var(--silver); font-size:15px; max-width:40ch; }
@media (max-width:900px){ .page-header{ grid-template-columns:1fr; } }

/* compliance badge bar — extra reinforcement on high-context pages */
.badge-bar{
  display:flex; flex-wrap:wrap; gap: 10px 18px;
  padding: 14px var(--margin);
  background: var(--panel); border-bottom:1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver);
}
.badge-bar strong{ color: var(--gold); }

/* ============================================================
   GAMES CATALOGUE (games.php)
   ============================================================ */
.filter-row{
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 0 var(--margin) 40px;
}
.filter-chip{
  font-family: var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding: 8px 16px; border:1px solid var(--line-strong); border-radius:20px; color: var(--silver);
  transition: border-color .2s, color .2s, background .2s;
}
.filter-chip:hover{ color: var(--frost); }
.filter-chip.is-active{ background: var(--frost); color: var(--ink); border-color: var(--frost); font-weight:600; }

.dossier-list{ padding: 0 var(--margin) clamp(80px,10vw,120px); }
.dossier-row{
  display:grid; grid-template-columns: 44px 2fr 3fr 2fr auto; gap: 22px; align-items:center;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: opacity .3s;
}
.dossier-row:last-child{ border-bottom: 1px solid var(--line); }
.dossier-row.is-hidden{ display:none; }
.dossier-row .num{ font-family: var(--mono); color: var(--silver-dim); font-size:13px; }
.dossier-row .title h3{ font-family: var(--disp); font-weight:700; font-size:20px; }
.dossier-row .title span{ font-family: var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold); }
.dossier-row .desc{ color: var(--silver); font-size:13.5px; }
.dossier-row .specs{ display:flex; flex-direction:column; gap:4px; font-family: var(--mono); font-size:11px; color: var(--silver); }
.dossier-row .specs b{ color: var(--frost); font-weight:500; }
.dossier-row .status{
  font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding: 9px 16px; border:1px solid var(--line-strong); white-space:nowrap;
}
.dossier-row .status.live{ border-color: var(--cobalt-soft); color: var(--cobalt-soft); }
.dossier-row .status.soon{ color: var(--silver-dim); }

@media (max-width: 980px){
  .dossier-row{ grid-template-columns: 1fr; gap:10px; }
  .dossier-row .num{ display:none; }
}

/* ============================================================
   GAME DEMO (game.php)
   ============================================================ */
.game-stage{
  display:grid; grid-template-columns: 7fr 5fr; gap: clamp(20px,3vw,40px);
  padding: clamp(40px,6vw,64px) var(--margin) clamp(80px,10vw,120px);
  align-items:start;
}
.game-machine{
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: clamp(20px,3vw,36px);
}
.machine-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
.machine-head h2{ font-family: var(--disp); font-weight:700; font-size: 22px; }
.machine-head span{ font-family: var(--mono); font-size:11px; color: var(--silver); text-transform:uppercase; letter-spacing:.08em; }

.reel-grid{
  display:grid; grid-template-columns: repeat(5,1fr); gap: 8px;
  background: var(--ink); border:1px solid var(--line); border-radius:4px; padding: 14px;
}
.reel-col{ display:grid; grid-template-rows: repeat(3,1fr); gap:8px; }
.reel-cell{
  aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
  background: var(--graphite); border:1px solid var(--line); border-radius:3px;
  font-size: clamp(22px,3vw,32px);
  transition: background .2s, border-color .2s;
}
.reel-cell.mid{ border-color: var(--line-strong); }
.reel-col.is-spinning .reel-cell{ filter: blur(1.5px); opacity:.7; }
.reel-cell.symbol-star{ color: var(--gold); }
.reel-cell.symbol-hex{ color: var(--cobalt-soft); }
.reel-cell.win-line{ border-color: var(--gold); background: rgba(198,164,103,0.12); }

.win-banner{
  margin-top:16px; min-height: 22px;
  font-family: var(--mono); font-size:12.5px; letter-spacing:.04em; color: var(--silver);
}
.win-banner.is-win{ color: var(--gold); }

.machine-controls{ margin-top: 24px; display:flex; flex-wrap:wrap; gap: 22px; align-items:center; justify-content:space-between; }
.control-group{ display:flex; flex-direction:column; gap:6px; }
.control-group label{ font-family: var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver-dim); }
.stake-stepper{ display:flex; align-items:center; gap:10px; }
.stake-stepper button{ width:28px; height:28px; border:1px solid var(--line-strong); border-radius:2px; }
.stake-stepper button:hover{ border-color: var(--cobalt-soft); }
.stake-stepper .stake-value{ font-family: var(--mono); font-size:15px; min-width: 64px; text-align:center; }

.segmented{ display:flex; border:1px solid var(--line-strong); border-radius:3px; overflow:hidden; }
.segmented button{ padding:7px 12px; font-size:11.5px; font-family: var(--mono); color: var(--silver); }
.segmented button.is-active{ background: var(--frost); color: var(--ink); }

.toggle-switch{ display:inline-flex; align-items:center; gap:8px; }
.toggle-switch .track{
  width:36px; height:20px; border-radius:20px; background: var(--graphite); border:1px solid var(--line-strong);
  position:relative; transition: background .2s;
}
.toggle-switch .track::after{
  content:''; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background: var(--silver); transition: transform .2s, background .2s;
}
.toggle-switch.is-on .track{ background: rgba(61,104,224,0.35); border-color: var(--cobalt-soft); }
.toggle-switch.is-on .track::after{ transform: translateX(16px); background: var(--cobalt-soft); }

.spin-actions{ display:flex; gap:10px; margin-top: 22px; }
.btn-spin{
  flex:1; padding: 16px; font-family: var(--disp); font-weight:700; font-size:15px;
  background: var(--frost); color: var(--ink); border-radius:3px;
  transition: background .2s, transform .1s;
}
.btn-spin:hover{ background: var(--cobalt-soft); }
.btn-spin:active{ transform: scale(.98); }
.btn-spin:disabled{ opacity:.4; cursor:not-allowed; }
.btn-auto{
  padding: 16px 20px; border:1px solid var(--line-strong); border-radius:3px; font-family: var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
.btn-auto.is-active{ border-color: var(--gold); color: var(--gold); }

/* side panel */
.game-side > * + *{ margin-top: 18px; }
.balance-panel{
  background: var(--panel); border:1px solid var(--line); border-radius:6px; padding: 22px;
}
.balance-panel .label{ font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver); }
.balance-panel .amount{ font-family: var(--disp); font-weight:800; font-size: clamp(32px,3.4vw,44px); margin-top:6px; }
.refill-link{ font-family: var(--mono); font-size:11px; color: var(--cobalt-soft); border-bottom:1px solid transparent; margin-top:10px; display:inline-block; }
.refill-link:hover{ border-color: var(--cobalt-soft); }

.stat-panel{ background: var(--panel); border:1px solid var(--line); border-radius:6px; padding: 22px; }
.stat-panel h4{ font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver-dim); margin-bottom:14px; }
.stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-grid .stat b{ display:block; font-family: var(--disp); font-weight:700; font-size:20px; }
.stat-grid .stat span{ font-family: var(--mono); font-size:10.5px; color: var(--silver); text-transform:uppercase; letter-spacing:.04em; }

.history-panel{ background: var(--panel); border:1px solid var(--line); border-radius:6px; padding: 22px; }
.history-panel h4{ font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver-dim); margin-bottom:12px; }
.history-list{ max-height: 260px; overflow-y:auto; display:flex; flex-direction:column-reverse; gap:2px; }
.history-row{
  display:grid; grid-template-columns: 26px 1fr auto auto; gap:10px; align-items:center;
  padding: 8px 4px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size:11.5px; color: var(--silver);
}
.history-row .h-payout.pos{ color: var(--gold); }
.history-row .h-payout.neg{ color: var(--silver-dim); }
.history-empty{ font-size:12.5px; color: var(--silver-dim); font-family: var(--mono); }

.reset-account{ text-align:center; }
.reset-account button{ font-family: var(--mono); font-size:10.5px; color: var(--silver-dim); text-decoration: underline; text-underline-offset:3px; }
.reset-account button:hover{ color: var(--silver); }

@media (max-width: 980px){ .game-stage{ grid-template-columns: 1fr; } }
@media (max-width: 560px){
  .reel-cell{ font-size:18px; }
  .machine-controls{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   AUTH PAGES (login.php / register.php)
   ============================================================ */
.auth-wrap{
  display:grid; grid-template-columns: 5fr 7fr; min-height: calc(100svh - 30px - 76px);
}
.auth-panel{
  padding: clamp(40px,6vw,80px) var(--margin);
  display:flex; flex-direction:column; justify-content:center;
  border-right: 1px solid var(--line);
}
.auth-panel .eyebrow{ margin-bottom:14px; }
.auth-panel h1{ font-family: var(--disp); font-weight:800; font-size: clamp(30px,3.6vw,44px); line-height:1.05; }
.auth-panel .lead{ color: var(--silver); font-size:14.5px; margin-top:16px; max-width:36ch; }
.auth-notes{ margin-top: 28px; border-top:1px solid var(--line); padding-top:20px; }
.auth-notes li{ font-size:12.5px; color: var(--silver); padding: 6px 0; display:flex; gap:8px; }
.auth-notes li::before{ content:'—'; color: var(--silver-dim); }

.auth-form-side{ padding: clamp(40px,6vw,80px) var(--margin); display:flex; align-items:center; }
.auth-form{ width:100%; max-width: 440px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver); margin-bottom:8px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"]{
  width:100%; background: var(--panel); border:1px solid var(--line-strong); color: var(--frost);
  padding: 12px 14px; border-radius:3px; font-family: var(--body); font-size:14px;
}
.field input:focus{ border-color: var(--cobalt-soft); outline:none; }
.field-hint{ font-size:11.5px; color: var(--silver-dim); margin-top:6px; }
.field-error{ font-size:11.5px; color:#d98c7f; margin-top:6px; display:none; }
.field.has-error input{ border-color:#d98c7f; }
.field.has-error .field-error{ display:block; }

.check-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.check-row input{ margin-top:3px; }
.check-row label{ font-size:12.5px; color: var(--silver); }
.check-row a{ color: var(--cobalt-soft); border-bottom:1px solid transparent; }
.check-row a:hover{ border-color: var(--cobalt-soft); }

.auth-submit{
  width:100%; padding:15px; background: var(--frost); color: var(--ink); border-radius:3px;
  font-family: var(--disp); font-weight:700; font-size:14.5px; margin-top: 6px;
  transition: background .2s;
}
.auth-submit:hover{ background: var(--cobalt-soft); }
.auth-switch{ text-align:center; margin-top:20px; font-size:13px; color: var(--silver); }
.auth-switch a{ color: var(--cobalt-soft); }
.auth-msg{ font-size:12.5px; margin-top:14px; text-align:center; min-height:16px; }
.auth-msg.error{ color:#d98c7f; }
.auth-msg.success{ color: var(--gold); }

/* profile (shown post-login) */
.profile-wrap{ padding: clamp(40px,6vw,80px) var(--margin); display:none; }
.profile-wrap.is-visible{ display:block; }
.profile-head{ display:flex; align-items:center; gap:20px; margin-bottom: 40px; }
.profile-avatar{
  width:64px; height:64px; border-radius:50%; background: var(--graphite); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family: var(--disp); font-weight:700; font-size:22px;
}
.profile-head h2{ font-family: var(--disp); font-weight:700; font-size:24px; }
.profile-head span{ font-family: var(--mono); font-size:11.5px; color: var(--silver); }
.profile-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom:32px; }
.profile-stat{ background: var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px; }
.profile-stat b{ display:block; font-family: var(--disp); font-weight:700; font-size:24px; }
.profile-stat span{ font-family: var(--mono); font-size:10.5px; color: var(--silver); text-transform:uppercase; }
.profile-signout{ font-family: var(--mono); font-size:11.5px; color: var(--silver-dim); text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 900px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-panel{ border-right:none; border-bottom:1px solid var(--line); }
  .profile-grid{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ABOUT (essay + marginalia)
   ============================================================ */
.essay{ display:grid; grid-template-columns: 7fr 4fr; gap: clamp(30px,5vw,80px); padding: clamp(56px,8vw,96px) var(--margin) clamp(80px,10vw,120px); }
.essay-body{ font-size:16px; color: var(--silver); max-width: 62ch; }
.essay-body p{ margin-bottom: 20px; }
.essay-body p:first-of-type::first-letter{
  font-family: var(--disp); font-weight:800; font-size: 3.4em; float:left; line-height:.8;
  padding: 4px 10px 0 0; color: var(--frost);
}
.essay-body h3{ font-family: var(--disp); font-weight:700; font-size:22px; color: var(--frost); margin: 36px 0 14px; }
.marginalia{ border-left: 1px solid var(--line); padding-left: clamp(16px,2vw,28px); }
.margin-block{ padding: 20px 0; border-bottom: 1px solid var(--line); }
.margin-block:first-child{ padding-top:0; }
.margin-block .num{ font-family: var(--mono); font-size:11px; color: var(--silver-dim); }
.margin-block p{ font-size:13.5px; color: var(--silver); margin-top:8px; }
.margin-block.quote p{ font-family: var(--disp); font-size:18px; color: var(--frost); font-style:normal; line-height:1.3; }
@media (max-width: 900px){ .essay{ grid-template-columns:1fr; } .marginalia{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:24px; } }

/* ============================================================
   COMMUNITY (bulletin + timetable)
   ============================================================ */
.bulletin{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(24px,4vw,56px); padding: clamp(56px,8vw,96px) var(--margin); }
.bulletin-feed{ display:flex; flex-direction:column; }
.bulletin-item{ padding: 20px 0; border-top:1px solid var(--line); }
.bulletin-item:last-child{ border-bottom:1px solid var(--line); }
.bulletin-item .stamp{ font-family: var(--mono); font-size:10px; color: var(--silver-dim); text-transform:uppercase; letter-spacing:.06em; }
.bulletin-item h4{ font-family: var(--disp); font-weight:600; font-size:16px; margin-top:6px; }
.bulletin-item p{ font-size:13px; color: var(--silver); margin-top:4px; }

.timetable{ border-top:1px solid var(--line-strong); }
.tt-row{ display:grid; grid-template-columns: 90px 1fr auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.tt-row .time{ font-family: var(--mono); font-size:14px; color: var(--gold); }
.tt-row .what h4{ font-family: var(--disp); font-weight:600; font-size:15px; }
.tt-row .what span{ font-size:12px; color: var(--silver); }
.tt-row .freq{ font-family: var(--mono); font-size:10.5px; color: var(--silver-dim); text-transform:uppercase; text-align:right; }
.community-guidelines{ margin-top: 32px; padding-top:24px; border-top:1px dashed var(--line-strong); }
.community-guidelines ul{ display:flex; flex-direction:column; gap:8px; }
.community-guidelines li{ font-size:13.5px; color: var(--silver); padding-left:16px; position:relative; }
.community-guidelines li::before{ content:'·'; position:absolute; left:0; color: var(--gold); }
@media (max-width:900px){ .bulletin{ grid-template-columns:1fr; } }

/* ============================================================
   RESPONSIBLE PLAY (full page — calm, low-motion)
   ============================================================ */
.rp-full{ padding: clamp(56px,8vw,96px) var(--margin); max-width: 1100px; }
.qa-list{ margin-top: 20px; }
.qa-item{ border-top:1px solid var(--line); padding: 22px 0; }
.qa-item:last-child{ border-bottom:1px solid var(--line); }
.qa-item h3{ font-family: var(--disp); font-weight:700; font-size:18px; margin-bottom:8px; }
.qa-item p{ font-size:14.5px; color: var(--silver); max-width:70ch; }
.habit-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:20px; }
.habit-card{ border:1px solid var(--line); border-radius:6px; padding:20px; }
.habit-card .n{ font-family: var(--mono); color: var(--silver-dim); font-size:11px; }
.habit-card h4{ font-family: var(--disp); font-weight:600; font-size:15.5px; margin:8px 0 6px; }
.habit-card p{ font-size:13px; color: var(--silver); }
.resource-list{ margin-top:18px; border-top:1px solid var(--line-strong); }
.resource-row{ display:grid; grid-template-columns: 1fr 3fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.resource-row a{ font-family: var(--disp); font-weight:700; font-size:16px; color: var(--cobalt-soft); }
.resource-row p{ font-size:13px; color: var(--silver); }
@media (max-width:900px){ .habit-grid{ grid-template-columns:1fr; } .resource-row{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: 4fr 8fr; gap: clamp(24px,4vw,64px); padding: clamp(56px,8vw,96px) var(--margin) clamp(80px,10vw,120px); }
.contact-facts{ border-top:1px solid var(--line-strong); }
.contact-fact{ padding:18px 0; border-bottom:1px solid var(--line); }
.contact-fact .k{ font-family: var(--mono); font-size:10.5px; color: var(--silver-dim); text-transform:uppercase; letter-spacing:.06em; }
.contact-fact .v{ font-size:14.5px; margin-top:4px; }
.contact-form .field textarea{
  width:100%; background: var(--panel); border:1px solid var(--line-strong); color: var(--frost);
  padding:12px 14px; border-radius:3px; font-family: var(--body); font-size:14px; min-height:140px; resize:vertical;
}
.contact-form .field textarea:focus{ border-color: var(--cobalt-soft); outline:none; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   LEGAL DOCUMENTS (privacy / terms / cookies)
   ============================================================ */
.legal-wrap{ display:grid; grid-template-columns: 3fr 9fr; gap: clamp(24px,4vw,56px); padding: clamp(56px,8vw,96px) var(--margin) clamp(80px,10vw,120px); }
.legal-toc{ position:sticky; top:110px; align-self:start; }
.legal-toc h5{ font-family: var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--silver-dim); margin-bottom:14px; }
.legal-toc a{ display:block; font-size:13px; color: var(--silver); padding:6px 0; border-left:2px solid transparent; padding-left:12px; }
.legal-toc a:hover{ color: var(--frost); border-color: var(--line-strong); }
.legal-body{ max-width: 70ch; }
.legal-updated{ font-family: var(--mono); font-size:11.5px; color: var(--silver-dim); margin-bottom: 32px; }
.legal-section{ padding-top: 30px; margin-top: 30px; border-top:1px solid var(--line); }
.legal-section:first-child{ padding-top:0; margin-top:0; border-top:none; }
.legal-section h2{ font-family: var(--disp); font-weight:700; font-size:20px; margin-bottom:12px; }
.legal-section p{ font-size:14.5px; color: var(--silver); margin-bottom:14px; }
.legal-section ul{ margin: 10px 0 14px 0; display:flex; flex-direction:column; gap:8px; }
.legal-section li{ font-size:14px; color: var(--silver); padding-left:16px; position:relative; }
.legal-section li::before{ content:'—'; position:absolute; left:0; color: var(--silver-dim); }
.legal-note{ margin-top: 40px; padding: 18px 20px; border:1px dashed var(--line-strong); border-radius:4px; font-size:12.5px; color: var(--silver-dim); }
@media (max-width:900px){ .legal-wrap{ grid-template-columns:1fr; } .legal-toc{ position:static; } }

/* ============================================================
   REWARDS (cosmetic shelf, threshold ladder)
   ============================================================ */
.reward-shelf{ padding: clamp(56px,8vw,96px) var(--margin) clamp(80px,10vw,120px); }
.shelf-row{
  display:grid; grid-template-columns: 120px 1fr 2fr auto; gap:20px; align-items:center;
  padding: 22px 0; border-top:1px solid var(--line);
}
.shelf-row:last-child{ border-bottom:1px solid var(--line); }
.shelf-row .threshold{ font-family: var(--mono); font-size:13px; color: var(--gold); }
.shelf-row .swatch{ width:100%; height:44px; border-radius:3px; border:1px solid var(--line-strong); }
.shelf-row h4{ font-family: var(--disp); font-weight:600; font-size:16px; }
.shelf-row p{ font-size:12.5px; color: var(--silver); margin-top:3px; }
.shelf-row .state{ font-family: var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--silver-dim); white-space:nowrap; }
@media (max-width:900px){ .shelf-row{ grid-template-columns: 70px 60px 1fr; } .shelf-row .state{ grid-column: 1 / -1; } }

/* ---------------------------------------------------------
   PHOTO IMAGERY — supplied reference photography, toned to
   sit inside the dark-glass palette rather than as raw stock.
   Every use pairs a dark gradient with the source photo so
   text stays legible and the mood stays consistent.
--------------------------------------------------------- */
.lobby-tile.tile-photo{
  background-image: linear-gradient(190deg, rgba(10,12,16,.25), rgba(10,12,16,.92)), url('assets/lounge-firepit.jpg');
  background-size: cover; background-position: center;
}
.lobby-tile.tile-photo:hover, .lobby-tile.tile-photo:focus-within{ background-image: linear-gradient(190deg, rgba(10,12,16,.12), rgba(10,12,16,.85)), url('assets/lounge-firepit.jpg'); }

.trophy.trophy-photo{
  background-image: linear-gradient(200deg, rgba(10,12,16,.2), rgba(10,12,16,.9)), url('assets/trophy-cards.jpg');
  background-size: cover; background-position: center 35%;
}

.category-banner{
  position: relative; height: clamp(120px,16vw,180px); border-radius:4px; overflow:hidden;
  margin-bottom: 20px; border: 1px solid var(--line-strong);
  display:flex; align-items:flex-end; padding: 16px 20px;
}
.category-banner::before{
  content:''; position:absolute; inset:-2px; z-index:0;
  background-size: cover; background-position: center;
  filter: saturate(.9) contrast(1.04) brightness(.9);
}
.category-banner::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(200deg, rgba(10,12,16,.05) 30%, rgba(10,12,16,.88));
}
.category-banner span{ position:relative; z-index:2; font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--frost); }
.banner-reels::before{ background-image: url('assets/slot-reels.jpg'); }
.banner-table::before{ background-image: url('assets/roulette-wheel.jpg'); }

.banner-duo{ display:flex; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.banner-duo .category-banner{ margin-bottom:0; flex:1 1 320px; }
.banner-duo .banner-gifts::before{ background-image: url('assets/chips-giftbox.jpg'); }
.banner-duo .banner-gifts{ flex-grow:1.6; }
.banner-duo .banner-gems::before{ background-image: url('assets/gems-cluster.jpg'); }

.page-banner-photo{
  height: clamp(160px,22vw,260px); margin: 0 var(--margin) clamp(40px,6vw,64px);
  border-radius:4px; overflow:hidden; position:relative; border:1px solid var(--line-strong);
  display:flex; align-items:flex-end; padding: 20px 26px;
}
.page-banner-photo::before{
  content:''; position:absolute; inset:-2px; z-index:0;
  background-image: url('assets/spade-coins.jpg'); background-size:cover; background-position:center;
  filter: saturate(.92) contrast(1.05) brightness(.88);
}
.page-banner-photo::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(200deg, rgba(10,12,16,.05) 25%, rgba(10,12,16,.85)); }
.page-banner-photo span{ position:relative; z-index:2; font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); }

@media (max-width:720px){ .page-banner-photo{ margin: 0 var(--margin) 32px; } }