:root { color-scheme: dark; font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: #f8f8ff; background: radial-gradient(circle at 50% -20%, #4159c9 0, #121a52 42%, #070b29 100%); }
button { font: inherit; }
.game-shell { width: min(1080px, 100%); min-height: 100vh; margin: auto; padding: 18px 20px 40px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 15px; }
.brand { text-align: center; font-size: clamp(1.15rem, 3vw, 1.85rem); font-weight: 1000; letter-spacing: .12em; text-shadow: 0 3px 0 #283272; }
.brand span { color: #ffdd54; }
.home-link, .sound-button { border: 1px solid #7b91ff; border-radius: 999px; color: #edf0ff; background: rgba(15, 21, 75, .72); padding: .55rem .8rem; text-decoration: none; font-weight: 800; width: max-content; }
.sound-button { justify-self: end; cursor: pointer; }
.game-card { overflow: hidden; border: 2px solid rgba(169, 184, 255, .7); border-radius: 24px; background: #19245e; box-shadow: 0 20px 55px rgba(0, 0, 0, .4); }
.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .12); }
.hud > div { min-width: 0; padding: 12px 13px; background: rgba(12, 18, 62, .93); text-align: center; }
small { display: block; color: #b8c4ff; font-weight: 900; font-size: .7rem; letter-spacing: .12em; }
strong { display: block; margin-top: 3px; font-size: clamp(1.05rem, 3.2vw, 1.55rem); font-variant-numeric: tabular-nums; }
.canvas-wrap { position: relative; aspect-ratio: 16 / 9; min-height: 340px; background: #27368a; touch-action: manipulation; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.message { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 90%; text-align: center; pointer-events: none; font-size: clamp(1.3rem, 4vw, 2.5rem); font-weight: 1000; color: #fff17e; text-shadow: 0 3px 0 #b84784, 0 0 18px #fff17e; transition: opacity .2s; }
.pop-button { position: absolute; right: 4.5%; bottom: 6%; width: 96px; height: 96px; border: 5px solid #ffe985; border-radius: 50%; color: white; background: #f04b91; box-shadow: 0 6px 0 #a92262, 0 0 22px #fdb4d4; font-size: 1.35rem; font-weight: 1000; letter-spacing: .08em; cursor: pointer; }
.pop-button:active, .play-again:active { transform: translateY(4px); box-shadow: none; }
.instructions { margin: 0; padding: 14px 18px; color: #d8ddff; text-align: center; font-size: .94rem; }
.results { width: min(470px, calc(100% - 32px)); position: fixed; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 28px; border: 2px solid #ffe879; border-radius: 24px; color: #111940; background: #fff7ce; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.eyebrow { margin: 0; color: #e34585; font-size: .75rem; font-weight: 1000; letter-spacing: .16em; }
.results h1 { margin: .25rem 0; font-size: clamp(2rem, 8vw, 3rem); }
.result-score { margin: .5rem 0; color: #e34585; font-size: 1.6rem; font-weight: 1000; }
.result-stats { margin: 0 0 1.2rem; color: #48528b; font-weight: 800; }
.play-again { border: 0; border-radius: 999px; padding: .8rem 1.35rem; color: white; background: #e34585; box-shadow: 0 4px 0 #a52360; font-weight: 1000; cursor: pointer; }
@media (min-width: 760px) { .pop-button { display: none; } }
@media (max-width: 560px) { .game-shell { padding: 10px 10px 24px; } .topbar { grid-template-columns: 1fr auto; } .brand { grid-column: 1 / -1; grid-row: 1; } .home-link { grid-row: 2; } .sound-button { grid-row: 2; } .hud > div { padding: 9px 4px; } .canvas-wrap { min-height: 390px; aspect-ratio: auto; } .instructions { font-size: .82rem; } }