*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#09252e;color:#efffff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe591;outline-offset:4px}.arena{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;align-items:center;gap:16px;pointer-events:none}.hud a,.hud button{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:14px;background:#09252ebd;color:white;text-decoration:none;font-size:22px}.hud button:disabled{opacity:.4}.hud div span{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:#b7e8e3}.hud strong{font-size:clamp(28px,5vw,46px);line-height:1.1}.hud .best{margin-left:auto;font-size:10px;letter-spacing:1px;background:#09252eab;border-radius:12px;padding:10px}.best b{display:block;font-size:18px}.leaderboard{position:absolute;right:max(18px,env(safe-area-inset-right));top:100px;width:160px;padding:14px;background:#09252e99;border:1px solid #ffffff18;border-radius:16px;font-size:12px;pointer-events:none}.leaderboard>span{font-size:9px;letter-spacing:1.5px;color:#afd8d6}.leaderboard ol{margin:10px 0 0;padding-left:20px}.leaderboard li{padding:4px 0}.leaderboard b{float:right}.leaderboard .you{color:#ffd06b}.hint{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;color:#cfefed;font-size:12px;pointer-events:none;width:60%}.controls{position:absolute;inset:0;pointer-events:none;display:none}#joystick{pointer-events:auto;position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:116px;height:116px;border:1px solid #ffffff45;border-radius:50%;background:#09252e66;touch-action:none}#stick{position:absolute;left:35px;top:35px;width:44px;height:44px;background:linear-gradient(135deg,#b6f7e7,#50a6a1);border-radius:50%;box-shadow:0 5px 12px #0005;pointer-events:none}#joystick span{position:absolute;bottom:8px;width:100%;text-align:center;font-size:8px;letter-spacing:2px;color:#c9eeeb}#boost{pointer-events:auto;position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(42px,env(safe-area-inset-bottom));width:76px;height:76px;border:1px solid #ffdc8066;background:#263b3bc9;border-radius:50%;color:#ffdc80;font-size:27px;touch-action:none}#boost small{display:block;font-size:9px;letter-spacing:1px}#boost.active{background:#826528}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#051e29bb;backdrop-filter:blur(7px);padding:20px;overflow:auto;touch-action:pan-y}.overlay[hidden]{display:none}.panel{text-align:center;width:min(420px,100%);padding:28px 24px;border:1px solid #b9f5ed26;border-radius:28px;background:linear-gradient(145deg,#163e48ee,#082630ee);box-shadow:0 24px 100px #0005}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#ace3d9}.emblem{font-size:68px;color:#ffc46a;line-height:1;margin-top:16px;text-shadow:0 5px 0 #a96e2e}h1{font-size:clamp(40px,8vw,58px);letter-spacing:-3px;line-height:.95;margin:14px 0 22px}h1 span{display:block;color:#ffcc72}.panel p{color:#c4e0e2;font-size:14px;line-height:1.6}.panel .instructions{font-size:12px;color:#95b9bd}.primary{width:100%;padding:16px;border:0;border-radius:14px;background:linear-gradient(120deg,#ffdc8b,#ffb85c);color:#253b3c;font-weight:800;margin:12px 0 18px}.panel>a{color:#b8d5d6;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(pointer:coarse){.controls{display:block}.hint{bottom:12px;font-size:10px}}@media(max-width:600px){.leaderboard{width:128px;top:92px;padding:10px;font-size:10px}.hud{gap:10px}.hud div span{font-size:8px}.hint{width:85%}}@media(max-height:500px){.panel{padding:16px 22px}.emblem{display:none}h1{font-size:36px;margin:10px}h1 span{display:inline;margin-left:8px}.panel p{margin:8px 0;font-size:12px}.primary{padding:12px;margin:8px 0}.leaderboard{top:76px}#joystick{width:100px;height:100px;bottom:16px}#stick{left:27px;top:27px}#boost{bottom:26px}}
.snake-picker{border:0;padding:0;margin:18px 0 6px;min-width:0}.snake-picker legend{font-size:12px;font-weight:700;color:#d9efea;margin-bottom:10px}.snake-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.snake-choice{min-width:0;min-height:72px;padding:4px 3px 8px;border:2px solid #ffffff18;border-radius:12px;color:#c3dfdd;background:#041e2977}.snake-choice[aria-pressed=true]{border-color:#ffcd79;background:#30453f;color:#ffe4ac}.snake-choice canvas{width:100%;height:auto;aspect-ratio:240/110}.snake-choice span{font-size:11px;font-weight:700}.overlay{align-items:safe center}.panel{margin:auto}.panel .emblem{font-size:48px;margin-top:8px}.panel h1{font-size:44px;margin:10px 0 14px}@media(max-height:500px){.snake-options{grid-template-columns:repeat(6,minmax(0,1fr))}.panel{width:min(650px,100%)}.snake-choice{min-height:62px}.snake-picker{margin:8px 0}}
.snake-types{display:flex;gap:8px;margin-bottom:10px}.snake-types button{flex:1;min-height:40px;padding:8px;border:1px solid #ffffff30;border-radius:10px;background:#041e2977;color:#c3dfdd;font-size:12px;font-weight:700}.snake-types button[aria-pressed=true]{border-color:#ffcd79;color:#ffe4ac;background:#30453f}
.snake-choice:disabled{opacity:.45;cursor:not-allowed}.hint{background:#09252ed9;padding:8px 12px;border-radius:14px;font-weight:700}
.unlock-progress{position:absolute;top:100px;left:16px;color:#ffe3a3;font-size:11px;max-width:48%;padding:8px 10px;background:#09252ebd;border-radius:12px;pointer-events:none}.celebration{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:min(300px,80%);padding:14px;text-align:center;border:1px solid #ffdc8b;background:#123a46ed;border-radius:18px;pointer-events:none;color:#ffe4a9}.celebration[hidden]{display:none}.celebration canvas{width:180px;height:auto;margin:auto}.celebration canvas[hidden]{display:none}.celebration strong{display:block;font-size:14px}.results{padding:12px;background:#ffdc8b18;border-radius:12px;color:#ffe4a9!important}.hud #sound{font-size:13px}@media(max-height:500px){.unlock-progress{top:76px}.celebration{top:20%;padding:8px}.celebration canvas{width:120px}}
.bite-feedback{position:absolute;left:50%;top:16%;transform:translateX(-50%);width:min(360px,85%);text-align:center;padding:12px 18px;border-radius:18px;border:2px solid;background:#102e3aee;pointer-events:none;box-shadow:0 8px 24px #0004}.bite-feedback[hidden]{display:none}.bite-feedback strong{display:block;font-size:clamp(18px,4vw,25px);letter-spacing:1px}.bite-feedback span{display:block;font-size:12px;color:#e7f2f0;margin-top:5px}.bite-feedback.correct{color:#ffe082;border-color:#ffe082}.bite-feedback.wrong{color:#ff91a7;border-color:#ff718c}.bite-feedback.speed{color:#80efff;border-color:#80efff}@media(max-height:500px){.bite-feedback{top:30%;padding:8px}.bite-feedback strong{font-size:18px}}
.bite-feedback{top:20%;width:min(470px,92%);padding:20px 22px;border-width:3px;box-shadow:0 12px 45px #0008}.bite-feedback strong{font-size:clamp(25px,5.5vw,38px);font-weight:950;line-height:1.1;text-shadow:0 3px 0 #0004}.bite-feedback span{font-size:clamp(13px,2.5vw,17px);font-weight:700;margin-top:9px}.bite-feedback.correct{background:#4a3910f2;box-shadow:0 0 35px #ffcf6055}.bite-feedback.wrong{background:#4d172bf2;box-shadow:0 0 35px #ff426d66}.bite-feedback.speed{background:#0d3f52f2;box-shadow:0 0 35px #42e6ff55}@media(max-height:500px){.bite-feedback{top:28%;padding:12px}.bite-feedback strong{font-size:25px}.bite-feedback span{font-size:12px}}
.bite-feedback{top:auto;bottom:max(46px,calc(env(safe-area-inset-bottom) + 30px));width:min(390px,72%);padding:10px 16px;border-width:2px;border-radius:12px;background:#061621dd}.bite-feedback strong{font-size:clamp(17px,3.7vw,26px);text-shadow:0 0 12px currentColor}.bite-feedback span{font-size:12px;margin-top:4px}.bite-feedback.correct{color:#baff25;border-color:#a8ff00;background:#102509dd;box-shadow:0 0 18px #a8ff0055}.bite-feedback.wrong{color:#ff6666;border-color:#ff3333;background:#2b0808dd;box-shadow:0 0 18px #ff333355}.bite-feedback.speed{color:#60faff;border-color:#00f0ff;background:#06262fdd;box-shadow:0 0 18px #00f0ff55}@media(pointer:coarse){.bite-feedback{bottom:max(165px,calc(env(safe-area-inset-bottom) + 145px))}}@media(max-height:500px){.bite-feedback{top:16px;bottom:auto;width:min(350px,52%);padding:8px}.bite-feedback strong{font-size:18px}.bite-feedback span{font-size:10px}}


.overlay.level-complete{background:#06232dc9;backdrop-filter:none}.level-complete .panel{width:min(520px,100%);border:2px solid #ffdc80;background:linear-gradient(145deg,#1b5658,#082630);box-shadow:0 0 60px #ffdc8033}.level-complete .eyebrow,.level-complete .emblem{display:none}.level-complete h1{font-size:clamp(28px,6vw,42px);letter-spacing:-1px}.level-complete .primary{background:linear-gradient(120deg,#fff0b5,#ffc34e);min-height:56px}#level-reward{padding:12px;border-radius:18px;background:#ffdc8012}#level-status{display:block;color:#ffdc80;font-size:11px;font-weight:900;letter-spacing:2px}#level-reward-canvas{width:240px;max-width:100%;height:auto;margin:10px auto}#level-reward-name{display:block;color:#ffe4a9;font-size:20px}
/* Compact entry screen. */
.overlay{padding:14px}.panel{width:min(380px,100%);padding:20px;border-radius:22px}.panel h1{font-size:32px;letter-spacing:-1px;margin:0 0 10px;line-height:1.1}.panel h1 span{display:inline;margin-left:7px}.panel p{font-size:12px;line-height:1.5;margin:8px 0}.panel .instructions{font-size:10px;margin:6px 0 14px}.snake-picker{margin:12px 0 4px}.snake-picker legend{font-size:11px;margin-bottom:8px}.snake-types{margin-bottom:7px;gap:6px}.snake-types button{min-height:34px;font-size:11px;padding:6px}.snake-options{gap:6px}.snake-choice{min-height:60px;padding:2px 3px 6px;border-radius:9px}.snake-choice canvas{max-height:44px}.snake-choice span{font-size:9px}.primary{padding:12px;margin:12px 0;font-size:14px}.panel>a{font-size:11px}.level-complete .instructions{display:none}@media(max-height:500px){.panel{width:min(600px,100%);padding:14px}.panel h1{font-size:28px}.snake-options{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Gameplay HUD: collected progress and sound only. */
.hud>a,.hud .best,.hud #pause,.leaderboard,.unlock-progress,.hint{display:none}.hud{justify-content:space-between;gap:12px}.hud>div:not(.best){padding:9px 14px;border-radius:14px;background:#09252ed9}.hud strong{font-size:26px}.hud div span{font-size:9px;letter-spacing:1.5px}.hud #sound{margin-left:auto;width:44px;height:44px}
#tutorial{position:fixed;inset:0;z-index:50;overflow:hidden;touch-action:none}#tutorial[hidden]{display:none}#tutorial-spotlight{position:absolute;transform:translate(-50%,-50%);border:2px solid #ffdb80;border-radius:50%;box-shadow:0 0 0 200vmax #020d16df,0 0 24px #ffdb8070;pointer-events:none}#tutorial-vegetable{display:block;width:100%;height:100%;object-fit:contain;padding:12px}#tutorial-vegetable[hidden]{display:none}.tutorial-card{position:absolute;left:50%;top:48%;transform:translateX(-50%);width:min(320px,calc(100% - 36px));padding:18px;border:1px solid #ffdb8055;border-radius:18px;background:#10343f;color:#efffff;text-align:center}.tutorial-card small{color:#ffdb80;font-weight:800}.tutorial-card h2{font-size:23px;margin:8px 0}.tutorial-card p{font-size:14px;line-height:1.5;margin:10px 0}.tutorial-card .primary{margin-bottom:0}@media(max-height:500px){.tutorial-card{top:12%;left:27%;width:44%}#tutorial-spotlight:has(#tutorial-vegetable:not([hidden])){left:77%!important;top:38%!important}}
#wrong-impact{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0;border:8px solid #ff2929;background:radial-gradient(ellipse at center,#ff22222b 15%,#ff2020b3 100%);box-shadow:inset 0 0 80px #ff2020}@keyframes wrong-blast{0%{opacity:.95}35%{opacity:.65}100%{opacity:0}}@keyframes wrong-shake{0%,100%{transform:translate(0,0)}12%{transform:translate(-14px,8px)}25%{transform:translate(13px,-7px)}40%{transform:translate(-11px,-5px)}55%{transform:translate(10px,6px)}70%{transform:translate(-6px,3px)}85%{transform:translate(4px,-2px)}}
.hud{flex-wrap:wrap;align-items:center}.hud #sound{flex-shrink:0}#inventory{display:flex;gap:5px;flex-basis:100%;width:100%;list-style:none;margin:0;padding:0;max-width:420px}.inventory-slot{flex:1;min-width:0;max-width:52px;aspect-ratio:1;border:1px solid #ffffff30;border-radius:9px;background:#09252ee6;display:grid;place-items:center;overflow:hidden}.inventory-slot.collected{border-color:#ffdb8080;background:#30453fe6}.inventory-slot img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}@media(max-width:400px){#inventory{gap:4px}.inventory-slot{border-radius:7px}}
/* Keep the inventory in the top HUD strip, clear of the play area. */
.hud{flex-wrap:nowrap;gap:8px;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}.hud>div:not(.best){flex-shrink:0;padding:6px 9px}.hud strong{font-size:19px}.hud div span{font-size:7px;letter-spacing:1px}#inventory{order:1;flex:1 1 0;min-width:0;width:auto;max-width:330px;gap:4px}.hud #sound{order:2;margin-left:auto;width:36px;height:36px;min-width:36px;border-radius:10px}.inventory-slot{max-width:40px;border-radius:6px}.inventory-slot img{padding:1px}@media(max-width:400px){.hud{gap:5px}.hud>div:not(.best){padding:5px 6px}.hud strong{font-size:17px}#inventory{gap:3px}.hud #sound{width:32px;height:32px;min-width:32px}}