:root { --ink:#f4f1e8; --acid:#e7ff57; --muted:#9b9d96; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#0b0d0c; font-family:Arial, Helvetica, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(rgba(255,255,255,.08) .7px,transparent .7px); background-size:5px 5px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
main { width:min(1120px, calc(100% - 40px)); margin:0 auto; min-height:100vh; position:relative; }
nav { height:88px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-size:20px; font-weight:800; text-decoration:none; letter-spacing:-.7px; }
.brand span { color:var(--acid); }
.status { color:var(--muted); font:600 11px/1 monospace; letter-spacing:1.3px; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 5px rgba(231,255,87,.08); animation:pulse 2s infinite; }
@keyframes pulse { 50% { opacity:.45; } }
.hero { padding:92px 0 68px; }
.eyebrow { margin:0 0 26px; color:var(--acid); font:700 11px/1 monospace; letter-spacing:2.2px; text-transform:uppercase; }
h1 { margin:0; max-width:850px; font-size:clamp(58px, 9.7vw, 126px); line-height:.84; letter-spacing:-.075em; font-weight:900; }
h1 span { color:var(--ink); display:inline-block; }
h1 em { color:var(--acid); font-style:normal; }
.intro { margin:42px 0 0; color:var(--muted); font-size:clamp(15px,2vw,18px); line-height:1.65; }
.game-card { border:1px solid var(--line); background:#111412; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.arcade { margin-top:0; }
.arcade-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
.arcade-heading h2 { margin:7px 0 0; font-size:24px; letter-spacing:-1px; }
.arcade-heading > span { color:#71746e; font:600 9px/1 monospace; letter-spacing:1px; }
.game-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px; }
.game-picker button { min-width:0; height:92px; padding:12px; border:1px solid var(--line); background:#111412; color:#777b74; cursor:pointer; display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; text-align:left; transition:.18s ease; }
.game-picker button:hover { border-color:rgba(231,255,87,.4); color:var(--ink); transform:translateY(-2px); }
.game-picker button.active { border-color:var(--acid); background:var(--acid); color:#0b0d0c; }
.game-picker small { font:600 9px/1 monospace; }
.game-picker b { font-size:19px; line-height:1; }
.game-picker span { grid-column:1/3; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selected-game .game-card { box-shadow:none; }
.game-top { min-height:95px; padding:22px 27px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.game-label { color:var(--acid); font:700 9px/1 monospace; letter-spacing:1.7px; }
.game-top h2 { margin:7px 0 0; font-size:18px; letter-spacing:-.4px; }
.scores { display:flex; gap:30px; font:600 9px/1.5 monospace; color:var(--muted); }
.scores span { display:flex; flex-direction:column; text-align:right; gap:3px; }
.scores b { color:var(--ink); font-size:15px; letter-spacing:1.2px; }
.game-stage { height:220px; position:relative; overflow:hidden; cursor:pointer; touch-action:manipulation; background:linear-gradient(180deg,rgba(231,255,87,.018),transparent); }
canvas { display:block; width:100%; height:220px; }
.game-prompt { position:absolute; inset:0; margin:auto; width:max-content; height:max-content; padding:14px 20px; border:1px solid rgba(231,255,87,.35); color:var(--ink); background:rgba(11,13,12,.92); cursor:pointer; font-family:inherit; }
.game-prompt b,.game-prompt span { display:block; }
.game-prompt b { font:800 11px/1 monospace; letter-spacing:1.2px; color:var(--acid); }
.game-prompt span { margin-top:7px; color:var(--muted); font-size:11px; }
.game-bottom { height:47px; padding:0 27px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#71746e; font:600 9px/1 monospace; letter-spacing:1px; }
.game-bottom span:first-child { color:var(--ink); }
.mini-card .mini-stage { height:260px; position:relative; }
.mini-score { color:var(--acid); font:700 13px/1 monospace; letter-spacing:1px; }
.reaction-pad { width:100%; height:100%; border:0; background:#171a18; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.reaction-pad.go { background:var(--acid); color:#0b0d0c; }
.reaction-pad.early { background:#3b1919; }
.reaction-pad b { font:900 clamp(24px,5vw,48px)/1 monospace; letter-spacing:-2px; }
.reaction-pad span { color:inherit; opacity:.65; font-size:11px; }
.memory-wrap { height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.memory-grid { display:grid; grid-template-columns:repeat(4,58px); gap:9px; }
.memory-grid button { width:58px; height:58px; border:1px solid var(--line); background:#1a1d1b; color:#62665f; font:800 22px/1 monospace; cursor:pointer; }
.memory-grid button.shown { color:#0b0d0c; background:var(--acid); border-color:var(--acid); }
.mini-action { border:1px solid var(--acid); background:var(--acid); color:#0b0d0c; padding:14px 18px; font:800 11px/1 monospace; letter-spacing:1px; cursor:pointer; }
.memory-wrap > .mini-action { position:absolute; bottom:12px; }
.target-field { position:absolute; inset:0; overflow:hidden; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; }
.target-dot { position:absolute; width:42px; height:42px; margin:-21px; border:8px solid var(--acid); border-radius:50%; background:#0b0d0c; cursor:crosshair; box-shadow:0 0 0 1px #0b0d0c,0 0 24px rgba(231,255,87,.2); }
.target-dot::after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--acid); }
.centered { position:absolute; inset:0; margin:auto; width:max-content; height:max-content; }
.color-game { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; }
.color-game p { margin:0; font:900 clamp(44px,8vw,76px)/1 monospace; letter-spacing:-4px; }
.color-game div { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.color-game button { border:1px solid var(--chip); border-left-width:7px; background:#171a18; color:var(--ink); padding:11px 14px; font:700 10px/1 monospace; cursor:pointer; }
footer { padding:50px 0 36px; color:#71746e; font-size:11px; display:flex; justify-content:space-between; }
footer p { margin:0; } footer a { color:#9b9d96; text-decoration:none; } footer a:hover { color:var(--acid); }
@media (max-width:640px) {
  main { width:min(100% - 24px,1120px); }
  nav { height:70px; }
  .status { font-size:9px; }
  .hero { padding:68px 0 48px; }
  h1 { font-size:clamp(52px,19vw,84px); line-height:.88; }
  .intro br { display:none; }
  .game-top { padding:18px; }
  .game-picker { grid-template-columns:repeat(5,78px); overflow-x:auto; padding-bottom:6px; }
  .game-picker button { height:82px; }
  .arcade-heading > span { display:none; }
  .scores { gap:16px; }
  .game-bottom { padding:0 18px; }
  footer { padding-top:36px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; } }