:root{--paper:url("assets/asset-01.png");--panel:url("assets/asset-02.png");--banner:url("assets/asset-03.png");--button:url("assets/asset-04.png");}
*{box-sizing:border-box}html{height:100%}body{margin:0;color:#643b21;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#fff4e1 var(--paper) center/100% 100% fixed;min-height:100%;}main{max-width:1540px;margin:auto;padding:30px 4% 35px}header{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px}h1,h2,h3{font-family:"幼圆","YouYuan","Microsoft YaHei",sans-serif}h1{font-size:clamp(30px,3.2vw,48px);line-height:1.25;margin:0;min-width:360px;padding:25px 40px;background:var(--banner) center/105% 175% no-repeat}button{font:inherit;font-weight:700;color:inherit;cursor:pointer;touch-action:manipulation;border:0;min-height:45px}button:focus-visible{outline:3px solid #497d6c;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.action{background:var(--button) center/112% 163% no-repeat;padding:15px 24px;font-size:22px;min-width:124px}.soft{background:transparent;border-bottom:2px solid #d1b998;padding:9px 14px;font-size:19px}.frame{background:var(--panel) center/104% 127% no-repeat;padding:30px}.mascot{text-align:center}.mascot img{display:block;width:100%;height:100%;object-fit:contain}.mascot strong{display:block;font-size:24px;margin-top:4px}.mascot .figure{height:160px}.status{font-size:19px;min-height:28px;line-height:1.5;color:#47755f;text-align:center;margin:12px 0}dialog{max-width:92vw;border:0;background:#fff8ec;color:#643b21;border-radius:22px;padding:25px 30px;box-shadow:0 12px 80px #57341855}dialog::backdrop{background:#30251955}dialog h2{text-align:center;font-size:30px;margin:0 0 20px}.digits{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.digits button{font-size:30px;background:#f0ead3;min-width:56px;min-height:56px;border-radius:12px}.digits button:last-child{grid-column:3/5}.dialog-actions{display:flex;gap:15px;justify-content:center;margin-top:18px}.topnav{display:flex;gap:12px}.topnav button{background:transparent;font-size:22px;padding:12px 16px;border-bottom:3px solid transparent}.topnav .active{border-color:#ad713d;color:#854919}.hide{display:none!important}@media(max-width:1000px){main{padding:18px 20px}header{gap:8px;margin-bottom:12px}h1{min-width:280px;padding:18px 26px;font-size:33px}.topnav{gap:4px}.topnav button{font-size:18px;padding:10px}.action{font-size:18px;padding:12px 14px;min-width:90px}.frame{padding:20px}.mascot .figure{height:118px}.mascot strong{font-size:20px}}@media(max-width:680px){header{flex-wrap:wrap}.topnav{width:100%;justify-content:center}main{padding:12px}.frame{padding:12px}h1{font-size:29px;min-width:270px}.soft{font-size:16px}}#score{font-size:23px;padding-right:20px}#score b{color:#51785d;font-size:34px}.ocean-layout{display:grid;grid-template-columns:1fr 185px;gap:25px;align-items:center}.ocean{height:min(590px,69vw);min-height:420px;position:relative;overflow:hidden}#balls{position:absolute;left:5%;top:12%;width:89%;height:68%}.ball{position:absolute;width:15%;aspect-ratio:1;padding:0;background:none;transition:opacity .3s,transform .35s;min-height:0}.ball img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ball b{position:absolute;inset:0;display:grid;place-items:center;padding-top:2%;font-size:clamp(30px,4.5vw,60px);line-height:1;color:#302a25;pointer-events:none}.ball.selected{transform:scale(1.1);filter:drop-shadow(0 0 7px #f5b80d)}.ball.gone{opacity:0;transform:scale(.15);pointer-events:none}.ball.wrong{animation:shake .3s}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}.ball.survivor{transition:left .85s cubic-bezier(.25,.8,.3,1),top .85s,width .85s,transform .85s;left:36%!important;top:6%!important;width:28%;z-index:2}.ball.survivor b{font-size:clamp(55px,7vw,96px)}#ending{position:absolute;top:67%;left:8%;width:84%;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;text-align:center}#ending.visible{opacity:1;transform:none}#ending h2{font-size:clamp(30px,3.5vw,48px);margin:0;font-weight:700}.ocean>.status{position:absolute;bottom:7%;left:5%;width:90%;margin:0}aside{display:flex;flex-direction:column;align-items:center;gap:42px}aside .mascot .figure{height:195px}#restart{width:170px}@media(max-width:950px){.ocean-layout{grid-template-columns:1fr 130px;gap:8px}.ocean{min-height:420px}aside .mascot .figure{height:135px}#restart{width:130px;font-size:18px}.ball b{font-size:36px}}@media(max-width:680px){.ocean-layout{grid-template-columns:1fr}.ocean{height:460px}aside{flex-direction:row;justify-content:center;gap:35px}aside .mascot .figure{height:75px}.mascot strong{font-size:17px}.ball b{font-size:29px}}