styles.css

:root { color-scheme: dark; --ink: #f9f7f0; --muted: #aaa79b; --surface: #1e211d; --orange: #ff8d22; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #30392d 0%, #121411 58%); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.game-shell { width: min(100%, 1060px); padding: 28px 24px 18px; }
.game-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.eyebrow { color: var(--orange); letter-spacing: .19em; font-size: .68rem; font-weight: 800; margin: 0 0 6px; }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: .9; letter-spacing: -.06em; margin: 0; } h1 span { color: var(--orange); }
.scoreboard { display: flex; gap: 10px; }.scoreboard div { background: #292d27; border: 1px solid #484d43; border-radius: 10px; min-width: 92px; padding: 9px 14px; text-align: center; }.scoreboard span { display: block; color: var(--muted); font-size: .63rem; font-weight: bold; letter-spacing: .13em; }.scoreboard strong { font-size: 1.55rem; }
.game-area { position: relative; overflow: hidden; border: 1px solid #4d5548; border-radius: 18px; background: #819b73; box-shadow: 0 24px 70px #0008; }
video { display: none; }
canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.start-panel { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 30px; text-align: center; background: #121411b8; }.start-panel.hidden { display: none; }.panel-label { color: var(--orange); font-size: .72rem; letter-spacing: .16em; font-weight: bold; margin: 0; }.start-panel h2 { font-size: clamp(1.7rem, 4vw, 3rem); margin: 8px 0; }.start-panel p:not(.panel-label) { max-width: 440px; margin: 0 0 22px; color: #dcdbd4; } button { border: 0; border-radius: 8px; background: var(--orange); color: #17130e; cursor: pointer; font-size: .82rem; font-weight: 900; letter-spacing: .08em; padding: 14px 22px; } button:hover, button:focus-visible { background: #ffae64; outline: 3px solid #fff; outline-offset: 3px; }
.controls { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); font-size: .8rem; padding: 16px 4px 4px; }.color-picker { display: flex; align-items: center; gap: 12px; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }.color-buttons { display: flex; gap: 8px; }.color-buttons button { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 50%; padding: 0; }.color-buttons button.selected { border-color: white; box-shadow: 0 0 0 2px #20231e; } kbd { color: var(--ink); background: #30342e; border: 1px solid #565b52; border-radius: 4px; padding: 2px 5px; } footer { color: #89877d; font-size: .72rem; letter-spacing: .04em; padding-bottom: 22px; text-align: center; } footer strong { color: var(--orange); }
@media (max-width: 600px) { .game-shell { padding: 20px 12px 10px; }.game-header { align-items: start; }.scoreboard div { min-width: 66px; padding: 7px 9px; }.controls { align-items: flex-start; flex-direction: column; }.controls p { margin: 0; } }