@font-face { font-family: "DM Sans"; src: url("vendor/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Manrope; src: url("vendor/manrope.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root { color-scheme: light; font-family: "DM Sans", sans-serif; color: #2b3d34; background: #e3e9e1; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
.canvas-wrap { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #f5f8ee 0%, #e3e9e1 60%, #d7e1d7 100%); }
.canvas-wrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse, #d76b6550, transparent 65%); pointer-events: none; opacity: 0; }
.canvas-wrap.mistake::after { animation: mistake-flash .6s ease-out; }
@keyframes mistake-flash { 20% { opacity: 1; } 100% { opacity: 0; } }
#game-canvas { position: absolute; inset: 0; touch-action: none; }
#game-canvas canvas { display: block; width: 100%; height: 100%; }
.canvas-error { position: absolute; left: 15%; right: 15%; top: 45%; text-align: center; color: #765a50; font-size: 14px; }
.scoreboard { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 48px; pointer-events: none; }
.score-block { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 80px; }
.score-block span { color: #748a7a; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.score-block strong { font-family: Manrope, sans-serif; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.score-block.celebrate strong { animation: celebrate .7s ease; }
@keyframes celebrate { 50% { color: #d59d4e; transform: scale(1.2); } }
.controls { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.status { min-height: 18px; margin: 0; color: #62796a; font-size: 13px; font-weight: 700; text-align: center; }
.start-button { min-width: 150px; height: 52px; padding: 0 25px; border: 0; border-radius: 6px; background: #283b35; color: #fff; font: 700 14px "DM Sans", sans-serif; box-shadow: 0 7px 16px #273c3521; cursor: pointer; pointer-events: auto; transition: background .2s, transform .2s, box-shadow .2s; }
.start-button:hover { background: #3d564a; transform: translateY(-2px); box-shadow: 0 10px 20px #273c3530; }
.start-button:focus-visible { outline: 3px solid #91aa96; outline-offset: 4px; }
.start-button[hidden] { display: none; }
.audio-notice { margin: 0; color: #a05b49; font-size: 12px; text-align: center; }
.audio-notice:empty { display: none; }
@media (max-width: 600px) {
  .scoreboard { top: max(22px, env(safe-area-inset-top)); gap: 36px; }
  .score-block strong { font-size: 27px; }
  .controls { bottom: max(24px, env(safe-area-inset-bottom)); padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}