@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');
:root{--ink:#33271f;--cream:#fff6df;--sand:#b98a55;--dark:#38291f;--green:#4f8a54}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#261d18;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}body{display:grid;place-items:center;padding:clamp(0px,1.6vw,16px)}
button,input{font:inherit}.game-shell{width:min(1360px,100%);height:min(900px,100dvh);display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#5f452f;box-shadow:0 24px 80px #0008}.topbar{height:72px;flex:none;display:flex;align-items:center;gap:13px;padding:8px 16px;background:#fff5dc;border-bottom:3px solid #c7a36c;z-index:8}.round-button{width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:#ead6ad;color:#473427;box-shadow:inset 0 0 0 2px #c9a978;cursor:pointer}.back{font:bold 31px/1 sans-serif;text-decoration:none}.sound{font-size:21px}.title-wrap{line-height:1}.title-wrap span{font-size:9px;font-weight:800;letter-spacing:2.3px;color:#8b653f}.title-wrap h1{margin:3px 0 0;font:800 25px/1 'Baloo 2'}.timer{margin-left:auto;text-align:center;padding:4px 14px;border-radius:12px;background:#fffaf0;box-shadow:inset 0 0 0 2px #dec799}.timer span{display:block;font-size:8px;letter-spacing:1.7px;color:#8b6b49;font-weight:800}.timer strong{font:800 23px/1.1 'Baloo 2';font-variant-numeric:tabular-nums}.game{position:relative;min-height:0;flex:1;overflow:hidden;isolation:isolate;background:#5a402b}#canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.legend{position:absolute;left:14px;top:13px;display:flex;gap:7px;flex-wrap:wrap;max-width:400px;padding:7px 9px;border-radius:11px;background:#2a2019ba;color:#fff6df;font-size:10px;font-weight:800;pointer-events:none}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:10px;height:10px;border-radius:3px}.area{background:#c99448}.perimeter{background:#b66d4d}.volume{background:#6e9276}.surface{background:#718da1}
.joystick{display:none;position:absolute;left:22px;bottom:20px;width:124px;height:124px;border-radius:50%;background:#fff5d9b5;border:3px solid #fff5dc;box-shadow:0 8px 25px #25170d88;touch-action:none;z-index:5}.stick{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,#c99153,#725039);border:3px solid #f2d5a3;box-shadow:0 5px 12px #36221688}.joystick-arrows{position:absolute;inset:8px;text-align:center;color:#624b3e99;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:10;left:50%;top:50%;translate:-50% -47%;width:min(530px,calc(100% - 30px));max-height:calc(100% - 24px);overflow:auto;padding:24px 30px;text-align:center;border:4px solid #fff7e3;border-radius:27px;background:#fff6e9f3;box-shadow:0 22px 60px #1f140d99;backdrop-filter:blur(8px);opacity:0;pointer-events:none;transform:scale(.94);transition:.25s}.panel.visible{opacity:1;pointer-events:auto;transform:scale(1);translate:-50% -50%}.mole-badge{position:relative;width:73px;height:59px;margin:0 auto;color:#67503d;font-size:72px;line-height:.55;text-shadow:0 4px #d0a474}.mole-badge:before,.mole-badge:after{content:'';position:absolute;top:6px;width:18px;height:18px;border-radius:50%;background:#9b7053}.mole-badge:before{left:5px}.mole-badge:after{right:5px}.mole-badge span{position:absolute;left:27px;top:17px;color:#fff;font:bold 22px sans-serif}.kicker{margin:9px 0 2px;color:#9a6b3c;font-size:10px;font-weight:800;letter-spacing:2.2px}.panel h2{margin:4px 0 8px;font:800 clamp(27px,5vw,37px)/1.05 'Baloo 2'}.panel>p:not(.kicker){margin:5px auto 15px;max-width:420px;color:#6d5a4c}.rules{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}.rules span{padding:7px 9px;border-radius:9px;background:#efe0bd;font-size:11px;font-weight:800}.primary,.secondary{border:0;border-radius:12px;padding:11px 19px;font:800 17px 'Baloo 2';cursor:pointer}.primary{background:#5a7c4c;color:#fff;box-shadow:0 5px 0 #38552f}.secondary{margin-left:7px;background:#e6d2ac;color:#4b382b}.help{font-size:11px!important}.records{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.records div{padding:9px;border-radius:11px;background:#fffdf5;border:2px solid #e3cd9f}.records span{display:block;font-size:8px;letter-spacing:1.3px;color:#876a48;font-weight:800}.records strong{font:800 19px 'Baloo 2'}.end-panel{width:min(420px,calc(100% - 30px))}.final-time{display:block;margin:-9px 0 8px;font:800 42px 'Baloo 2';color:#587346}.initials-label{display:block;font-size:11px;font-weight:800}.initials{display:block;width:104px;margin:5px auto 12px;padding:8px;text-align:center;text-transform:uppercase;letter-spacing:4px;border:2px solid #c9a66e;border-radius:9px;font:800 20px 'Baloo 2'}
.task-panel{position:absolute;z-index:7;right:18px;top:16px;width:min(410px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:17px;border:3px solid #f9edd5;border-radius:20px;background:#fff6e9f5;box-shadow:0 16px 45px #25150ca0;translate:calc(100% + 40px) 0;opacity:0;pointer-events:none;transition:.32s cubic-bezier(.2,.8,.2,1)}.task-panel.visible{translate:0;opacity:1;pointer-events:auto}.task-heading{display:flex;justify-content:space-between;align-items:start}.task-heading span{font-size:9px;font-weight:800;letter-spacing:2px;color:#9a6b3c}.task-heading h2{margin:2px 0 4px;font:800 25px/1 'Baloo 2'}.task-heading button{width:28px;height:28px;border:0;border-radius:50%;background:#ead9b7;color:#74583d;font-weight:800}.task-body{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:8px}#shapeCanvas{width:145px;height:112px}.formula-wrap{text-align:center}.formula-wrap p{margin:5px}.formula-wrap #formula{font:800 23px 'Baloo 2'}.formula-wrap #values{font-size:13px;font-weight:800}.answer-step label{display:block;margin:2px 0 4px;font-size:11px;font-weight:800}.answer-display{display:flex;align-items:center;justify-content:center;gap:7px}.answer-display input{width:140px;height:42px;padding:4px 9px;text-align:center;border:3px solid #c59c62;border-radius:10px;background:#fff;font:800 25px 'Baloo 2'}.answer-display span{font-weight:800}.keypad{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:9px}.keypad button,.unit-choices button{min-height:39px;border:0;border-radius:9px;background:#e8d6b4;color:#3f3026;font-weight:800;box-shadow:0 3px 0 #c0a276;cursor:pointer}.keypad .submit{grid-column:span 2;background:#5d8150;color:#fff;box-shadow:0 3px 0 #3c5d33}.unit-step{display:none;text-align:center}.unit-step.visible{display:block}.correct-mark{width:42px;height:42px;display:grid;place-items:center;margin:2px auto;border-radius:50%;background:#4e9856;color:#fff;font-size:27px;font-weight:800}.unit-step h3{margin:4px 0 9px;font:800 20px 'Baloo 2'}.unit-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.unit-choices button{font-size:18px;background:#f0dfbf}.unit-choices button.wrong{animation:shake .28s;background:#df8b78}.unit-choices button.right{background:#70a66b;color:#fff}.toast{position:absolute;z-index:9;left:50%;top:18%;translate:-50% 0;padding:9px 18px;border:2px solid #fff3db;border-radius:99px;background:#33251de8;color:#fff8e9;font:800 17px 'Baloo 2';opacity:0;pointer-events:none}.toast.show{animation:toast 1.5s}.toast.joker{background:#6d4a88}.hidden{display:none!important}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes toast{0%{opacity:0;transform:translateY(12px)}15%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@media(pointer:coarse),(max-width:850px){.joystick{display:block}.legend{max-width:260px}.task-panel{right:10px;top:10px}.help{display:none}.task-body{grid-template-columns:120px 1fr}#shapeCanvas{width:120px}.keypad button{min-height:46px}}
@media(max-width:620px){.title-wrap span{display:none}.title-wrap h1{font-size:19px}.topbar{height:58px;padding:6px 9px}.round-button{width:38px;height:38px}.timer{padding:3px 8px}.timer strong{font-size:18px}.sound{display:none}.legend{font-size:8px}.task-panel{width:calc(100% - 20px);max-height:calc(100% - 20px)}.task-heading h2{font-size:21px}}
@media(max-height:600px){.panel{padding:14px 20px}.mole-badge,.rules{display:none}.joystick{width:102px;height:102px;left:12px;bottom:10px}.stick{left:28px;top:28px;width:41px;height:41px}.task-panel{padding:11px}.task-body{grid-template-columns:100px 1fr}#shapeCanvas{width:100px;height:82px}.keypad button{min-height:35px}}
.panel img.mole-badge{display:block;position:static;width:112px;height:92px;margin:-12px auto -2px;object-fit:contain;filter:drop-shadow(0 6px 5px #70472545)}
.keypad{grid-template-columns:repeat(3,1fr);gap:7px;width:min(260px,100%);margin:10px auto 0}.keypad button{min-height:43px;font-size:18px}.keypad .submit{grid-column:auto}
.keypad button,.unit-choices button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media(max-width:620px){.sound{display:grid}}

.records ol{margin:8px 0 0;padding-left:22px;text-align:left;font-size:12px;font-variant-numeric:tabular-nums}.records li{padding:3px 0}.end-panel{width:min(530px,calc(100% - 30px))}
.level-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.level-choices button{min-height:55px;padding:7px 5px;border:2px solid #d8bc88;border-radius:11px;background:#fffaf0;color:#4a382b;cursor:pointer;touch-action:manipulation}.level-choices strong,.level-choices span{display:block}.level-choices strong{font:800 16px 'Baloo 2'}.level-choices span{font-size:10px}.level-choices button.selected{border-color:#527349;background:#dbe9cb;box-shadow:0 3px 0 #78906c}.scoreboard-level{margin:12px 0 -8px!important;color:#72563b!important;font:800 14px 'Baloo 2'}.delete-answer{width:42px;height:42px;border:0;border-radius:9px;background:#e8d6b4;color:#49372a;font-size:20px;font-weight:800;touch-action:manipulation}.keypad button.decimal-hidden{visibility:hidden;pointer-events:none}@media(max-width:560px){.level-choices span{display:none}.level-choices button{min-height:43px}.level-choices strong{font-size:14px}}