@layer base{*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:3px solid #29341f;outline-offset:5px}[hidden]{display:none!important}}
:root{color-scheme:light;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#29341f;background:#a8b77c;font-synthesis:none}body{min-width:280px;min-height:100svh;background:repeating-linear-gradient(0deg,#00000002 0 1px,transparent 1px 3px),#a8b77c}.page{width:min(100% - 40px,480px);margin:0 auto}main{padding:clamp(24px,7vh,64px) 0 28px}.intro{font:600 clamp(19px,3.8vw,25px)/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.7px;margin:0 0 28px;max-width:440px}.scorebar{display:flex;align-items:center;justify-content:space-between;padding:0 0 14px}.scores{display:flex;gap:28px}.scores>div{display:flex;align-items:center;gap:9px}.scores output{font:700 23px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:1px}.pause{height:38px;width:44px;display:grid;place-items:center;background:transparent;border:2px solid #53613b;border-radius:3px;color:#29341f}.pause:disabled{opacity:.4}.pause:hover:not(:disabled){background:#29341f15}button svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}.board{position:relative;width:100%;aspect-ratio:1;border:3px solid #53613b;background:#b2bf87;border-radius:3px;box-shadow:inset 0 0 14px #29341f20,0 0 0 4px #a8b77c,0 0 0 5px #84925c;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#b2bf8740}.overlay-card{text-align:center}.start{width:68px;height:56px;display:grid;place-items:center;color:#b2bf87;background:#29341f;border:2px solid #29341f;border-radius:3px;box-shadow:4px 4px 0 #53613b50}.start svg{width:25px;height:25px;fill:currentColor;stroke-width:0}.start:hover{background:#3f4b2f}.start:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #53613b50}.touch-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}
@media(max-width:600px),(pointer:coarse){.touch-controls{display:grid;grid-template:repeat(3,48px)/repeat(3,58px);gap:5px;justify-content:center;margin:24px auto 0}.touch-controls button{display:grid;place-items:center;color:#29341f;background:#b2bf87;border:2px solid #53613b;border-bottom-width:4px;border-radius:4px;user-select:none;-webkit-user-select:none}.touch-controls button:active{background:#8e9e64;transform:translateY(1px)}.touch-controls svg{width:24px;height:24px}.touch-controls [data-direction=up]{grid-area:1/2}.touch-controls [data-direction=left]{grid-area:2/1}.touch-controls [data-direction=right]{grid-area:2/3}.touch-controls [data-direction=down]{grid-area:3/2}.dpad-center{grid-area:2/2;align-self:center;justify-self:center;color:#53613b;font-size:15px}}
@media(max-width:600px){.page{width:calc(100% - 36px);max-width:420px}main{padding:28px 0 20px}.intro{font-size:21px;line-height:1.4;margin:0 0 22px}.board{width:min(100%,49svh);margin:0 auto}.scorebar{max-width:49svh;margin:0 auto}.scores{gap:22px}.scores output{font-size:22px}}
@media(max-height:680px) and (max-width:600px){main{padding-top:18px}.intro{font-size:18px;margin-bottom:16px}.board{width:min(100%,40svh)}.scorebar{max-width:40svh;padding-bottom:10px}.scores{gap:15px}.scores output{font-size:19px}.scores svg{width:15px}.pause{height:32px;width:36px}.touch-controls{grid-template-rows:repeat(3,44px);margin-top:18px}}