:root{--sea-deep: #073a52;--sea-mid: #0d5c78;--sea-light: #1a8a9e;--foam: #e8f4f6;--sand: #d4b896;--ink: #0a2430;--danger: #b33a3a;--ok: #2f7d4a;--miss: #6b8794;--hit: #c45c26;--sunk: #8a1f1f;--touch: 48px;--font-display: "Fraunces", "PT Serif", "Palatino Linotype", Palatino, serif;--font-body: "Figtree", "PT Sans", "Avenir Next", "Segoe UI", sans-serif;color:var(--foam);background:radial-gradient(120% 80% at 50% -10%,#14607a 0%,var(--sea-deep) 55%,#042433 100%);font-family:var(--font-body);line-height:1.4}@font-face{font-family:Figtree;font-style:normal;font-weight:400 700;font-display:swap;src:local("Figtree"),local("Avenir Next")}@font-face{font-family:Fraunces;font-style:normal;font-weight:600 700;font-display:swap;src:local("Fraunces"),local("Palatino Linotype")}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100dvh}.app-shell{min-height:100dvh;max-width:480px;margin:0 auto;padding:1.25rem 1rem 2rem}.app-top{display:flex;justify-content:flex-end;margin-bottom:.5rem}.lang-switch{display:inline-flex;gap:.15rem;align-items:center}.lang-btn{min-height:2rem;min-width:2.25rem;padding:.25rem .45rem;border:1px solid transparent;border-radius:6px;background:transparent;color:#9ec4d0;font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.04em;cursor:pointer}.lang-btn:hover{color:var(--foam)}.lang-btn.active{color:var(--foam);border-color:#e8f4f659;background:#04243359}.brand{font-family:var(--font-display);font-size:clamp(2rem,8vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--foam)}.lede{margin:0 0 1.5rem;color:#b9d7e0;font-size:1rem}.stack{display:flex;flex-direction:column;gap:.85rem}label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:#c5e0e8}input{min-height:var(--touch);border-radius:10px;border:1px solid rgba(232,244,246,.25);background:#04243373;color:var(--foam);padding:.65rem .85rem;font-size:1rem;font-family:inherit}input:focus{outline:2px solid var(--sea-light);outline-offset:1px}.btn{min-height:var(--touch);border:none;border-radius:12px;padding:.75rem 1rem;font-size:1.05rem;font-weight:650;font-family:inherit;cursor:pointer;touch-action:manipulation}.btn-primary{background:linear-gradient(180deg,#2aa0b5,#157a8c);color:#f4fbff}.btn-secondary{background:#e8f4f61f;color:var(--foam);border:1px solid rgba(232,244,246,.22)}.btn-danger{background:#b33a3ae6;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.err{color:#ffb4b4;margin:0;font-size:.95rem}.panel{background:#04243359;border:1px solid rgba(232,244,246,.12);border-radius:16px;padding:1rem}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem;letter-spacing:.12em;margin:.25rem 0}.invite{word-break:break-all;font-size:.9rem;color:#b9d7e0}.presence{font-size:.95rem;color:var(--sand);margin:0 0 .75rem}.board{--cell: min(9.2vw, 42px);display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));gap:2px;width:max-content;max-width:100%;margin:0 auto}.cell{width:var(--cell);height:var(--cell);min-width:28px;min-height:28px;border:none;border-radius:4px;background:#1a8a9e59;color:var(--foam);padding:0;touch-action:manipulation;display:grid;place-items:center;font-size:calc(var(--cell) * .55);font-weight:700;line-height:1}.cell:disabled{opacity:1;color:inherit;-webkit-text-fill-color:currentColor}.cell.ship{background:#2c6b7a}.cell.miss{background:var(--miss);color:#e8f4f68c}.cell.hit{background:var(--hit);color:#fff3e8}.cell.sunk,.cell.ship.sunk{background:var(--sunk);color:#ffe0a8;box-shadow:inset 0 0 0 1px #ffc47873}.cell.miss:after{content:"·"}.cell.hit:after{content:"×"}.cell.sunk:after{content:"★";animation:sunk-pop .35s ease-out}.cell.fireable:not(:disabled){cursor:pointer}.cell.fireable:not(:disabled):active{transform:scale(.96)}.board-wrap{position:relative;overflow:hidden;width:100%}.boom-burst{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-display);font-size:clamp(2.2rem,12vw,3.4rem);font-weight:700;letter-spacing:.04em;color:#ffe7a8;text-shadow:0 0 12px rgba(196,92,38,.85),0 2px 0 rgba(10,36,48,.65);animation:boom-burst 1.1s ease-out forwards;z-index:2}.board-wrap.boom-active .board{animation:boom-shake .45s ease-out}@keyframes boom-burst{0%{opacity:0;transform:scale(.4) rotate(-8deg)}18%{opacity:1;transform:scale(1.12) rotate(2deg)}55%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(1.25) rotate(0)}}@keyframes boom-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}@keyframes sunk-pop{0%{transform:scale(.4);opacity:.2}to{transform:scale(1);opacity:1}}.turn{font-weight:700;margin:.5rem 0}.dock{display:flex;flex-wrap:wrap;gap:.5rem}.chip{min-height:40px;padding:.4rem .7rem;border-radius:999px;border:1px solid rgba(232,244,246,.25);background:transparent;color:var(--foam);font:inherit}.chip.active{background:#2aa0b559;border-color:var(--sea-light)}.row-actions{display:flex;flex-wrap:wrap;gap:.6rem}.restart-bar{margin-top:.5rem;padding-top:.85rem;border-top:1px solid rgba(232,244,246,.12);display:flex;flex-direction:column;gap:.55rem}.restart-hint{margin:0;font-size:.9rem;color:#b9d7e0}.restart-btn{width:100%}.row-actions>*{flex:1 1 140px}h2{font-family:var(--font-display);font-size:1.4rem;margin:0 0 .5rem}.battle-boards{display:flex;flex-direction:column;gap:.85rem}.battle-pane{display:flex;flex-direction:column;align-items:center;gap:.35rem}.battle-pane h2{align-self:stretch;text-align:center}@media(orientation:landscape)and (min-width:900px){.app-shell{max-width:980px}.battle-boards{flex-direction:row;align-items:flex-start;justify-content:center;gap:1.75rem}.battle-pane{flex:1 1 0;min-width:0}.battle-boards .board{--cell: min(4vw, 40px)}}