:root{--bg: #0f172a;--panel: #1e293b;--panel-2: #273449;--line: #334155;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-strong: #0ea5e9;--ship: #64748b;--hit: #ef4444;--miss: #475569;--sunk: #7f1d1d;--ok: #4ade80;--cell: 30px;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#16233b,var(--bg));color:var(--text)}#app{max-width:900px;margin:0 auto;padding:1rem}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .25rem 1rem}.logo{margin:0;font-size:1.6rem;letter-spacing:.5px}.conn{font-size:.85rem;padding:.2rem .6rem;border-radius:999px;background:var(--panel);color:var(--muted)}.conn-online{color:var(--ok)}.conn-reconnecting,.conn-connecting{color:#fbbf24}.conn-offline{color:var(--hit)}.screen{display:flex;flex-direction:column;align-items:center;gap:1rem}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.5rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:.75rem;text-align:center}.card.wide{max-width:100%}.card h2{margin:0 0 .25rem}.muted{color:var(--muted);margin:0}.code{font-size:2rem;font-weight:700;letter-spacing:6px;color:var(--accent);background:var(--panel-2);border-radius:10px;padding:.5rem;margin:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:1rem;padding:.7rem 1rem;border-radius:10px;cursor:pointer;transition:transform .05s ease,background .15s ease,border-color .15s ease}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#06263a;font-weight:700}.btn-primary:hover{background:var(--accent)}.btn-ghost{background:transparent}.input{flex:1;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:1.1rem;letter-spacing:3px;text-transform:uppercase}.join-row{display:flex;gap:.5rem}.board{display:grid;grid-template-columns:20px repeat(10,var(--cell));grid-auto-rows:var(--cell);gap:2px;justify-content:center;-webkit-user-select:none;user-select:none}.board .coord{grid-row:auto}.coord{display:grid;place-items:center;color:var(--muted);font-size:.72rem;width:20px;height:var(--cell)}.board .coord:not(.corner){width:auto}.cell{width:var(--cell);height:var(--cell);background:#0b1a2e;border:1px solid #22344c;border-radius:4px;position:relative}.board-interactive .cell{cursor:crosshair}.board-interactive .cell:hover{border-color:var(--accent)}.cell.ship{background:var(--ship)}.cell.preview-ok{background:#4ade808c}.cell.preview-bad{background:#ef444480}.cell.miss:after{content:"";position:absolute;top:42%;right:42%;bottom:42%;left:42%;border-radius:50%;background:var(--miss)}.cell.hit{background:var(--hit)}.cell.hit:after,.cell.sunk:after{content:"✕";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-weight:700}.cell.sunk{background:var(--sunk)}.placement-layout{display:flex;gap:1.25rem;align-items:flex-start;justify-content:center;flex-wrap:wrap}.dock{display:flex;flex-direction:column;gap:.5rem;min-width:130px}.dock-ship{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer}.dock-ship.selected{border-color:var(--accent);box-shadow:0 0 0 2px #38bdf840}.dock-ship.done{opacity:.4;cursor:default}.dock-ship-cells{letter-spacing:2px;color:var(--accent)}.dock-ship-count{color:var(--muted);font-size:.85rem}.placement-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}.hint{color:var(--muted);font-size:.85rem;text-align:center;max-width:520px}.turn-banner{padding:.6rem 1rem;border-radius:10px;font-weight:600;text-align:center;width:100%;max-width:720px}.your-turn{background:#38bdf826;color:var(--accent);border:1px solid var(--accent-strong)}.their-turn{background:var(--panel);color:var(--muted);border:1px solid var(--line)}.warn{color:#fbbf24}.battle{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.board-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}.board-wrap h3{margin:0;color:var(--muted);font-weight:500}.win{color:var(--ok)}.lose{color:var(--hit)}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);background:#7f1d1d;color:#fff;padding:.7rem 1.1rem;border-radius:10px;cursor:pointer;box-shadow:0 8px 24px #0006;max-width:90vw}.app-header.on-landing{padding-bottom:.5rem}.app-header.on-landing .logo{cursor:default}.logo{cursor:pointer}.landing{display:flex;flex-direction:column;gap:2.5rem;width:100%;padding-bottom:2rem}.hero{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;text-align:left;background:linear-gradient(135deg,#38bdf814,#0ea5e908);border:1px solid var(--line);border-radius:20px;padding:2.5rem}.hero-text{max-width:460px;display:flex;flex-direction:column;gap:1rem}.hero-title{margin:0;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.05}.hero-tagline{margin:0;font-size:1.15rem;color:var(--muted)}.hero-features{display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0}.feature{display:flex;align-items:center;gap:.6rem;color:var(--text)}.feature-icon{font-size:1.2rem;width:1.6rem;text-align:center}.btn-hero{font-size:1.15rem;padding:.85rem 1.6rem;align-self:flex-start}.deco-board{display:grid;grid-template-columns:repeat(6,34px);grid-auto-rows:34px;gap:3px;padding:10px;background:#0b1a2e;border:1px solid #22344c;border-radius:12px;box-shadow:0 12px 40px #00000059}.deco-cell{border-radius:4px;background:#0e2137;border:1px solid #1c3350}.deco-cell.ship{background:var(--ship)}.deco-cell.hit{background:var(--hit)}.deco-cell.miss{position:relative}.deco-cell.miss:after{content:"";position:absolute;top:40%;right:40%;bottom:40%;left:40%;border-radius:50%;background:var(--miss)}.how{text-align:center;display:flex;flex-direction:column;gap:1.25rem}.how-title{margin:0;font-size:1.6rem}.how-steps{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.how-step{display:flex;gap:.8rem;align-items:flex-start;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;max-width:260px;flex:1 1 220px}.how-step h4{margin:0 0 .25rem}.how-step p{font-size:.9rem}.how-num{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--accent-strong);color:#06263a}.landing-footer{text-align:center;font-size:.85rem}@media(max-width:640px){.hero{padding:1.5rem;gap:1.5rem}.btn-hero{align-self:stretch;text-align:center}}@media(max-width:480px){:root{--cell: 27px}.deco-board{grid-template-columns:repeat(6,28px);grid-auto-rows:28px}}