:root{--sea-900:#0a1622;--sea-800:#0e2233;--sea-700:#13324a;--sea-600:#1b4568;--water:#12304a;--grid-line:#78bee624;--steel:#5b6b7a;--steel-light:#8394a3;--ink:#e8f1f8;--muted:#8fa8bd;--muted-dim:#607689;--accent:#38e1c8;--accent-dim:#1c9d8b;--hit:#ff5a4d;--hit-glow:#ff5a4d8c;--miss:#cfe4f2;--good:#4ade80;--warn:#f4c14b;--border:#78bee629;--border-strong:#78bee64d;--card:#11283cb8;--shadow:0 18px 40px -18px #000000b3;--radius:14px;--radius-sm:9px;--cell-size:34px;--head-size:22px;--cell-gap:3px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "Cascadia Code", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--sans);color:var(--ink)}*{box-sizing:border-box}html,body,#root{min-height:100vh;margin:0}body{background:radial-gradient(1200px 700px at 15% -10%, #38e1c814, transparent 60%), radial-gradient(1000px 600px at 100% 0%, #1b456880, transparent 55%), linear-gradient(160deg, var(--sea-900), #060d15 90%);color:var(--ink);-webkit-tap-highlight-color:transparent;background-attachment:fixed;overflow-x:hidden}#root{flex-direction:column;display:flex}h1,h2,h3{letter-spacing:-.02em;color:var(--ink);margin:0;font-weight:650}kbd{font-family:var(--mono);border:1px solid var(--border-strong);background:#ffffff17;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:.8em}.muted{color:var(--muted)}.btn{font:inherit;color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0f;padding:10px 16px;font-weight:600;transition:transform 80ms,background .15s,border-color .15s,box-shadow .15s}.btn:hover:not(:disabled){border-color:var(--accent-dim);background:#ffffff1f}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, var(--accent), var(--accent-dim));color:#04201c;border-color:#0000;box-shadow:0 8px 20px -8px #38e1c899}.btn-primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(180deg, var(--accent), var(--accent-dim))}.btn-lg{width:100%;padding:13px 20px;font-size:1.02rem}.btn-ghost{background:0 0}input[type=text]{font:inherit;color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#06121cb3;outline:none;width:100%;padding:11px 13px;transition:border-color .15s,box-shadow .15s}input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px #38e1c82e}.banner{border-radius:var(--radius-sm);padding:11px 14px;font-weight:500}.banner-error{color:#ffd0cb;background:#ff5a4d24;border:1px solid #ff5a4d66}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.cell:focus-visible{outline-offset:-3px;z-index:2}#root.shake{animation:.5s shake}#root.shake-strong{animation:.55s shake-strong}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(2px,2px)}}@keyframes shake-strong{0%,to{transform:translate(0)rotate(0)}15%{transform:translate(-6px,3px)rotate(-.4deg)}30%{transform:translate(6px,-3px)rotate(.4deg)}45%{transform:translate(-5px,-3px)rotate(0)}60%{transform:translate(5px,3px)rotate(.3deg)}75%{transform:translate(-3px,2px)rotate(0)}}@media (prefers-reduced-motion:reduce){#root.shake,#root.shake-strong,.cell.hit:before,.cell.miss:before,.cell.hit:after,.cell.miss:after,.waiting-dots span,.turn-dot{animation:none!important}.grid-interactive .cell.targetable:hover{transform:none!important}}.app{flex-direction:column;min-height:100vh;display:flex}.app-bar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#06101a8c;justify-content:space-between;align-items:center;padding:14px 22px;display:flex;position:sticky;top:0}.app-title{letter-spacing:.01em;font-size:1.12rem;font-weight:700}.app-anchor{color:var(--accent);margin-right:4px}.app-right{align-items:center;gap:14px;display:flex}.app-meta{align-items:center;gap:12px;font-size:.9rem;display:flex}.icon-btn{width:38px;height:38px;color:var(--ink);border:1px solid var(--border-strong);cursor:pointer;background:#ffffff0f;border-radius:9px;justify-content:center;align-items:center;font-size:1.05rem;transition:background .15s,border-color .15s;display:flex}.icon-btn:hover{border-color:var(--accent-dim);background:#ffffff1f}.app-code{font-family:var(--mono);letter-spacing:.14em;color:var(--accent);background:#38e1c81a;border:1px solid #38e1c847;border-radius:7px;padding:4px 10px}.app-vs{color:var(--muted)}.app-main{flex:1;justify-content:center;padding:26px 20px 48px;display:flex}.screen{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:1000px;display:flex}.screen-head{text-align:center}.screen-head h2{font-size:1.5rem}.home{max-width:460px;padding-top:4vh}.brand{text-align:center}.brand-mark{filter:drop-shadow(0 4px 14px #38e1c866);font-size:3.2rem}.brand h1{margin-top:4px;font-size:2.4rem}.tagline{color:var(--muted);margin:8px 0 0}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);flex-direction:column;gap:16px;padding:22px;display:flex}.field{color:var(--muted);flex-direction:column;gap:7px;font-size:.9rem;display:flex}.divider{color:var(--muted-dim);text-transform:uppercase;letter-spacing:.16em;align-items:center;gap:12px;font-size:.82rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.join-row{gap:10px;display:flex}.code-input{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;text-align:center}.hint{color:var(--muted-dim);text-align:center;max-width:420px;font-size:.85rem}.lobby-card{text-align:center;align-items:center;gap:14px;max-width:420px}.code-display{font-family:var(--mono);letter-spacing:.3em;color:var(--accent);border-radius:var(--radius);cursor:pointer;background:#38e1c814;border:1px dashed #38e1c880;padding:14px 10px 14px 22px;font-size:2.6rem;transition:background .15s}.code-display:hover{background:#38e1c829}.copy-hint{color:var(--muted-dim);min-height:1em;font-size:.82rem}.big-emoji{font-size:3rem}.waiting-dots{justify-content:center;gap:8px;margin:6px 0;display:flex}.waiting-dots span{background:var(--accent);opacity:.35;border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite pulse}.waiting-dots span:nth-child(2){animation-delay:.2s}.waiting-dots span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}.board{flex-direction:column;gap:10px;display:inline-flex}.board-header{text-align:center}.board-header h3{letter-spacing:.02em;font-size:1.05rem}.grid{grid-template-columns:var(--head-size) repeat(10, var(--cell-size));grid-auto-rows:var(--cell-size);gap:var(--cell-gap);background:linear-gradient(160deg, var(--sea-800), var(--sea-900));border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 0 40px #00000059;padding:10px;display:grid}.corner{width:var(--head-size);height:var(--head-size)}.head{color:var(--muted-dim);font-size:.72rem;font-weight:600;font-family:var(--mono);justify-content:center;align-items:center;display:flex}.cell{background:var(--water);border:1px solid var(--grid-line);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:4px;justify-content:center;align-items:center;font-size:1rem;line-height:1;transition:background .12s,box-shadow .12s,transform 60ms;display:flex;position:relative}.grid-interactive .cell{cursor:default}.ship-icon{filter:drop-shadow(0 1px 1px #00000080);font-size:.98rem}.cell.ship{background:linear-gradient(160deg, var(--steel-light), var(--steel));border-color:#ffffff2e;box-shadow:inset 0 1px #ffffff40}.cell.preview-ok{border-color:var(--good);box-shadow:0 0 0 1px var(--good);background:#4ade8052}.cell.preview-bad{border-color:var(--hit);box-shadow:0 0 0 1px var(--hit);background:#ff5a4d4d}.cell.miss:after{content:"";background:var(--miss);opacity:.6;border-radius:50%;width:8px;height:8px;position:absolute;box-shadow:0 0 6px #cfe4f280}.cell.hit{background:radial-gradient(circle at 50% 45%, #ffb199 0%, var(--hit) 55%, #b3271c 100%);box-shadow:0 0 12px var(--hit-glow);border-color:#ff8a7a}.cell.hit:after{content:"✸";color:#fff4e6;text-shadow:0 0 6px #00000080;font-size:.95rem}.cell.ship.hit:after{content:"💥"}.cell.last-shot{outline:2px solid var(--warn);outline-offset:-2px}.cell.hit:after,.cell.miss:after{animation:.32s ease-out marker-pop}@keyframes marker-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}.cell.hit:before{content:"";border:2px solid var(--hit);pointer-events:none;border-radius:50%;animation:.5s ease-out forwards shockwave;position:absolute;inset:0}.cell.miss:before{content:"";border:1px solid var(--miss);pointer-events:none;border-radius:50%;animation:.55s ease-out forwards shockwave;position:absolute;inset:22%}@keyframes shockwave{0%{opacity:.85;transform:scale(.35)}to{opacity:0;transform:scale(1.9)}}.grid-interactive .cell.targetable{cursor:crosshair}.grid-interactive .cell.targetable:hover{box-shadow:0 0 0 1px var(--accent), 0 0 12px #38e1c866;background:#38e1c838;transform:scale(1.04)}.placement-layout{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px;display:flex}.ready-flag{color:var(--good)}.tray{flex-direction:column;gap:16px;min-width:260px;max-width:300px;display:flex}.tray-ships{flex-direction:column;gap:8px;display:flex}.ship-chip{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--ink);font:inherit;text-align:left;align-items:center;gap:10px;padding:9px 12px;transition:border-color .14s,background .14s,transform 60ms;display:flex}.ship-chip:hover{border-color:var(--border-strong)}.ship-chip.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#38e1c81a}.ship-chip.placed{opacity:.62}.ship-chip-icon{font-size:1.25rem}.ship-chip-name{flex:1;font-size:.92rem;font-weight:600}.ship-chip-size{gap:3px;display:flex}.ship-chip-size i{background:var(--steel-light);border-radius:2px;width:8px;height:8px}.ship-chip-check{color:var(--good);font-weight:700}.tray-controls{flex-direction:column;gap:10px;display:flex}.tray-row{gap:10px;display:flex}.tray-row .btn{flex:1}.turn-bar{border:1px solid var(--border-strong);text-align:center;border-radius:100px;justify-content:center;align-items:center;gap:10px;min-width:340px;padding:12px 20px;font-weight:650;display:flex}.turn-bar.my-turn{color:#c9f7d8;background:#4ade8024;border-color:#4ade8073}.turn-bar.their-turn{color:#f7e4b6;background:#f4c14b1f;border-color:#f4c14b66}.turn-dot{background:currentColor;border-radius:50%;width:10px;height:10px;animation:1.3s ease-in-out infinite pulse}.battle-layout{flex-wrap:wrap;justify-content:center;gap:30px;width:100%;display:flex}.battle-side{justify-content:center;display:flex}.board-locked .grid{opacity:.9}.board-active .grid{box-shadow:var(--shadow), 0 0 24px -6px #38e1c859;border-color:#38e1c866}.roster{flex-direction:column;align-items:center;gap:5px;display:flex}.roster-title{color:var(--muted);font-size:.82rem}.roster-count{font-family:var(--mono);color:var(--accent)}.roster-ships{gap:6px;display:flex}.roster-chip{filter:grayscale(0);font-size:1.15rem;transition:filter .2s,opacity .2s;position:relative}.roster-chip.sunk{filter:grayscale();opacity:.45}.roster-x{color:var(--hit);justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:flex;position:absolute;inset:0}.log{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:760px;padding:14px 16px}.log-title{text-transform:uppercase;letter-spacing:.16em;color:var(--muted-dim);margin-bottom:8px;font-size:.78rem}.log ul{flex-direction:column;gap:4px;max-height:168px;margin:0;padding:0;font-size:.9rem;list-style:none;display:flex;overflow-y:auto}.log li{color:var(--muted);padding:2px 0}.log-you{color:#bff3ea}.log-enemy{color:#f7d7b6}.log-system{color:var(--accent);font-weight:600}.outcome{text-align:center;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);flex-direction:column;align-items:center;gap:8px;width:100%;max-width:520px;padding:18px 26px;display:flex}.outcome-emoji{font-size:3.4rem}.outcome h1{font-size:2.2rem}.outcome-win h1{color:var(--good)}.outcome-lose h1{color:var(--hit)}.outcome .btn{max-width:240px;margin-top:8px}@media (width<=900px){:root{--cell-size:30px}}@media (width<=640px){:root{--cell-size:27px;--head-size:18px;--cell-gap:2px}.app-main{padding:16px 10px 36px}.code-display{letter-spacing:.2em;font-size:1.9rem}}