:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #35271f; background: #241a15; --orange: #b63b08; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid #2580bc; outline-offset: 3px; }
[hidden] { display: none !important; }
.game-shell { height: 100vh; height: 100dvh; max-width: 900px; margin: auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 10px; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff4e7; min-height: 44px; }
.menu-link { color: #ffe2b5; font-size: .9rem; padding: 12px 0; white-space: nowrap; }
.brand { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-align: center; }
.brand span { display: block; font-size: 1rem; letter-spacing: -.02em; margin-top: 2px; }
.quiet-button { border: 1px solid #766250; background: #3b2c22; color: #fff4e7; border-radius: 10px; min-height: 44px; padding: 8px 15px; }
.play-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; color: #fff4e7; padding: 2px 8px 5px; }
.stat-label { display: block; font-size: .65rem; color: #e1c5a7; }
.scoreboard strong { display: block; font-size: 1.65rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.round-stat { text-align: center; }
.best-stat { text-align: right; }
.playfield { flex: 1; min-height: 200px; position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(#a7d8ed, #f9efd4); border: 1px solid #fff3; }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.game-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; font-size: .75rem; font-weight: 750; }
.game-badges span { background: #fff9ed; color: #47331e; border: 1px solid #b59a73; padding: 5px 8px; border-radius: 8px; }
.weather-badge { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px); text-align: center; background: #47331e; color: #fff9ed; font-size: .75rem; font-weight: 700; padding: 7px 12px; border-radius: 20px; pointer-events: none; }
.countdown { position: absolute; inset: 0; display: grid; place-content: center; background: #fff8; color: #47331e; text-align: center; font-size: 5rem; font-weight: 850; pointer-events: none; }
.play-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.direction-button { width: 76px; min-height: 52px; border: 1px solid #97785e; background: #4c3829; color: #fff4e7; border-radius: 14px; font-size: 1.8rem; touch-action: none; user-select: none; }
.direction-button:active { background: #b63b08; }
.play-controls p { text-align: center; color: #f8dfbf; font-size: .8rem; line-height: 1.3; margin: 0; flex: 1; }
.play-controls p span { color: #d2b99c; font-size: .7rem; }
.preferences { display: flex; gap: 8px 16px; justify-content: center; flex-wrap: wrap; align-items: center; color: #ead3b8; font-size: .75rem; }
.preferences button { background: none; color: #ffe2b5; border: 0; padding: 8px 2px; min-height: 40px; text-decoration: underline; }
.preferences label { display: flex; align-items: center; gap: 5px; min-height: 40px; cursor: pointer; }
.preferences input { accent-color: #ed9e55; width: 17px; height: 17px; }
dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #d8c4aa; border-radius: 22px; padding: 26px; background: #fff9ee; color: #35271f; text-align: center; box-shadow: 0 18px 60px #0004; }
dialog::backdrop { background: #211810c9; }
h1, h2 { margin: 0 0 10px; font-size: 2rem; letter-spacing: -.04em; }
p { font-size: .95rem; line-height: 1.45; margin: 0 0 16px; }
.eyebrow { text-transform: uppercase; font-weight: 750; font-size: .65rem; letter-spacing: .12em; color: #914112; margin-bottom: 8px; }
.mode-picker { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; text-align: left; }
.mode-picker legend { font-size: .8rem; font-weight: 700; margin-bottom: 8px; }
.mode-picker label { display: flex; gap: 10px; align-items: center; border: 1px solid #d7c4aa; border-radius: 12px; padding: 11px; cursor: pointer; }
.mode-picker label:has(input:checked) { background: #ffe7c5; border-color: #a64a11; }
.mode-picker input { accent-color: #b63b08; }
.mode-picker strong { font-size: .9rem; display: block; }
.mode-picker small { font-size: .75rem; color: #725943; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; text-align: left; padding: 12px; background: #f2e7d5; border-radius: 10px; margin-bottom: 12px; font-size: .72rem; }
.legend b { display: inline-grid; place-content: center; width: 21px; height: 21px; border-radius: 50%; color: #251a0e; margin-right: 3px; }
.normal { background: #e5a04d; }.golden { background: #ffe16c; }.ice { background: #a2e3fc; }.wide { background: #b9e78b; }.burnt { background: #38291f; color: #fff !important; }
.instructions, .small-note { font-size: .76rem; color: #6d5744; }
.primary-button, .secondary-button { display: block; width: 100%; min-height: 46px; border-radius: 12px; font-weight: 750; padding: 12px; }
.primary-button { background: #b63b08; color: #fff; border: 1px solid #b63b08; }
.primary-button:hover { background: #963006; }
.secondary-button { background: transparent; color: #81380f; border: 1px solid #c9ad8c; margin-top: 10px; font-size: .85rem; }
.dialog-link { display: inline-block; color: #81380f; font-size: .85rem; padding: 14px 0 0; }
.result-score { font-weight: 850; font-size: 4.5rem; color: #b63b08; margin: 0; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 0; }
.result-stats span { font-size: .8rem; color: #6d5744; }
.result-stats strong { display: block; color: #35271f; font-size: 1.6rem; }
.record-message { color: #326326; font-size: .9rem; font-weight: 700; }
.result-actions { display: flex; gap: 10px; }
#shareStatus { margin: 12px 0 0; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.no-script { position: fixed; inset: 25% 12px auto; padding: 24px; background: #fff9ee; text-align: center; border-radius: 14px; }
@media (max-width: 370px) { .brand { display: none; } dialog { padding: 18px; } .preferences { gap: 2px 10px; } }
@media (max-height: 540px) and (orientation: landscape) {
    .game-shell { max-width: 100%; gap: 4px; }
    .play-area { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px; grid-template-rows: minmax(200px, 1fr) auto; }
    .scoreboard { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; }
    .scoreboard > div { text-align: left; }
    .playfield { grid-column: 2; grid-row: 1; }
    .play-controls { grid-column: 3; grid-row: 1; flex-direction: column; justify-content: center; }
    .play-controls p { flex: 0; }
    .preferences { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }