@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(#087db144,#043b6966),url('assets/island-bg.png')}.card{background:#fffdf1f2;border:5px solid white;border-radius:30px;box-shadow:0 10px #2383a8,0 20px 40px #06425d55}.menu{width:min(720px,92vw);padding:25px;text-align:center}.logo{font-size:72px}.menu h1,.result h1{font-size:clamp(38px,6vw,62px);margin:4px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.modes button{padding:22px;border:4px solid white;border-radius:22px;background:linear-gradient(#dfffcf,#77d879);box-shadow:0 7px #248c58;color:#174b44}.modes button+button{background:linear-gradient(#fff1a9,#ffb943);box-shadow:0 7px #cc7127}.modes b,.modes small{display:block}.modes b{font-size:23px}header{position:absolute;z-index:5;top:8px;left:10px;right:10px;height:58px;display:flex;align-items:center;justify-content:space-between;padding:8px 17px;border:4px solid white;border-radius:18px;background:#f5fff5ef;box-shadow:0 5px #2383a8}header button{border:0;border-radius:10px;background:white;padding:6px;font-size:18px}.route{position:absolute;top:78px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:7px 12px;border-radius:99px;background:#fffde8dd}.route i{width:20px;height:20px;border:3px solid white;border-radius:50%;background:#9fcad0}.route i.done{background:#52d46f}.route i.now{background:#ffbe35;transform:scale(1.25)}.play{position:absolute;left:5%;right:5%;top:120px;bottom:4%;display:grid;grid-template-columns:.75fr 1.2fr .8fr;align-items:center;gap:28px;padding:25px 38px}.guide{text-align:center}.guide>span{font-size:72px}.guide h2{margin:4px}.blocks{display:flex;justify-content:center;gap:6px;min-height:55px}.ten-block{width:19px;height:54px;border:2px solid #167c9e;border-radius:4px;background:repeating-linear-gradient(#5ee0eb 0 4px,#1ba4c2 4px 6px)}.unit-block{width:18px;height:18px;border:2px solid #bd7514;border-radius:4px;background:#ffd54b}.station{position:relative;align-self:stretch;display:grid;place-items:center;padding:35px 25px 15px;border:4px solid white;border-radius:25px;background:#fff8d9e8;box-shadow:0 7px #d79a2c}.station-title{position:absolute;top:-17px;left:50%;transform:translateX(-50%);padding:5px 18px;border-radius:99px;background:#f2684b;color:white;font-weight:700}.vertical{width:min(280px,100%);font-size:38px;font-weight:700}.labels,.num,.answer,.borrow-row{display:grid;grid-template-columns:1fr 1fr;text-align:center}.labels{font-size:14px;color:#61788a}.borrow-row{height:36px;color:#ef6d3b;font-size:25px}.num{height:50px}.bottom{position:relative;border-bottom:5px solid #173d5c}.bottom i{position:absolute;left:4px}.answer{gap:9px;margin-top:7px}.answer button{height:58px;border:4px dashed #3585a6;border-radius:14px;background:white;color:#173d5c;font-size:31px;font-weight:700}.answer button.active{border-color:#ffbb2e;box-shadow:0 0 0 4px #ffe47c}.borrow{margin-top:8px;padding:8px 18px;border:3px solid white;border-radius:14px;background:#ffb539;font-weight:700;box-shadow:0 5px #c66c24}.input-panel{padding:18px;border:4px solid white;border-radius:23px;background:#eafff4ea;box-shadow:0 7px #359974;text-align:center}.input-panel h3{margin:0 0 8px}.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.keypad button{min-height:47px;border:3px solid white;border-radius:11px;background:#daf2ff;color:#173d5c;font-size:21px;font-weight:700;box-shadow:0 4px #76a8bc}.primary,#choose{width:100%;margin-top:15px;padding:10px;border:3px solid white;border-radius:14px;background:linear-gradient(#55da73,#24a952);color:white;font-size:19px;font-weight:700;box-shadow:0 5px #18763b}.primary:disabled{filter:grayscale(1);opacity:.55}.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}.toast.show{animation:toast 1s}.overlay{z-index:30;background-color:#064b7588}.result{padding:28px;text-align:center}#choose{background:linear-gradient(#5ec8ef,#267fc2)}@keyframes toast{20%,75%{opacity:1}}@media(max-height:610px){header{height:44px;font-size:13px}.route{top:57px}.play{top:91px;bottom:2%;padding:13px 24px}.guide>span{font-size:45px}.guide h2{font-size:19px}.guide p{display:none}.vertical{font-size:28px}.num{height:36px}.borrow-row{height:26px;font-size:19px}.answer button{height:42px}.keypad button{min-height:34px}.input-panel{padding:9px}.station{padding:25px 15px 7px}}