:root{--ink:#143e33;--cream:#fff9e8;--jade:#27845d;--sun:#ffdb60}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;background:#225a43 url('assets/bamboo-valley.png') center/cover fixed}button{font:inherit;cursor:pointer;touch-action:none;user-select:none}button:focus-visible,canvas:focus-visible{outline:3px solid #ffd950;outline-offset:3px}.shell{max-width:1280px;margin:auto;padding:16px;min-height:100dvh}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:44px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 0 #123e32)}h1{margin:0;color:#fffdeb;font-size:28px;letter-spacing:-1px;text-shadow:0 3px #245441}.brand span{font-size:11px;letter-spacing:3px;font-weight:900;color:#fff3b9}.header-actions{display:flex;gap:8px}.header-actions button{border:1px solid #ffffff80;border-radius:12px;background:#174c3bdd;padding:10px 13px;color:#fff6dc;font-weight:800;font-size:13px}main{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}.game-wrap{position:relative;height:clamp(570px,78dvh,820px);overflow:hidden;border:5px solid #fff7dc;border-radius:26px;background:url('assets/bamboo-valley.png') center/cover;box-shadow:0 7px #235941,0 20px 45px #163c3860}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;inset:12px 14px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:8px}.metric,.timer{background:#fffcecF0;border:2px solid #fff;border-radius:15px;padding:8px 13px;box-shadow:0 3px #225c4855}.metric small,.timer small{font-size:10px;letter-spacing:1.2px;font-weight:900;text-transform:uppercase;display:block}.metric strong{font-size:24px;letter-spacing:1px;font-variant-numeric:tabular-nums}.right{text-align:right}.right strong{font-size:19px}.timer{background:#174c3beb;color:#fff7dc;text-align:center}.timer strong{display:block;font-size:26px;line-height:1.05}.effects{position:absolute;top:90px;left:0;right:0;display:flex;justify-content:center;gap:7px;pointer-events:none}.effect{border:2px solid #fff8;border-radius:20px;padding:6px 12px;background:#ffe480e8;font-size:12px;font-weight:900;box-shadow:0 3px 8px #174b3330}.effect.blue{background:#a9e6ffef}.effect.fever{background:#b7ff8bf0}.combo{position:absolute;top:132px;left:0;right:0;text-align:center;font-weight:1000;color:#fffdf0;text-shadow:0 2px #235943,2px 0 #235943,-2px 0 #235943;font-size:20px;pointer-events:none}.bottom-hud{position:absolute;bottom:11px;left:18px;right:18px;pointer-events:none}#hint{text-align:center;color:#fffdeb;text-shadow:0 2px 3px #103e2d;font-size:11px;letter-spacing:1px;font-weight:900;margin-bottom:7px}.power{height:19px;border:3px solid #fff9dc;background:#143e33bb;border-radius:16px;overflow:hidden;position:relative}.power div{height:100%;width:0;background:linear-gradient(90deg,#65d37e,#e8ee74);border-radius:10px}.power span{position:absolute;inset:0;text-align:center;font-size:9px;letter-spacing:2px;line-height:13px;font-weight:1000;color:white;text-shadow:0 1px 2px #143e33}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#123e3255;backdrop-filter:blur(5px);z-index:5;padding:25px}.overlay.hidden{display:none}.card{position:relative;width:min(470px,100%);padding:27px 30px;text-align:center;background:#fffbedf5;border:3px solid white;border-radius:28px;box-shadow:0 9px #225d47,0 25px 45px #16433266}.mascot{width:82px;height:92px;object-fit:contain;margin-top:-65px;filter:drop-shadow(0 5px 3px #123e3255)}.kicker,.eyebrow{font-size:11px;font-weight:1000;letter-spacing:1.8px;color:#397860;text-transform:uppercase}.card h2{font-size:58px;line-height:.94;letter-spacing:-3px;margin:14px 0 20px}.card p{font-size:15px;line-height:1.55;color:#4b6e5e;font-weight:650}.primary{padding:15px 26px;background:#ffdc61;border:0;border-radius:15px;font-weight:1000;color:#234d37;box-shadow:0 5px #d79e39;font-size:17px;margin:5px 0 15px}.primary:hover{filter:brightness(1.06);transform:translateY(1px)}.primary:disabled{opacity:.6;cursor:wait}.keys{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:750;color:#567966}kbd{background:white;border:1px solid #b4cebe;border-bottom-width:3px;padding:2px 5px;border-radius:5px;margin-right:3px}aside{display:flex;flex-direction:column;gap:15px}.panel{background:#fffceded;border:3px solid #fff9d9;border-radius:21px;padding:20px;box-shadow:0 5px #245a43}.panel h2{font-size:29px;line-height:1.05;letter-spacing:-1px;margin:13px 0}.panel p{font-size:14px;line-height:1.55;color:#4b6c5c;margin:0}.best{margin-top:20px;padding-top:14px;border-top:1px solid #c1d0b6;font-size:10px;letter-spacing:1.5px;font-weight:900}.best strong{display:block;font-size:28px;letter-spacing:2px;color:#27845d}.power-item{display:flex;gap:10px;align-items:center;margin-top:19px}.power-item h3{margin:0 0 4px;font-size:14px}.power-item p{font-size:12px}.fruit-icon{width:48px;min-width:48px;height:62px;background-image:url('assets/picnic-powers.png');background-repeat:no-repeat;background-size:150px 100px}.pineapple{background-position:-46px -12px}.blueberry{background-position:-101px -24px}.tip{flex:1}.tip p{margin-top:12px}footer{display:flex;justify-content:space-between;color:#fff8d7;font-size:11px;font-weight:800;margin-top:16px;text-shadow:0 1px #174c3b}.mobile-controls{display:none;gap:10px;grid-template-columns:1fr 2fr 1fr;margin-top:15px}.mobile-controls button{border:2px solid #fff2cf;border-radius:14px;background:#1f654e;color:#fff7dd;font-size:24px;min-height:60px;font-weight:1000;box-shadow:0 4px #153e31}.mobile-controls #munch{background:#ffda63;color:#234c37;font-size:14px;box-shadow:0 4px #b48534}.mobile-controls small{font-size:11px}.mobile-controls button:active{transform:translateY(3px);box-shadow:none}@media(max-width:900px){main{grid-template-columns:1fr}.shell{max-width:760px}.game-wrap{height:70dvh;min-height:470px}aside{display:none}.mobile-controls{display:grid}footer{display:none}}@media(max-width:500px){.shell{padding:8px}header{margin-bottom:10px}.brand{gap:5px}.brand img{width:32px;height:39px}h1{font-size:20px}.brand span{font-size:8px;letter-spacing:1.7px}.header-actions button{padding:8px;font-size:11px}.game-wrap{height:calc(100dvh - 161px);min-height:400px;border-width:3px;border-radius:20px}.hud{inset:8px 8px auto}.metric,.timer{padding:6px 8px}.metric strong{font-size:20px}.right strong{font-size:15px}.metric small,.timer small{font-size:8px}.timer strong{font-size:22px}.effects{top:77px}.effect{font-size:10px;padding:5px 8px}.combo{top:111px;font-size:16px}.card{padding:24px 17px}.card h2{font-size:43px}.card p{font-size:13px}.keys{gap:7px;font-size:10px}.overlay{padding:16px}.mobile-controls{margin-top:12px}#hint{font-size:9px}.bottom-hud{left:10px;right:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.header-actions{align-items:center}.header-actions .back{border:1px solid #ffffff80;border-radius:12px;background:#174c3bdd;padding:10px 13px;color:#fff6dc;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}.header-actions .back:focus-visible{outline:3px solid #ffd950;outline-offset:3px}