:root {
    color-scheme: dark;
    --bg: #07131d;
    --surface: #0d1d2a;
    --raised: #13293a;
    --ink: #edfbff;
    --muted: #8cabb9;
    --line: #284b5e;
    --accent: #65ffcf;
    --accent-strong: #15cda0;
    --accent-ink: #031b15;
    --cyan: #59dcff;
    --violet: #a983ff;
    --gold: #ffdb67;
    --danger: #ff7188;
    --grid: rgba(101, 255, 207, .055);
    --shadow: 0 24px 70px rgba(0, 0, 0, .4);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #edf7f8;
    --surface: #fbfeff;
    --raised: #e2f0f2;
    --ink: #102b34;
    --muted: #587681;
    --line: #b1ced3;
    --accent: #008b6d;
    --accent-strong: #00775e;
    --accent-ink: #f5fffc;
    --cyan: #087f9f;
    --violet: #7045d1;
    --gold: #bd7800;
    --danger: #d53b56;
    --grid: rgba(0, 111, 87, .06);
    --shadow: 0 24px 70px rgba(33, 80, 88, .14);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 31rem), radial-gradient(circle at 95% 56%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 35rem), var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.arcade-shell { width: min(100% - 32px, 880px); margin: 0 auto; padding: 24px 0 32px; }
.site-header, .brand, .game-heading, .score-strip, .game-actions, footer { display: flex; align-items: center; }
.site-header, .game-heading, footer { justify-content: space-between; }
.site-header { margin-bottom: 22px; }
.brand { gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-weight: 900; box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .06em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .64rem; letter-spacing: .13em; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; }
.header-controls { display: flex; align-items: center; gap: 8px; }
.sound-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sound-toggle[aria-pressed="false"] .sound-wave, .sound-toggle[aria-pressed="true"] .sound-slash { display: none; }
.game-card { padding: clamp(18px, 4vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.game-heading { gap: 16px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: .69rem; font-weight: 900; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.65rem); letter-spacing: -.055em; }
.status-light { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.status-light span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.score-strip { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.score-strip div { flex: 1; padding: 11px 8px; text-align: center; }
.score-strip div + div { border-left: 1px solid var(--line); }
.score-strip span, .score-strip strong { display: block; }
.score-strip span { margin-bottom: 3px; color: var(--muted); font-size: .64rem; letter-spacing: .1em; }
.score-strip strong { color: var(--accent); font-size: clamp(.84rem, 3vw, 1.18rem); }
.canvas-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 8%, transparent), inset 0 0 40px rgba(0, 0, 0, .24); }
#game-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; cursor: pointer; }
.game-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 22px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent), color-mix(in srgb, var(--bg) 86%, transparent)); backdrop-filter: blur(1px); }
.overlay-portrait { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; }
#bird-preview { display: block; width: 110px; height: 77px; flex: 0 0 110px; pointer-events: none; }
.game-overlay[hidden] { display: none; }
.overlay-kicker { margin: 0 0 8px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .22em; }
.game-overlay h2 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.4rem); }
.game-overlay p:not(.overlay-kicker) { max-width: 38ch; margin: 12px 0 20px; color: var(--muted); font-family: system-ui, sans-serif; line-height: 1.55; }
.primary-button, .secondary-button { border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: transform 90ms ease, background 120ms ease; }
.primary-button:active, .secondary-button:active { transform: translateY(2px); }
.primary-button { padding: 12px 22px; border-color: var(--accent); color: var(--accent-ink); background: var(--accent); font-weight: 900; }
.game-actions { gap: 10px; margin-top: 14px; }
.secondary-button { flex: 1; padding: 11px 14px; color: var(--ink); background: var(--raised); }
.secondary-button:disabled { cursor: not-allowed; opacity: .45; }
.instructions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; color: var(--muted); font-size: .67rem; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--ink); background: var(--raised); font: inherit; }
footer { padding: 20px 4px 0; }
footer a { color: var(--accent); font-size: .65rem; letter-spacing: .09em; text-decoration: none; }
.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 (hover: hover) {
    .icon-button:hover, .secondary-button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--raised) 80%, var(--accent)); }
    .primary-button:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
}

@media (max-width: 520px) {
    .arcade-shell { width: min(100% - 20px, 880px); padding-top: 14px; }
    .brand small { display: none; }
    .game-card { border-radius: 18px; }
    .score-strip div { padding-inline: 4px; }
    .score-strip span { font-size: .56rem; }
    .instructions { gap: 7px 12px; }
    .game-overlay { padding: 14px; }
    .game-overlay h2 { font-size: 1.25rem; }
    .game-overlay p:not(.overlay-kicker) { margin: 5px 0 12px; font-size: .78rem; line-height: 1.45; }
    .overlay-kicker { margin-bottom: 2px; font-size: .62rem; }
    #bird-preview { width: 84px; height: 59px; flex-basis: 84px; }
    .game-overlay .primary-button { padding: 9px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}