:root{color-scheme:dark;--gold:#e3c88c;--muted:#91a6aa;--ink:#e9eeec;--mono:"SFMono-Regular",Consolas,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#050d12;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 9% 23%,#284a5125,transparent 48%),radial-gradient(ellipse at 90% 65%,#63543a15,transparent 45%)}
button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.32}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}
#arcade-stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:100;background:#15242a;padding:15px}
.glass{position:relative;border:1px solid #d5e5de36;background:linear-gradient(122deg,#b6dcdd13,transparent 47%,#b8c9b60a),#09141970;box-shadow:inset 0 1px 1px #edffef32,inset 0 -1px 1px #bcd2cc1a,0 25px 65px -24px #0008;backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%)}
.glass:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,transparent 13%,#dbedf009 30%,#edfff30a 30.3%,transparent 46%);box-shadow:inset 0 0 0 4px #e0f1ef03}
main{position:relative;height:100svh;height:100dvh;height:var(--app-height,100dvh);width:100%;padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.game-column{height:100%;max-width:700px;margin:0 auto;display:grid;grid-template-rows:48px minmax(0,1fr);gap:12px;min-width:0}
.scorebar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:4px}
.score-values{display:flex;justify-content:center;gap:35px}.score-values>div{display:flex;align-items:baseline;gap:9px}.score-values span{font:14px var(--mono);letter-spacing:1px;color:var(--muted)}.score-values strong{font:24px var(--mono);font-weight:400;letter-spacing:-1px}.score-values>div:first-child strong{color:var(--gold)}
.icon-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;padding:0;font:24px/1 Arial}.icon-button span{font:19px Arial;color:#d6dfd8}
#practice-status{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:14px var(--mono);color:var(--gold);letter-spacing:1px;z-index:2}
.game-stage{--control-space:242px;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;container-type:size}
.play-area{flex:0 0 auto;min-width:0;min-height:0;width:min(100%,calc(100svh - 235px));width:min(100cqw,calc(100cqh - var(--control-space)));aspect-ratio:1;display:grid;place-items:center}
.board-wrap{width:100%;height:100%;aspect-ratio:1;border-radius:23px;padding:8px;overflow:hidden;user-select:none;-webkit-user-select:none}
#board{display:block;width:100%;height:100%;border-radius:16px;background:linear-gradient(145deg,#050d10c4,#09151b9c);touch-action:none}
.screen{position:absolute;inset:8px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#07121782;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.screen-content{position:relative;z-index:1;flex:0 0 auto;max-width:330px;width:100%;max-height:100%;padding:20px 24px;text-align:center;overflow-y:auto;overscroll-behavior:contain}
.game-logo{display:block;width:112px;height:auto;margin:0 auto 15px}h1,h2{font-size:29px;font-weight:300;letter-spacing:-1px;margin:0 0 19px}
.eyebrow{font:14px/1.5 var(--mono);letter-spacing:1.5px;color:var(--muted);margin:0 0 12px}
#start-form{display:grid;gap:10px}input{width:100%;height:46px;color:#fff;background:#040c1080;border:1px solid #adccc038;border-radius:12px;padding:12px 16px;text-align:center;font-size:16px;box-shadow:inset 0 2px 8px #0005;user-select:text;-webkit-user-select:text}input::placeholder{color:#a3b3b3;font-size:14px}
.primary-button{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;border:1px solid #dfc68d6b;border-radius:12px;padding:13px 18px;background:linear-gradient(120deg,#ccae6638,#c4d5c218);color:#f2e4c1;box-shadow:inset 0 1px 1px #fff4;font:14px var(--mono);letter-spacing:1.5px}.primary-button:hover{background-color:#dcc58a1a}.primary-button span{font-size:18px;line-height:1}
.small-note{font-size:14px;color:#9fadaf;line-height:1.6;margin:12px 0 0}.message{font-size:14px;line-height:1.6;color:#d3c8a8;margin:10px 0}.message:empty{display:none}
.text-button{display:block;min-height:44px;margin:8px auto 0;border:0;background:transparent;padding:10px;font-size:14px;color:#b9c9c6;text-decoration:underline;text-underline-offset:4px}
#end-title{display:none}.end-score{margin:12px 0;display:flex;flex-direction:column;gap:4px}.end-score strong{font:58px/1 var(--mono);letter-spacing:-3px;color:var(--gold)}.end-score span{font:14px var(--mono);letter-spacing:2px;color:var(--muted)}.end-actions{display:flex;justify-content:center;gap:16px}.end-actions .text-button{margin:5px 0 0;padding-inline:4px}
#countdown{font:85px var(--mono);color:#f1e5bd}
#food-toast{position:absolute;pointer-events:none;color:#f5e2a7;font:15px var(--mono);opacity:0;transform:translate(-50%,-10px);text-shadow:0 0 15px #e7c073}#food-toast.show{animation:points .8s ease-out both}@keyframes points{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px)}}
.controls{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:100%;padding:0 0 2px;touch-action:none}
.dpad{display:grid;grid-template-columns:repeat(3,min(112px,calc((100vw - 40px)/3)));grid-template-rows:repeat(2,100px);gap:8px;touch-action:none}
.dpad button{position:relative;display:grid;place-items:center;border:1px solid #efd49bbd;border-radius:17px;color:#fff4d5;background:linear-gradient(145deg,#f5d79b29,#c6a15b09 56%,#f0ce881b),linear-gradient(150deg,#79603a,#302b20 75%);box-shadow:inset 0 1px 1px #fff1c48c,inset 0 -2px 1px #211b128f,0 4px 0 #191810,0 7px 18px #0007,0 0 20px #d7b77712;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .08s,box-shadow .08s,background .08s}
.dpad button:before{content:"";position:absolute;inset:3px;border:1px solid #f3dbae16;border-radius:13px;pointer-events:none;background:linear-gradient(135deg,#fff2cd10,transparent 48%)}
.dpad button:disabled{opacity:.72}
.dpad button:not(:disabled):active{background:linear-gradient(145deg,#b79557,#665334);border-color:#ffe8b3;transform:translateY(3px);box-shadow:inset 0 1px 2px #fff1bd88,inset 0 -1px 1px #312514,0 1px 0 #191810,0 0 23px #e3b96638}
.dpad svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #120f08b3);pointer-events:none}
.dpad [data-direction="0"] svg{transform:rotate(90deg)}.dpad [data-direction="1"] svg{transform:rotate(180deg)}.dpad [data-direction="2"] svg{transform:rotate(270deg)}
.dpad [data-direction="3"]{grid-area:1/2}.dpad [data-direction="2"]{grid-area:2/1}.dpad [data-direction="0"]{grid-area:2/3}.dpad [data-direction="1"]{grid-area:2/2}
.leaderboard{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border-radius:24px;padding:26px;color:var(--ink);background:linear-gradient(130deg,#163138cf,#0b151bee);overflow-y:auto;margin:auto}
.leaderboard::backdrop{background:#02070bc9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.leaderboard h2{font-size:36px;letter-spacing:-1.5px;margin:0}.leaderboard h2 em{color:var(--gold);font-style:normal}.leaderboard-heading button{background:#b8cbc212;border:1px solid #bdcecc40}
.leaderboard-date{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c7d7ce24;padding-bottom:12px;font:14px var(--mono);letter-spacing:1px;color:var(--muted)}
#refresh{border:0;background:none;font-size:21px;width:44px;height:44px;margin:-12px -10px -12px 0;color:#b0c5c1}
.scores{list-style:none;padding:0;margin:0}.scores li{display:grid;grid-template-columns:22px 1fr auto;gap:13px;align-items:center;min-height:62px;border-bottom:1px solid #c2d2c31c;font-size:14px}.scores .rank{font:14px var(--mono);color:#8caba9}.scores .points{font:16px var(--mono);color:#d8decf}.scores li:first-child .rank,.scores li:first-child .points{color:var(--gold)}.scores .player{overflow-wrap:anywhere}.scores .is-you .player:after{content:"JIJ";font:14px var(--mono);letter-spacing:1px;color:var(--gold);margin-left:8px}
.leaderboard-status{font-size:14px;line-height:1.75;color:#a8bcb7;margin:22px 0;white-space:pre-line}.leaderboard-status:empty{display:none}
@media(max-width:370px){.score-values{gap:20px}.score-values span{font-size:14px}.score-values strong{font-size:21px}.screen-content{padding:16px 18px}.game-logo{width:96px;margin-bottom:10px}h1{font-size:25px;margin-bottom:14px}.small-note{font-size:14px}}
@media(max-height:540px){main{padding-top:6px;padding-bottom:6px}.game-column{grid-template-rows:44px minmax(0,1fr);gap:7px}.game-stage{--control-space:174px;gap:10px}.dpad{grid-template-columns:repeat(3,min(84px,calc((100vw - 36px)/3)));grid-template-rows:repeat(2,72px);gap:6px}.dpad button{border-radius:13px}.dpad svg{width:32px;height:32px}.score-values strong{font-size:20px}.screen-content{padding:12px 18px}.game-logo{width:82px;margin-bottom:8px}h1,h2{font-size:23px;margin-bottom:12px}.small-note{font-size:14px;margin-top:8px}.end-score{margin:8px 0}.end-score strong{font-size:43px}}
body.entering-name .controls{display:none}
body.entering-name .game-stage{--control-space:0px}
.leaderboard{position:fixed;inset:0}
body[data-mode="starting"],body[data-mode="countdown"],body[data-mode="playing"],body[data-mode="paused"]{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.game-column,.game-column button,.game-column a,.game-column canvas{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}