:root {
  --ink:#092d4b; --navy:#06365a; --blue:#0d78a8; --aqua:#37d5d1; --foam:#f4ffff;
  --gold:#ffc857; --coral:#ff6f61; --glass:rgba(241,253,255,.88); --line:rgba(255,255,255,.34);
  --shadow:0 20px 50px rgba(2,31,55,.24),0 4px 12px rgba(2,31,55,.16);
  --cell:min(4.25vw,5.8vh,48px);
  --font-rounded:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow:hidden;background:#0879aa;color:var(--ink);font-family:var(--font-rounded)}
body{min-height:100dvh;background-image:linear-gradient(rgba(3,43,76,.12),rgba(3,43,76,.38)),url("assets/ocean-command-bg.png");background-size:cover;background-position:center}
button,input{font:inherit} button{cursor:pointer}
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ambient:after{content:"";position:absolute;inset:45% -20% -15%;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 34px,rgba(255,255,255,.07) 35px 37px);animation:drift 14s linear infinite}
.ambient i{position:absolute;width:8px;height:8px;border:2px solid rgba(255,255,255,.4);border-radius:50%;bottom:-20px;animation:bubble 10s linear infinite}
.ambient i:nth-child(1){left:8%}.ambient i:nth-child(2){left:35%;animation-delay:-4s}.ambient i:nth-child(3){left:73%;animation-delay:-7s}.ambient i:nth-child(4){left:91%;animation-delay:-2s}
@keyframes bubble{to{transform:translateY(-110vh) scale(2);opacity:0}} @keyframes drift{to{transform:translateX(8%)}}
#app{position:relative;z-index:1;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:grid;place-items:center}
.screen{width:100%;height:calc(100dvh - 36px);max-width:1360px;animation:screenIn .48s cubic-bezier(.2,.8,.2,1)}
@keyframes screenIn{from{opacity:0;transform:scale(.97) translateY(12px)}}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(224,250,252,.80));border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.rivet{position:relative}
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5vw}
.hero-copy{padding:4vw;color:white;text-shadow:0 3px 12px rgba(0,34,60,.28)}.eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;font-weight:900;color:#d8ffff}
h1,h2,h3,p{margin-top:0}.hero h1{font-family:var(--font-rounded);font-size:clamp(4rem,9vw,8rem);line-height:.75;margin:.24em 0 .14em;letter-spacing:-.055em}.hero h1 span{display:block;color:var(--gold);font-size:.33em;letter-spacing:.1em;line-height:1.2}
.hero p{font-size:clamp(1.05rem,2vw,1.45rem);max-width:560px}.hero-card{border-radius:34px;padding:30px;text-align:center;transform:rotate(1deg)}
.periscope{width:min(280px,36vh);aspect-ratio:1;margin:auto;border-radius:50%;border:16px solid #0a4f72;background:radial-gradient(circle,transparent 0 7%,rgba(41,240,222,.4) 8% 9%,transparent 10% 27%,rgba(41,240,222,.22) 28% 29%,transparent 30%),conic-gradient(from 0deg,transparent 0 78%,rgba(69,255,230,.65) 84%,transparent 91%),radial-gradient(circle,#0b8da1,#063859 72%);box-shadow:inset 0 0 35px #021e39,0 8px 0 #073b59,0 18px 34px rgba(0,40,70,.3);position:relative;animation:radar 4s linear infinite}
.periscope:after{content:"⚓";position:absolute;inset:0;display:grid;place-items:center;font-size:5rem;filter:drop-shadow(0 8px 6px rgba(0,0,0,.25))}
@keyframes radar{to{transform:rotate(360deg)}}.periscope:after{animation:counter 4s linear infinite}@keyframes counter{to{transform:rotate(-360deg)}}
.btn{border:0;border-radius:18px;padding:14px 22px;min-height:54px;font-weight:900;color:white;background:linear-gradient(#1db4bd,#087b9d);box-shadow:0 6px 0 #055a79,0 12px 20px rgba(3,67,91,.22);transition:.16s transform,.16s filter;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #055a79}.btn.gold{background:linear-gradient(#ffd96c,#ffad32);color:#573606;box-shadow:0 6px 0 #ce7520,0 12px 20px rgba(132,73,8,.24)}.btn.coral{background:linear-gradient(#ff8a74,#f05255);box-shadow:0 6px 0 #b93749}.btn.ghost{color:var(--ink);background:rgba(255,255,255,.7);box-shadow:0 4px 0 #9acbd5}.btn:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed}
.icon-btn{width:48px;height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.62);background:rgba(3,49,78,.76);color:#fff;box-shadow:0 4px 12px rgba(2,31,55,.24);display:grid;place-items:center;transition:.18s transform,.18s background,.18s color}
.icon-btn:hover{transform:translateY(-2px);background:#075a7c}.icon-btn:active{transform:translateY(1px)}.icon-btn[aria-pressed="true"]{color:#80fff0;background:rgba(3,64,89,.9);box-shadow:0 0 0 2px rgba(128,255,240,.22),0 4px 12px rgba(2,31,55,.24)}
.icon-btn svg{width:27px;height:27px;overflow:visible;fill:currentColor}.icon-btn svg .signal{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.icon-btn svg .off-mark{fill:none;stroke:#ffcf66;stroke-width:2.8;stroke-linecap:round;filter:drop-shadow(0 1px 1px #073451)}
.icon-btn svg .reset-arrow{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.reset-btn{color:#ffd2ca;background:rgba(91,38,58,.82)}.reset-btn:hover{color:white;background:#9c4054}
.settings{position:fixed;z-index:80;top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:flex;gap:8px}
.nav-icon{width:48px;height:48px;border:1px solid rgba(255,255,255,.92);border-radius:15px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 5px 0 rgba(150,129,92,.28),0 10px 22px rgba(2,31,55,.16);display:grid;place-items:center;transition:.16s transform,.16s filter}.nav-icon:hover{filter:brightness(1.04);transform:translateY(-2px)}.nav-icon:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(150,129,92,.28)}.nav-icon svg{width:25px;height:25px;fill:currentColor;overflow:visible}.nav-icon .signal{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.nav-icon .off-mark{fill:none;stroke:var(--coral);stroke-width:2.7;stroke-linecap:round}.nav-icon .home-roof,.nav-icon .home-door{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sound-btn[aria-pressed="true"]{color:#087b91;box-shadow:0 5px 0 rgba(150,129,92,.28),0 0 0 3px rgba(55,213,209,.2)}.home-btn{position:fixed;z-index:80;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left))}
.panel{border-radius:30px;padding:clamp(20px,3vw,38px)}
.startup-choice,.pin-setup{display:grid;place-items:center;text-align:center}.startup-card,.pin-setup-card{width:min(540px,100%);border-radius:34px;padding:clamp(28px,5vw,48px)}.startup-card h1,.pin-setup-card h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1;margin:.18em 0 .4em}.startup-card p,.pin-setup-card p{color:#527486}.resume-mark,.player-token{width:88px;height:88px;margin:0 auto 16px;border-radius:28px;display:grid;place-items:center;font-size:2.8rem;color:white}.resume-mark{background:linear-gradient(#35bec4,#087b9d);box-shadow:0 7px 0 #05637d}.player-token{padding:4px;background:var(--player);box-shadow:0 7px 0 color-mix(in srgb,var(--player),#000 25%)}.startup-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 18px}.startup-card small{display:block;color:#668794}.pin-setup-card .pin-dots{margin:22px 0}.pin-setup-card .hint{margin:18px 0 0}
.setup{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;align-items:stretch}.setup-art{border-radius:30px;padding:35px;color:white;background:linear-gradient(160deg,rgba(4,75,111,.9),rgba(8,136,154,.82));display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:var(--shadow)}
.captain-badge{font-size:5rem;filter:drop-shadow(0 7px 3px rgba(0,0,0,.2));animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}
.setup-form{border-radius:30px;padding:clamp(24px,4vw,50px);align-self:center}.step{color:var(--blue);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.setup-form h2,.placement h2,.handoff h2{font-family:var(--font-rounded);font-size:clamp(2rem,4vw,3.5rem);font-weight:900;line-height:1;margin:.15em 0 .5em;letter-spacing:-.035em}
label{display:block;font-weight:900;margin:18px 0 7px}.input{width:100%;border:2px solid #b8e2e8;background:rgba(255,255,255,.8);border-radius:16px;padding:15px 17px;font-size:1.1rem;color:var(--ink);outline:none}.input:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(55,213,209,.18)}
.avatars{display:flex;gap:12px;flex-wrap:wrap}.avatar-option{width:62px;height:62px;border:3px solid white;border-radius:18px;font-size:1.75rem;background:var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c),#000 25%);transition:.2s}.avatar-option.selected{outline:4px solid var(--gold);transform:translateY(-4px) rotate(-3deg)}
.form-actions{display:flex;justify-content:flex-end;margin-top:28px}.hint{font-size:.87rem;color:#527486}
.placement{display:grid;grid-template-rows:auto 1fr;gap:12px}.topbar{width:min(100%,960px);justify-self:center;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;color:white;text-shadow:0 2px 8px rgba(0,0,0,.25)}.topbar h2{margin:0;display:flex;align-items:center;gap:11px}.top-actions{display:none}
.place-body{width:min(100%,960px);justify-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,300px);gap:16px;min-height:0;align-items:start}.board-panel,.fleet-panel{border-radius:26px;padding:16px;min-height:0;height:auto}.board-wrap{display:grid;place-items:center}
.board{display:grid;grid-template-columns:26px repeat(10,var(--cell));grid-template-rows:26px repeat(10,var(--cell));gap:3px;touch-action:none;user-select:none}
.coord{display:grid;place-items:center;font-size:.72rem;font-weight:900;color:#387188}.cell{position:relative;border:0;border-radius:8px;background:linear-gradient(145deg,rgba(51,203,211,.75),rgba(10,126,169,.82));box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),inset -2px -2px 3px rgba(4,66,105,.2);padding:0;overflow:visible}
.cell:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.11)}
.cell:hover,.cell.hover{filter:brightness(1.14);outline:2px solid var(--gold);z-index:3}.cell.invalid{outline:3px solid var(--coral)}
.cell.preview-valid,.cell.preview-invalid{z-index:8;filter:none;outline-width:3px;outline-style:solid}.cell.preview-valid{background:linear-gradient(145deg,rgba(95,229,151,.82),rgba(16,145,111,.88));outline-color:#b9ffd3;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 0 14px rgba(64,224,147,.55)}.cell.preview-invalid{background:linear-gradient(145deg,rgba(255,119,105,.84),rgba(185,42,70,.9));outline-color:#ffd1c9;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 0 14px rgba(255,75,83,.48)}
.cell.preview-valid:before,.cell.preview-invalid:before{content:"";position:absolute;inset:16%;border-radius:40%;background:linear-gradient(145deg,rgba(255,239,178,.82),rgba(222,139,51,.72));box-shadow:inset 2px 2px 1px rgba(255,255,255,.65),inset -2px -2px 3px rgba(110,61,21,.32);opacity:.68;z-index:2}
.ship-cell{background:linear-gradient(145deg,#f9e5a9,#e89f40);box-shadow:inset 2px 2px 1px #fff5c9,inset -2px -3px 4px #9c5a28}.ship-cell:before{content:"";position:absolute;inset:20%;border-radius:50%;background:#71523b;box-shadow:inset 0 0 0 3px #d5bf8a}.ship-cell.sunk{filter:grayscale(.55);background:#465b67}
.fleet-panel{display:flex;flex-direction:column}.fleet-head{display:flex;justify-content:space-between;align-items:center}.fleet-head h3{margin:0;font-size:1.22rem}.fleet-head b{padding:5px 9px;border-radius:999px;background:#dff7f5;color:#167b8c;font-size:.78rem}.placement-tools{display:grid;gap:8px;margin-top:10px}.fleet-tool-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.placement-tools .btn{min-height:44px;padding:9px 10px;border-radius:14px;font-size:.82rem;box-shadow:0 3px 0 #9acbd5}.clean-btn{color:#9c4054!important}.fleet-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;overflow:auto;padding:3px;min-height:0}
.ship-card{border:2px solid transparent;border-radius:13px;padding:8px;background:rgba(255,255,255,.68);text-align:left;color:var(--ink);min-height:49px;touch-action:none}.ship-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,200,87,.25);transform:translateY(-2px)}.ship-card.placed{opacity:.46}.ship-name{display:block;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ship-preview{display:flex;gap:3px;margin-top:5px}.ship-preview i{width:18px;height:8px;border-radius:5px;background:linear-gradient(#ffd96f,#e8993f);box-shadow:inset 0 2px rgba(255,255,255,.6)}
.placement-tip{margin:auto 0 9px;padding:9px 10px;border-radius:12px;background:#daf6f4;color:#24727a;font-size:.76rem;line-height:1.25}.fleet-ready{width:100%;min-height:48px}.rotate-btn{width:100%;padding-inline:12px}.orientation-icon{display:flex;gap:2px;align-items:center}.orientation-icon.vertical{flex-direction:column}.orientation-icon i{display:block;width:10px;height:7px;border-radius:3px;background:linear-gradient(#ffd96f,#e8993f);box-shadow:inset 0 1px rgba(255,255,255,.65)}.orientation-icon.vertical i{width:7px;height:10px}.rotate-symbol{font-size:1.2rem}
.drag-ghost{position:fixed;z-index:100;pointer-events:none;display:flex;gap:var(--ghost-gap,3px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));opacity:.82;transition:opacity .08s}.drag-ghost.vertical{flex-direction:column}.drag-ghost i{width:var(--ghost-cell-w,38px);height:var(--ghost-cell-h,38px);border-radius:8px;background:linear-gradient(145deg,rgba(255,239,178,.9),rgba(222,139,51,.82));border:2px solid rgba(255,255,255,.75);box-shadow:inset 2px 2px rgba(255,255,255,.45)}.drag-ghost.valid i{outline:3px solid rgba(82,255,159,.82);background-color:rgba(35,190,116,.55);background-blend-mode:screen}.drag-ghost.invalid i{outline:3px solid rgba(255,82,92,.85);background-color:rgba(215,38,64,.62);background-blend-mode:multiply}
.handoff{display:grid;place-items:center;text-align:center}.handoff-card{width:min(600px,92vw);border-radius:36px;padding:clamp(32px,5vw,54px);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:14px}.handoff-card>*{position:relative;z-index:1}.handoff-card:after{content:"";position:absolute;width:270px;height:270px;border:2px solid rgba(25,193,199,.18);border-radius:50%;top:-100px;right:-80px;box-shadow:0 0 0 35px rgba(25,193,199,.08),0 0 0 70px rgba(25,193,199,.05)}.handoff-card h2,.handoff-card p,.handoff-card .pin-dots{margin-top:0;margin-bottom:0}
.avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar-fallback{display:grid;width:100%;height:100%;place-items:center}.avatar-large{width:96px;height:96px;margin:0 0 8px;padding:4px;border-radius:30px;display:grid;place-items:center;background:var(--player);font-size:3rem;box-shadow:0 8px 0 color-mix(in srgb,var(--player),#000 25%);position:relative;z-index:1;flex:0 0 auto}.avatar-image.title-avatar,.avatar-fallback.title-avatar{width:44px;height:44px;padding:3px;border-radius:15px;background:var(--player,#f05f5f);box-shadow:0 4px 0 rgba(0,0,0,.16);flex:0 0 auto}
.pin-dots{display:flex;justify-content:center;gap:14px;margin:25px}.pin-dots i{width:17px;height:17px;border-radius:50%;background:#c4dce0;transition:.2s}.pin-dots i.filled{background:var(--gold);transform:scale(1.15);box-shadow:0 0 0 5px rgba(255,200,87,.2)}
.keypad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center}.key{width:72px;height:58px;border:0;border-radius:17px;background:rgba(255,255,255,.75);color:var(--ink);font-size:1.25rem;font-weight:900;box-shadow:0 4px 0 #a9cfd5}.key:active{transform:translateY(3px);box-shadow:0 1px 0 #a9cfd5}.shake{animation:shake .36s}@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.game{--cell:min(4.8vw,6.4vh,54px);display:grid;grid-template-rows:auto 1fr;gap:10px}.game-head,.battle-layout{width:min(100%,1060px);justify-self:center}.game-head{display:flex;justify-content:center;align-items:center;color:white;padding:0 72px}.player-chip{display:flex;align-items:center;gap:10px;font-weight:900}.player-chip .mini{width:52px;height:52px;padding:3px;border-radius:11px;background:var(--player);display:grid;place-items:center;font-size:1.4rem;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}.player-chip .mini .avatar-image{border-radius:7px}.current-player{min-height:60px;padding:4px 17px 4px 4px;border:2px solid color-mix(in srgb,var(--player),#fff 18%);border-radius:22px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 5px 0 rgba(2,31,55,.17),0 12px 24px rgba(2,31,55,.13)}
.battle-layout{display:grid;grid-template-columns:minmax(560px,700px) minmax(240px,280px);justify-content:center;align-self:start;align-items:stretch;gap:14px;min-height:0}.battlefield,.intel{border-radius:24px;padding:12px;min-height:0}.battlefield{display:grid;place-items:center;align-self:start}.intel{display:flex;flex-direction:column;overflow:hidden}.intel h3{margin:0;font-size:1.05rem}.intel-top{display:flex;justify-content:space-between;align-items:center;padding:1px 2px 6px}.accuracy-chip{padding:5px 9px;border-radius:20px;background:#dff7f5;color:#1c6d78;font-size:.78rem;font-weight:900}.battle-state{margin:0 2px 9px;padding:7px 10px;border-radius:10px;background:rgba(7,91,119,.09);color:#27677a;font-size:.73rem;font-weight:900;text-align:center}
.mini-fleet{display:flex;flex-direction:column;gap:7px;overflow:auto;padding:1px 2px 5px}.fleet-group{padding:8px 9px;border-radius:13px;background:rgba(255,255,255,.62);border:1px solid rgba(151,210,218,.35)}.fleet-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#315f70;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.045em}.fleet-group-head b{color:#087b91}.fleet-silhouettes{display:flex;align-items:center;gap:8px;min-height:14px}.fleet-vessel{display:flex;gap:2px;align-items:center;padding:2px;border-radius:8px;background:#d9edf0}.fleet-vessel i{width:13px;height:9px;border-radius:3px;background:linear-gradient(#ffd96f,#df913a);box-shadow:inset 0 1px rgba(255,255,255,.65)}.fleet-vessel i:first-child{border-radius:6px 3px 3px 6px}.fleet-vessel i:last-child{border-radius:3px 6px 6px 3px}.fleet-vessel.dead{filter:grayscale(1);opacity:.4;text-decoration:line-through}.game-actions{position:sticky;bottom:0;z-index:12;margin-top:auto;padding:12px 0 0;display:grid;gap:12px;background:none}.game-actions .btn{min-width:0;min-height:48px;padding:10px 12px;border-radius:15px;line-height:1.15;white-space:normal}.view-fleet-btn{min-height:44px!important;font-size:.82rem;background:rgba(255,255,255,.62)!important;border:1px solid rgba(80,165,181,.28)}.ship-action-icon{width:27px;height:20px;fill:#167b8c;flex:0 0 auto}.ship-action-icon .ship-wave{fill:none;stroke:#167b8c;stroke-width:1.7;stroke-linecap:round}
.cell.shot-hit:before{content:"✦";position:absolute;z-index:4;inset:0;display:grid;place-items:center;color:white;font-size:1.65rem;background:radial-gradient(circle,var(--coral) 0 36%,#c82f47 38% 55%,transparent 57%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));animation:impact .42s}.cell.shot-miss:before{content:"";position:absolute;z-index:4;width:45%;height:45%;left:50%;top:50%;transform:translate(-50%,-50%);border:3px solid white;border-radius:50%;box-shadow:0 0 0 3px rgba(12,106,145,.45);animation:ripple 1.8s infinite}
@keyframes impact{from{transform:scale(2.2) rotate(-30deg);opacity:0}}@keyframes ripple{50%{transform:translate(-50%,-50%) scale(1.25);opacity:.7}}
.target.cell:not(.shot-hit):not(.shot-miss){cursor:crosshair}.target.cell:not(.shot-hit):not(.shot-miss):hover:before{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.5rem;z-index:2}
.torpedo{position:fixed;z-index:80;width:16px;height:46px;border-radius:50% 50% 35% 35%;background:linear-gradient(90deg,#c7e9ed,#fff,#87b4be);box-shadow:0 0 18px #fff;pointer-events:none;animation:launch .55s cubic-bezier(.3,.8,.4,1) forwards}.torpedo:after{content:"";position:absolute;width:5px;height:120px;background:linear-gradient(transparent,white);left:6px;top:32px}
@keyframes launch{from{transform:translate(-50%,180px) scale(.7)}to{transform:translate(-50%,0) scale(.2);opacity:.2}}
.report-overlay,.modal-overlay{position:fixed;z-index:60;inset:0;background:rgba(1,25,45,.72);display:grid;place-items:center;padding:16px;backdrop-filter:blur(18px);animation:fade .3s}@keyframes fade{from{opacity:0}}.report-card{width:min(570px,94vw);border-radius:30px;padding:30px;text-align:center}.radar-mini{width:100px;height:100px;border-radius:50%;margin:-75px auto 18px;background:conic-gradient(rgba(60,255,220,.7),transparent 25%),radial-gradient(circle,#15b3ad 0 3%,transparent 4% 30%,rgba(63,218,207,.35) 31% 33%,transparent 34%),#07516d;border:8px solid #ddffff;animation:radar 3s linear infinite;box-shadow:0 8px 24px rgba(0,42,62,.3)}
.own-fleet-card{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:22px 26px;display:flex;flex-direction:column;align-items:center;overflow:hidden}.own-fleet-card h2{margin:.1em 0 .35em}.own-fleet-board{width:100%;min-height:0;display:grid;place-items:center;overflow:auto;padding:4px}.own-fleet-board .board{--cell:min(5.4vw,6vh,50px)}.own-fleet-card>.btn{margin-top:14px;flex:0 0 auto}
.damage-report-card{width:min(520px,94vw);padding:26px 30px}.damage-report-card .step{margin-bottom:2px}.damage-report-card h2{margin:0 0 14px;font-size:clamp(1.65rem,4vw,2.25rem)}.report-map{display:grid;place-items:center;overflow:auto;padding:4px}.report-board{--cell:min(3.45vw,3.75vh,31px);grid-template-columns:20px repeat(10,var(--cell));grid-template-rows:20px repeat(10,var(--cell));gap:2px}.report-board .coord{font-size:.58rem}.report-board .cell{border-radius:5px;pointer-events:none}.report-board .cell:after{inset:4px}.report-board .ship-cell:before{inset:20%;box-shadow:inset 0 0 0 2px #d5bf8a}.report-board .report-old-hit:before{content:"×";position:absolute;z-index:5;inset:18%;display:grid;place-items:center;border-radius:50%;background:#71808a;color:#eaf0f2;font-size:calc(var(--cell)*.55);font-weight:900;line-height:1;box-shadow:inset 0 0 0 2px #aebbc1,0 2px 3px rgba(4,35,53,.28)}.report-board .report-new-hit:before{content:"🔥";position:absolute;z-index:6;inset:-17%;display:grid;place-items:center;background:none;box-shadow:none;font-size:calc(var(--cell)*.92);line-height:1;filter:drop-shadow(0 2px 2px rgba(119,34,16,.45));animation:newDamage .7s ease-in-out infinite alternate}@keyframes newDamage{to{transform:translateY(-2px) scale(1.08)}}.damage-legend{display:flex;justify-content:center;gap:18px;min-height:24px;margin:10px 0 14px;color:#527486;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.damage-legend span{display:flex;align-items:center;gap:6px}.damage-legend i{font-style:normal}.old-damage-dot{width:13px;height:13px;border-radius:50%;background:#71808a;box-shadow:inset 0 0 0 2px #aebbc1}
.report-list{display:grid;gap:8px;margin:18px 0;text-align:left}.report-item{border-radius:14px;padding:11px 14px;background:#e7f8f7;border-left:5px solid #43b8c0}.report-item.hit{border-color:var(--coral);background:#fff0ec}.report-item.sunk{border-color:#842d55;background:#f8e6ef}
.victory{position:fixed;z-index:100;inset:0;background:radial-gradient(circle at 50% 35%,rgba(31,178,185,.88),rgba(2,34,61,.96));display:grid;place-items:center;color:white;text-align:center;padding:24px;overflow:auto}.victory-card{max-width:900px;margin:auto}.medal{font-size:6rem;animation:medal 1.1s cubic-bezier(.2,1.5,.3,1)}@keyframes medal{from{transform:scale(0) rotate(-90deg)}}.victory h2{font-family:var(--font-rounded);font-size:clamp(3rem,8vw,6rem);line-height:.8;margin:.1em}.victory-captain,.victory-board h3{display:flex;align-items:center;justify-content:center;gap:8px}.avatar-image.inline-avatar,.avatar-fallback.inline-avatar{width:34px;height:34px;border:2px solid rgba(255,255,255,.75);border-radius:11px;flex:0 0 auto}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:24px 0}.stat{padding:12px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}.stat strong{display:block;font-size:1.45rem;color:var(--gold)}.victory-boards{display:flex;justify-content:center;gap:18px;margin:20px 0}.victory-board{padding:12px;border-radius:18px;background:rgba(255,255,255,.11)}.victory-board .board{--cell:21px;gap:2px;grid-template-columns:20px repeat(10,var(--cell));grid-template-rows:20px repeat(10,var(--cell))}.victory-board .cell{border-radius:4px}.victory-board .coord{color:white}.victory-board h3{margin:0 0 8px}
.confetti{position:fixed;z-index:101;width:10px;height:18px;top:-30px;background:var(--c);animation:fall var(--d) linear forwards}@keyframes fall{to{transform:translate(var(--x),110vh) rotate(760deg)}}
.reset-overlay{position:fixed;z-index:160;inset:0;display:grid;place-items:center;padding:24px;background:rgba(1,25,45,.78);backdrop-filter:blur(18px);animation:fade .22s}.reset-card{width:min(500px,94vw);border-radius:32px;padding:34px;text-align:center}.reset-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;color:white;background:linear-gradient(#ff8a74,#e64c5d);box-shadow:0 7px 0 #a52e49;font-size:2.7rem;font-weight:900}.reset-card h2{margin:.15em 0 .4em;font-size:clamp(1.8rem,4vw,2.6rem)}.reset-card p{color:#527486}.reset-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
#toast{position:fixed;z-index:200;left:50%;bottom:28px;transform:translate(-50%,120px);background:#062f4c;color:white;padding:12px 20px;border-radius:16px;font-weight:800;box-shadow:var(--shadow);transition:.35s;pointer-events:none}#toast.show{transform:translate(-50%,0)}
.privacy{position:fixed;z-index:999;inset:0;background:#053552;display:none;place-items:center;color:white;text-align:center}.privacy.show{display:grid}.privacy b{font-family:var(--font-rounded);font-size:2rem}
@media(max-width:850px),(orientation:portrait){:root{--cell:min(5.9vw,4.6vh,48px)}.hero{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-card{display:none}.setup{grid-template-columns:1fr}.setup-art{display:none}.place-body{grid-template-columns:1fr}.fleet-panel{max-height:32vh}.intel{max-height:none;overflow:visible}.board-panel{overflow:auto}.battlefield{overflow:visible}.stats{grid-template-columns:repeat(3,1fr)}.victory-boards{display:none}.screen{height:auto;min-height:calc(100dvh - 36px);overflow:auto}.topbar{grid-template-columns:minmax(0,1fr) 164px;align-items:start}.topbar>div:first-child{grid-column:1}.top-actions{grid-column:1;grid-row:2;margin-top:10px}.handoff-card{gap:12px}.avatar-large{width:88px;height:88px;font-size:2.65rem;margin-bottom:10px}.reset-actions{grid-template-columns:1fr}}
@media(max-width:850px),(orientation:portrait) and (max-width:1100px){.battle-layout{width:min(100%,680px);grid-template-columns:1fr;justify-content:stretch}.game-head{width:min(100%,680px)}.game{padding-bottom:92px}.game-actions{position:fixed;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px;border:1px solid rgba(255,255,255,.65);border-radius:19px;background:rgba(229,250,251,.94);box-shadow:0 14px 34px rgba(1,33,54,.3);backdrop-filter:blur(15px)}.game-actions.solo{grid-template-columns:1fr}.view-fleet-btn{min-width:112px}.mini-fleet{display:grid;grid-template-columns:1fr 1fr}.intel{padding-bottom:12px;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:600px){.game-head{padding:64px 0 0;font-size:.86rem}.player-chip{gap:7px}.player-chip .mini{width:46px;height:46px;border-radius:10px}.player-chip .mini .avatar-image{border-radius:6px}.current-player{min-height:54px;border-radius:18px;padding-right:13px}.startup-actions{grid-template-columns:1fr}.startup-card,.pin-setup-card{padding:26px 20px}.settings{right:14px}.home-btn{left:14px}}
@media(max-width:480px){:root{--cell:min(7vw,4.5vh,30px)}.game{--cell:min(7vw,4.5vh,30px);padding-bottom:154px}.battlefield{padding:8px}.battlefield .board{grid-template-columns:18px repeat(10,var(--cell));grid-template-rows:18px repeat(10,var(--cell));gap:2px}.game-actions{grid-template-columns:1fr}.game-actions .btn{width:100%}.own-fleet-card{padding:18px 12px}.own-fleet-board .board{--cell:min(5.6vw,4.8vh,28px)}}
@media(max-height:800px){.pin-setup-card{padding:18px 24px}.pin-setup-card .player-token{width:64px;height:64px;margin-bottom:8px;border-radius:21px;font-size:2rem}.pin-setup-card h1{font-size:2rem;margin:.12em 0 .25em}.pin-setup-card>p{font-size:.82rem;margin-bottom:8px}.pin-setup-card .pin-dots{margin:11px 0}.pin-setup-card .keypad{grid-template-columns:repeat(3,64px);gap:8px}.pin-setup-card .key{width:64px;height:48px}.pin-setup-card .hint{margin-top:12px}}
@media(min-width:800px){.placement{--cell:min(4.3vw,5vh,44px)}.place-body{grid-template-columns:minmax(0,1fr) minmax(270px,300px)}.fleet-panel{max-height:none}.board-panel{overflow:hidden}}
@media(max-width:799px){.placement{--cell:min(7.2vw,4.25vh,32px)}.place-body{grid-template-columns:1fr;width:min(100%,560px)}.topbar{width:min(100%,560px);grid-template-columns:1fr;padding:72px 0 0}.topbar h2{font-size:clamp(1.55rem,7vw,2rem);white-space:nowrap}.topbar .eyebrow{font-size:.7rem;letter-spacing:.13em}.fleet-panel{max-height:none}.fleet-list{overflow:visible}.board-panel{overflow:auto}.placement-tip{margin:4px 0 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}