:root {
  --bg:#0b0b0c;
  --surface:#141416;
  --surface-2:#1b1b1e;
  --text:#f4f1ea;
  --muted:#b4aea2;
  --faint:#8d877c;
  --line:#2d2a25;
  --brand:#e8a33d;
  --brand-light:#f0bd70;
  --brand-ink:#1a1206;
  --cool:#7fd6c8;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:radial-gradient(680px 430px at 88% 0,rgba(232,163,61,.10),transparent 70%),radial-gradient(520px 380px at 6% 92%,rgba(127,214,200,.07),transparent 70%),var(--bg); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.32; background-image:linear-gradient(rgba(244,241,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
.game-page { position:relative; z-index:1; width:min(100% - 40px,1040px); margin:0 auto; padding:30px 0 58px; }
.back-link { display:inline-flex; align-items:center; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:650; transition:color .18s ease,transform .18s ease; }
.back-link:hover { color:var(--brand); transform:translateX(-3px); }
.game-shell { display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,360px); gap:clamp(34px,7vw,100px); align-items:center; min-height:calc(100vh - 118px); }
.game-header { max-width:480px; }
.eyebrow { margin:0; color:var(--brand); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
h1,h2 { margin:0; line-height:.95; }
h1 { margin-top:16px; font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:clamp(4rem,9vw,7.8rem); letter-spacing:-.035em; }
h1 span { color:var(--brand); }
h2 { font-family:"Space Grotesk",Inter,sans-serif; letter-spacing:-.05em; }
.game-header > p:last-child { max-width:330px; margin:24px 0 0; color:var(--muted); font-size:1rem; line-height:1.7; }
kbd { display:inline-block; padding:1px 5px; color:var(--text); border:1px solid var(--line); border-radius:3px; background:var(--surface-2); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82em; }
.game-frame { position:relative; overflow:hidden; width:100%; border:1px solid rgba(232,163,61,.30); border-radius:12px; background:#0d0d0e; box-shadow:0 22px 65px rgba(0,0,0,.45),0 0 0 8px rgba(232,163,61,.05); user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; aspect-ratio:9 / 16; }
.game-frame::before { content:""; position:absolute; inset:8px; z-index:3; pointer-events:none; border:1px solid rgba(244,241,234,.13); border-radius:7px; }
canvas { display:block; width:100%; height:100%; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; cursor:pointer; }
.audio-toggle { position:absolute; top:17px; left:17px; z-index:6; min-height:29px; padding:0 8px; color:#f4f1ea; border:1px solid rgba(244,241,234,.28); border-radius:4px; background:rgba(11,11,12,.55); cursor:pointer; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.62rem; font-weight:700; letter-spacing:.04em; }
.audio-toggle:hover { border-color:var(--brand); background:rgba(232,163,61,.18); }
.audio-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.game-hud { position:absolute; top:26px; left:0; z-index:4; width:100%; color:#f4f1ea; text-align:center; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 2px 8px #000; }
.game-hud span { display:block; color:rgba(244,241,234,.76); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.game-hud strong { display:block; margin-top:1px; font-family:"Space Grotesk",Inter,sans-serif; font-size:2.15rem; letter-spacing:-.05em; }
.flow-message { position:absolute; top:98px; left:0; z-index:5; width:100%; margin:0; color:#f4f1ea; opacity:0; text-align:center; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-shadow:0 2px 8px #000; transform:translateY(6px); transition:opacity .16s ease,transform .16s ease; }
.flow-message.is-visible { opacity:1; transform:translateY(0); }
.game-overlay { position:absolute; right:24px; bottom:26px; left:24px; z-index:5; padding:20px; border:1px solid rgba(232,163,61,.22); border-radius:8px; background:rgba(17,17,18,.84); box-shadow:0 15px 35px rgba(0,0,0,.3); backdrop-filter:blur(12px); }
.game-overlay.is-hidden { display:none; }
.overlay-kicker { margin:0; color:var(--brand); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.game-overlay h2 { margin-top:7px; font-size:1.75rem; }
.game-overlay > p:not(.overlay-kicker) { margin:8px 0 16px; color:var(--muted); font-size:.84rem; line-height:1.55; }
#play-button { width:100%; min-height:43px; padding:0 14px; color:var(--brand-ink); border:1px solid var(--brand); border-radius:5px; background:var(--brand); cursor:pointer; font-size:.84rem; font-weight:750; transition:background .18s ease,transform .18s ease,box-shadow .18s ease; }
#play-button:hover { background:var(--brand-light); box-shadow:0 9px 20px rgba(232,163,61,.25); transform:translateY(-1px); }
.report-button { width:100%; min-height:38px; margin-top:9px; padding:0 12px; color:var(--brand); border:1px solid rgba(232,163,61,.38); border-radius:5px; background:rgba(232,163,61,.08); cursor:pointer; font-size:.75rem; font-weight:700; transition:background .18s ease,border-color .18s ease; }
.report-button:hover { border-color:var(--brand); background:rgba(232,163,61,.16); }
.report-button[hidden] { display:none; }
#play-button:focus-visible,.report-button:focus-visible,.back-link:focus-visible,canvas:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
.game-footer { grid-column:2; display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:.74rem; line-height:1.5; }
.game-footer p { margin:0; }
.game-footer p:last-child { max-width:210px; text-align:right; }
.game-footer strong { color:var(--brand); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
@media (max-width:760px) {
  .game-page { width:min(100% - 32px,430px); padding-top:22px; }
  .game-shell { grid-template-columns:1fr; gap:30px; min-height:0; padding-top:53px; }
  .game-header { max-width:360px; }
  .game-header > p:last-child { margin-top:18px; }
  .game-footer { grid-column:1; margin-top:-17px; }
  .game-frame { max-height:650px; }
  .game-overlay { right:16px; bottom:18px; left:16px; padding:17px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }