:root{--bg:#eef4f9;--bg-raised:#fff;--line:#b9cddd;--water:#d3e5f2;--water-edge:#a9c6dd;--text:#14283a;--muted:#43607a;--accent:#e8b64c;--accent-ink:#2b1f04;--warn:#7a5a10;--bad:#b3261e;--danger-bg:#b3261e;--ship:#2e6da0;--ship-edge:#24567e;--cell-hit-bg:#f0b3ac;--cell-hit-edge:#c2261e;--cell-sunk-bg:#dd9188;--cell-sunk-edge:#8f1d16;--cell-ship-hit:#e8a37c;--sel-ring:#8a5a00;--char-back-bg:#cddcea;--char-back-edge:#9db8cd;--char-back-text:#35516b;--animal-picked-bg:#fdf3dd;--pass-glow:#dce9f4;--modal-backdrop:#14283a8c}:root[data-theme=dark]{--bg:#0b1d2e;--bg-raised:#122c42;--line:#24425c;--water:#16344d;--water-edge:#1f4463;--text:#e8f1f8;--muted:#b3c7d9;--accent:#e8b64c;--accent-ink:#2b1f04;--warn:#e8b64c;--bad:#e5534b;--danger-bg:#b3261e;--ship:#5aa9d6;--ship-edge:#7dbfe4;--cell-hit-bg:#6e2a24;--cell-hit-edge:#e5534b;--cell-sunk-bg:#451712;--cell-sunk-edge:#7a2019;--cell-ship-hit:#8a4a2e;--sel-ring:#e8b64c;--char-back-bg:#0e2033;--char-back-edge:#1b3550;--char-back-text:#3d5a75;--animal-picked-bg:#2a3f2c;--pass-glow:#10283d;--modal-backdrop:#0009}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;min-height:100dvh;display:flex}.screen{padding:max(56px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;width:100%;max-width:640px;margin:0 auto;display:flex}.title{text-align:center;text-wrap:balance;margin:0;font-size:clamp(1.4rem,4.5vw,1.8rem)}.subtitle{color:var(--muted);text-align:center;margin:0;font-size:1.05rem}.hint{color:var(--muted);text-align:center;max-width:44ch;margin:0;font-size:.9rem}.warn{color:var(--warn);margin:0;font-weight:600}.btn{font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--line);cursor:pointer;border-radius:14px;min-height:48px;padding:12px 22px;font-weight:600}.btn.big{width:min(100%,420px);padding:16px 28px;font-size:1.15rem}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn:disabled{opacity:.35;cursor:default}.btn.link{color:var(--muted);background:0 0;border:none;min-height:44px;text-decoration:underline}.btn.link.danger{color:var(--bad)}.btn.danger-solid{background:var(--danger-bg);border-color:var(--danger-bg);color:#fff}.reset-holder{flex-direction:column;align-items:center;gap:10px;min-height:44px;display:flex}.btn:not(:disabled):active{transform:scale(.97)}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.row.center{align-items:baseline}.top-controls{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));z-index:40;gap:8px;display:flex;position:fixed}.control-btn,.help-btn{border:1px solid var(--line);background:var(--bg-raised);width:44px;height:44px;color:var(--text);cursor:pointer;border-radius:50%;place-items:center;font-size:1.1rem;font-weight:700;display:grid}.control-btn.lang{font-size:.9rem}.help-btn{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:40;color:var(--muted);position:fixed}.modal-backdrop{background:var(--modal-backdrop);z-index:50;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-raised);border:1px solid var(--line);border-radius:18px;flex-direction:column;gap:12px;max-width:520px;max-height:min(80dvh,640px);padding:24px;display:flex}.modal h2{text-align:center;margin:0}.modal-body{text-align:left;overflow-y:auto}.modal-body p,.modal-body li{margin:0 0 10px;line-height:1.45}.modal-body ul{margin:0 0 10px;padding-left:20px}.modal .btn{align-self:center}.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:18px;width:min(100%,460px);padding:20px}.game-card{align-items:center;gap:16px;display:flex}.game-card .btn{flex-shrink:0;margin-left:auto}.game-icon{font-size:2.6rem}.game-info h2{margin:0 0 4px}.game-info p{color:var(--muted);margin:0;font-size:.95rem}.field-label{color:var(--muted);flex-direction:column;align-items:center;gap:6px;margin:0;font-size:.95rem;display:flex}.name-input{font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--line);text-align:center;-webkit-user-select:text;user-select:text;border-radius:12px;width:min(80vw,320px);padding:10px 14px;font-size:1.2rem}.animal-grid{grid-template-columns:repeat(4,1fr);gap:12px;width:min(100%,420px);display:grid}.animal{background:var(--bg-raised);border:2px solid var(--line);aspect-ratio:1;cursor:pointer;border-radius:16px;place-items:center;padding:0;font-size:clamp(1.8rem,8vw,2.6rem);display:grid}.animal.picked{border-color:var(--accent);background:var(--animal-picked-bg);box-shadow:0 0 0 2px var(--accent) inset}.animal-grid.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}.unlock-msg{min-height:1.4em;color:var(--bad);margin:0;font-weight:600}.grid-holder{justify-content:center;width:100%;display:flex}.grid{grid-template-columns:1.4em repeat(8,1fr);gap:3px;width:min(100%,62dvh,480px);display:grid}.grid.mini{width:min(70%,280px)}.grid .label{color:var(--muted);place-items:center;font-size:.75rem;display:grid}.cell{aspect-ratio:1;background:var(--water);border:1px solid var(--water-edge);border-radius:6px;place-items:center;font-size:clamp(.7rem,2.6vw,1.1rem);display:grid}.grid.mini .cell{border-radius:4px;font-size:.65rem}.cell.ship{background:var(--ship);border-color:var(--ship-edge)}.cell.miss{color:var(--muted)}.cell.hit{background:var(--cell-hit-bg);border-color:var(--cell-hit-edge)}.cell.sunk{background:var(--cell-sunk-bg);border-color:var(--cell-sunk-edge);opacity:.9}.cell.ship.hit{background:var(--cell-ship-hit)}.cell.sel,.cell.last{outline:3px solid var(--sel-ring);outline-offset:-1px}.cell.last{animation:.9s ease-out pulse}@keyframes pulse{0%{transform:scale(1.25)}to{transform:scale(1)}}.tray{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.chip{font:inherit;color:var(--text);background:var(--bg-raised);border:2px solid var(--line);cursor:pointer;border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:600}.chip.active{border-color:var(--sel-ring);color:var(--warn)}.chip.done{opacity:.4;text-decoration:line-through}.fleet-status{gap:8px;display:flex}.pill{letter-spacing:2px;color:var(--ship);font-size:1rem}.pill.sunk{color:var(--bad);opacity:.7;text-decoration:line-through}.own-board{text-align:center;width:min(100%,420px)}.own-board summary{color:var(--muted);cursor:pointer;padding:8px}.own-board .grid{margin:8px auto 0}.btn.fire{width:min(100%,320px)}.char-grid{grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,460px);display:grid}@media (aspect-ratio>=4/3){.char-grid{grid-template-columns:repeat(6,1fr);width:min(100%,620px)}}.char{cursor:pointer;perspective:500px;aspect-ratio:4/5;background:0 0;border:none;padding:0}.char-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s;display:block;position:relative}.char.down .char-inner{transform:rotateY(180deg)}.char-face,.char-back{backface-visibility:hidden;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.char-face{background:var(--bg-raised);border:1px solid var(--line);gap:2px}.char-back{background:var(--char-back-bg);border:1px solid var(--char-back-edge);color:var(--char-back-text);font-size:1.3rem;font-weight:700;transform:rotateY(180deg)}.char.sel .char-face,.char.sel.down .char-back{outline:3px solid var(--sel-ring);outline-offset:-1px}.gw-turn .title{font-size:1.05rem}.char-emoji{font-size:clamp(1.9rem,8vw,2.9rem);line-height:1.1}.char-name{color:var(--muted);text-align:center;padding:0 2px;font-size:.65rem}.secret-badge{background:var(--bg-raised);border:1px solid var(--line);border-radius:999px;align-items:center;gap:8px;padding:6px 16px;display:flex}.secret-label{color:var(--muted);font-size:.85rem}.secret-emoji{font-size:1.4rem}.secret-name{font-weight:700}.deal-card{background:var(--bg-raised);border:2px solid var(--accent);border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:22px 34px;display:flex}.deal-card.small{border-color:var(--line);padding:14px 20px}.deal-emoji{font-size:3.4rem;line-height:1.1}.deal-name{font-size:1.15rem;font-weight:700}.question-list{flex-direction:column;gap:8px;width:min(100%,440px);display:flex}.btn.question{width:100%}.marble-wrap{height:100dvh;padding-top:max(64px, env(safe-area-inset-top));flex-direction:column;display:flex;overflow:hidden}.marble-stage{min-height:0;margin:0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));border:2px solid var(--line);background:var(--bg-raised);border-radius:14px;flex:1;position:relative;overflow:hidden}.marble-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.marble-hint{align-self:center;padding:6px 12px 0}.marble-toolbar{padding:10px 12px max(12px, env(safe-area-inset-bottom))}.btn.draw-toggle,.btn.stacked{flex-direction:column;align-items:center;gap:1px;padding-top:6px;padding-bottom:6px;line-height:1.2;display:flex}.draw-toggle .toggle-state,.stacked .sub{color:var(--muted);font-size:.78rem}.draw-toggle .toggle-state.off{color:var(--warn)}.mf-hud{padding:4px 12px 8px}.mf-coins{font-size:1.35rem;font-weight:700}.mf-upgrades{padding:8px 12px 0}.dp-hud{gap:18px;font-size:1.05rem;font-weight:700}.dp-stage{background:#05070d}.dp-audio{align-items:center;gap:8px;display:flex}.dp-audio .control-btn{width:38px;height:38px;font-size:.95rem}.dp-volume{width:110px;accent-color:var(--accent)}.dp-credit{display:inline-flex;position:relative}.dp-credit-btn{width:30px;height:30px;color:var(--muted);font-size:.85rem}.dp-credit-pop{background:var(--bg-raised);border:1px solid var(--line);width:max-content;max-width:250px;color:var(--text);z-index:45;border-radius:12px;padding:10px 14px;font-size:.85rem;font-weight:400;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 6px 18px #00000040}.dp-minimap{background:#05070d8c;border-radius:8px;position:absolute;top:8px;right:8px}.dp-over{background:#05070db8;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.dp-over-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:18px;flex-direction:column;align-items:center;gap:10px;width:min(100%,420px);max-height:100%;padding:20px 26px;display:flex;overflow-y:auto}.dp-log{text-align:center;min-height:3.6em;color:var(--muted);padding:6px 12px 0;font-size:.88rem;line-height:1.3}.dp-pad{padding:4px 12px 0}.dp-pad .btn{min-width:76px;padding:10px 18px;font-size:1.25rem}.hh-hud{gap:18px;font-weight:700}.hh-stage{background:#9db8cd}.hh-fuel{align-items:center;gap:6px;display:inline-flex}.hh-fuel-track{background:var(--water);border:1px solid var(--line);border-radius:999px;width:110px;height:12px;display:inline-block;overflow:hidden}.hh-fuel-bar{background:var(--accent);height:100%;transition:width .2s;display:block}.hh-fuel-bar.low{background:var(--danger-bg)}.hh-pedals{padding:8px 16px max(12px, env(safe-area-inset-bottom));justify-content:space-between;width:100%}.btn.hh-pedal{touch-action:none;flex-direction:column;align-items:center;gap:2px;min-width:118px;min-height:72px;font-size:1.6rem;line-height:1.1;display:flex}.hh-pedal .sub{color:var(--muted);font-size:.8rem}.jz-thumb{border:1px solid var(--line);border-radius:10px;max-width:200px;max-height:140px}.pass-icon,.result-icon{font-size:3.4rem;line-height:1}.screen.pass{background:radial-gradient(circle at 50% 30%, var(--pass-glow) 0%, var(--bg) 70%)}