:root{color:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#070a11;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{background:radial-gradient(circle at 15% 0,#31436f52,#0000 34rem),radial-gradient(circle at 90% 10%,#94142d2e,#0000 30rem),linear-gradient(#080b12,#0b111c 55%,#070a11);min-height:100vh;overflow-x:hidden}button{font:inherit}.shell{max-width:1180px;margin:0 auto;padding:18px clamp(12px,2.5vw,28px) 26px}.topbar{align-items:center;gap:12px;margin-bottom:14px;display:flex}.brand-mark{color:#f8fafc;background:linear-gradient(145deg,#172033,#0d1320);border:1px solid #26344d;border-radius:14px;place-items:center;width:48px;height:48px;font-size:25px;display:grid;box-shadow:0 10px 30px #0007}.brand{letter-spacing:.055em;font-size:clamp(16px,2vw,23px);font-weight:900}.tagline{color:#94a3b8;margin-top:2px;font-size:12px}.mode-pill{color:#93c5fd;letter-spacing:.08em;background:#151c2b;border:1px solid #2b3850;border-radius:999px;margin-left:auto;padding:7px 10px;font-size:10px;font-weight:800}.score-strip{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:14px;display:grid}.player-card{background:#0e1522cc;border:1px solid #202b3d;border-radius:14px;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:flex}.player-card.active{border-color:#f97316;box-shadow:0 0 0 1px #f9731650,0 8px 24px #0004}.player-card.empty{color:#64748b}.avatar{background:#1c2636;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.player-copy{min-width:0}.player-name{white-space:nowrap;text-overflow:ellipsis;font-weight:800;overflow:hidden}.player-meta{color:#94a3b8;margin-top:1px;font-size:12px}.connection{border-radius:50%;flex:none;width:8px;height:8px;margin-left:auto}.connection.online{background:#22c55e;box-shadow:0 0 10px #22c55eaa}.connection.offline{background:#64748b}.versus{color:#64748b;font-size:11px;font-weight:900}.panel,.hero-panel,.fire-dock,.battle-status{background:linear-gradient(#0f1725e8,#0a101be8);border:1px solid #202b3d;border-radius:18px;box-shadow:0 14px 40px #0004}.hero-panel{min-height:420px;padding:34px}.centered{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.hero-panel h1{margin:10px 0 6px;font-size:clamp(24px,5vw,44px)}.hero-panel p{color:#94a3b8;max-width:580px}.hero-panel .btn{margin-top:16px}.big-icon{filter:drop-shadow(0 8px 18px #0008);font-size:52px}.pulse-dots{gap:8px;margin-top:18px;display:flex}.pulse-dots i{background:#60a5fa;border-radius:50%;width:8px;height:8px;animation:1.2s infinite pulse}.pulse-dots i:nth-child(2){animation-delay:.2s}.pulse-dots i:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}.game-layout{grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:14px;display:grid}.battle-layout{grid-template-columns:1fr 1fr}.panel{min-width:0;padding:16px}.panel-title-row{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.eyebrow{color:#7c8ca7;letter-spacing:.14em;font-size:10px;font-weight:900}h2{margin:3px 0 0;font-size:20px}h3{margin:6px 0;font-size:18px}h3 span{color:#94a3b8;font-size:14px;font-weight:600}.round-timer,.turn-clock{text-align:center;background:#111b2b;border:1px solid #26364f;border-radius:12px;min-width:72px;padding:7px 10px}.round-timer span,.turn-clock span{color:#7c8ca7;letter-spacing:.1em;font-size:9px;font-weight:900;display:block}.round-timer strong,.turn-clock strong{font-size:23px}.board-wrap{-webkit-user-select:none;user-select:none;width:min(100%,620px);margin:0 auto}.grid-header,.grid-row{grid-template-columns:28px repeat(8,minmax(0,1fr));gap:6px;margin-bottom:6px;display:grid}.grid-header{color:#f8fafc;text-align:center;align-items:end;font-size:14px;font-weight:900}.row-label{color:#fbbf24;place-items:center;font-size:14px;font-weight:900;display:grid}.row-label.corner{color:#0000}.cell{aspect-ratio:1;border:1px solid #36465c;border-radius:10px;place-items:center;min-width:0;padding:0;font-size:clamp(13px,2.8vw,24px);transition:transform .1s,border-color .1s,box-shadow .1s,filter .1s;display:grid;position:relative;overflow:hidden}.cell span{filter:drop-shadow(0 3px 5px #0009);z-index:4;position:relative}.cell.water{background:linear-gradient(#ffffff0a,#fff0),linear-gradient(145deg,#133130,#0a171a 55%,#091218)}.cell.water:not(:disabled):hover{cursor:pointer;border-color:#facc15;transform:translateY(-2px);box-shadow:0 6px 14px #0007,inset 0 0 0 1px #facc1555}.cell.ship{background:linear-gradient(145deg,#0d151c,#0a1017 55%,#0a0f15);border-color:#4b5563}.cell.ship:before{content:"";z-index:1;position:absolute;box-shadow:inset 0 1px #ffffff3d,inset 0 -2px #0000004d,0 5px 12px #00000059}.cell.ship:after{content:"";z-index:2;opacity:.85;background:#ffffff2e;border-radius:999px;position:absolute}.cell.ship .ship-deck{z-index:3;background:#ffffff40;border-radius:999px;position:absolute;box-shadow:inset 0 0 0 1px #00000026}.cell.ship .cell-mark{font-size:clamp(14px,2.6vw,24px)}.cell.ship.orient-h:before{inset:21% -18%}.cell.ship.orient-v:before{inset:-18% 21%}.cell.ship.orient-h:after{height:12%;top:44%;left:22%;right:22%}.cell.ship.orient-v:after{width:12%;top:22%;bottom:22%;left:44%}.cell.ship.orient-h .ship-deck{width:26%;height:24%;top:38%;left:37%}.cell.ship.orient-v .ship-deck{width:24%;height:26%;top:37%;left:38%}.cell.ship.orient-h.part-start:before{border-radius:18px 4px 4px 18px}.cell.ship.orient-h.part-mid:before{border-radius:3px}.cell.ship.orient-h.part-end:before{border-radius:4px 18px 18px 4px}.cell.ship.orient-h.part-single:before{border-radius:18px;left:12%;right:12%}.cell.ship.orient-v.part-start:before{border-radius:18px 18px 4px 4px}.cell.ship.orient-v.part-mid:before{border-radius:3px}.cell.ship.orient-v.part-end:before{border-radius:4px 4px 18px 18px}.cell.ship.orient-v.part-single:before{border-radius:18px;top:12%;bottom:12%}.cell.ship-flagship:before{background:linear-gradient(#fcd34d,#d97706)}.cell.ship-cruiser:before{background:linear-gradient(#c4b5fd,#7c3aed)}.cell.ship-destroyer:before{background:linear-gradient(#93c5fd,#2563eb)}.cell.ship-patrol:before{background:linear-gradient(#86efac,#16a34a)}.cell.ship-hit:before,.cell.ship-hit.ship-sunk:before{background:linear-gradient(#f87171,#7f1d1d)}.cell.ship-sunk:before{background:linear-gradient(#d1d5db,#1f2937)}.cell.miss{background:linear-gradient(145deg,#0f3555,#0b2238);border-color:#38bdf8aa}.cell.hit{background:linear-gradient(145deg,#7f1d1d,#3b0909);border-color:#fb7185}.cell.sunk{background:linear-gradient(145deg,#111827,#030712);border-color:#e2e8f0aa}.cell.selected{transform:translateY(-2px)scale(1.03);box-shadow:0 0 0 3px #facc1530,0 0 25px #facc1530;border-color:#facc15!important}.cell:disabled{opacity:1}.controls-panel{flex-direction:column;display:flex}.ship-list{flex-direction:column;gap:7px;margin:10px 0 14px;display:flex}.ship-line{background:#111827;border:1px solid #1f2a3a;border-radius:10px;grid-template-columns:52px 1fr auto;align-items:center;gap:8px;padding:9px 10px;display:grid}.ship-line>span:last-of-type{color:#94a3b8;font-size:12px}.ship-line em{color:#64748b;letter-spacing:.1em;grid-column:2/-1;font-size:9px;font-style:normal;font-weight:900}.ship-line.placed{background:#0b1f19;border-color:#14532d}.ship-line.placed em{color:#4ade80}.ship-line-icon{filter:drop-shadow(0 4px 8px #00000059);width:42px;height:15px;display:block;position:relative}.ship-line-icon:before,.ship-line-icon:after,.ship-line-icon i{content:"";position:absolute}.ship-line-icon:before{border-radius:999px;inset:3px 0;box-shadow:inset 0 1px #ffffff3d,inset 0 -2px #00000047}.ship-line-icon:after{background:#ffffff3d;border-radius:999px;width:12px;height:6px;top:4px;left:15px}.ship-line-icon i{background:#ffffff6b;border-radius:3px 3px 0 0;width:6px;height:6px;top:-1px;left:18px}.ship-line-icon.flagship:before{background:linear-gradient(#fcd34d,#d97706)}.ship-line-icon.cruiser:before{background:linear-gradient(#c4b5fd,#7c3aed)}.ship-line-icon.destroyer:before{background:linear-gradient(#93c5fd,#2563eb)}.ship-line-icon.patrol:before{background:linear-gradient(#86efac,#16a34a)}.ship-line-icon.len-4{width:48px}.ship-line-icon.len-3{width:42px}.ship-line-icon.len-2{width:34px}.ship-preview-row{margin-top:6px}.ship-preview-row .ship-line-icon{width:66px;height:20px}.ship-preview-row .ship-line-icon:before{inset:4px 0}.ship-preview-row .ship-line-icon:after{width:16px;height:7px;top:6px;left:24px}.ship-preview-row .ship-line-icon i{top:0;left:29px}.placement-box{background:#0a1220;border:1px solid #24344d;border-radius:14px;padding:13px}.placement-box p{color:#94a3b8;font-size:12px;line-height:1.45}.segmented{grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;display:grid}.seg{color:#cbd5e1;cursor:pointer;background:#111827;border:1px solid #2b3a52;border-radius:9px;padding:9px 6px;font-size:11px}.seg.active{color:#fff;background:#1d4ed8;border-color:#60a5fa}.locked-badge,.ready-badge{color:#4ade80;letter-spacing:.04em;font-size:13px;font-weight:900}.control-stack{flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;display:flex}.btn{letter-spacing:.025em;cursor:pointer;color:#fff;border:0;border-radius:11px;padding:11px 14px;font-weight:900}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#2563eb,#4f46e5)}.btn.secondary{background:#1e293b;border:1px solid #334155}.btn.ghost{color:#94a3b8;background:#101722;border:1px solid #273449}.btn.danger{background:linear-gradient(135deg,#dc2626,#be123c);min-width:145px;font-size:16px;box-shadow:0 8px 24px #7f1d1d55}.ready-screen{min-height:380px}.massive-countdown{color:#f8fafc;text-shadow:0 0 30px #3b82f6aa;margin-top:12px;font-size:84px;font-weight:950;line-height:1}.timer-line{color:#cbd5e1;margin-top:15px}.battle-status{border-left:4px solid #475569;justify-content:space-between;align-items:center;margin-bottom:14px;padding:13px 16px;display:flex}.battle-status.your-turn{background:linear-gradient(90deg,#2a1408aa,#0f1725e8 42%);border-left-color:#f97316}.turn-clock{flex-direction:column;align-items:center;display:flex}.mini-stat{color:#cbd5e1;background:#101827;border:1px solid #2b3a52;border-radius:10px;padding:7px 9px;font-size:12px;font-weight:800}.legend{color:#94a3b8;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;display:flex}.legend span{align-items:center;gap:5px;display:flex}.swatch{border:1px solid #263850;border-radius:4px;width:13px;height:13px;display:inline-block}.swatch.water{background:#17304a}.fire-dock{z-index:1000;isolation:isolate;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0c1320;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;padding:13px 15px;display:flex;position:sticky;bottom:8px;overflow:hidden;box-shadow:0 -8px 28px #0009,0 14px 40px #0004}.fire-dock.disabled{opacity:.68}.target-readout{letter-spacing:.04em;font-size:28px;font-weight:950}.event-log{text-align:center;color:#94a3b8;min-height:18px;margin-top:9px;font-size:12px}.spectator-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.turn-banner{text-align:center;color:#cbd5e1;margin-top:12px}.turn-banner span{color:#f8fafc;margin-left:8px;font-size:18px;font-weight:900}.reward-pill{color:#e9d5ff;background:#241044;border:1px solid #7c3aed;border-radius:999px;margin-top:12px;padding:9px 14px;font-weight:900}.reward-pill span{color:#a78bfa;margin-top:2px;font-size:9px;font-weight:700;display:block}.prototype-note{color:#64748b;margin-top:14px;font-size:11px}.result-screen.win{border-color:#854d0e;box-shadow:0 0 70px #f59e0b18}.error-banner{color:#fecaca;background:#450a0a;border:1px solid #b91c1c;border-radius:10px;margin-bottom:12px;padding:10px 12px;font-size:12px;font-weight:700}footer{color:#53627a;text-align:center;justify-content:center;align-items:center;gap:10px;margin-top:16px;font-size:10px;display:flex}.status-dot{background:#22c55e;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #22c55e}.boot-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:30px;display:flex}.boot-screen h1{margin:16px 0 5px}.boot-screen p{color:#94a3b8;max-width:680px}.hint{font-size:12px}.loader-ring{border:5px solid #172033;border-top-color:#60a5fa;border-radius:50%;width:52px;height:52px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=780px){.shell{padding:10px 8px 20px}.brand-mark{width:40px;height:40px}.tagline{display:none}.mode-pill{padding:6px 7px;font-size:8px}.score-strip{gap:5px}.player-card{gap:6px;padding:8px}.avatar{width:30px;height:30px}.player-meta{font-size:10px}.game-layout,.battle-layout,.spectator-grid{grid-template-columns:1fr}.controls-panel{min-height:unset}.control-stack{margin-top:12px}.grid-header,.grid-row{grid-template-columns:22px repeat(8,minmax(0,1fr));gap:4px;margin-bottom:4px}.row-label,.grid-header{font-size:11px}.cell{border-radius:6px}.fire-dock{bottom:4px}.hero-panel{min-height:340px;padding:22px}footer{padding:0 10px}}.final-reveal-banner{background:radial-gradient(circle at 8%,#f59e0b2e,#0000 18rem),linear-gradient(90deg,#241407e8,#0f1725e8 55%);border:1px solid #b45309;border-left:5px solid #f59e0b;border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:14px;padding:15px 17px;display:grid;box-shadow:0 12px 36px #0005,0 0 40px #f59e0b14}.final-reveal-icon{font-size:40px;animation:.75s ease-out both skullPop}.final-reveal-copy h2{color:#fff7ed;margin:3px 0}.final-reveal-copy p{color:#cbd5e1;margin:0;font-size:12px}.reveal-clock{text-align:center;background:#1c1208;border:1px solid #92400e;border-radius:13px;min-width:76px;padding:8px 10px}.reveal-clock strong{color:#fbbf24;font-size:26px;line-height:1;display:block}.reveal-clock span{color:#a8a29e;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-size:8px;font-weight:900;display:block}.final-board-note{color:#e7e5e4;text-align:center;background:#151109;border:1px solid #533512;border-radius:12px;margin-top:12px;padding:11px 14px;font-size:12px}.final-board-note span{color:#a8a29e;margin-top:4px;display:block}.final-board-note b{color:#fbbf24}.cell.sunk,.cell.ship-sunk{animation:1.15s ease-in-out infinite alternate sunkFlash}.cell.sunk>span,.cell.ship-sunk .cell-mark{animation:.7s ease-out both skullPop,1.3s ease-in-out .7s infinite alternate skullFloat}@keyframes sunkFlash{0%{box-shadow:0 0 0 1px #f8fafc26,0 0 10px #ef44442e}to{box-shadow:0 0 0 2px #fbbf248c,0 0 26px #ef44447a}}@keyframes skullPop{0%{opacity:0;transform:scale(.2)rotate(-18deg)}65%{opacity:1;transform:scale(1.22)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes skullFloat{0%{transform:translateY(0)scale(1)}to{transform:translateY(-3px)scale(1.08)}}@media (width<=780px){.final-reveal-banner{grid-template-columns:auto 1fr}.reveal-clock{grid-column:1/-1;justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.reveal-clock strong,.reveal-clock span{margin:0;display:inline}}.final-result-banner{background:linear-gradient(100deg,#281507,#151b29 52%,#101827);border:1px solid #d97706;border-left:6px solid #f59e0b;border-radius:18px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:14px;padding:15px 18px;display:grid;box-shadow:0 16px 38px #00000061,0 0 40px #f59e0b17}.final-result-icon{filter:drop-shadow(0 7px 12px #00000073);font-size:38px}.final-result-copy h2{color:#fff7ed;margin:3px 0 2px;font-size:clamp(21px,3vw,30px)}.final-result-copy p{color:#cbd5e1;margin:0;font-size:12px}.final-score-award{text-align:center;background:linear-gradient(145deg,#32115d,#1d0d38);border:1px solid #7c3aed;border-radius:14px;min-width:135px;padding:10px 14px;box-shadow:0 0 24px #7c3aed2e}.final-score-award strong{color:#f5d0fe;font-size:22px;display:block}.final-score-award span{color:#c4b5fd;letter-spacing:.05em;text-transform:uppercase;margin-top:1px;font-size:11px;font-weight:900;display:block}.prototype-score-note{text-align:center;color:#64748b;margin:-6px 0 14px;font-size:10px}.final-shot-line{color:#cbd5e1;text-align:center;background:#0c1320;border:1px solid #273449;border-radius:12px;margin-top:12px;padding:11px 14px;font-size:12px}.final-shot-line strong{color:#f59e0b}.final-board-grid .panel{border-color:#374151}@media (width<=780px){.final-result-banner{grid-template-columns:auto 1fr}.final-score-award{grid-column:1/-1}}.cell.fleet-sunk{box-shadow:inset 0 0 0 1px #ffffff0d;background:linear-gradient(145deg,#171b24,#090b10)!important;border-color:#d7dde8!important}.cell.fleet-sunk:before,.cell.fleet-sunk:after{display:none!important}.cell.fleet-sunk .cell-mark{filter:drop-shadow(0 3px 6px #000c);font-size:clamp(16px,3vw,28px)}