*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#31a8e6;font-family:"Baloo 2",system-ui,sans-serif;color:#12304f;user-select:none;-webkit-user-select:none;overscroll-behavior:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#31a8e6;color:#fff;font-size:26px;font-weight:700;z-index:10}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}#hud button{pointer-events:auto}.panel{background:#fffbf0f2;border-radius:18px;box-shadow:0 4px #12304f40}.hidden{display:none!important}.bar{height:10px;border-radius:999px;background:#d9e6ef;overflow:hidden}.bar>div{height:100%;width:0;border-radius:999px;transition:width .25s}#top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}#zone{padding:8px 14px;min-width:170px}#zone-name{font-weight:800;font-size:17px;line-height:1.1}#zone .bar{margin:5px 0 2px}#zone-fill{background:#3fd0a8}#zone-pct{font-size:13px;font-weight:600;color:#3b5a77}#money{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;font-size:22px}#money b{font-weight:800}.coin{display:inline-block;width:24px;height:24px;border-radius:50%;background:#ffd34d;border:3px solid #b38a12;box-shadow:inset 0 0 0 3px #ffe58a;vertical-align:middle}#cargo{position:absolute;left:50%;transform:translate(-50%);bottom:max(14px,env(safe-area-inset-bottom));width:min(320px,70vw);padding:8px 14px 10px}#cargo .row{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:5px}#cargo .bar{height:14px}#cargo-fill{background:#ff8a3d}#cargo.full #cargo-fill{background:#ff5a5a}#cargo.full{animation:pulse .9s ease-in-out infinite}@keyframes pulse{50%{transform:translate(-50%) scale(1.05)}}#toasts{position:absolute;left:50%;top:90px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:90vw}.toast{padding:8px 16px;border-radius:14px;background:#fffbf0f7;font-weight:700;font-size:17px;box-shadow:0 4px #12304f40;animation:popin .25s ease-out;transition:opacity .5s,transform .5s;text-align:center}.toast.gold{background:#ffd34d;color:#4a3500;font-size:19px}.toast.warn{background:#ffe1d6;color:#9c2a12}.toast.out{opacity:0;transform:translateY(-8px)}@keyframes popin{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.pop{position:fixed;transform:translate(-50%,-50%);font-weight:800;font-size:20px;color:#ffe14d;text-shadow:0 2px 0 #8a5a0a,0 0 6px rgba(0,0,0,.25);pointer-events:none;animation:rise .9s ease-out forwards;z-index:5}@keyframes rise{to{transform:translate(-50%,-160%);opacity:0}}#port-arrow{position:absolute;left:50%;top:50%;width:160px;height:40px;display:flex;justify-content:flex-end;align-items:center}#port-arrow span{font-size:40px;color:#ffd34d;text-shadow:0 3px 0 #8a5a0a;animation:nudge .7s ease-in-out infinite}@keyframes nudge{50%{transform:translate(8px)}}#shop{position:absolute;left:50%;transform:translate(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 74px);width:min(460px,94vw);padding:10px 12px 12px}#shop .ttl{font-weight:800;font-size:18px;text-align:center;margin-bottom:8px}#shop-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.card{font-family:inherit;color:#12304f;border:3px solid #ff8a3d;background:#fff3e8;border-radius:16px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-height:120px}.card:active{transform:scale(.96)}.card.poor{border-color:#d9e6ef;background:#fff}.card.poor .cost{color:#b0412a}.card.max{border-color:#3fd0a8;background:#e8fff7}.card .nm{font-weight:800;font-size:16px}.card .nm small{font-weight:600;font-size:12px;color:#3b5a77}.card .eff{font-size:12px;font-weight:600;color:#3b5a77;text-align:center;line-height:1.15}.card .cost{margin-top:auto;font-weight:800;font-size:17px;display:flex;align-items:center;gap:5px}.card .cost .coin{width:18px;height:18px;border-width:2px}.card .ico{width:34px;height:34px;border-radius:10px}.ico-net{background:repeating-linear-gradient(45deg,#8a5a33 0 2px,transparent 2px 7px),repeating-linear-gradient(-45deg,#8a5a33 0,#8a5a33 2px,#fff3c4 2px,#fff3c4 7px);border:3px solid #8a5a33}.ico-hold{background:#d79a52;border:3px solid #8f5527;box-shadow:inset 0 0 0 5px #e0a862}.ico-motor{background:radial-gradient(circle,#ffd34d 6px,#5c6680 7px,#5c6680 10px,#b7c2d6 11px);border:3px solid #5c6680;border-radius:50%!important}#reset{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:44px;height:44px;border-radius:50%;border:none;background:#fffbf0cc;font-size:22px;font-weight:800;color:#3b5a77}#joy{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid rgba(255,255,255,.6);background:#ffffff1f;pointer-events:none;z-index:4}#joy-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#ffffffbf;transform:translate(-50%,-50%)}