:root{--ink: #eaf4f9;--ink-dim: #9db8c6;--accent: #67e0ff;--accent-deep: #2a95b8;--danger: #ff5d4a;--ok: #51e0a8;--gold: #ffd27a;--panel: rgba(9, 22, 32, .82);--panel-line: rgba(103, 224, 255, .22);--font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#06121d;font-family:var(--font);color:var(--ink)}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#ui-root>*{pointer-events:auto}.btn{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:linear-gradient(180deg,#2a95b859,#14465c66);border:1px solid var(--panel-line);border-radius:8px;padding:12px 26px;cursor:pointer;transition:all .15s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.btn:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 18px #67e0ff59;transform:translateY(-1px)}.btn:disabled{opacity:.35;cursor:default}.btn.primary{background:linear-gradient(180deg,#67e0ff80,#2a95b873);border-color:#67e0ff8c}.btn.subtle{background:#0a1a2480;font-size:12px;padding:8px 16px}.btn.danger{border-color:#ff5d4a80;background:linear-gradient(180deg,#ff5d4a47,#781e1459)}.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 40px #00000073}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(ellipse at 50% 80%,#040c1440,#030a10b8);animation:fade-in .45s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.title{font-size:clamp(46px,8vw,88px);font-weight:800;letter-spacing:.24em;text-transform:uppercase;background:linear-gradient(180deg,#eaf6fb 20%,#67e0ff 65%,#2a95b8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 18px 60px rgba(103,224,255,.25)}.subtitle{font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-dim)}.menu-buttons{display:flex;flex-direction:column;gap:12px;min-width:300px;margin-top:18px}.screen h2{font-size:26px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,250px));gap:16px;justify-content:center;max-width:1120px;padding:0 24px}.mode-card{padding:22px;cursor:pointer;transition:all .18s ease;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:168px}.mode-card:hover,.mode-card.selected{border-color:var(--accent);box-shadow:0 0 26px #67e0ff47;transform:translateY(-3px)}.mode-card .icon{font-size:30px}.mode-card h3{font-size:16px;letter-spacing:.12em;text-transform:uppercase}.mode-card p{font-size:13px;line-height:1.5;color:var(--ink-dim)}.mode-card .note{font-size:11px;color:var(--gold);letter-spacing:.05em}.choice-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.chip{border:1px solid var(--panel-line);border-radius:999px;background:#0a1a2499;color:var(--ink);padding:9px 20px;font-size:13px;letter-spacing:.08em;cursor:pointer;transition:all .15s ease;font-family:var(--font)}.chip:hover{border-color:var(--accent)}.chip.selected{background:#67e0ff38;border-color:var(--accent);box-shadow:0 0 14px #67e0ff4d}.chip .sub{display:block;font-size:10px;color:var(--ink-dim);letter-spacing:.04em}.form-row{display:flex;gap:14px;align-items:center}.form-row input[type=text]{background:#0a1a24b3;border:1px solid var(--panel-line);border-radius:8px;color:var(--ink);font-family:var(--font);font-size:14px;padding:10px 14px;width:180px}.hint{font-size:12.5px;color:var(--ink-dim);max-width:560px;text-align:center;line-height:1.6}.settings-body{display:flex;flex-direction:column;gap:16px;padding:26px 30px;min-width:380px}.setting-row{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:12px;font-size:13px;letter-spacing:.06em}.setting-row label{color:var(--ink-dim);text-transform:uppercase;font-size:11.5px}.setting-row input[type=range]{accent-color:var(--accent)}.setting-row .toggle-group{display:flex;gap:8px;grid-column:2 / 4}.hud-top{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:18px;padding:10px 26px}.turn-banner{font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.turn-banner.enemy{color:var(--danger)}.turn-banner.you{color:var(--accent)}.phase-note{font-size:12px;color:var(--ink-dim);letter-spacing:.08em;max-width:320px}.timer-ring{position:relative;width:52px;height:52px;flex:none}.timer-ring svg{transform:rotate(-90deg)}.timer-ring .value{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.timer-ring.warning .value{color:var(--danger);animation:blink .5s steps(2) infinite}@keyframes blink{50%{opacity:.45}}.hud-fleet{position:absolute;left:16px;bottom:16px;padding:14px 18px;min-width:190px}.hud-enemy{position:absolute;right:16px;bottom:16px;padding:14px 18px;min-width:190px}.hud-panel-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px}.fleet-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}.fleet-row .name{width:84px;color:var(--ink)}.fleet-row.sunk .name{color:var(--ink-dim);text-decoration:line-through}.fleet-row .cells{display:flex;gap:3px}.fleet-row .cell{width:11px;height:11px;border-radius:2.5px;background:#67e0ff59;border:1px solid rgba(103,224,255,.4)}.fleet-row .cell.hit{background:var(--danger);border-color:var(--danger);box-shadow:0 0 7px #ff5d4acc}.fleet-row .cell.unknown{background:#9db8c633;border-color:#9db8c64d}.hud-log{position:absolute;left:50%;transform:translate(-50%);bottom:16px;width:min(520px,44vw);max-height:118px;overflow:hidden;padding:12px 18px;display:flex;flex-direction:column-reverse;gap:4px;-webkit-mask-image:linear-gradient(180deg,transparent,black 30%);mask-image:linear-gradient(180deg,transparent,black 30%)}.log-line{font-size:12.5px;line-height:1.45;color:var(--ink-dim)}.log-line strong{color:var(--ink)}.log-line.hit strong{color:var(--danger)}.log-line.sunk strong{color:var(--gold)}.log-line.quip{color:#c39bff;font-style:italic}.opponent-status{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-dim);letter-spacing:.05em}.opponent-status .dots:after{content:"…";animation:think 1.4s steps(4) infinite}@keyframes think{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.hud-corner{position:absolute;top:14px;right:16px;display:flex;gap:8px}.hud-corner-left{position:absolute;top:14px;left:16px;display:flex;gap:8px}.placement-tray{position:absolute;left:16px;top:50%;transform:translateY(-50%);padding:18px 20px;display:flex;flex-direction:column;gap:10px;width:228px}.tray-ship{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--panel-line);border-radius:8px;padding:9px 12px;cursor:pointer;transition:all .15s ease;background:#0a1a2473}.tray-ship:hover{border-color:var(--accent)}.tray-ship.selected{border-color:var(--accent);background:#67e0ff29;box-shadow:0 0 12px #67e0ff40}.tray-ship.placed{opacity:.6}.tray-ship .label{font-size:13px;letter-spacing:.06em}.tray-ship .pips{display:flex;gap:3px}.tray-ship .pip{width:9px;height:9px;border-radius:2px;background:#67e0ff80}.tray-ship.placed .pip{background:var(--ok)}.tray-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}.placement-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);padding:10px 22px;font-size:13px;color:var(--ink-dim);letter-spacing:.06em;text-align:center}.placement-hint strong{color:var(--accent)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#030a10ed;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:fade-in .3s ease;z-index:40}.overlay h2{font-size:30px;letter-spacing:.22em;text-transform:uppercase}.overlay .who{color:var(--accent)}.banner{position:absolute;top:22%;left:50%;transform:translate(-50%);font-size:clamp(30px,5vw,54px);font-weight:800;letter-spacing:.3em;text-transform:uppercase;padding:16px 46px;pointer-events:none;animation:banner-pop .5s cubic-bezier(.2,1.6,.4,1);text-shadow:0 8px 40px rgba(0,0,0,.7);z-index:30}.banner.hit{color:var(--danger)}.banner.sunk{color:var(--gold)}.banner.miss{color:var(--ink-dim);font-size:clamp(20px,3vw,32px)}@keyframes banner-pop{0%{opacity:0;transform:translate(-50%) scale(.75)}to{opacity:1;transform:translate(-50%) scale(1)}}.stats-grid{display:grid;grid-template-columns:auto auto auto;gap:8px 30px;font-size:14px;padding:20px 30px}.stats-grid .h{color:var(--ink-dim);font-size:11px;text-transform:uppercase;letter-spacing:.14em}.victory-title{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:.26em;text-transform:uppercase}.victory-title.win{color:var(--ok);text-shadow:0 0 60px rgba(81,224,168,.5)}.victory-title.lose{color:var(--danger);text-shadow:0 0 60px rgba(255,93,74,.4)}.paused-badge{position:absolute;top:84px;left:50%;transform:translate(-50%);padding:8px 22px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}.mode-card.disabled{opacity:.45;cursor:not-allowed}.mode-card.disabled:hover{border-color:var(--panel-line);box-shadow:none;transform:none}.lobby-actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.lobby-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 26px;min-width:250px}.lobby-panel .hint{max-width:230px}.avatar-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.avatar-chip{font-size:20px;line-height:1;padding:8px 9px;background:#0a1a24b3;border:1px solid var(--panel-line);border-radius:10px;cursor:pointer;transition:all .15s ease}.avatar-chip:hover{border-color:var(--accent)}.avatar-chip.selected{border-color:var(--accent);box-shadow:0 0 14px #67e0ff66;background:#67e0ff29}.code-input{text-transform:uppercase;letter-spacing:.4em;font-weight:700;text-align:center}.form-row input.invalid{border-color:var(--danger);box-shadow:0 0 10px #ff5d4a59}.room-code{font-size:clamp(42px,7vw,72px);font-weight:800;letter-spacing:.5em;padding-left:.5em;color:var(--accent);text-shadow:0 0 34px rgba(103,224,255,.5)}.connect-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim);letter-spacing:.08em}.connect-status .dots:after{content:"…";animation:think 1.4s steps(4) infinite}.chat-panel{position:absolute;top:64px;right:16px;width:252px;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 7px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}.chat-toggle{background:none;border:none;color:var(--ink-dim);font-family:var(--font);font-size:12px;cursor:pointer;padding:0 4px}.chat-toggle:hover{color:var(--ink)}.chat-thread{display:flex;flex-direction:column;gap:5px;padding:4px 12px;height:168px;overflow-y:auto;scrollbar-width:thin}.chat-panel.collapsed .chat-thread,.chat-panel.collapsed .chat-emotes,.chat-panel.collapsed .chat-input-row{display:none}.chat-line{font-size:12.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}.chat-line .who{color:var(--accent);font-weight:700;margin-right:6px}.chat-line.mine .who{color:var(--ok)}.chat-line.system{color:var(--ink-dim);font-style:italic;font-size:11.5px}.chat-line .emote{font-size:20px;line-height:1;vertical-align:middle}.chat-emotes{display:flex;gap:3px;padding:6px 10px 2px;justify-content:center}.chat-emote-btn{background:none;border:1px solid transparent;border-radius:8px;font-size:17px;line-height:1;padding:4px 3px;cursor:pointer;transition:all .12s ease}.chat-emote-btn:hover{border-color:var(--panel-line);transform:scale(1.22)}.chat-input-row{display:flex;gap:6px;padding:8px 10px 10px}.chat-input-row input{flex:1;min-width:0;background:#0a1a24b3;border:1px solid var(--panel-line);border-radius:8px;color:var(--ink);font-family:var(--font);font-size:12.5px;padding:7px 10px}.chat-send{background:#67e0ff24;border:1px solid var(--panel-line);border-radius:8px;color:var(--accent);cursor:pointer;font-size:13px;padding:0 10px}.chat-send:hover{border-color:var(--accent)}.emote-splash{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:40;animation:emote-pop 2.2s cubic-bezier(.2,1.5,.4,1) forwards}.emote-splash .big{font-size:110px;line-height:1;filter:drop-shadow(0 14px 40px rgba(0,0,0,.6))}.emote-splash .from{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);text-shadow:0 2px 12px rgba(0,0,0,.8)}@keyframes emote-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-52%) scale(1)}to{opacity:0;transform:translate(-50%,-62%) scale(.92)}}