:root { --bg:#131929; --text:#f3f6fc; --muted:#aab8d1; --line:#2b3d61; --brand:#0A46BF; --brand-light:#8fb5ff; }
* { 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(10,70,191,.27),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:.22; background-image:linear-gradient(rgba(157,189,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(157,189,255,.045) 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-light); 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-light); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"Space Grotesk",Inter,sans-serif; letter-spacing:-.05em; line-height:.95; } h1 { margin-top:16px; font-size:clamp(4rem,9vw,7.8rem); } h1 span { color:var(--brand-light); }
.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:#0e1525; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82em; }
.game-frame { position:relative; overflow:hidden; width:100%; border:1px solid rgba(143,181,255,.36); border-radius:12px; background:#0d172a; box-shadow:0 22px 65px rgba(0,0,0,.3),0 0 0 8px rgba(10,70,191,.07); aspect-ratio:9 / 16; }
.game-frame::before { content:""; position:absolute; inset:8px; z-index:3; pointer-events:none; border:1px solid rgba(185,210,255,.13); border-radius:7px; } canvas { display:block; width:100%; height:100%; touch-action:manipulation; cursor:pointer; }
.game-hud { position:absolute; top:26px; left:0; z-index:4; width:100%; color:#dbe8ff; text-align:center; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 2px 8px #071124; }.game-hud span { display:block; color:rgba(219,232,255,.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; }
.game-overlay { position:absolute; right:24px; bottom:26px; left:24px; z-index:5; padding:20px; border:1px solid rgba(183,209,255,.26); border-radius:8px; background:rgba(10,20,38,.78); box-shadow:0 15px 35px rgba(0,0,0,.22); backdrop-filter:blur(12px); }.game-overlay.is-hidden { display:none; }.overlay-kicker { margin:0; color:var(--brand-light); 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:#fff; 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:#1455d0; box-shadow:0 9px 20px rgba(10,70,191,.3); transform:translateY(-1px); } #play-button:focus-visible,.back-link:focus-visible,canvas:focus-visible { outline:3px solid var(--brand-light); 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-light); 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; } }