@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root{--ink:#173c3a;--yellow:#ffc928;--cream:#fff9df;--green:#2e7d4f}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#163f38;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}
body{display:grid;place-items:center;padding:clamp(0px,2vw,20px)}
.game-shell{width:min(1280px,100%);height:min(800px,100dvh);display:flex;flex-direction:column;background:#fff9df;border-radius:22px;overflow:hidden;box-shadow:0 22px 70px #09241f88}
.topbar{height:76px;flex:none;background:var(--cream);display:flex;align-items:center;padding:8px 18px;gap:14px;border-bottom:3px solid #e6cf83;z-index:4}
.back,.sound{width:45px;height:45px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff3b9;color:#31524b;font:bold 32px/1 sans-serif;text-decoration:none;box-shadow:inset 0 0 0 2px #e5cd77;cursor:pointer}
.sound{margin-left:auto;font-size:22px}
.title-wrap{line-height:1}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#6b8a6c}.title-wrap h1{margin:3px 0 0;font:800 24px/1 'Baloo 2',sans-serif}
.game{position:relative;min-height:0;flex:1;overflow:hidden;background:#93d7f1;isolation:isolate}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hud{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:12px;pointer-events:none}.score-card,.mission{background:#fffbe8df;border:2px solid #fff;border-radius:14px;box-shadow:0 5px 15px #386a6a30;backdrop-filter:blur(5px)}
.score-card{padding:7px 16px;text-align:center}.score-card span,.jar-title{display:block;font-size:9px;letter-spacing:1.8px;font-weight:800;color:#6b7d55}.score-card strong{font:800 24px/1 'Baloo 2'}.mission{padding:10px 15px;font-size:14px}.mission strong{color:#b36c0a}
.jar-wrap{position:absolute;right:24px;top:17px;text-align:center;pointer-events:none}.jar{width:82px;height:103px;position:relative;overflow:hidden;border:5px solid #f7ffffaa;border-top:10px solid #d5edf0cc;border-radius:9px 9px 25px 25px;background:#e8fbff42;box-shadow:0 6px 18px #356a6c33,inset 0 0 0 2px #83aeb177}.jar:before{content:"";position:absolute;left:9px;right:9px;top:-14px;height:13px;border-radius:4px;background:#b67838;z-index:3}.honey{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(#ffd83f,#eca315);transition:height .45s cubic-bezier(.2,.9,.3,1)}.jar-shine{position:absolute;left:10px;top:12px;width:8px;height:52px;border-radius:10px;background:#fff8}.jar span{position:absolute;inset:0;display:grid;place-items:center;font:800 17px 'Baloo 2';color:#67430b;text-shadow:0 1px #fff9}
.joystick{display:none;position:absolute;left:24px;bottom:22px;width:126px;height:126px;border-radius:50%;background:#fff9;border:3px solid #fff;box-shadow:0 8px 22px #163e4c42;touch-action:none;z-index:3;cursor:grab}.joystick.moving{cursor:grabbing;box-shadow:0 10px 28px #163e4c66,0 0 0 4px #fff8}.stick{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,#ffd84c,#eea900);border:3px solid #fff7c3;box-shadow:0 5px 12px #6a511d66;transform:translate(0,0);cursor:pointer;z-index:2}.joystick-arrows{position:absolute;inset:8px;text-align:center;color:#51706e88;font:bold 15px sans-serif;line-height:34px;pointer-events:none}.joystick-arrows span{display:block;word-spacing:45px;line-height:30px}
.panel{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-46%) scale(.94);width:min(470px,calc(100% - 32px));max-height:calc(100% - 24px);overflow:auto;padding:24px 30px 22px;text-align:center;border:4px solid #fff;border-radius:28px;background:#fff9e9f2;box-shadow:0 20px 50px #244f4c55;backdrop-filter:blur(9px);opacity:0;pointer-events:none;transition:.3s}.panel.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.panel-bee{font-size:55px;height:47px;filter:drop-shadow(0 5px 3px #806b3544)}.kicker{margin:11px 0 2px;font-size:10px;letter-spacing:2.5px;font-weight:800;color:#6e925c}.panel h2{font:800 clamp(25px,5vw,34px)/1.1 'Baloo 2';margin:4px 0 14px}.choices{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:16px}.choices button{aspect-ratio:1;border:2px solid #e5cf91;border-radius:10px;background:#fff;color:#37534b;font:800 17px 'Baloo 2';cursor:pointer}.choices button.selected{border-color:#dda800;background:var(--yellow);color:#493600;transform:translateY(-2px);box-shadow:0 4px 0 #c18e00}.primary{border:0;border-radius:13px;background:#246b49;color:white;padding:12px 19px;font:800 17px 'Baloo 2';box-shadow:0 5px 0 #16482f;cursor:pointer}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary span{margin-left:10px}.help{margin:15px 0 0;font-size:11px;color:#60736e}.end-panel{width:min(420px,calc(100% - 32px))}.end-panel #endText{margin:-5px 0 10px;color:#58706a}.message{position:absolute;left:50%;top:22%;translate:-50% 0;z-index:4;opacity:0;padding:8px 18px;border-radius:99px;background:#fff7d9e8;border:2px solid #fff;font:800 18px 'Baloo 2';box-shadow:0 5px 15px #214c4233;pointer-events:none}.message.pop{animation:message 1.2s ease}@keyframes message{0%{opacity:0;transform:translateY(15px) scale(.8)}20%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-15px)}}
.hidden{display:none!important}.highscore-panel{margin:14px 0 12px;padding:10px 13px;border:2px solid #e7d28e;border-radius:14px;background:#fffdf1;text-align:left}.highscore-panel h3{margin:0 0 5px;color:#315b48;font:800 16px 'Baloo 2'}.highscore-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;margin:0;padding-left:25px}.highscore-list li{padding:1px 0;font-size:12px;font-weight:800}.highscore-list li span{display:inline-flex;justify-content:space-between;width:100%;gap:8px}.highscore-status{margin:5px 0 0;color:#718078;font-size:10px}.score-form{margin:7px 0 10px;padding:10px;border-radius:12px;background:#fff3b8}.score-form label{display:block;margin-bottom:5px;font-size:12px;font-weight:800}.score-row{display:flex;justify-content:center;gap:7px}.score-row input{width:92px;padding:8px;text-align:center;text-transform:uppercase;border:2px solid #d5b950;border-radius:9px;font:800 18px 'Baloo 2';letter-spacing:3px}.score-row button{border:0;border-radius:9px;background:#b9720a;color:white;padding:7px 12px;font-weight:800}.score-message{min-height:14px;margin:4px 0 0;font-size:10px;color:#675126}
@media (pointer:coarse),(max-width:800px){.joystick{display:block}.help{display:none}.jar-wrap{right:12px}.hud{left:12px}.mission{display:none}}
@media (max-height:600px){.topbar{height:54px}.title-wrap h1{font-size:19px}.back,.sound{width:36px;height:36px}.panel{padding:14px 24px}.panel-bee{display:none}.joystick{width:104px;height:104px;left:14px;bottom:12px}.stick{left:28px;top:28px;width:42px;height:42px}.jar{width:64px;height:82px}}
.end-panel{top:35%}
.table-change{position:absolute;z-index:6;left:50%;top:46%;width:min(330px,calc(100% - 40px));padding:18px 24px 16px;translate:-50% -50%;text-align:center;border:4px solid #fff;border-radius:26px;background:linear-gradient(145deg,#fff8c9,#ffd43c);box-shadow:0 18px 45px #28564e66,0 0 0 100vmax #164c3940;opacity:0;pointer-events:none;transform:scale(.55) rotate(-4deg)}.table-change span{display:block;color:#8a5c00;font-size:12px;font-weight:800;letter-spacing:3px}.table-change strong{display:block;margin:-8px 0 -13px;color:#18523b;font:800 88px/1 'Baloo 2';text-shadow:0 4px #fff}.table-change p{margin:6px 0 0;color:#405c4e;font-size:16px}.table-change.show{animation:new-table 2.2s cubic-bezier(.2,.9,.25,1)}@keyframes new-table{0%{opacity:0;transform:scale(.45) rotate(-7deg)}12%,72%{opacity:1;transform:scale(1) rotate(0)}82%{opacity:1;transform:scale(1.04) rotate(1deg)}100%{opacity:0;transform:scale(.7) translateY(-30px)}}