:root { color-scheme: dark; --ink:#eff4ff; --muted:#a9b5d1; --panel:rgba(17,25,48,.78); --blue:#69b9ff; --violet:#a985ff; --mint:#75e1d5; }
* { box-sizing:border-box; }
html { min-width:320px; min-height:100%; background:#080c18; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 18% 5%, rgba(44,84,169,.34), transparent 31rem),radial-gradient(circle at 82% 88%, rgba(103,55,177,.28), transparent 28rem),#080c18; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(rgba(130,175,255,.22) 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(#000,transparent 75%); }
button { font:inherit; }
.game-shell { position:relative; width:min(100% - 32px, 730px); margin:0 auto; padding:clamp(40px,8vh,78px) 0 42px; }
.intro { text-align:center; margin-bottom:clamp(25px,5vh,42px); }.eyebrow { margin:0 0 11px; color:var(--mint); font-size:.7rem; font-weight:760; letter-spacing:.16em; text-transform:uppercase; }.eyebrow::before { content:""; display:inline-block; width:7px; height:7px; margin:0 8px 1px 0; border-radius:50%; background:var(--mint); box-shadow:0 0 14px var(--mint); }
h1,h2,p { margin-top:0; }h1 { margin-bottom:9px; font-size:clamp(2.6rem,9vw,4.55rem); line-height:.95; letter-spacing:-.065em; }h1 span { color:#b7bcff; text-shadow:0 0 35px rgba(128,132,255,.42); }.intro > p:last-child { margin:0; color:var(--muted); font-size:clamp(1rem,2.7vw,1.17rem); }
.game-card { position:relative; min-height:min(78vh,650px); display:grid; place-items:center; overflow:hidden; padding:clamp(20px,4vw,34px); border:1px solid rgba(149,179,255,.19); border-radius:26px; background:linear-gradient(145deg,rgba(25,40,76,.9),var(--panel)); box-shadow:0 24px 65px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04); }.game-card::before { content:""; position:absolute; top:-135px; right:-125px; width:280px; height:280px; border-radius:50%; background:#5c76e8; filter:blur(55px); opacity:.12; pointer-events:none; }
.start-screen,.result-screen { position:relative; z-index:1; display:grid; justify-items:center; gap:23px; text-align:center; }.start-screen p { max-width:30ch; margin:0; color:var(--muted); line-height:1.55; }.primary-button { min-width:176px; min-height:48px; padding:12px 23px; border:1px solid rgba(185,216,255,.54); border-radius:999px; color:#fff; cursor:pointer; font-weight:760; background:linear-gradient(115deg,#478ee9,#7767df); box-shadow:0 10px 26px rgba(58,111,220,.32); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }.primary-button:hover { transform:translateY(-2px); filter:brightness(1.09); box-shadow:0 14px 31px rgba(75,112,224,.44); }.primary-button:active { transform:translateY(0); }.primary-button:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
.play-screen { position:relative; z-index:1; width:min(100%,540px); }.live-accuracy { min-height:1.45em; margin:0 0 12px; color:var(--accuracy-color,#a9b5d1); font-size:clamp(1.2rem,3.8vw,1.5rem); font-weight:780; letter-spacing:-.035em; text-align:center; text-shadow:0 0 16px color-mix(in srgb,var(--accuracy-color,#a9b5d1) 48%,transparent); transition:color .18s ease,text-shadow .18s ease; }.canvas-wrap { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:1px solid rgba(133,193,255,.38); border-radius:18px; background:radial-gradient(circle at center,rgba(74,108,198,.16),transparent 47%),#0a1122; box-shadow:inset 0 0 43px rgba(67,143,255,.09),0 0 30px rgba(79,128,235,.12); }.canvas-wrap::before { content:""; position:absolute; inset:13%; border:1px solid rgba(147,185,255,.06); border-radius:50%; pointer-events:none; }.canvas-wrap::after { content:""; position:absolute; inset:30%; border:1px solid rgba(147,185,255,.06); border-radius:50%; pointer-events:none; }canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }.center-dot { position:absolute; z-index:2; top:50%; left:50%; width:10px; height:10px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); background:#d2f8ff; box-shadow:0 0 9px #92e9ff,0 0 24px #65bfff; }.drawing-status { margin:15px 0 0; color:var(--muted); font-size:.9rem; text-align:center; }
.result-label { margin:0 0 -16px; color:var(--muted); font-size:.79rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.score-value { margin:0; color:#d1f7ff; font-size:clamp(4rem,13vw,6.2rem); font-weight:820; letter-spacing:-.08em; line-height:1; text-shadow:0 0 28px rgba(94,197,255,.38); }.score-message { margin:0; font-size:1.18rem; font-weight:720; }.record-value { margin:-10px 0 2px; color:var(--mint); font-size:.92rem; }
[hidden] { display:none !important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) { .game-shell { width:min(100% - 24px,730px); padding-top:38px; }.game-card { min-height:570px; padding:18px; border-radius:21px; }.canvas-wrap { border-radius:14px; }.start-screen,.result-screen { gap:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }