@font-face { font-family: "Nokia FC22"; src: url("assets/nokiafc22.ttf") format("truetype"); font-display: block; }
:root { color-scheme: light; background: #54bc3c; font-family: "Trebuchet MS", sans-serif; color: #fffdf1; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #54bc3c; }
body { position: relative; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 120ms ease-out; transform-origin: center; }
@media (hover: hover) { button:not(:disabled):hover { transform: scale(1.06); } }
button:not(:disabled):active { transform: scale(.94); transition-duration: 60ms; }
button:focus-visible { outline: 3px solid #ffdf8f; outline-offset: 4px; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
#game { position: absolute; width: min(100vw, 100dvh); height: min(100vw, 100dvh); container-type: inline-size; isolation: isolate; user-select: none; touch-action: none; }
#meadow { position: absolute; inset: 0; }
#meadow canvas { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
#game.playing #meadow { cursor: pointer; }
/* Header coordinates use the same 270-pixel grid as the mockup. */
.game-header { position: absolute; inset: 0 0 auto; height: 15.2%; pointer-events: none; z-index: 6; }
.game-title { position: absolute; top: 2.592593cqw; left: 2.592593%; width: 78.888889%; height: auto; image-rendering: pixelated; }
.sprite-button { position: absolute; top: 4.444444cqw; width: 6.296296cqw; height: 6.666667cqw; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.sprite-button img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#pause-button { left: 83.703704%; }
#pause-button:disabled { pointer-events: none; }
#mute-button { left: 91.111111%; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.timer-row { position: absolute; top: 17.777778%; left: 13.333333%; width: 73.333333%; height: 1.851852cqw; }
#time-meter { position: relative; width: 100%; height: 100%; }
.timer-segments { display: flex; align-items: flex-start; width: 100%; height: 100%; min-width: 1.481481cqw; }
.timer-track, #time-fill { position: absolute; inset: 0 auto 0 0; width: 100%; }
#time-fill { overflow: hidden; transition: width 80ms linear; }
.timer-cap { flex: 0 0 .740741cqw; width: .740741cqw; height: 1.481481cqw; image-rendering: pixelated; }
.timer-middle { flex: 1 1 0; width: 0; min-width: 0; height: 100%; image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stage-row { position: absolute; top: 22%; left: 4%; right: 4%; display: flex; align-items: start; justify-content: space-between; gap: 2cqw; color: #fff7d1; font: normal 4cqw/1 "Nokia FC22", monospace; font-synthesis: none; text-shadow: .15cqw .15cqw #1d5511; white-space: nowrap; }
#tutorial-instruction { color: #fff7d1; font: normal 4cqw/1.2 "Nokia FC22", monospace; text-shadow: .2cqw .2cqw #1d5511; pointer-events: none; }
#tutorial-prompt { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#tutorial-instruction { position: absolute; bottom: 3%; left: 0; width: 100%; padding: 0 3%; text-align: center; text-wrap: balance; }
#tutorial-finger { position: absolute; top: 62%; left: 39%; width: 9.62963cqw; height: 16.12963cqw; image-rendering: pixelated; animation: swipe-right 1.6s ease-in-out infinite; }
#tutorial-prompt.swipe-left #tutorial-finger { left: 66%; animation-name: swipe-left; }
#tutorial-key { position: absolute; top: 62%; left: 69%; width: 20.740741cqw; height: 19.259259cqw; image-rendering: pixelated; }
#tutorial-prompt.swipe-left #tutorial-key { left: 10%; }
#announcement { position: absolute; top: 43%; left: 32%; right: 32%; text-align: center; pointer-events: none; padding: .9cqw 1cqw 1cqw; background: #204c2beb; border: 1px solid #d5eeb759; box-shadow: 0 .8cqw 0 #224c2850; border-radius: 1.3cqw; }
#announcement-label { font-size: 1.8cqw; letter-spacing: .3cqw; font-weight: bold; color: #dbefb6; }
#announcement-title { font-size: 2.7cqw; margin: .5cqw 0; }
#announcement-detail { font-size: 1.85cqw; line-height: 1.3; margin: 0; }
#countdown { font: bold 5.5cqw "Courier New", monospace; color: #ffe09a; min-height: 5.5cqw; line-height: 1; }
#countdown.pop { animation: count-pop 350ms ease-out; }
#announcement.stage-intro { top: 44%; left: 0; right: 0; z-index: 3; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #fff7d1; font-family: "Nokia FC22", monospace; font-synthesis: none; text-shadow: .3cqw .3cqw #1d5511; }
#announcement.stage-intro #announcement-label { color: inherit; font: normal 7cqw/1.2 "Nokia FC22", monospace; letter-spacing: 0; }
#announcement.stage-intro #announcement-title, #announcement.stage-intro #announcement-detail { display: none; }
#announcement.stage-intro #countdown { margin-top: 2cqw; min-height: 11cqw; color: inherit; font: normal 11cqw/1 "Nokia FC22", monospace; }
#game-over { position: absolute; inset: 0; z-index: 4; text-align: center; color: #fff7d1; font-family: "Nokia FC22", monospace; font-synthesis: none; text-shadow: .3cqw .3cqw #1d5511; }
#final-stage-info { position: absolute; top: 28%; left: 0; width: 100%; transform-origin: center 50%; }
#final-stage-title { font-size: 7cqw; line-height: 1.2; }
#final-stage-number { font-size: 17cqw; line-height: 1; }
#continue-prompt { position: absolute; inset: 0; }
#continue-instruction { position: absolute; bottom: 3%; left: 0; width: 100%; font-size: 5.4cqw; line-height: 1.2; }
#game-over-finger { position: absolute; left: 69%; top: 65%; width: 9.62963cqw; height: 16.12963cqw; image-rendering: pixelated; animation: finger-tap 1.5s ease-in-out infinite; }
.game-over-tap-ripple { position: absolute; left: 69%; top: 64%; width: 4cqw; height: 4cqw; border: .5cqw solid #fff7d1; border-radius: 50%; opacity: 0; animation: tap-ripple 1.5s ease-out infinite; }
#tutorial-finger, #game-over-finger, .game-over-tap-ripple { display: none; }
@media (pointer: coarse) {
  #tutorial-key { display: none; }
  #tutorial-finger, #game-over-finger, .game-over-tap-ripple { display: block; }
}
#pause-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgb(84 188 60 / 60%); cursor: pointer; }
#pause-overlay:focus-visible { outline: 3px solid #ffdf8f; outline-offset: -6px; }
#pause-overlay img { display: block; width: 27.407407%; height: auto; image-rendering: pixelated; pointer-events: none; }
@keyframes count-pop { from { transform: scale(1.35); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes swipe-right { 0%, 12% { transform: translateX(0); opacity: 1; } 65% { transform: translateX(18cqw); opacity: 1; } 85%, 100% { transform: translateX(18cqw); opacity: 0; } }
@keyframes swipe-left { 0%, 12% { transform: translateX(0); opacity: 1; } 65% { transform: translateX(-18cqw); opacity: 1; } 85%, 100% { transform: translateX(-18cqw); opacity: 0; } }
@keyframes finger-tap { 0%, 15%, 75%, 100% { transform: translateY(-1cqw) rotate(-3deg); } 35%, 48% { transform: translateY(1cqw) scale(.94); } }
@keyframes tap-ripple { 0%, 29% { transform: scale(.35); opacity: 0; } 37% { transform: scale(.55); opacity: .85; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 500px), (max-height: 500px) {
  #announcement-detail { font-size: 2.2cqw; }
  #announcement-title { font-size: 3cqw; }
  #announcement-label { font-size: 2.3cqw; }
}