/* =============================================================================
   Game Corner — shared house style. Tokens mirror the portfolio's styles.css
   so the arcade feels like the same universe even though it's its own repo.
   ============================================================================= */
:root{
  --bg:#0a0b0d; --bg-1:#101216; --bg-2:#16181d;
  --line:#22252c; --line-2:#2c303a;
  --text:#e7e5df; --muted:#8b909a; --faint:#565b64;
  --accent:#f5b841; --accent-ink:#0a0b0d; --accent-dim:rgba(245,184,65,.14);
  --maxw:1280px;                      /* match the portfolio */
  --gutter:clamp(22px,6vw,42px);      /* match the portfolio's notch-safe gutter */
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="light"]{
  --bg:#eceae3; --bg-1:#f4f2ec; --bg-2:#e3e1d9;
  --line:#d6d3ca; --line-2:#c7c4ba;
  --text:#17181b; --muted:#5b5f68; --faint:#8d9099;
  --accent:#a86a00; --accent-ink:#fff; --accent-dim:rgba(168,106,0,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  transition:background .5s var(--ease), color .5s var(--ease);
}
/* faint technical grid, like the portfolio */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
a{color:var(--accent); text-decoration:none}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:max(var(--gutter),env(safe-area-inset-left)); padding-right:max(var(--gutter),env(safe-area-inset-right))}

/* ---- top bar ---- */
.bar{ border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(8px) }
/* the bar (and footer) run edge-to-edge with just the gutter, like the portfolio nav —
   content stays in the centered 1280 wrap, the chrome frames the full viewport */
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; max-width:none }
.brand{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:var(--text) }
.brand b{ color:var(--accent); font-weight:500 }
.bar-tools{ display:flex; align-items:center; gap:14px }
.bar-tools a,.bar-tools button{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); background:none; border:0; cursor:pointer; transition:color .25s }
.bar-tools a:hover,.bar-tools button:hover{ color:var(--accent) }

/* ---- generic bits ---- */
.eyebrow{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:12px; margin:0 0 18px }
.eyebrow .line{ flex:1; height:1px; background:var(--line) }
.eyebrow .tag{ color:var(--faint); letter-spacing:.1em }

.btn{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.03em; color:var(--text);
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:8px; padding:10px 16px;
  cursor:pointer; transition:all .2s var(--ease) }
.btn:hover{ border-color:var(--accent); color:var(--accent) }
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.btn.primary:hover{ filter:brightness(1.06); color:var(--accent-ink) }

.seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden }
.seg button{ font-family:var(--ff-mono); font-size:12px; color:var(--muted); background:transparent;
  border:0; padding:8px 14px; cursor:pointer; transition:all .2s }
.seg button+button{ border-left:1px solid var(--line-2) }
.seg button.on{ background:var(--accent-dim); color:var(--accent) }

.pill{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-2); border-radius:100px; padding:5px 12px }

/* ---- game shell (shared by every game page) ---- */
.game{ padding-block:clamp(26px,5vw,52px) 60px }
.game h1{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2rem,6vw,3.4rem); margin:0 }
.game h1 .dot{ color:var(--accent) }
.game .sub{ color:var(--muted); margin:12px 0 0; max-width:60ch }
.hud-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:26px 0 20px }
.stat{ font-family:var(--ff-mono); font-size:12px; color:var(--muted) }
.stat b{ color:var(--accent); font-weight:500; font-size:15px; margin-left:6px }
.board-wrap{ display:flex; justify-content:center; padding:8px 0 }
.hint{ font-family:var(--ff-mono); font-size:12px; color:var(--faint); text-align:center; margin-top:20px; line-height:1.7 }
.hint kbd{ font-family:var(--ff-mono); color:var(--text); border:1px solid var(--line-2);
  border-bottom-width:2px; border-radius:5px; padding:1px 7px; font-size:11px; margin:0 1px }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); margin-top:50px; padding:26px 0 46px }
footer .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:none }
footer p,footer a{ font-family:var(--ff-mono); font-size:12px; color:var(--faint) }
footer a:hover{ color:var(--accent) }

@media (max-width:560px){ .bar .wrap{ height:52px } }