:root{--bg-deep: #070f1a;--bg: #0b1524;--bg-elevated: #122033;--bg-panel: #15263a;--border: rgba(180, 210, 230, .1);--border-strong: rgba(180, 210, 230, .18);--text: #e7eef6;--text-muted: #8a9bb0;--text-dim: #5c6d82;--accent: #3d9b8f;--accent-soft: rgba(61, 155, 143, .15);--accent-glow: rgba(61, 155, 143, .35);--gold: #d4a84b;--gold-soft: rgba(212, 168, 75, .14);--hit: #e06b5c;--hit-soft: rgba(224, 107, 92, .2);--miss: #5a7a96;--ship: #2a4a5c;--ship-edge: #4a7a8c;--radius: 16px;--radius-sm: 10px;--font: "Outfit", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;--ease: cubic-bezier(.32, .72, 0, 1);--shadow: 0 24px 48px -20px rgba(0, 0, 0, .55)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100dvh}body{font-family:var(--font);background:var(--bg-deep);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}.app-shell{position:relative;min-height:100dvh;isolation:isolate}.app-shell:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:radial-gradient(ellipse 80% 60% at 15% 10%,rgba(61,155,143,.12),transparent 55%),radial-gradient(ellipse 70% 50% at 85% 80%,rgba(80,120,180,.1),transparent 50%),radial-gradient(ellipse 50% 40% at 50% 50%,rgba(212,168,75,.04),transparent 60%),linear-gradient(180deg,#070f1a,#0b1524 40%,#0a1420)}.app-shell:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.page{max-width:1200px;margin:0 auto;padding:28px 20px 48px}.page-wide{max-width:1400px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(61,155,143,.25);border-radius:999px;padding:6px 14px;margin-bottom:16px}.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);animation:pulse-dot 2s var(--ease) infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}h1{font-size:clamp(2.4rem,6vw,3.75rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:var(--text)}h1 span{color:var(--accent)}h2{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}.lead{margin-top:14px;font-size:1.05rem;color:var(--text-muted);max-width:42ch;line-height:1.65}.mono{font-family:var(--mono)}.bezel{background:#ffffff08;border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);padding:6px;box-shadow:var(--shadow)}.bezel-inner{background:linear-gradient(165deg,#15263af2,#0f1c2dfa);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:inset 0 1px #ffffff0a}.lobby{display:flex;justify-content:center;align-items:flex-start;min-height:calc(100dvh - 56px);padding-top:32px;padding-bottom:40px}.lobby-card{width:100%;max-width:440px}.lobby-inner{padding:28px 24px!important}.lobby-title{font-size:clamp(2rem,6vw,2.6rem)!important;margin-bottom:8px;text-align:center}.lobby-name-field{margin-top:16px}.lobby-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.lobby-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lobby-action{width:100%}.lobby-subform{margin-top:16px}.lobby-sub-title{font-weight:600;margin-bottom:4px;color:var(--text-muted);font-size:.95rem}.fleet-preview{position:relative;aspect-ratio:4 / 3;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 30% 40%,rgba(61,155,143,.2),transparent 50%),radial-gradient(circle at 70% 70%,rgba(90,130,180,.15),transparent 45%),linear-gradient(160deg,#0e1c2e,#0a1522);border:1px solid var(--border)}.grid-decor{position:absolute;top:12%;right:12%;bottom:12%;left:12%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px;opacity:.55}.grid-decor span{border-radius:3px;background:#648caa14;border:1px solid rgba(120,160,190,.08)}.grid-decor span.lit{background:#3d9b8f59;border-color:#3d9b8f73;box-shadow:0 0 12px #3d9b8f4d}.grid-decor span.hit-lit{background:#e06b5c66;border-color:#e06b5c80}.ship-silhouette{position:absolute;left:18%;top:42%;width:58%;height:14%;border-radius:40% 60% 50% 50%/60% 60% 40% 40%;background:linear-gradient(90deg,#1e3a4a,#2d5a6a 40%,#1a3545);border:1px solid rgba(120,180,200,.25);box-shadow:0 8px 24px #0006;transform:rotate(-8deg);animation:float-ship 6s var(--ease) infinite}@keyframes float-ship{0%,to{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-6px)}}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:16px 18px;border-radius:14px;background:#ffffff08;border:1px solid var(--border)}.stat-card .label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}.stat-card .value{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}.form-stack{display:flex;flex-direction:column;gap:18px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;font-weight:500;color:var(--text-muted)}.field input,.field select{width:100%;padding:14px 16px;border-radius:var(--radius-sm);background:#00000040;border:1px solid var(--border-strong);outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}.field input:focus,.field select:focus{border-color:#3d9b8f8c;box-shadow:0 0 0 3px var(--accent-soft)}.field input::placeholder{color:var(--text-dim)}.player-count{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.player-count button{padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:#0003;font-weight:600;transition:all .25s var(--ease)}.player-count button:hover{border-color:#3d9b8f66}.player-count button.active{background:var(--accent-soft);border-color:#3d9b8f8c;color:var(--accent);box-shadow:0 0 20px #3d9b8f1f}.btn-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:.95rem;letter-spacing:-.01em;transition:transform .2s var(--ease),background .25s var(--ease),opacity .2s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--text);color:var(--bg-deep)}.btn-primary:hover:not(:disabled){background:#fff}.btn-secondary{background:transparent;border:1px solid var(--border-strong);color:var(--text)}.btn-secondary:hover:not(:disabled){border-color:#b4d2e659;background:#ffffff0a}.btn-accent{background:#00ffde;color:#041210}.btn-accent:hover:not(:disabled){background:#33ffe5;filter:none}.btn-ghost{color:var(--text-muted);padding:8px 12px;font-size:.875rem}.btn-ghost:hover{color:var(--text)}.btn .icon-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0000001f;font-size:14px;transition:transform .25s var(--ease)}.btn:hover .icon-circle{transform:translate(2px)}.divider{display:flex;align-items:center;gap:14px;color:var(--text-dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:4px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.error-banner{padding:12px 14px;border-radius:var(--radius-sm);background:var(--hit-soft);border:1px solid rgba(224,107,92,.35);color:#f0a89e;font-size:.9rem}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.room-code-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(212,168,75,.3)}.room-code-pill .label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}.room-code-pill .code{font-family:var(--mono);font-weight:600;font-size:1.15rem;letter-spacing:.2em;color:var(--text)}.player-list{display:grid;gap:10px}.player-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:#0003;border:1px solid var(--border);transition:border-color .25s var(--ease)}.player-card.you{border-color:#3d9b8f66;background:var(--accent-soft)}.player-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:#0a1520;flex-shrink:0}.player-meta{flex:1;min-width:0}.player-meta .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-meta .role{font-size:12px;color:var(--text-dim)}.badge{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}.badge-ready{background:var(--accent-soft);color:var(--accent)}.badge-wait{background:#ffffff0d;color:var(--text-dim)}.badge-dead{background:var(--hit-soft);color:var(--hit)}.badge-turn{background:var(--gold-soft);color:var(--gold);animation:pulse-dot 1.5s var(--ease) infinite}.badge-slot{visibility:hidden;pointer-events:none;-webkit-user-select:none;user-select:none}.badge-bot{background:#6b8cae33;color:#8eb0cc}.auth-panel{margin-top:22px;margin-bottom:4px;padding:16px;border-radius:14px;background:#00000038;border:1px solid var(--border)}.auth-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}.auth-heading-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.auth-heading-hint{font-size:12px;color:var(--text-dim)}.auth-buttons{display:flex;flex-direction:column;gap:10px}.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border-radius:999px;font-weight:600;border:1px solid var(--border-strong);background:#ffffff0a;transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s}.auth-btn:hover:not(:disabled){background:#ffffff14;border-color:#b4d2e659}.auth-btn:active:not(:disabled){transform:scale(.98)}.auth-btn-google{background:#fff;color:#1f1f1f;border-color:transparent}.auth-btn-google:hover:not(:disabled){background:#f3f3f3}.auth-glyph{width:20px;height:20px;flex-shrink:0}.auth-demo-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#00000014;color:#555}.google-btn-host{display:flex;justify-content:center;min-height:44px;width:100%}.google-btn-host>div{margin:0 auto}.google-setup-box{padding:14px 16px;border-radius:12px;border:1px solid rgba(66,133,244,.35);background:#4285f414}.google-setup-title{font-weight:600;margin-bottom:10px;color:#8ab4f8}.google-setup-steps{margin:0 0 10px 18px;display:flex;flex-direction:column;gap:8px;font-size:.88rem;color:var(--text-muted);line-height:1.5}.google-setup-steps a{color:#8ab4f8}.google-setup-code{display:block;margin-top:8px;padding:10px 12px;border-radius:8px;background:#00000059;border:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--text);white-space:pre-wrap;word-break:break-all}.auth-provider-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#4285f426;color:#8ab4f8}.auth-signed-in{display:flex;align-items:center;justify-content:space-between;gap:12px}.auth-user{display:flex;align-items:center;gap:12px;min-width:0}.auth-avatar{width:40px;height:40px;border-radius:12px;object-fit:cover;flex-shrink:0}.auth-avatar-fallback{display:flex;align-items:center;justify-content:center;font-weight:700;color:#0a1520;background:var(--accent)}.auth-avatar-fallback.provider-google{background:#fff;color:#1a73e8}.auth-avatar-fallback.provider-guest{background:var(--accent);color:#041210}.auth-user-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-user-provider{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}.elo-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--gold-soft);border:1px solid rgba(212,168,75,.35);color:var(--gold);font-family:var(--mono);font-weight:600;font-size:11px}.elo-title{color:var(--text-muted)}.elo-record{color:var(--text-dim);font-family:var(--mono);font-size:11px}.elo-up{color:var(--accent);font-weight:600}.elo-down{color:var(--hit);font-weight:600}.elo-result{margin:18px auto 8px;max-width:280px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:#00000040}.elo-result.up{border-color:#3d9b8f66;background:var(--accent-soft)}.elo-result.down{border-color:#e06b5c59;background:var(--hit-soft)}.elo-result-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}.elo-result-value{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}.elo-arrow{margin:0 8px;color:var(--text-dim);font-weight:400}.elo-delta{margin-left:10px;font-size:1rem}.leaderboard-wrap{margin-top:20px}.leaderboard-toggle{width:100%}.leaderboard-panel{margin-top:12px;padding:16px;border-radius:14px;border:1px solid var(--border);background:#0003}.leaderboard-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}.leaderboard-head h3{font-size:.95rem}.leaderboard-list{list-style:none;display:flex;flex-direction:column;gap:6px}.leaderboard-row{display:grid;grid-template-columns:36px 1fr auto auto;gap:8px 10px;align-items:center;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid transparent}.leaderboard-row:first-child{border-color:#d4a84b40;background:var(--gold-soft)}.leaderboard-row.is-me{border-color:#3d9b8f66;background:var(--accent-soft)}.leaderboard-sep{text-align:center;color:var(--text-dim);letter-spacing:.3em;padding:6px 0 2px;font-size:12px}.lb-rank{font-size:12px;color:var(--text-dim)}.lb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-elo{font-weight:600;color:var(--gold)}.lb-wl{font-size:11px}.auth-logout{flex-shrink:0}.auth-error{margin-top:12px}.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:24px;padding:5px;border-radius:14px;background:#00000047;border:1px solid var(--border)}.mode-tabs-4{grid-template-columns:repeat(2,1fr)}@media(min-width:480px){.mode-tabs-4{grid-template-columns:repeat(4,1fr)}}.match-searching{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 16px;border-radius:14px;border:1px solid rgba(61,155,143,.35);background:var(--accent-soft);text-align:center}.match-searching-text{font-weight:600;color:var(--text)}.match-pulse{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 #3d9b8f80;animation:match-pulse 1.4s ease-out infinite}@keyframes match-pulse{0%{box-shadow:0 0 #3d9b8f73}70%{box-shadow:0 0 0 14px #3d9b8f00}to{box-shadow:0 0 #3d9b8f00}}.mode-tab{padding:10px 8px;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--text-muted);transition:all .25s var(--ease)}.mode-tab:hover{color:var(--text)}.mode-tab.active{background:#3d9b8f2e;color:var(--accent);box-shadow:inset 0 0 0 1px #3d9b8f59}.board-section{display:flex;flex-direction:column;gap:14px}.board-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}.board-header h3{font-size:.95rem;font-weight:600;min-width:0}.board-header .badge-ready{flex-shrink:0;visibility:hidden;opacity:0}.board-header .badge-ready.is-visible{visibility:visible;opacity:1}.board-wrap{display:inline-grid;grid-template-columns:28px 1fr;grid-template-rows:28px 1fr;gap:0;-webkit-user-select:none;user-select:none}.board-corner{grid-column:1;grid-row:1}.board-cols{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(10,1fr);gap:2px}.board-rows{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(10,1fr);gap:2px}.coord-label{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--text-dim);font-weight:500}.board{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px;width:min(380px,calc(100vw - 80px));aspect-ratio:1;padding:4px;border-radius:12px;background:radial-gradient(ellipse at 30% 20%,rgba(40,90,120,.2),transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(20,60,90,.25),transparent 45%),linear-gradient(165deg,#081626f2,#06101cfa);border:1px solid var(--border);position:relative;overflow:hidden}.ship-layer{position:absolute;top:4px;right:4px;bottom:4px;left:4px;z-index:2;pointer-events:none;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px}.hull{z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;position:relative;overflow:visible}.hull-h .hull-img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));pointer-events:none;-webkit-user-select:none;user-select:none}.hull-v{container-type:size}.hull-v .hull-img{position:absolute;left:50%;top:50%;width:100cqh;height:100cqw;max-width:none;max-height:none;object-fit:fill;transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));pointer-events:none;-webkit-user-select:none;user-select:none}.hull-shell{display:flex;align-items:stretch;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));overflow:visible}.hull-h .hull-shell{flex-direction:row;width:96%;height:78%;min-height:18px}.hull-v .hull-shell{flex-direction:column;width:78%;height:96%;min-width:18px}.hull-bow{flex:0 0 auto;background:linear-gradient(180deg,var(--hull-from),var(--hull-to));border:1px solid rgba(255,255,255,.22)}.hull-h .hull-bow{width:14px;min-width:12px;max-width:18%;clip-path:polygon(100% 0,100% 100%,18% 100%,0 50%,18% 0);border-right:none}.hull-v .hull-bow{height:14px;min-height:12px;max-height:18%;clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%);border-bottom:none;background:linear-gradient(90deg,var(--hull-from),var(--hull-to))}.hull-body{flex:1 1 auto;position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--hull-from) 0%,var(--hull-to) 100%);border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(0,0,0,.28)}.hull-h .hull-body{height:100%;border-left:none;border-right:none}.hull-v .hull-body{width:100%;flex-direction:column;background:linear-gradient(90deg,var(--hull-from) 0%,var(--hull-to) 100%);border-left:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(0,0,0,.28);border-top:none;border-bottom:none}.hull-stern{flex:0 0 auto;background:linear-gradient(180deg,var(--hull-from),var(--hull-to));border:1px solid rgba(255,255,255,.18)}.hull-h .hull-stern{width:10px;min-width:8px;max-width:12%;height:100%;border-radius:0 999px 999px 0;border-left:none}.hull-v .hull-stern{height:10px;min-height:8px;max-height:12%;width:100%;border-radius:0 0 999px 999px;border-top:none;background:linear-gradient(90deg,var(--hull-from),var(--hull-to))}.hull-deck{position:absolute;top:22%;right:10%;bottom:22%;left:10%;background:var(--hull-deck);opacity:.5;border-radius:2px;box-shadow:inset 0 1px #ffffff2e;pointer-events:none}.hull-v .hull-deck{top:10%;right:22%;bottom:10%;left:22%}.hull-bridge{position:relative;z-index:1;flex:0 0 auto;width:12px;height:55%;min-height:8px;background:linear-gradient(180deg,#ffffff47,#00000047);border-radius:2px;border:1px solid rgba(255,255,255,.18);box-shadow:0 1px 2px #0000004d}.hull-v .hull-bridge{width:55%;height:12px;min-width:8px;min-height:0}.hull-funnel{position:relative;z-index:1;flex:0 0 auto;width:6px;height:62%;min-height:8px;background:linear-gradient(180deg,#3a4550,#1a2028);border-radius:1px 1px 0 0;border-top:2px solid rgba(224,107,92,.75)}.hull-v .hull-funnel{width:62%;height:6px;min-width:8px;min-height:0;border-top:none;border-left:2px solid rgba(224,107,92,.75);border-radius:0 1px 1px 0}.hull-funnel-2{opacity:.9;height:52%}.hull-v .hull-funnel-2{height:6px;width:52%}.hull-sunk .hull-img{filter:grayscale(.85) brightness(.55) drop-shadow(0 0 6px rgba(224,107,92,.45));opacity:.72}.hull-preview .hull-img{filter:drop-shadow(0 0 8px rgba(61,155,143,.5)) drop-shadow(0 2px 4px rgba(0,0,0,.35));opacity:.82}.hull-preview-bad .hull-img{filter:sepia(.35) saturate(2.2) hue-rotate(-18deg) drop-shadow(0 0 8px rgba(224,107,92,.5));opacity:.78}.hull-dock{display:flex;align-items:center;height:22px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.hull-dock-img{width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-select:none;user-select:none}.ship-item.active .hull-dock{filter:drop-shadow(0 0 6px rgba(61,155,143,.45))}.cell{border-radius:3px;background:#466e9612;border:1px solid rgba(100,140,170,.09);position:relative;z-index:1;transition:background .15s var(--ease),transform .15s var(--ease),border-color .15s;cursor:default}.cell.under-ship{background:transparent;border-color:#648caa0f}.cell.interactive{cursor:pointer}.cell.interactive:hover:not(.miss):not(.hit){background:#3d9b8f38;border-color:#3d9b8f73;z-index:3;box-shadow:0 0 12px #3d9b8f33}.cell.miss{background:#5a7a961f;z-index:3}.cell.miss:after{content:"";position:absolute;top:34%;right:34%;bottom:34%;left:34%;border-radius:50%;background:var(--miss);opacity:.75;box-shadow:0 0 6px #5a7a9666}.cell.hit{background:transparent;z-index:5}.cell.hit:before{content:"";position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,100,.95) 0%,rgba(224,107,92,.85) 50%,transparent 72%);animation:hit-burst .45s var(--ease) both;pointer-events:none;z-index:1}.cell.hit:after{content:"";position:absolute;top:30%;right:30%;bottom:30%;left:30%;background:#e06b5c;border-radius:2px;transform:rotate(45deg);box-shadow:0 0 10px #e06b5cb3;z-index:2}.cell.miss{z-index:5}@keyframes hit-burst{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.turn-banner.streak{border-color:#e06b5c66;background:linear-gradient(135deg,var(--hit-soft),rgba(212,168,75,.12))}.turn-banner.streak .title{color:var(--hit)}.place-layout{display:grid;gap:24px}@media(min-width:900px){.place-layout{grid-template-columns:1fr 320px;align-items:start}}.ship-dock{display:flex;flex-direction:column;gap:10px}.ship-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0003;cursor:pointer;text-align:left;transition:all .25s var(--ease);width:100%}.ship-item:hover:not(.placed){border-color:#3d9b8f59}.ship-item.active{border-color:#3d9b8f8c;background:var(--accent-soft)}.ship-item.placed{opacity:.45;cursor:default}.ship-pips{display:flex;align-items:center;height:16px;flex-shrink:0}.ship-pips i{display:block;width:11px;height:12px;background:linear-gradient(180deg,#8eb8c8,#3d6578 45%,#1e3545);border-top:1px solid rgba(180,220,235,.45);border-bottom:1px solid rgba(0,0,0,.35);margin-left:-1px}.ship-pips i:first-child{width:14px;margin-left:0;border-radius:10px 2px 2px 10px;background:linear-gradient(180deg,#a0c8d6,#4a7388 40%,#1a3040);clip-path:polygon(35% 0,100% 0,100% 100%,35% 100%,0 50%);border:none}.ship-pips i:last-child{border-radius:2px 5px 5px 2px;width:12px}.ship-item.active .ship-pips i{background:linear-gradient(180deg,#7dcec2,#2f7a70,#15403a)}.ship-item.active .ship-pips i:first-child{background:linear-gradient(180deg,#8fd9cd,#3d9b8f 45%,#1a5048)}.ship-item .ship-name{flex:1;font-weight:500;font-size:.9rem}.controls-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.battle-layout{display:grid;gap:24px}@media(min-width:1000px){.battle-layout{grid-template-columns:280px 1fr}}.battle-sidebar{display:flex;flex-direction:column;gap:16px}.turn-banner{padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,var(--gold-soft),rgba(61,155,143,.1));border:1px solid rgba(212,168,75,.25)}.turn-banner .title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}.turn-banner .who{font-size:1.15rem;font-weight:600;min-height:1.4em}.last-shot{padding:14px 16px;border-radius:12px;background:#00000040;border:1px solid var(--border);font-size:.9rem;color:var(--text-muted);line-height:1.5;min-height:72px}.last-shot-placeholder{color:var(--text-dim);font-style:italic}.last-shot strong{color:var(--text);font-weight:600}.hit-text{color:var(--hit)}.miss-text{color:var(--miss)}.sunk-text{color:var(--gold)}.targets{display:flex;flex-wrap:wrap;gap:8px}.target-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);background:#0003;font-size:.875rem;font-weight:500;transition:all .25s var(--ease)}.target-chip:hover:not(:disabled){border-color:#3d9b8f66}.target-chip.active{border-color:#3d9b8f8c;background:var(--accent-soft)}.target-chip:disabled{opacity:.4;cursor:not-allowed}.target-chip .dot{width:8px;height:8px;border-radius:50%}.boards-grid{display:grid;gap:20px}@media(min-width:700px){.boards-grid.multi{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}.result-screen{min-height:calc(100dvh - 56px);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px}.result-screen h1{margin-bottom:12px}.result-screen .lead{margin:0 auto 28px;max-width:36ch}.series-score{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#00000038}.series-score.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.series-score.compact{padding:10px 12px}.series-side{display:flex;flex-direction:column;gap:2px;min-width:0}.series-side.right{text-align:right;align-items:flex-end}.series-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.series-wl{font-size:11px;color:var(--text-dim)}.series-mid{display:flex;align-items:baseline;gap:6px;font-weight:700;letter-spacing:.02em}.series-big{font-size:1.5rem;color:var(--accent);min-width:1.2ch;text-align:center}.series-sep{color:var(--text-dim);font-size:1.1rem}.series-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.series-list{list-style:none;display:flex;flex-direction:column;gap:6px}.series-list li{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}.rematch-box{padding-top:8px;border-top:1px solid var(--border)}.rematch-status{font-size:.85rem;color:var(--text-muted)}.btn-back-home{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 4px;font-size:.9rem;font-weight:500;color:var(--text-muted);transition:color .2s var(--ease),transform .15s var(--ease)}.btn-back-home:hover{color:var(--text)}.btn-back-home:active{transform:scale(.98)}.btn-back-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#ffffff0f;border:1px solid var(--border);font-size:14px;line-height:1}.btn-back-home:hover .btn-back-arrow{border-color:#3d9b8f66;background:var(--accent-soft);color:var(--accent)}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:40;padding:12px 20px;border-radius:999px;background:#122030f2;border:1px solid rgba(61,155,143,.45);color:var(--text);font-weight:600;font-size:.9rem;box-shadow:0 12px 32px #0006;animation:toast-in .35s var(--ease) both;pointer-events:none}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.room-code-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.btn-copy-link{padding:10px 16px;font-size:.875rem}.setting-readonly{padding:12px 14px;border-radius:var(--radius-sm);background:#0003;border:1px solid var(--border);color:var(--text-muted)}.place-timer{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 16px;border-radius:12px;background:#00000047;border:1px solid var(--border);min-width:88px}.place-timer.urgent{border-color:#e06b5c80;background:var(--hit-soft);animation:pulse-dot 1s var(--ease) infinite}.place-timer.unlimited{opacity:.7}.place-timer-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.place-timer-value{font-size:1.35rem;font-weight:700;letter-spacing:.04em;color:var(--text)}.place-timer.urgent .place-timer-value{color:var(--hit)}.field select{width:100%;padding:14px 16px;border-radius:var(--radius-sm);background:#00000040;border:1px solid var(--border-strong);outline:none;color:var(--text);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}.field select:focus{border-color:#3d9b8f8c;box-shadow:0 0 0 3px var(--accent-soft)}.field select option{background:#122033;color:var(--text)}.conn-status{position:fixed;bottom:16px;right:16px;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#0a1423e6;border:1px solid var(--border);font-size:12px;color:var(--text-muted);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.conn-status .dot{width:7px;height:7px;border-radius:50%;background:var(--hit)}.conn-status.online .dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.fade-in{animation:fade-up .7s var(--ease) both}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.stagger>*:nth-child(1){animation-delay:0ms}.stagger>*:nth-child(2){animation-delay:60ms}.stagger>*:nth-child(3){animation-delay:.12s}.stagger>*:nth-child(4){animation-delay:.18s}.hint{font-size:.85rem;color:var(--text-dim);line-height:1.5}.rules{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}.rules ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}.rules li{font-size:.875rem;color:var(--text-muted);padding-left:16px;position:relative}.rules li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.6}