:root{color-scheme:dark;--navy:#071b29;--panel:#0c2636;--line:#294653;--text:#e9f0ec;--muted:#a6bbc5;--gold:#edbd68;--orange:#ff8b60}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 5%,#183b4b 0,transparent 55%),var(--navy);color:var(--text);font:16px/1.5 system-ui,Segoe UI,sans-serif;min-height:100vh}header,main,footer{max-width:1160px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}h1{font-size:clamp(26px,5vw,42px);letter-spacing:.09em;margin:2px 0;line-height:1.2}h2{font-size:28px;line-height:1.2;margin:8px 0 18px}h3{margin:0 0 15px;font-size:19px}.eyebrow{font-size:12px;letter-spacing:.19em;color:var(--gold);font-weight:700}.crosshair{color:var(--gold)}button,input,select{font:inherit;border:1px solid #4a6471;border-radius:5px;padding:11px 15px;background:#153547;color:var(--text);min-height:46px}button{cursor:pointer;font-weight:600;transition:background .15s,transform .15s}button:hover:enabled{background:#24506a}button:active:enabled{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);border-color:var(--gold);color:#10242f}.primary:hover:enabled{background:#ffda92}.quiet{background:transparent;font-size:14px}p{color:var(--muted)}.panel{border:1px solid var(--line);background:linear-gradient(145deg,#102e40,#0a2130);border-radius:8px;padding:24px}.lobby{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:42px;margin:16px 0 22px;box-shadow:0 24px 70px #0003}.intro{display:flex;flex-direction:column;justify-content:center}.intro h2{font:700 clamp(30px,4vw,48px)/1.18 Georgia,serif}.modes{display:grid;gap:12px}.modes h3{margin:0}.modes label{font-size:14px;color:var(--muted)}.modes .primary{display:flex;justify-content:space-between}.divider{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin:6px 0}.divider:before,.divider:after{content:'';height:1px;flex:1;background:var(--line)}.join{display:flex;gap:10px;margin-top:6px}.join input{width:100%;min-width:0;text-transform:uppercase}.battlebar{display:flex;justify-content:space-between;align-items:center;gap:12px}.battlebar h2{margin-bottom:8px}.room{display:flex;flex-wrap:wrap;gap:15px;align-items:center;background:#183544;padding:12px;margin-top:10px;border-left:3px solid var(--gold)}.room span{font-weight:bold;letter-spacing:.06em}.boards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.boardheading{display:flex;justify-content:space-between;align-items:center;gap:8px}.boardheading span{font-size:12px;color:var(--gold);letter-spacing:.07em}.boardheading h3{margin-bottom:12px}.grid{display:grid;grid-template-columns:22px repeat(10,minmax(0,1fr));gap:3px}.grid .axis{color:var(--muted);font-size:12px;text-align:center;align-self:center}.grid button{padding:0;border:1px solid #386076;border-radius:2px;min-height:0;aspect-ratio:1;background:#10364b;font-size:clamp(14px,2vw,22px);line-height:1;color:white;opacity:1;font-weight:800}.grid button.ship{background:#608090;border-color:#a5bdc6}.grid button.hit{background:#9b3d29;color:#ffe4c3;border-color:#ff9c6d}.grid button.miss{color:#d5e5ed;background:#1e4256}.grid button:enabled:hover{background:#38637b}.grid button:focus-visible{outline-offset:0}.ships{display:flex;flex-wrap:wrap;gap:8px}.ships button{font-size:14px}.ships button.selected{border-color:var(--gold);background:#534735;color:#ffe1a8}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.legend,.boards p{font-size:14px;margin:13px 0 0}.legend b{margin-left:12px}.steel{color:#a5bdc6}.orange{color:var(--orange)}.log{padding:16px;border-left:3px solid var(--gold);background:#163346;margin-bottom:16px}#notice:not(:empty){padding:14px;background:#603222;color:#ffe5c8;border:1px solid #a76646;border-radius:5px;margin:12px 0}details{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted)}summary{cursor:pointer;color:var(--text)}footer{font-size:13px;color:var(--muted);text-align:center}[hidden]{display:none!important}@media(max-width:700px){header,main,footer{padding:16px}.lobby{grid-template-columns:1fr;gap:22px;padding:24px}.intro h2{font-size:32px}.intro p{margin:4px 0}.boards{grid-template-columns:1fr;gap:16px}.panel{padding:14px}.grid{gap:3px}.grid button{font-size:20px}.battlebar{align-items:flex-start}h2{font-size:24px}.actions button{flex:1 1 42%}.ships button{flex:1 1 28%}.room button{font-size:14px}.boardheading h3{font-size:19px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Impact effects stay on their cells across UI refreshes using negative delays. */
.grid button{position:relative;isolation:isolate}
.grid button.exploding{z-index:2}
.grid button.exploding::before,.grid button.exploding::after{content:'';position:absolute;pointer-events:none;left:50%;top:50%;border-radius:50%;opacity:0;animation-delay:var(--blast-delay,0ms);animation-fill-mode:both}
.grid button.exploding::before{width:145%;height:145%;background:radial-gradient(circle,#fffce1 0 12%,#ffe47d 23%,#ff941c 42%,#ef4214 59%,#52251c66 74%,transparent 78%);box-shadow:0 0 14px #ff941c99;animation-name:impact-fire;animation-duration:1100ms;animation-timing-function:ease-out}
.grid button.exploding::after{width:170%;height:170%;border:2px solid #ffc26f;animation-name:impact-ring;animation-duration:950ms;animation-timing-function:ease-out}
.grid button.exploding.sinking::before{width:190%;height:190%;animation-duration:1500ms}
.grid button.exploding.sinking::after{width:210%;height:210%;animation-duration:1350ms}
@keyframes impact-fire{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}12%{opacity:1;transform:translate(-50%,-50%) scale(.8)}32%{opacity:.95;transform:translate(-50%,-50%) scale(1)}65%{opacity:.45;transform:translate(-50%,-60%) scale(1.15);filter:grayscale(.4)}100%{opacity:0;transform:translate(-50%,-80%) scale(1.35);filter:grayscale(1)}}
@keyframes impact-ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
@media(prefers-reduced-motion:reduce){.grid button.exploding::before,.grid button.exploding.sinking::before{animation-name:impact-soft;animation-duration:700ms;width:100%;height:100%;box-shadow:none}.grid button.exploding::after{display:none}@keyframes impact-soft{0%{opacity:.65;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}}

.shot-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 18px}.shot-results>div{padding:12px 16px;background:#102e40;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:5px}.shot-results span{display:block;color:var(--muted);font-size:14px}.shot-results strong{display:block;font-size:17px;margin-top:3px}
.fleet-status{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}.fleet-item{flex:1 1 125px;display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid #39566a;border-radius:4px;padding:6px 8px;background:#112f40;font-size:13px}.fleet-item strong{font-size:11px;color:#9dcad9;letter-spacing:.03em}.fleet-item.fleet-sunk{background:#372842;border-color:#c193d8}.fleet-item.fleet-sunk strong{color:#eed1ff}.grid button.wreck{background:repeating-linear-gradient(135deg,#452f54 0 5px,#654372 5px 8px);border:2px solid #dca3f5;color:#fff}.grid button.latest-shot{outline:3px solid #ffdc7b;outline-offset:-4px;box-shadow:0 0 0 1px #ffdc7b;z-index:1}.grid button.exploding{z-index:2}.grid button.preview-valid,.grid button.preview-valid:enabled:hover{background:#16784e;border:2px solid #8df7b8}.grid button.preview-invalid,.grid button.preview-invalid:enabled:hover{background:#a52b32;border:2px solid #ffb6b6}#previewHelp{min-height:1.5em;margin-bottom:0;color:var(--text)}#confirmPlace:enabled{background:#16784e;border-color:#8df7b8}@media(max-width:550px){.shot-results{gap:8px}.shot-results>div{padding:10px}.shot-results strong{font-size:15px}.fleet-item{flex-basis:115px}}