:root {
  --forest:#26391e; --moss:#78984b; --lime:#dbf3a5; --cream:#f2fad7; --pink:#fc14fe;
  color-scheme:dark; font-family:Verdana,Geneva,Arial,sans-serif; background:#22341e; color:var(--cream);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#344826 url("./assets/every-little-step-background.webp") center/cover fixed no-repeat}
button{font:inherit;cursor:pointer}
button:focus-visible,canvas:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.hidden{display:none!important}
.game{display:flex;flex-direction:column;width:min(100%,1240px);height:100dvh;min-height:0;margin:auto;background:linear-gradient(180deg,rgba(45,64,30,.88),rgba(15,35,21,.94));box-shadow:0 0 0 1px rgba(217,255,165,.24),0 12px 56px rgba(0,0,0,.4)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:81px;padding:12px 21px 11px;background:linear-gradient(#263f25,#122419);border-bottom:2px solid #b8e377;box-shadow:inset 0 -2px 0 #3d6634}
.brand-eyebrow,.eyebrow{font-size:9px;letter-spacing:.19em;color:#c7ee8c}
.brand h1{margin:3px 0 0;font-family:"Trebuchet MS",Verdana,sans-serif;font-size:clamp(17px,2.5vw,30px);line-height:1;letter-spacing:.035em;color:#f6ffda;text-shadow:1px 2px 0 #253919,0 0 8px rgba(195,255,137,.4)}
.brand h1 span{display:inline-block;margin-left:7px;color:#f490d9}
.hud{display:flex;align-items:center;gap:9px}
.hud-item{display:grid;gap:3px;min-width:88px;padding:5px 10px;border:1px solid #456b34;background:#15251b;text-align:center;box-shadow:inset 0 1px 7px #091b0c}
.hud-item span{font-size:9px;letter-spacing:.12em;color:#b3d58e}
.hud-item strong{font-size:17px;letter-spacing:.05em;color:#f0facc;font-variant-numeric:tabular-nums}
.button{padding:11px 20px;border:1px solid #b9ed81;background:linear-gradient(180deg,#3c5e2e,#223a22);color:#e6ffd1;font-size:11px;letter-spacing:.11em;box-shadow:inset 1px 1px 0 rgba(230,255,181,.24),0 2px 0 #10240b}
.button:hover:not(:disabled),.button:focus-visible:not(:disabled){background:#708f43;color:#fff}
.button.primary{background:linear-gradient(180deg,#c1ec7e,#71a442);color:#213b19;font-weight:700}
.button.primary:hover{background:#e0ffac;color:#172c13}
.button:disabled{opacity:.48;cursor:default}
.button-compact{padding:11px}
.arena{position:relative;display:flex;flex:1;min-height:0;align-items:stretch;justify-content:center;overflow:hidden;padding:10px;background:radial-gradient(ellipse at center,#678640 0,#35552f 82%,#213c29 100%)}
.board-wrap{display:grid;flex:1;min-width:0;min-height:0;place-items:center}
#board{display:block;max-width:100%;max-height:100%;touch-action:none;border:2px solid rgba(218,250,158,.75);background:#7f9b4e;box-shadow:0 0 0 2px #32552b,0 0 0 4px rgba(211,251,168,.18),0 10px 28px rgba(10,27,14,.36)}
.overlay{position:absolute;z-index:4;inset:0;display:grid;place-items:center;overflow:auto;padding:15px;background:rgba(12,29,15,.84);backdrop-filter:blur(5px)}
.overlay-panel{display:grid;justify-items:center;gap:13px;width:min(100%,490px);max-height:100%;overflow:auto;padding:20px 19px;background:linear-gradient(155deg,#526a36,#263c25 65%,#192c21);border:1px solid #d3ec96;box-shadow:0 0 0 4px rgba(39,62,35,.83),0 14px 46px #122313;text-align:center}
.overlay-panel h2{margin:0;color:#f3ffc6;font-family:"Trebuchet MS",Verdana,sans-serif;font-size:clamp(18px,3vw,27px);letter-spacing:.1em}
.overlay-panel p{margin:0}
.mascot-pair{display:block;width:clamp(120px,43%,220px);max-height:108px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(17,29,15,.5))}
.worm-select{display:flex;gap:12px;justify-content:center;width:100%}
.worm-choice{display:grid;width:min(44%,154px);justify-items:center;gap:0;padding:9px;border:1px solid rgba(210,251,157,.34);background:rgba(22,47,22,.72);color:#d9f5c1;font-size:11px;letter-spacing:.14em}
.worm-choice img{display:block;width:100%;height:68px;object-fit:contain}
.worm-choice.is-selected{border:2px solid #f8ffc8;background:#76934a;color:#fff;box-shadow:0 0 14px rgba(206,252,134,.25)}
.hint{max-width:345px;color:#e0edce;font-size:12px;line-height:1.6}
.result-mascot{width:min(55%,185px);max-height:135px;object-fit:contain}
.reward{display:grid;justify-items:center;gap:8px;width:min(100%,330px);padding:13px 16px;border:1px dashed #c5f492;background:rgba(15,37,20,.75)}
.reward>span,.reward small{font-size:9px;letter-spacing:.14em;color:#ccefb0}
.reward strong{font-family:"Trebuchet MS",Verdana,sans-serif;font-size:clamp(22px,4vw,32px);letter-spacing:.18em;color:#f9ffd2}
.reward small{line-height:1.45;letter-spacing:.04em}
.controls{display:flex;align-items:center;justify-content:center;gap:23px;min-height:58px;padding:7px 16px;background:linear-gradient(#1e3625,#12251d);border-top:1px solid rgba(220,255,179,.4)}
.controls p{font-size:10px;letter-spacing:.11em;color:#bfdba3}
.controls p span{color:#ed9bda}
.direction-pad{display:flex;gap:4px;align-items:center}
.direction-pad>button,.direction-pad>div button{min-width:30px;height:28px;border:1px solid rgba(192,233,141,.5);background:#31502c;color:#f2ffd3;font-size:17px;line-height:1}
.direction-pad>div{display:flex;gap:4px}
footer{display:flex;justify-content:space-between;gap:10px;min-height:26px;padding:6px 17px;font-size:8px;letter-spacing:.12em;color:#c2db9e;background:#101d15}
footer span{color:#92ae82}
@media(max-width:620px){
 .topbar{min-height:76px;padding:10px 12px;gap:8px}
 .brand h1{font-size:clamp(14px,4.2vw,20px)}
 .brand-eyebrow{font-size:7px;letter-spacing:.08em}
 .hud{gap:4px}
 .hud-item{min-width:0;padding:5px 6px}
 .hud-item span{font-size:7px}
 .hud-item strong{font-size:12px}
 .button-compact{padding:8px 5px;font-size:9px}
 .arena{padding:5px}
 .overlay-panel{gap:8px;padding:11px;max-height:100%}
 .mascot-pair{height:60px}
 .worm-choice img{height:52px}
 .hint{font-size:10px}
 .controls{min-height:90px;padding:7px 9px;gap:7px;justify-content:space-around}
 .direction-pad{display:grid;justify-items:center}
 .direction-pad>button,.direction-pad>div button{min-width:43px;height:38px}
 .controls p{max-width:105px;font-size:9px;line-height:1.6}
 footer{font-size:7px}
 footer span{display:none}
}
@media(max-width:350px), (max-height:500px){
 .topbar{min-height:45px;padding:6px 7px;gap:4px}
 .brand h1{font-size:12px;letter-spacing:0}
 .brand-eyebrow{font-size:6px}
 .hud-item{padding:2px 4px}
 .hud-item strong{font-size:10px}
 .hud-item span{font-size:6px}
 .button-compact{padding:6px 4px;font-size:8px}
 .arena{padding:3px}
 .controls{min-height:50px;padding:3px;gap:7px}
 .direction-pad{display:flex;gap:3px}
 .direction-pad>div{gap:3px}
 .direction-pad>button,.direction-pad>div button{min-width:27px;height:27px;font-size:14px}
 .controls p{font-size:7px;max-width:115px;letter-spacing:0}
 footer{display:none}
 .overlay{padding:4px}
 .overlay-panel{gap:5px;padding:6px;max-height:100%}
 .overlay-panel h2{font-size:14px}
 .eyebrow{font-size:7px}
 .mascot-pair{height:38px;width:130px}
 .worm-choice{padding:3px}
 .worm-choice img{height:37px}
 .hint{font-size:9px;line-height:1.3}
 .overlay-panel .button{padding:7px;font-size:9px}
 .result-mascot{max-height:46px}
 .reward{gap:3px;padding:5px}
 .reward strong{font-size:18px}
 .reward small{font-size:7px}
}