@font-face{font-family:ArcPixel;src:url('/assets/ui/fonts/Silkscreen-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;font-family:ArcPixel,ui-monospace,monospace;color:#edf4eb;background:#253c43;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#87939b}button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,summary:focus-visible{outline:2px solid #edf4eb;outline-offset:4px}canvas:focus{outline:none}
#game,.arcade,.stage{position:absolute;inset:0;width:100%;height:100%}#game{height:100vh;height:100dvh}.stage{isolation:isolate;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.hud{position:absolute;right:calc(64px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));z-index:3;display:flex;gap:24px;align-items:center;font-size:16px;line-height:24px;pointer-events:none;text-shadow:2px 2px #15282d}
.hud strong{font-weight:400;font-variant-numeric:tabular-nums}.best{color:#b1c9c4}.milestone #score{color:#f0cc72}
.options{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:5}.options summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;border:2px solid #8ba7a3;background:#154545;color:#edf4eb;cursor:pointer;box-shadow:2px 2px #0c3033}.options summary::-webkit-details-marker{display:none}.options summary svg{width:22px;height:22px;fill:currentColor}.key-controls{position:absolute;right:calc(24px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:4;display:grid;grid-template-columns:repeat(2,68px);column-gap:12px;row-gap:8px;user-select:none;-webkit-user-select:none}
.key-control{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;padding:0;border:0;background:transparent;color:#154545;font-size:16px;line-height:16px;touch-action:manipulation}
.key-image{display:block;width:64px;height:61px;image-rendering:pixelated;pointer-events:none}
.key-label{pointer-events:none;text-shadow:1px 1px #cdd8d0}
.key-control:active:not(:disabled) .key-image,.key-control.is-pressed .key-image{transform:translateY(2px);filter:brightness(.9)}
.key-control[aria-pressed=true] .key-image{transform:translateY(2px);filter:brightness(.8)}
.key-control[aria-pressed=true] .key-label{color:#103b39;text-decoration:underline;text-underline-offset:4px}
.key-control:disabled .key-image{opacity:.72}.key-control:focus-visible{outline:2px solid #154545;outline-offset:4px}
.key-hint{grid-column:1/-1;text-align:center;font-size:8px;line-height:16px;color:#254e48;text-shadow:1px 1px #cdd8d0;white-space:nowrap}
.is-paused .key-controls,.is-gameover .key-controls{display:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.no-script{position:absolute;inset:40% 20px auto;text-align:center}
@media(pointer:coarse),(max-width:700px){.key-hint{display:none}}
@media(max-width:480px){.hud{top:calc(16px + env(safe-area-inset-top));font-size:16px;gap:16px}.options{top:calc(12px + env(safe-area-inset-top))}.key-controls{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(max-height:760px){.key-hint{display:none}.key-image{width:48px;height:46px}.key-controls{bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(max-height:450px){.hud{top:calc(12px + env(safe-area-inset-top))}.options{top:calc(8px + env(safe-area-inset-top))}.key-controls{right:calc(16px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,68px)}.key-image{width:48px;height:46px}.key-control{gap:4px}.key-hint{display:none}}
@media(prefers-reduced-motion:reduce){.key-control:active:not(:disabled) .key-image,.key-control.is-pressed .key-image,.key-control[aria-pressed=true] .key-image{transform:none}}