:root{color-scheme:dark;--bg:#101923;--panel:#192633;--line:#344555;--ink:#f4f1e9;--muted:#abb8c5;--red:#f27c76;--blue:#75baff;--gold:#f0cf83;--accent:var(--gold);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{border:1px solid #586979;background:#243444;color:var(--ink);border-radius:9px;padding:11px 17px;font-weight:650;cursor:pointer;min-height:44px}button:hover:not(:disabled){filter:brightness(1.15)}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:var(--accent);border-color:var(--accent);color:#111d29}.masthead{max-width:1260px;margin:auto;padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{color:var(--ink);text-decoration:none;font-weight:750;letter-spacing:-.03em}.brand span{font-weight:450;color:var(--muted)}.connection{font-size:12px;color:var(--muted)}.connection.online{color:#a6d9b1}.connection.offline{color:var(--gold)}main{max-width:1260px;margin:auto;padding:24px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.06em;margin-bottom:14px}h1 span{font-weight:350;color:var(--muted)}h2{font-size:24px;letter-spacing:-.035em;margin-bottom:8px}h3{font-size:17px;margin-bottom:8px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--accent);font-weight:750;margin-bottom:10px}.subtle{color:var(--muted);font-size:13px;line-height:1.5}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}.panel.red{--accent:var(--red);border-top:3px solid var(--red)}.panel.blue{--accent:var(--blue);border-top:3px solid var(--blue)}.panel.red .board{--accent:var(--red)}.panel.blue .board{--accent:var(--blue)}.section-head{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:18px}.badge{border:1px solid var(--line);border-radius:100px;padding:6px 10px;font-size:12px;white-space:nowrap;color:var(--muted)}.badge.active{color:var(--accent);border-color:var(--accent)}.hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.hero h1{font-size:clamp(30px,4vw,48px);margin-bottom:6px}.hero p{margin-bottom:0}.round{color:var(--muted);font-size:13px}.boards{display:grid;grid-template-columns:1fr 1fr;gap:22px}.board-wrap{width:100%;max-width:520px;margin:auto}.board{display:grid;grid-template-columns:20px repeat(10,minmax(0,1fr));gap:3px;user-select:none}.axis{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;color:var(--muted);min-height:18px}.cell{aspect-ratio:1;min-height:0;min-width:0;padding:0;border:1px solid #334858;border-radius:4px;background:#112432;position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(11px,2.4vw,23px);font-weight:800}.cell:disabled{opacity:1}.cell.ship{background:#3d5669;border-color:#8da4b6}.cell.ship.selected{background:#806f48;border-color:var(--gold)}.cell.hit{background:var(--accent);border-color:var(--accent);color:#11212e}.cell.miss{color:#c6d6e4;background:#253a4c}.cell.sunk{box-shadow:inset 0 0 0 2px var(--ink)}.cell.target:not(:disabled):hover{background:#4b6173;border-color:var(--gold)}.legend{display:flex;flex-wrap:wrap;gap:18px;margin:15px 0 0;font-size:12px;color:var(--muted)}.legend b{color:var(--ink);margin-right:4px}.queue{margin-top:24px;display:flex;justify-content:space-between;gap:20px;align-items:center}.queue-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}.queue-list li{border:1px solid var(--line);padding:6px 10px;border-radius:7px;font-size:13px;color:var(--muted)}.ship-picker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.ship-picker button{font-size:12px;padding:8px 10px;min-height:38px}.ship-picker .selected{border-color:var(--gold);color:var(--gold)}#join{max-width:530px;padding:45px 0 35px;margin:auto}#join>p:not(.eyebrow){color:var(--muted);line-height:1.6}label{display:block;font-weight:650;font-size:14px;margin:25px 0 8px}input{display:block;width:100%;border:1px solid #607385;border-radius:9px;background:#1d2e3d;padding:14px;color:var(--ink);font-size:18px}#banner:empty{display:none}#banner{background:#554529;color:#fff2cf;border:1px solid #9e8250;border-radius:9px;padding:12px 15px;margin-bottom:20px;font-size:14px}.turn-note{padding:12px 16px;border-left:3px solid var(--accent);background:#243443;border-radius:5px;margin:0 0 20px}.fleet-note{min-height:40px}.waiting{padding:24px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}footer{max-width:1260px;margin:8px auto 0;padding:20px 24px 25px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.12em;color:var(--muted);display:flex;justify-content:space-between}footer span{letter-spacing:0}.tv{overflow:hidden}.tv .masthead,.tv footer{display:none}.tv main{max-width:none;padding:2vw}.tv .hero{margin-bottom:1.4vw}.tv .hero h1{font-size:3vw}.tv .boards{gap:1.7vw}.tv .panel{padding:1.5vw}.tv .board-wrap{max-width:none}.tv .cell{font-size:2vw}.tv .queue{margin-top:1.3vw}.tv .panel h2{font-size:2vw}.tv .subtle,.tv .badge,.tv .round{font-size:1.1vw}.tv .axis{font-size:1vw}.tv .board{gap:.25vw;grid-template-columns:1.3vw repeat(10,minmax(0,1fr))}.tv .section-head{margin-bottom:1vw}.tv .queue-list li{font-size:1vw}.tv .legend{font-size:1vw}.tv .hero .round{white-space:nowrap}@media(max-width:650px){.masthead{padding:16px}.brand span{display:none}main{padding:18px 12px}.boards{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.hero{align-items:start}.hero h1{font-size:34px}.section-head h2{font-size:21px}.queue{align-items:start;flex-direction:column;gap:8px}.queue .actions{margin:0}.board{gap:3px}.cell{font-size:20px}.axis{font-size:10px}.board-wrap{max-width:460px}footer{padding:18px 16px}.fleet-note{min-height:0}.actions button{flex-grow:1}}
:root .tv main{height:100vh;padding:2vh 2vw}.tv #game{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1.5vh}.tv .hero{margin:0}.tv .boards{min-height:0}.tv .public-boards>.panel{display:flex;flex-direction:column;min-height:0;padding:1.5vh 1.5vw}.tv .board-wrap{min-height:0;flex:1;display:flex;justify-content:center}.tv .board{height:100%;width:100%;grid-template-rows:1.6vh repeat(10,minmax(0,1fr))}.tv .cell{aspect-ratio:auto}.tv .legend{margin:1vh 0 0}.tv .queue{margin:0;padding:1.5vh 1.5vw;min-height:0}.tv .queue>div{display:flex;align-items:center;gap:1vw;width:100%;min-width:0}.tv .queue h3,.tv .queue p{margin:0;white-space:nowrap}.tv .queue-list{margin:0;flex:1;min-width:0;max-height:4vh;overflow:hidden;flex-wrap:nowrap}.tv .queue-list li{white-space:nowrap}
.theme-red{--accent:#f27c76}.theme-orange{--accent:#f5a052}.theme-yellow{--accent:#eedb68}.theme-green{--accent:#72cd92}.theme-cyan{--accent:#68d5d8}.theme-blue{--accent:#75baff}.theme-purple{--accent:#b5a0f4}.theme-pink{--accent:#f19ac7}.theme-graphite{--accent:#89939e}.theme-silver{--accent:#d9e0e6}.panel[class*="theme-"]{border-top:3px solid var(--accent)}.color-label{font-size:14px;font-weight:650;margin:22px 0 10px}.color-picker{display:flex;flex-wrap:wrap;gap:8px}.swatch{display:flex;align-items:center;gap:8px;font-size:12px;padding:8px 10px;background:#1d2e3d}.swatch::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--accent);border:1px solid #ffffff70}.swatch.selected{outline:2px solid var(--accent);outline-offset:1px}.personal-colors{margin-top:24px}.player-boards{grid-template-columns:1fr;max-width:700px;margin:auto;border:6px solid #263d51;border-radius:20px;background:#263d51;box-shadow:0 16px 35px #0005;gap:0}.player-boards .panel{background:#17354a;border:0;border-radius:12px;padding:20px}.player-boards .case-lid{border-bottom:16px solid #263d51;position:relative}.player-boards .case-lid::after{content:"";position:absolute;bottom:-13px;height:10px;left:0;right:0;background:linear-gradient(to right,transparent 10%,#5c778c 10%,#5c778c 21%,transparent 21%,transparent 79%,#5c778c 79%,#5c778c 90%,transparent 90%);border-radius:4px}.player-boards .board-wrap{max-width:450px}.player-boards .fleet-note{min-height:0}.player-boards .eyebrow{color:var(--accent)}.cell{background:#113046;border-color:#295169;border-radius:4px}.cell::before{content:"";width:17%;height:17%;border-radius:50%;background:#081a28;box-shadow:inset 0 1px 2px #0008}.cell.ship{background:#8499a7;border-color:#a6b4be;box-shadow:inset 0 3px 0 #ffffff25}.cell.ship::before{background:#405668}.cell.ship.selected{background:#b29e6f;border-color:#f0cf83}.cell.hit,.cell.miss{background:#113046;border-color:#295169;color:transparent;font-size:0}.cell.hit::before,.cell.miss::before{width:57%;height:57%;box-shadow:inset 0 3px 3px #ffffff50,0 2px 3px #0009;border:1px solid #0003}.cell.hit::before{background:#ed625a}.cell.miss::before{background:#ebeff1}.cell.sunk{box-shadow:inset 0 0 0 2px #ed625a}.legend .hit-key{color:#f38780}.legend .miss-key{color:#ebeff1}.tv .cell.hit,.tv .cell.miss{font-size:0}.tv .queue .subtle:last-child{margin-left:auto}@media(max-width:650px){.player-boards{border-width:4px}.player-boards .panel{padding:12px}.player-boards .cell{font-size:0}.player-boards .cell.hit,.player-boards .cell.miss{font-size:0}.color-picker{gap:7px}.swatch{font-size:11px;padding:8px}.player-boards .ship-picker{gap:5px}.player-boards .ship-picker button{font-size:11px;padding:7px}}