@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;600;700&display=swap');*{box-sizing:border-box}html,body,main,.screen{margin:0;width:100%;height:100%;overflow:hidden;font-family:Mitr,sans-serif;color:#173d5c}button{font-family:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/island-bg.png') center/cover}.hide{display:none!important}.center,.overlay{display:grid;place-items:center;background-image:linear-gradient(#087ba955,#09456677),url('assets/island-bg.png')}.panel{border:5px solid white;border-radius:28px;background:#fffdf2f2;box-shadow:0 10px #2384a8,0 20px 40px #073d5b55}.intro{width:min(620px,92vw);padding:28px;text-align:center}.logo{font-size:72px}.intro h1,.finish h1{margin:3px;font-size:clamp(38px,6vw,60px)}.rules{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px}.rules span{padding:6px 12px;border-radius:99px;background:#e3f7ee}.primary{border:3px solid white;border-radius:14px;padding:10px 24px;background:linear-gradient(#55d979,#21a950);color:white;font-size:19px;font-weight:700;box-shadow:0 5px #18773c}header{position:absolute;z-index:5;top:8px;left:10px;right:10px;height:62px;display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border:4px solid white;border-radius:19px;background:#f7fff5ef;box-shadow:0 5px #2384a8}header>div:nth-child(2){width:min(380px,35vw);text-align:center}header i{display:block;height:9px;margin-top:4px;border-radius:9px;background:#bed4dc;overflow:hidden}header i span{display:block;width:20%;height:100%;background:linear-gradient(90deg,#52d873,#ffd34b)}header button{border:0;border-radius:10px;background:white;padding:6px;font-size:18px}.game-panel{position:absolute;left:50%;top:92px;bottom:3%;transform:translateX(-50%);width:min(1440px,94vw);display:grid;grid-template-columns:minmax(540px,1.55fr) minmax(280px,.65fr);gap:28px;padding:25px}.board-wrap{min-width:0}.board-title{text-align:center}.board-title h2{margin:0}.board{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:14px}.equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:5px;padding:13px 9px;border:4px solid white;border-radius:18px;background:#e7f7ff;box-shadow:0 6px #75a9bd;font-size:clamp(20px,2vw,30px);font-weight:700;text-align:center}.answer-cell{min-width:51px;height:52px;border:3px dashed #3981a2;border-radius:12px;background:#fff;color:#173d5c;font-size:23px;font-weight:700}.answer-cell.active{border-color:#ffb928;box-shadow:0 0 0 4px #ffe282}.answer-cell.correct{border-style:solid;border-color:#28ad58;background:#dfffe5}.answer-cell.wrong{border-color:#f05252;background:#ffe1e1}aside{align-self:center;padding:20px;border:4px solid white;border-radius:23px;background:#eafff1;box-shadow:0 7px #3a9b71;text-align:center}.selected{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;border-radius:15px;background:white}.selected b{font-size:32px}.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:14px 0}.keypad button{min-height:48px;border:3px solid white;border-radius:11px;background:#dcefff;color:#173d5c;font-size:20px;font-weight:700;box-shadow:0 4px #78a5ba}.actions{display:grid;grid-template-columns:.7fr 1.3fr;gap:9px}.actions button{padding:9px;border:3px solid white;border-radius:13px;font-weight:700}#erase{background:#ffe4dd;color:#9b392f}#status{margin-bottom:0}.toast{position:fixed;z-index:20;left:50%;top:48%;transform:translate(-50%,-50%);padding:12px 25px;border-radius:20px;background:white;font-weight:700;opacity:0;pointer-events:none}.toast.show{animation:toast 1s}.overlay{position:fixed;inset:0;width:100vw;height:100dvh;z-index:30;background-size:cover}.finish{padding:30px;text-align:center}@keyframes toast{20%,75%{opacity:1}}@media(max-width:1050px){.board{grid-template-columns:repeat(2,1fr)}.game-panel{grid-template-columns:1fr 290px}.equation{padding:8px}}@media(max-width:760px),(max-height:560px){header{height:46px;font-size:12px}.game-panel{top:62px;bottom:2%;width:97vw;grid-template-columns:1fr 250px;gap:10px;padding:10px}.board-title small{display:none}.board-title h2{font-size:18px}.board{margin-top:8px;gap:7px}.equation{font-size:18px;padding:5px}.answer-cell{height:38px;min-width:39px;font-size:17px}aside{padding:8px}.keypad{gap:3px;margin:7px 0}.keypad button{min-height:32px}.actions button{padding:4px}#status{font-size:12px}}
@media(max-width:620px) and (orientation:portrait){html,body,main,.screen{overflow:auto}.game-panel{position:absolute;height:auto;min-height:calc(100dvh - 70px);grid-template-columns:1fr}.board{grid-template-columns:1fr 1fr}aside{position:sticky;bottom:6px}.equation{font-size:16px}.answer-cell{min-width:34px}.intro{margin:15px}.intro h1{font-size:38px}}