@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}html,body,#app,.screen{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Mitr",system-ui,sans-serif;color:#123f69}button{font:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/ocean-bg.png') center/cover no-repeat}.hidden{display:none!important}.intro{display:grid;place-items:center;padding:12px}.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(#009fe655,#063b8144)}.intro-card{z-index:1;text-align:center;width:min(590px,92vw);max-height:calc(100dvh - 28px);padding:clamp(16px,3vh,34px);border:5px solid #fff;border-radius:36px;background:#fffdf1ee;box-shadow:0 12px 0 #147ab5,0 22px 50px #063b8177}.logo{font-size:clamp(55px,12vh,100px);line-height:1;filter:drop-shadow(0 7px 3px #083d7166);animation:rock 2s ease-in-out infinite}.intro-card>p{color:#ee6944;font-weight:700;margin:4px}.intro h1{font-size:clamp(35px,6.5vh,61px);line-height:1.12;margin:4px;color:#116db0}.rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px auto 20px;padding:10px 20px;border-radius:20px;background:#ddf7ff;font-size:clamp(15px,2.5vh,21px)}.rule b{color:#fff;background:#168ed0;padding:6px 12px;border-radius:13px}.rule strong{color:#f04b3f;font-size:1.5em}.primary{border:0;border-radius:20px;padding:clamp(9px,1.7vh,14px) 45px;background:linear-gradient(#ffd845,#ffac18);color:#684000;font-size:clamp(19px,3vh,24px);font-weight:700;box-shadow:0 7px 0 #d27608}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #d27608}.hud{position:absolute;z-index:20;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;height:67px;display:grid;grid-template-columns:1fr minmax(240px,1.2fr) 1fr;align-items:center;gap:18px;padding:8px 15px;background:#ffffffed;border:3px solid #fff;border-radius:23px;box-shadow:0 6px 0 #167db2}.brand{font-size:clamp(15px,1.7vw,23px);font-weight:700}.wave{text-align:center}.wave>div{height:9px;margin-top:4px;border-radius:8px;background:#d7e9ec;overflow:hidden}.wave i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff4c91,#ffd331);transition:.4s}.score{display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:20px}.score button{width:41px;height:41px;border:2px solid #c3e1eb;border-radius:13px;background:white;box-shadow:0 3px #8ab4c2}.mission{position:absolute;z-index:15;top:94px;left:50%;transform:translateX(-50%);width:min(670px,91vw);padding:8px 22px 11px;text-align:center;background:#fffdf2f2;border:4px solid #fff;border-radius:25px;box-shadow:0 6px 0 #f1a420}.mission small{display:block;color:#597588}.mission strong{display:block;font-size:clamp(20px,2.4vw,31px)}.timer{height:8px;margin-top:6px;border-radius:8px;background:#dce9ea;overflow:hidden}.timer i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#40cf93,#ffc62f,#f05448);transform-origin:left}.timer i.running{animation:countdown var(--round-time) linear forwards}.sea{position:absolute;inset:205px 0 7%;overflow:hidden}.boat{position:absolute;left:-25%;width:clamp(145px,16vw,265px);height:clamp(105px,12vw,200px);border:0;background:transparent;filter:drop-shadow(0 10px 5px #063b8166);animation:sail var(--round-time) linear forwards}.boat:nth-child(1){top:0}.boat:nth-child(2){top:34%}.boat:nth-child(3){top:68%}.hull{position:absolute;left:10%;right:0;bottom:4%;height:30%;background:linear-gradient(#f7a229,#d56320);clip-path:polygon(0 0,100% 0,80% 100%,18% 100%);border-radius:0 0 30px 30px}.mast{position:absolute;left:51%;top:3%;width:5px;height:72%;background:#754723}.sail{position:absolute;left:12%;top:4%;width:39%;height:64%;background:linear-gradient(140deg,var(--light),var(--color));clip-path:polygon(100% 0,100% 100%,0 83%);border-radius:40% 0 0 15%}.sail.right{left:54%;width:36%;background:linear-gradient(220deg,#fff8d6,#fff);clip-path:polygon(0 0,100% 83%,0 100%)}.number{position:absolute;z-index:2;left:31%;top:31%;transform:translate(-50%,-50%);min-width:54px;padding:1px 7px;border-radius:14px;background:#fff;color:#123f69;font-size:clamp(26px,3.4vw,51px);font-weight:700;line-height:1.15;box-shadow:0 4px 0 #123f6940}.boat:hover,.boat:focus-visible{outline:none;filter:drop-shadow(0 0 14px #fff) drop-shadow(0 10px 5px #063b8166)}.boat.correct{animation:correct .7s ease-in forwards}.boat.wrong{animation:wrong .45s}.toast{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;padding:13px 28px;border-radius:28px;background:#fff;font-size:30px;font-weight:700;pointer-events:none}.toast.show{animation:toast .8s}.modal{position:fixed;z-index:99;inset:0;display:grid;place-items:center;padding:20px;background:#073e7299;backdrop-filter:blur(7px)}.modal-card{width:min(550px,92vw);padding:32px;text-align:center;background:#fffdf1;border:5px solid #fff;border-radius:35px;box-shadow:0 12px 0 #147ab5}.modal-card>div{font-size:75px}.modal h2{font-size:clamp(34px,5vw,60px);margin:0;color:#1475b4}.modal p{font-size:21px}@keyframes sail{to{left:110%}}@keyframes correct{60%{transform:scale(1.2) translateY(-20px)}100%{left:110%;opacity:0}}@keyframes wrong{25%{transform:translateY(-12px) rotate(-5deg)}50%{transform:translateY(8px) rotate(5deg)}}@keyframes toast{20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes rock{50%{transform:rotate(5deg) translateY(-7px)}}
@media(max-width:700px){.hud{grid-template-columns:1fr 1fr;height:58px}.brand span{display:none}.wave{position:absolute;left:25%;right:25%;top:7px;font-size:13px}.score{font-size:16px}.score button{width:34px;height:34px}.mission{top:80px;padding:6px 12px}.mission small{font-size:12px}.sea{inset:176px 0 6%}.boat{width:130px;height:100px;left:-34%}.number{font-size:25px;min-width:42px}.rule{flex-direction:column;gap:3px;margin:7px auto 14px}}@media(max-height:620px){.intro-card{padding:10px 25px}.logo{font-size:50px}.intro h1{font-size:31px}.rule{margin:6px auto 12px;padding:6px 15px}.hud{height:55px}.mission{top:77px}.sea{inset:166px 0 3%}.boat{max-width:145px;max-height:108px}}