:root{--bg: #0b1220;--panel: #0f1724;--accent: #00b4d8;--hit: #ef476f;--miss: #94a3b8;--ship: #3fbf7f;--cell-size: clamp(18px, 6.5vw, 32px);--gap: clamp(3px, 1vw, 6px);--board-padding: clamp(6px, 2vw, 12px);color-scheme:dark}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:linear-gradient(180deg,#071021,#081225 60%);color:#e6eef8;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}.app{width:100%;max-width:980px}h1{margin:0 0 8px;font-size:clamp(18px,3.6vw,28px)}.boards{display:flex;gap:16px;margin-top:16px;align-items:start;justify-content:center;flex-wrap:wrap}.board-column{background:#ffffff05;padding:10px;border-radius:8px;display:flex;flex-direction:column;align-items:center;min-width:calc(var(--cell-size) * 10 + var(--gap) * 9 + (var(--board-padding) * 2))}.board{display:grid;grid-template-columns:repeat(10,var(--cell-size));grid-template-rows:repeat(10,var(--cell-size));gap:var(--gap);padding:var(--board-padding);background:#ffffff05;border-radius:6px;touch-action:manipulation}.cell{width:var(--cell-size);height:var(--cell-size);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .08s,opacity .08s;flex:0 0 auto}.cell:hover{transform:translateY(-2px)}.cell.empty{background:#ffffff05}.cell.ship{background:var(--ship);opacity:.95}.cell.hit{background:var(--hit)}.cell.miss{background:var(--miss)}.controls{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}button{padding:8px 12px;border-radius:6px;border:none;background:var(--accent);color:#042028;cursor:pointer;font-weight:600}.footer{margin-top:20px;opacity:.6;font-size:13px}.legend{display:flex;gap:8px;margin-top:8px;font-size:13px;flex-wrap:wrap;justify-content:center}.legend .box{width:18px;height:18px;border-radius:4px;display:inline-block;vertical-align:middle}@media (max-width: 720px){.boards{gap:12px}.board-column{min-width:auto;width:100%;max-width:calc(10 * var(--cell-size) + 18px)}.board{margin:0 auto}.controls{justify-content:center}}@media (max-width: 420px){body{padding:10px}.app{max-width:420px}.boards{flex-direction:column;gap:10px;margin-top:10px}.board-column{padding:8px;border-radius:6px;width:100%}.legend{font-size:12px;gap:6px}h1{font-size:18px;text-align:center}.cell:hover{transform:none}}@media (hover: none){.cell:hover{transform:none}}