body { margin: 0; font-family: Arial, sans-serif; background: #081b36; color: #fff; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.card { background: #143460; padding: 14px; border-radius: 10px; }
button, input { border-radius: 8px; border: 1px solid #2f5b93; padding: 8px 10px; }
button { cursor: pointer; background: #1c75ff; color: #fff; border: none; }
.join-row { display: flex; gap: 8px; margin-top: 10px; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; }
.board { display: grid; grid-template-columns: repeat(10, 28px); gap: 2px; }
.cell { width: 28px; height: 28px; background: #0d4b89; border: none; }
.ship { background: #35b9be; }
.hit { background: #ff5d5d; }
.miss { background: #cad5e1; }
.target:hover { outline: 2px solid #ffd54a; }
.hidden { display: none; }
.ship-dock { display: flex; gap: 8px; flex-wrap: wrap; }
.ship-item { display: flex; gap: 2px; background: #0e2749; padding: 4px; border-radius: 8px; cursor: grab; }
.ship-item.vertical { flex-direction: column; }
.ship-seg { width: 18px; height: 18px; background: #35b9be; border-radius: 3px; }

.ship-item.placed { opacity: 0.6; }
.ship-item.placed .ship-seg { background: #7a899b; }