:root{color-scheme:dark;--bg:#092b34;--panel:#103640;--ink:#f1eee4;--muted:#9db4b6;--mint:#bce6c6;--coral:#f49b85}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;min-height:100vh}body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:48px 48px}header,footer{position:relative;display:flex;justify-content:space-between;align-items:center;padding:30px 5vw;border-bottom:1px solid #ffffff18}.brand{font-size:28px;text-decoration:none;color:var(--mint);display:flex;align-items:center;gap:12px}.brand span,.private,.eyebrow,footer,.coordinate{font-size:11px;letter-spacing:2px;font-weight:600}.private{color:var(--muted)}main{position:relative;max-width:1280px;margin:auto;padding:60px 5vw}h1{font-family:Georgia,serif;font-size:clamp(48px,6.5vw,88px);font-weight:400;letter-spacing:-3px;line-height:1.06;margin:24px 0}.eyebrow{color:var(--mint)}.intro{color:var(--muted);font-size:18px;line-height:1.8}.identities{display:flex;gap:15px;margin-top:36px;max-width:640px}button{font:inherit;cursor:pointer;border:1px solid #ffffff25;border-radius:12px;background:#ffffff06;color:var(--ink);padding:12px 16px;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#ffffff14;transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.identities button{display:flex;gap:16px;align-items:center;text-align:left;padding:20px;flex:1;background:#123b45}.avatar{border-radius:50%;display:grid;place-items:center;width:46px;height:46px;background:var(--mint);color:var(--bg);font-family:Georgia,serif;font-size:24px;flex-shrink:0}.coral{background:var(--coral)}small{display:block;color:var(--muted);font-size:11px;margin-top:7px}.footnote{font-size:12px;color:var(--muted);margin-top:24px}.illustration{position:absolute;right:0;top:100px;width:330px;height:330px;z-index:-1}.radar{position:absolute;inset:0;border:1px solid #bce6c633;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 52px,#bce6c615 53px 54px)}.radar:before,.radar:after{content:'';position:absolute;background:#bce6c622}.radar:before{height:1px;width:100%;top:50%}.radar:after{width:1px;height:100%;left:50%}.boat{position:absolute;font-size:100px;left:110px;top:100px;filter:grayscale(1);opacity:.7}.coordinate{position:absolute;bottom:-35px;left:65px;color:var(--muted);font-size:9px}footer{border-top:1px solid #ffffff18;border-bottom:0;margin-top:30px;color:var(--muted);font-size:10px}footer b{color:var(--coral);margin:0 10px}.topline{display:flex;align-items:center;justify-content:space-between}.game-title{font-size:54px;margin:10px 0 30px}.game-title span{color:var(--coral)}.players{display:flex;gap:12px}.player{display:flex;align-items:center;gap:12px;flex:1;padding:16px;border:1px solid #ffffff20;border-radius:14px;background:var(--panel)}.player strong{font-weight:500}.player small{margin:3px 0}.player .avatar{width:38px;height:38px;font-size:20px}.presence{width:8px;height:8px;border-radius:50%;background:#6b7d80;margin-left:auto}.presence.online{background:var(--mint);box-shadow:0 0 12px #bce6c655}.status{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;margin:12px 0}.status h2{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:9px 0}.status p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:0}.primary{background:var(--mint);color:var(--bg);border:0;font-weight:650}.primary:hover:not(:disabled){background:#d3f1d9}#actions{display:flex;gap:8px;flex-wrap:wrap}.quiet{font-size:12px}.boards{display:grid;grid-template-columns:1fr 1fr;gap:30px}.boards article{background:#0c3039;padding:22px;border:1px solid #ffffff18;border-radius:18px}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:8px}h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:0}.board-heading span{font-size:9px;letter-spacing:1px;color:var(--muted)}.grid{display:grid;grid-template-columns:20px repeat(10,1fr);gap:3px}.label{display:grid;place-items:center;font-size:10px;color:var(--muted);min-height:18px}.cell{padding:0;aspect-ratio:1;border:1px solid #ffffff0c;border-radius:4px;background:#17434d;min-width:0;position:relative}.cell.ship{background:#82b7aa;border-color:#afd5c4}.cell.preview{background:#bce6c6aa}.cell.invalid{background:#f49b8588}.cell.hit{background:var(--coral);color:#512f28}.cell.hit:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font-size:24px}.cell.miss:after{content:'•';position:absolute;inset:0;display:grid;place-items:center;color:#c8dadc;font-size:24px}.cell.sunk{box-shadow:inset 0 0 0 2px #8c4e3c}.ships{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.ships button{font-size:11px;padding:8px 10px}.ships .selected{border-color:var(--mint);color:var(--mint)}.ships .placed{opacity:.5}.tools{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}#ready{width:100%;margin-top:4px}.legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:18px 0 0}.legend i{width:8px;height:8px;border-radius:2px;margin-left:8px}.ship-dot{background:#82b7aa}.hit-dot{background:var(--coral)}.miss-dot{background:#c8dadc}.board-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;border-radius:12px;background:var(--coral);color:#253438;max-width:90vw;box-shadow:0 10px 35px #0005;z-index:10}#toast:empty{display:none}[hidden]{display:none!important}@media(min-width:1100px){#login{min-height:500px}}@media(max-width:1050px){.illustration{opacity:.25;right:15px;top:80px}}@media(max-width:700px){header{padding:20px 5vw}.private{font-size:8px;letter-spacing:1px}.brand span{font-size:9px;letter-spacing:1px}main{padding:35px 4vw}.identities{flex-direction:column}.illustration{top:50px;right:0;width:250px;height:250px}.boat{left:75px;top:70px}.boards{grid-template-columns:1fr;gap:18px}.boards article{padding:15px}.status{flex-direction:column;align-items:flex-start;padding:15px 0}.game-title{font-size:42px}.player{padding:12px;gap:8px}.player small{font-size:9px}.topline{align-items:flex-start}.topline .quiet{max-width:110px}.grid{gap:3px}.cell{border-radius:3px}footer{font-size:8px;letter-spacing:1px;padding:25px 4vw}h1{letter-spacing:-2px}}

.wins{display:block;color:var(--mint);font-size:12px;margin-top:5px}.sound-toggle{margin-left:12px;white-space:nowrap}header .private{margin-left:auto}@media(max-width:700px){header .private{display:none}}

.result-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:#031a22dd;backdrop-filter:blur(10px);pointer-events:none}
.result-card{text-align:center;padding:48px 28px;width:min(680px,100%);border:1px solid #bce6c655;border-radius:30px;background:radial-gradient(ellipse at top,#295b56,#0c3039 75%);box-shadow:0 24px 100px #0006;animation:result-arrive .35s ease-out}
.result-icon{display:block;font-size:72px;color:var(--mint);margin-bottom:20px}.result-card h2{font-family:Georgia,serif;font-size:clamp(46px,8vw,88px);font-weight:400;line-height:1.08;margin:0 0 24px;color:var(--mint)}.result-card p{color:var(--ink);line-height:1.6;margin:0}.lost .result-card{background:radial-gradient(ellipse at top,#584342,#0c3039 75%);border-color:#f49b8555}.lost h2,.lost .result-icon{color:var(--coral)}
@keyframes result-arrive{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.result-card{animation:none}}

.result-overlay{pointer-events:auto}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.result-actions button{min-width:140px;padding:15px 24px}.result-overlay.settled .result-card h2{font-size:clamp(36px,5vw,52px)}.result-overlay.settled .result-icon{font-size:44px}.result-card h2,.result-icon{transition:font-size .4s ease}@media(prefers-reduced-motion:reduce){.result-card h2,.result-icon{transition:none}}