:root { color-scheme:light; background:#fff; color:#282420; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:280px; min-height:100%; background:#fff; }
body { min-height:100svh; display:grid; place-items:center; }
#countdown { display:flex; align-items:center; justify-content:center; gap:24px; width:min(560px,calc(100% - 48px)); padding:24px 0; }
.sprite { display:block; flex:none; overflow:visible; image-rendering:pixelated; height:112px; }
.character { width:64px; }
.bottle { width:40px; }
.meter { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:16px; padding-top:36px; }
.progress-track { height:40px; width:100%; border:4px solid #282420; padding:4px; background:#fff; clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px); }
.progress-fill { width:0; height:100%; background:#e4a537; background-image:linear-gradient(#f3c462 0 4px,transparent 4px); }
.percentage { display:block; height:21px; max-width:100%; width:auto; overflow:visible; image-rendering:pixelated; }
@media(max-width:480px) { #countdown {gap:14px;width:calc(100% - 36px)}.sprite {height:84px}.character{width:48px}.bottle{width:30px}.meter{gap:12px;padding-top:26px}.progress-track{height:30px;border-width:3px;padding:3px}.progress-fill{background-image:linear-gradient(#f3c462 0 3px,transparent 3px)}.percentage{height:14px} }
@media(max-width:340px) { #countdown {gap:10px;width:calc(100% - 28px)} }

@font-face{font-family:JackPixel;src:url('assets/jack-pixel.woff') format('woff');font-display:swap}
html,body{overscroll-behavior:none;touch-action:manipulation;overflow:hidden}
body{min-height:100dvh}
button,input,a,canvas{touch-action:manipulation}
#countdown{position:relative;z-index:2;transition:opacity .55s;cursor:pointer;outline:none}
#countdown:focus-visible{outline:2px dotted #b3a17e;outline-offset:12px}
.playing #countdown{opacity:0;pointer-events:none}
#desert{position:fixed;inset:0;width:100%;height:100%;z-index:1;image-rendering:pixelated;opacity:0;transition:opacity .65s;outline:none;pointer-events:none}
.playing #desert{opacity:1;pointer-events:auto}
[hidden]{display:none!important}
#game-over{position:fixed;inset:0;z-index:3;display:grid;place-items:center;background:#f7ebcedb;overflow:auto;padding:20px;touch-action:pan-y pinch-zoom}
.score-panel{width:min(320px,100%);text-align:center;color:#554133;font:16px/1.4 JackPixel,monospace;padding:20px 22px;background:#fff9ed;border:3px solid #554133;box-shadow:5px 5px 0 #cdb58f;max-height:calc(100dvh - 40px);overflow:auto;touch-action:pan-y pinch-zoom}
.skull{width:30px;height:30px;display:block;margin:0 auto 10px;color:#765b46}
.score-label{margin:0 0 6px;font-size:8px;letter-spacing:2px}
#final-score{font-size:32px;line-height:1;margin:0 0 20px}
#name-form label{display:block;font-size:8px;letter-spacing:1px;margin-bottom:8px}
.name-row{display:flex;justify-content:center;gap:8px}
#player-name{box-sizing:border-box;border:2px solid #b59b74;background:#fff;color:#554133;border-radius:0;font:24px/1 JackPixel,monospace;width:132px;height:42px;padding:8px;text-align:center;letter-spacing:3px;outline-offset:3px;text-transform:uppercase}
#player-name::placeholder{color:#c7b99e}
button{border:2px solid #554133;background:#eed4a4;color:#554133;border-radius:0;min-width:42px;min-height:42px;padding:10px;cursor:pointer;display:inline-grid;place-items:center;box-shadow:2px 2px 0 #b59b74}
button svg{width:18px;height:18px;image-rendering:pixelated}
button:active{transform:translate(2px,2px);box-shadow:none}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,input:focus-visible{outline:3px solid #d9952d;outline-offset:3px}
h1{font:16px/1 JackPixel,monospace;margin:24px 0 13px}
#scores{margin:0;padding:0;list-style:none;max-height:220px;overflow:auto}
#scores:empty::after{content:'NO SCORES YET';font-size:8px;color:#a79070}
#scores li{display:grid;grid-template-columns:26px 1fr 62px;gap:10px;padding:7px 1px;border-bottom:2px solid #f0e5d3;font-size:16px;text-align:left}
#scores li span:first-child{color:#b39d7c;font-size:8px;align-self:center}
#scores li span:last-child{text-align:right}
#scores .own-score{color:#bd7a1e}
#connection{font-size:8px;line-height:1.75;color:#a24f34;margin:12px 0 0}
.end-buttons{display:flex;justify-content:center;gap:18px;margin-top:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:560px){.score-panel{padding:12px 20px}.skull{display:none}#final-score{font-size:24px;margin-bottom:10px}h1{margin-top:14px}#scores{max-height:100px}.end-buttons{margin-top:12px}}
@media(prefers-reduced-motion:reduce){#desert,#countdown{transition:none}}