:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #3857a3 0, #172454 40%, #090f2a 100%); color: #f7f3e9; }
.game-shell { width: min(100%, 760px); margin: auto; padding: 14px 16px 20px; }
header { text-align: center; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1; color: #ffe39a; text-shadow: 0 3px #523d80; }
.eyebrow { color: #aad9ff; font-size: .78rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 8px; }
.intro { max-width: 600px; margin: 8px auto 12px; color: #dbe6ff; }
.hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px auto; }
.hud div, .help, .board-panel { background: #101a41cc; border: 1px solid #7089d4; box-shadow: 0 8px 25px #0005; border-radius: 16px; }
.hud div { padding: 9px 12px; text-align: center; }
.hud span { display: block; color: #b8c7fa; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.hud strong { display: block; color: #fff0af; font-size: 1.45rem; }
.hud .next-info { display: grid; place-items: center; align-content: center; gap: 4px; }
.board-panel { position: relative; display: grid; place-items: center; overflow: hidden; background: #0b1336; }
canvas { display: block; width: min(100%, 720px, calc((100vh - 225px) * 1.125)); height: auto; touch-action: none; cursor: crosshair; }
.message { position: absolute; inset: 35% 8% auto; pointer-events: none; text-align: center; font-size: clamp(1.25rem, 4vw, 2rem); font-weight: 900; color: #fff2b4; text-shadow: 0 3px 6px #000; opacity: 0; transform: translateY(8px); transition: .25s; }
.message.show { opacity: 1; transform: none; }
.restart { position: absolute; right: 12px; bottom: 12px; border: 0; border-radius: 10px; background: #f3b94d; color: #35224b; font: inherit; font-weight: 800; padding: 10px 13px; cursor: pointer; }
.restart:hover { background: #ffe08a; }
.help { margin-top: 14px; padding: 14px; color: #dbe6ff; }
.help p { margin: 0; line-height: 1.45; }
.next-bubble { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff9; box-shadow: inset -4px -5px 6px #0004, inset 4px 4px 5px #fff8; }
@media (max-width: 560px) { .game-shell { padding: 16px 10px 24px; } .intro { font-size: .92rem; } .hud { gap: 6px; } .hud div { padding: 7px 3px; } .hud strong { font-size: 1.2rem; } .help { font-size: .9rem; } }
@media (max-height: 960px) and (min-width: 561px) { .help { display: none; } }
@media (prefers-reduced-motion: reduce) { .message { transition: none; } }