:root{--color-bg: #0a1628;--color-surface: #14263f;--color-surface-2: #1d3355;--color-border: #2f4a70;--color-text: #e8eef5;--color-text-dim: #93a4b8;--color-accent: #ffb547;--color-accent-hover: #ffc76e;--color-ink: #221605;--color-success: #3ddc84;--color-danger: #ef476f;--color-warning: #ffd166;--color-info: #5ac8fa;--cell-water: #12233d;--cell-ship: #4f6a8a;--cell-hit: #d63c2e;--cell-miss: #173a52;--cell-miss-dot: #5ac8fa;--cell-sunk: #4a1210;--cell-preview: #c9973f;--cell-hover: #24466e;--cell-staged: #ffb547;--radius: 8px;--radius-lg: 12px;--shadow-1: 0 2px 8px rgba(0, 0, 0, .35);--shadow-2: 0 10px 32px rgba(0, 0, 0, .5);--cell-size: 32px;--cell-font: 14px;--label-size: 24px;--sidebar-width: 320px;--gap: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--color-bg);color:var(--color-text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}h1{font-size:1.8rem;font-weight:800;letter-spacing:.02em}h2{font-size:1.3rem;font-weight:700}h3{font-size:1.1rem;font-weight:600}button{cursor:pointer;border:none;border-radius:var(--radius);padding:8px 16px;font-size:14px;font-weight:600;font-family:inherit;transition:background .15s,opacity .15s,box-shadow .15s}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-primary{background:var(--color-accent);color:var(--color-ink)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-danger{background:var(--color-danger);color:#fff;font-weight:700}.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--color-danger) 85%,#000)}.btn-success{background:var(--color-success);color:var(--color-ink)}.btn-success:hover:not(:disabled){background:color-mix(in srgb,var(--color-success) 85%,#000)}.btn-sm{padding:4px 10px;font-size:12px}input,select,textarea{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);border-radius:6px;padding:8px 12px;font-size:14px;outline:none;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 30%,transparent)}label{display:block;font-size:13px;font-weight:600;color:var(--color-text-dim);margin-bottom:4px}.field{margin-bottom:12px}.field-row{display:flex;gap:8px;align-items:center}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-1)}.alert{padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:8px}.alert-error{background:color-mix(in srgb,var(--color-danger) 15%,transparent);border:1px solid color-mix(in srgb,var(--color-danger) 40%,transparent);color:color-mix(in srgb,var(--color-danger) 60%,#fff)}.alert-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);border:1px solid color-mix(in srgb,var(--color-success) 40%,transparent);color:color-mix(in srgb,var(--color-success) 70%,#fff)}.alert-info{background:color-mix(in srgb,var(--color-info) 15%,transparent);border:1px solid color-mix(in srgb,var(--color-info) 40%,transparent);color:color-mix(in srgb,var(--color-info) 70%,#fff)}.alert-warn{background:color-mix(in srgb,var(--color-warning) 15%,transparent);border:1px solid color-mix(in srgb,var(--color-warning) 40%,transparent);color:color-mix(in srgb,var(--color-warning) 75%,#fff)}.screen{flex:1;display:flex;flex-direction:column;padding:24px;gap:var(--gap)}.screen-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.connect-box{width:100%;max-width:420px}.connect-box h1{text-align:center;margin-bottom:8px}.connect-box .subtitle{text-align:center;color:var(--color-text-dim);margin-bottom:24px}.connect-mode-tabs{display:flex;gap:4px;background:var(--color-surface-2);border-radius:8px;padding:4px;margin-bottom:16px}.connect-mode-tabs button{flex:1;background:transparent;color:var(--color-text-dim);padding:6px;border-radius:6px}.connect-mode-tabs button.active{background:var(--color-accent);color:var(--color-ink)}.lobby-layout{display:grid;grid-template-columns:1fr var(--sidebar-width);gap:var(--gap);height:100%}@media (max-width: 768px){.lobby-layout{grid-template-columns:1fr}}.player-list{list-style:none}.player-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--color-border)}.player-list li:last-child{border-bottom:none}.badge{font-size:11px;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase}.badge-host{background:var(--color-accent);color:var(--color-ink)}.badge-ai{background:#6b5aed;color:#fff}.badge-ready{background:var(--color-success);color:var(--color-ink)}.badge-pending{background:var(--color-warning);color:var(--color-ink)}.invite-link{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:6px;padding:8px 12px;font-family:monospace;font-size:13px;word-break:break-all;cursor:pointer}.board-container{display:inline-block}.board-label-row{display:grid;grid-template-columns:var(--label-size) repeat(var(--board-cols, 10),var(--cell-size));margin-bottom:2px}.board-label-row .corner{width:var(--label-size)}.board-label-col{text-align:center;font-size:11px;font-weight:700;color:var(--color-text-dim)}.board-row{display:grid;grid-template-columns:var(--label-size) repeat(var(--board-cols, 10),var(--cell-size))}.board-row-label{width:var(--label-size);text-align:right;padding-right:4px;font-size:11px;font-weight:700;color:var(--color-text-dim);line-height:var(--cell-size)}.board-cell{width:var(--cell-size);height:var(--cell-size);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:var(--cell-font);font-weight:700;cursor:default;-webkit-user-select:none;user-select:none;transition:background .1s;position:relative}.board-cell.water{background:var(--cell-water)}.board-container.has-water{position:relative}.board-water{position:absolute;pointer-events:none;border-radius:3px}.board-container.has-water .board-cell.water{background:transparent}.board-cell.ship{background:var(--cell-ship);color:#fff}.board-cell.hit{background:var(--cell-hit);color:#fff}.board-cell.miss{background:var(--cell-miss)}.board-cell.sunk{background:var(--cell-sunk);color:#fff}.board-container.has-water .board-cell.water:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:center / 60% no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20stroke='%237fb4d8'%20stroke-width='1.8'%20stroke-linecap='round'%20opacity='0.55'%3E%3Cline%20x1='12'%20y1='8'%20x2='12'%20y2='16'/%3E%3Cline%20x1='8'%20y1='12'%20x2='16'%20y2='12'/%3E%3C/g%3E%3C/svg%3E")}.board-cell.miss:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:center / 70% no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.5'%20stroke='%235ac8fa'%20stroke-width='1.8'%20opacity='0.92'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'%20stroke='%235ac8fa'%20stroke-width='1.1'%20opacity='0.42'/%3E%3C/svg%3E")}.board-cell.preview{background:var(--cell-preview);color:#fff;cursor:pointer}.board-cell.staged{background:var(--cell-staged);color:var(--color-ink);cursor:pointer}.board-cell.pending{background:var(--cell-staged);color:var(--color-ink)}.board-cell.staged,.board-cell.pending{animation:bs-shot-pulse 1.15s ease-in-out infinite}@keyframes bs-shot-pulse{0%,to{box-shadow:inset 0 0 color-mix(in srgb,var(--color-accent) 0%,transparent);opacity:.5}50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-accent) 95%,transparent),inset 0 0 11px 2px color-mix(in srgb,var(--color-accent) 60%,transparent);opacity:1}}@media (prefers-reduced-motion: reduce){.board-cell.staged,.board-cell.pending{animation:none;opacity:1}}.board-cell.clickable{cursor:crosshair}.board-cell.clickable:hover{background:var(--cell-hover)}.board-cell.revealed-ship{background:color-mix(in srgb,var(--cell-ship) 45%,var(--cell-water));color:var(--color-text-dim)}.board-cell.land,.board-cell.land-miss,.board-cell.land-hit,.board-cell.emplacement{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-warning) 22%,var(--color-surface)) 0,color-mix(in srgb,var(--color-warning) 22%,var(--color-surface)) 4px,color-mix(in srgb,var(--color-warning) 12%,var(--color-surface)) 4px,color-mix(in srgb,var(--color-warning) 12%,var(--color-surface)) 8px)}.board-cell.land,.board-cell.land-miss,.board-cell.land-hit{cursor:default}.board-container.has-land{position:relative}.board-land{position:absolute;pointer-events:none;border-radius:3px}.board-container.has-land .board-cell.land,.board-container.has-land .board-cell.land-miss,.board-container.has-land .board-cell.land-hit,.board-container.has-land .board-cell.emplacement{background:transparent}.cell-crater{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.board-cell.owned{position:relative}.board-cell.owned:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:3px;border:2px solid var(--owner-hue);pointer-events:none}.board-cell.owner-0{--owner-hue: #e8663d}.board-cell.owner-1{--owner-hue: #e0a52a}.board-cell.owner-2{--owner-hue: #7d6ce0}.board-cell.owner-3{--owner-hue: #2fae7a}.board-cell.owner-4{--owner-hue: #d95c9a}.board-cell.owner-5{--owner-hue: #34a6c2}.campaign-layout{display:flex;flex-direction:column;gap:10px}.campaign-board-scroll{overflow:auto;max-width:100%;padding-bottom:4px}.campaign-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--color-text-dim)}.campaign-legend-item{display:inline-flex;align-items:center;gap:5px}.defender-badge{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12px;letter-spacing:.02em;padding:2px 8px;border-radius:999px;color:var(--color-warning, #c58a1a);border:1px solid color-mix(in srgb,var(--color-warning, #c58a1a) 55%,transparent);background:color-mix(in srgb,var(--color-warning, #c58a1a) 12%,transparent)}.owner-swatch{width:12px;height:12px;border-radius:3px;display:inline-block}.owner-swatch.own-swatch{background:var(--cell-ship)}.owner-swatch.owner-0{background:#e8663d}.owner-swatch.owner-1{background:#e0a52a}.owner-swatch.owner-2{background:#7d6ce0}.owner-swatch.owner-3{background:#2fae7a}.owner-swatch.owner-4{background:#d95c9a}.owner-swatch.owner-5{background:#34a6c2}.opponents-status{margin-top:2px}.cg-bg-preview{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}.cg-mask-preview{image-rendering:pixelated;border-radius:6px;border:1px solid var(--color-border, #2a3a48);max-width:100%;height:auto}.board-cell.hull,.board-cell.hit,.board-cell.revealed-ship{background:var(--cell-water);border-color:#00000047}.board-cell.sunk{background:var(--cell-water);border-color:#0006}.board-cell.hull{border-width:0}.cell-ship,.cell-fire,.cell-emplacement{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.cell-ship,.cell-emplacement{z-index:1}.cell-fire{z-index:2;overflow:visible}.bs-flame{transform-box:fill-box;transform-origin:center bottom;animation:bs-flame-dance .5s ease-in-out infinite}.bs-flame-core{animation-duration:.4s}.bs-glow{transform-box:fill-box;transform-origin:center;animation:bs-glow-pulse .95s ease-in-out infinite}.bs-ember{transform-box:fill-box;animation:bs-ember-fly 1.3s ease-out infinite}@keyframes bs-flame-dance{0%,to{transform:translate(0) scaleY(1) scaleX(1) rotate(0);opacity:.9}25%{transform:translate(-.7px) scaleY(1.2) scaleX(.88) rotate(-4deg);opacity:1}50%{transform:translate(.5px) scaleY(.93) scaleX(1.08) rotate(2deg);opacity:.95}75%{transform:translate(.9px) scaleY(1.13) scaleX(.9) rotate(4deg);opacity:1}}@keyframes bs-glow-pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:.82}}@keyframes bs-ember-fly{0%{transform:translateY(3px) scale(.5);opacity:0}18%{opacity:1}to{transform:translate(var(--ember-dx, 0),-15px) scale(1.15);opacity:0}}@media (prefers-reduced-motion: reduce){.bs-flame,.bs-flame-core,.bs-glow,.bs-ember{animation:none}.bs-ember{opacity:.7}}#shot-anim-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:90}.shot-anim{position:fixed;pointer-events:none;will-change:transform,opacity}.shot-anim--splash{border-radius:34%;animation:bs-splash .48s ease-out forwards}@keyframes bs-splash{0%{transform:scale(.5);opacity:1;background:radial-gradient(circle,rgba(160,210,255,.7) 0%,rgba(120,180,240,.35) 55%,transparent 70%);box-shadow:0 0 0 1px #96cdffd9}70%{opacity:.9}to{transform:scale(1.9);opacity:0;background:radial-gradient(circle,rgba(160,210,255,0) 0%,transparent 70%);box-shadow:0 0 0 8px #96cdff00}}.shot-anim__core,.shot-anim__ring,.shot-anim__particle,.shot-anim__smoke{position:absolute;border-radius:50%;will-change:transform,opacity}.shot-anim__core{top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#fffbe6 0%,#ffca4a 34%,#ff6a1e 58%,rgba(200,40,0,.5) 74%,transparent 82%);animation:bs-core .42s ease-out forwards}.shot-anim__ring{top:0;right:0;bottom:0;left:0;border:2px solid rgba(255,205,130,.95);animation:bs-ring .52s ease-out forwards}.shot-anim__particle{left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;background:radial-gradient(circle,#fff6c0,#ff8a2a 60%,#d23c00);box-shadow:0 0 4px #ffa03ce6;animation:bs-particle .52s ease-out forwards}.shot-anim__particle--debris{width:22%;height:22%;margin:-11% 0 0 -11%;background:radial-gradient(circle,#ffd27a,#a84a17 70%,#5c2408)}.shot-anim__smoke{top:8%;right:8%;bottom:8%;left:8%;background:radial-gradient(circle,rgba(70,70,82,.55) 0%,rgba(34,34,42,.3) 55%,transparent 75%);animation:bs-smoke .95s ease-out forwards}.shot-anim--sink .shot-anim__core{animation:bs-core-big .64s ease-out forwards}.shot-anim--sink .shot-anim__ring{border-color:#ffaa5af2;animation:bs-ring-big .72s ease-out forwards}.shot-anim--sink .shot-anim__particle{animation-duration:.64s}@keyframes bs-core{0%{transform:scale(.3);opacity:1}45%{transform:scale(1.1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes bs-core-big{0%{transform:scale(.3);opacity:1}40%{transform:scale(1.7);opacity:1}to{transform:scale(2.5);opacity:0}}@keyframes bs-ring{0%{transform:scale(.3);opacity:.95;border-width:3px}to{transform:scale(2.7);opacity:0;border-width:1px}}@keyframes bs-ring-big{0%{transform:scale(.3);opacity:1;border-width:4px}to{transform:scale(4.2);opacity:0;border-width:1px}}@keyframes bs-particle{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx, 0),var(--ty, 0)) scale(.2);opacity:0}}@keyframes bs-smoke{0%{transform:scale(.4);opacity:0}30%{opacity:.7}to{transform:scale(2.1) translateY(-28%);opacity:0}}.sink-notice{position:fixed;top:64px;left:50%;transform:translate(-50%);z-index:85;padding:10px 22px;border-radius:10px;font-weight:700;font-size:16px;color:#fff;box-shadow:0 4px 18px #0000008c;animation:sink-notice-in .2s ease-out,sink-notice-out .4s ease-in 2.6s forwards}.sink-notice--good{background:#b23b1e;border:1px solid #ff7a45}.sink-notice--bad{background:#7a1414;border:1px solid #ff4d4d}@keyframes sink-notice-in{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}@keyframes sink-notice-out{to{opacity:0;transform:translate(-50%,-10px)}}@media (prefers-reduced-motion: reduce){.shot-anim{display:none!important}.sink-notice{animation:none!important}}.gameplay-layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:var(--gap);padding:16px;height:100vh;overflow:hidden}@media (max-width: 900px){.gameplay-layout{grid-template-columns:1fr;height:auto;overflow:visible}.fire-panel{position:sticky;top:0;z-index:20;box-shadow:0 2px 8px #00000059}}.turn-banner{grid-column:1 / -1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:12px;font-size:14px}.turn-banner .player-name{font-weight:700;color:var(--color-accent)}.turn-banner .shots-info{color:var(--color-text-dim)}.turn-banner.my-turn{border-color:var(--color-accent)}.own-board-section h3{margin-bottom:8px;font-size:13px;color:var(--color-text-dim);text-transform:uppercase}.opponents-section{overflow-y:auto}.opponent-grids{display:flex;flex-wrap:wrap;gap:var(--gap)}.opponent-grid-wrap{position:relative}.opponent-grid-wrap.eliminated{opacity:.5}.opponent-label{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--color-text-dim)}.opponent-label.selected{color:var(--color-accent)}.opponent-grid-wrap.own-reveal{border:2px solid var(--color-accent);border-radius:8px;padding:8px;background:color-mix(in srgb,var(--color-accent) 8%,transparent)}.opponent-label.own{color:var(--color-accent)}.fire-panel{grid-column:1 / -1;display:flex;align-items:center;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:12px 16px}.staged-shots{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-height:28px}.staged-summary{font-size:13px;font-family:monospace;color:var(--color-text)}.game-log{max-height:200px;overflow-y:auto;font-size:12px;font-family:monospace;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;padding:8px}.game-log-entry{padding:2px 0;color:var(--color-text-dim)}.game-log-entry.sunk{color:var(--color-warning)}.game-log-entry.eliminated{color:var(--color-danger)}.debug-panel{position:fixed;right:0;top:0;height:100vh;width:420px;background:#090d18;border-left:1px solid var(--color-border);display:flex;flex-direction:column;z-index:1000;font-size:12px;font-family:monospace;transform:translate(100%);transition:transform .2s}.debug-panel.open{transform:translate(0)}.debug-toggle{position:fixed;right:12px;bottom:12px;z-index:1001;background:var(--color-surface-2);color:var(--color-text-dim);border:1px solid var(--color-border);padding:6px 12px;border-radius:20px;font-size:12px;cursor:pointer}.debug-toggle:hover{background:var(--color-border);color:var(--color-text)}.debug-tabs{display:flex;border-bottom:1px solid var(--color-border)}.debug-tab{flex:1;padding:8px;background:transparent;color:var(--color-text-dim);border:none;border-bottom:2px solid transparent;border-radius:0;font-size:11px;cursor:pointer}.debug-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.debug-content{flex:1;overflow-y:auto;padding:8px}.log-entry{display:flex;gap:6px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);align-items:flex-start}.log-entry .dir{font-size:10px;padding:1px 4px;border-radius:3px;font-weight:700;flex-shrink:0}.log-entry.send .dir{background:#1a4a28;color:#5ce080}.log-entry.recv .dir{background:#1a2a4a;color:#5ab2f5}.log-entry.unknown{opacity:.5}.log-entry .msg-type{font-weight:700;color:var(--color-text)}.log-entry .msg-meta{color:var(--color-text-dim);font-size:10px}.log-entry .msg-body{color:var(--color-text-dim);word-break:break-all;font-size:10px;max-width:100%}.state-viewer pre{color:var(--color-text-dim);font-size:10px;white-space:pre-wrap;word-break:break-all}.session-info-row{display:flex;gap:8px;margin-bottom:4px}.session-info-label{color:var(--color-text-dim);min-width:100px}.session-info-value{color:var(--color-text)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.status-dot.connected{background:var(--color-success)}.status-dot.connecting{background:var(--color-warning)}.status-dot.disconnected,.status-dot.closed{background:var(--color-danger)}.empty-state{text-align:center;color:var(--color-text-dim);padding:28px 16px}.empty-state .empty-icon{font-size:28px;display:block;margin-bottom:8px;opacity:.8}.waiting-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-info);margin-right:8px;vertical-align:middle}@media (prefers-reduced-motion: no-preference){.waiting-dot{animation:waiting-pulse 1.6s ease-in-out infinite}@keyframes waiting-pulse{0%,to{opacity:.35}50%{opacity:1}}}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040a14e0;display:flex;align-items:center;justify-content:center;z-index:500;overflow-y:auto;padding:24px 12px}.game-over-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:32px;max-width:500px;width:100%;text-align:center;box-shadow:var(--shadow-2);margin:auto}.game-over-box.win{border-color:var(--color-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 55%,transparent),0 0 48px color-mix(in srgb,var(--color-accent) 28%,transparent),var(--shadow-2)}.game-over-box.lose{border-color:color-mix(in srgb,var(--color-danger) 45%,var(--color-border));filter:saturate(.9)}.game-over-title{font-size:2.2rem;font-weight:800;letter-spacing:.02em;margin-bottom:8px}.game-over-title.win{color:var(--color-accent);text-shadow:0 0 24px color-mix(in srgb,var(--color-accent) 45%,transparent)}.game-over-title.lose{color:var(--color-danger)}.game-over-title.draw{color:var(--color-warning)}@media (prefers-reduced-motion: no-preference){.game-over-box.win{animation:victory-lift .5s ease-out}@keyframes victory-lift{0%{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}}.placement-layout{display:grid;grid-template-columns:auto var(--sidebar-width);gap:var(--gap);padding:16px;align-items:start}@media (max-width: 768px){.placement-layout{grid-template-columns:1fr}}.fleet-list{list-style:none}.fleet-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--color-border);cursor:pointer}.fleet-list li.selected{background:#3a9ef01a;border-radius:6px;padding-left:8px}.fleet-list li.placed{color:var(--color-text-dim)}.ship-dots{display:flex;gap:3px}.ship-dot{width:12px;height:12px;border-radius:2px;background:var(--cell-ship)}.ship-dot.hit{background:var(--cell-hit)}.spinner{width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.text-center{text-align:center}.text-dim{color:var(--color-text-dim)}.text-sm{font-size:12px}.text-mono{font-family:monospace}.full-width{width:100%}.hidden{display:none!important}.conn-banner{position:fixed;top:0;left:0;right:0;z-index:9999;padding:8px 16px;text-align:center;font-size:13px;font-weight:500}.conn-banner--reconnecting{background:var(--color-warning);color:#000}.conn-banner--failed{background:var(--color-danger);color:#fff}.debug-panel{position:fixed;bottom:0;right:0;width:420px;max-height:60vh;background:#0a0e1af7;border:1px solid var(--color-border);border-radius:6px 0 0;z-index:9000;display:flex;flex-direction:column;font-size:11px;font-family:monospace}.debug-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--color-surface-2);border-bottom:1px solid var(--color-border);flex-shrink:0}.debug-title{font-weight:700;font-size:12px}.debug-controls{display:flex;gap:4px;align-items:center}.debug-body{display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0}.debug-section{border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;min-height:0}.debug-section-title{padding:2px 8px;font-size:10px;color:var(--color-text-dim);text-transform:uppercase;background:#ffffff08;flex-shrink:0}.debug-inspector{padding:4px 8px;line-height:1.5;color:var(--color-text-dim)}.debug-log{overflow-y:auto;flex:1;min-height:80px;max-height:200px}.log-entry{padding:2px 6px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer}.log-entry summary{display:flex;gap:6px;align-items:center;list-style:none;padding:2px 0}.log-send{color:#6aadff}.log-recv{color:#5fe6a0}.log-unknown{opacity:.6}.log-dir,.log-type{font-weight:700}.log-cid{color:var(--color-text-dim);font-size:10px}.log-seq{color:#d4a000;font-size:10px}.log-ts{color:var(--color-text-dim);margin-left:auto;font-size:10px}.log-badge{background:var(--color-warning);color:#000;border-radius:3px;padding:0 3px;font-size:9px}.log-data{margin:4px 8px;font-size:10px;white-space:pre-wrap;word-break:break-all;color:var(--color-text);max-height:200px;overflow:auto}.state-game{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.6}.spectator-banner{background:#ff9f0a26;border:1px solid var(--color-warning);color:var(--color-warning);padding:8px 16px;border-radius:6px;margin-bottom:12px;text-align:center;font-size:14px;font-weight:500}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.board-cell[tabindex]:focus{outline:2px solid var(--color-accent);outline-offset:-2px}.kick-btn{margin-left:auto}.host-btn{margin-left:6px}.connected-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.connected-dot--green{background:var(--color-success)}.connected-dot--yellow{background:var(--color-warning)}.connected-dot--red{background:var(--color-danger)}.connected-dot--blue{background:var(--color-info)}.pulse-attn{animation:attn-pulse 1.3s ease-in-out infinite;will-change:transform,box-shadow}@keyframes attn-pulse{0%,to{transform:scale(1);box-shadow:0 0 color-mix(in srgb,var(--color-accent) 90%,transparent)}50%{transform:scale(1.06);box-shadow:0 0 0 12px color-mix(in srgb,var(--color-accent) 0%,transparent),0 0 20px 3px color-mix(in srgb,var(--color-accent) 70%,transparent)}}@media (prefers-reduced-motion: reduce){.pulse-attn{animation:none;outline:2px solid var(--color-accent);outline-offset:2px}}.cg-options{border-top:1px solid var(--color-border, #333);padding-top:4px}.cg-options-summary{cursor:pointer;font-weight:600;padding:6px 0;-webkit-user-select:none;user-select:none}.cg-options-summary:hover{color:var(--color-accent)}.cg-options[open]>.cg-options-summary{margin-bottom:4px}.dash-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:10px 12px;background:var(--color-panel, #1c2531);border:1px solid var(--color-border, #333);border-radius:8px;cursor:pointer;color:inherit}.dash-row:hover{border-color:var(--color-accent)}.dash-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}.dash-name{font-weight:600}.dash-row-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}.dash-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}.badge-your-move{background:var(--color-success, #2e7d32);color:#fff}.badge-their-move{background:var(--color-border, #444);color:var(--color-text-dim, #aaa)}.badge-setup{background:var(--color-accent, #3a6);color:#fff}.badge-finished{background:transparent;color:var(--color-text-dim, #888);border:1px solid var(--color-border, #444)}body.has-top-controls #app{padding-top:46px}.game-title{text-align:center;margin:0 0 8px;font-size:18px;color:var(--color-text, #e8eef5)}