:root { --bg:#131929; --text:#f3f6fc; --muted:#aab8d1; --line:#2b3d61; --brand:#0A46BF; --brand-light:#8fb5ff; --red:#ef4e58; }
* { 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:490px; }.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(3.65rem,8.5vw,7.4rem); } h1 span { color:#f05a62; }.game-header > p:last-of-type { max-width:350px; margin:24px 0 0; color:var(--muted); font-size:1rem; line-height:1.7; }
.control-guide { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin-top:28px; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:.8rem; }.control-guide span { color:#ffc2c6; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.control-guide strong { color:#dce8ff; font-weight:600; }
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:#07101d; box-shadow:0 22px 65px rgba(0,0,0,.34),0 0 0 8px rgba(10,70,191,.07); aspect-ratio:9 / 16; }.game-frame::before { content:""; position:absolute; inset:8px; z-index:5; pointer-events:none; border:1px solid rgba(185,210,255,.13); border-radius:7px; } canvas { display:block; width:100%; height:100%; touch-action:none; cursor:pointer; }
.game-hud { position:absolute; top:25px; right:24px; left:24px; z-index:6; display:flex; align-items:flex-start; justify-content:space-between; color:#e2edff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 2px 8px #020712; }.game-hud > div > span { display:block; color:rgba(226,237,255,.72); font-size:.59rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.game-hud strong { display:block; margin-top:2px; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.55rem; letter-spacing:-.05em; }.light-meter { width:104px; text-align:right; }.light-meter i { display:block; overflow:hidden; width:100%; height:6px; margin-top:9px; border:1px solid rgba(212,232,255,.42); border-radius:10px; background:rgba(5,12,24,.55); }.light-meter b { display:block; width:100%; height:100%; background:linear-gradient(90deg,#8fb5ff,#f5fbff); transition:width .1s linear,background .15s ease; }
.warning { position:absolute; top:91px; left:0; z-index:6; width:100%; color:#ff9299; opacity:0; text-align:center; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.66rem; font-weight:800; letter-spacing:.15em; transition:opacity .15s ease; }.warning.is-visible { opacity:1; animation:warning-pulse .65s infinite alternate; } @keyframes warning-pulse { to { text-shadow:0 0 14px rgba(239,78,88,.8); } }
.game-overlay { position:absolute; right:24px; bottom:26px; left:24px; z-index:7; padding:20px; border:1px solid rgba(183,209,255,.26); border-radius:8px; background:rgba(10,20,38,.8); 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:#ff9ca3; 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.7rem; }.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 #c83f4a; border-radius:5px; background:#c83f4a; cursor:pointer; font-size:.84rem; font-weight:750; transition:background .18s ease,transform .18s ease,box-shadow .18s ease; } #play-button:hover { background:#e1525c; box-shadow:0 9px 20px rgba(239,78,88,.28); 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:220px; text-align:right; }.game-footer strong { color:#ffafb4; 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-of-type { 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; } }