/* Seeschlacht — spielspezifische Styles (Chrome aus ../style.css) */

/* Home-Hero: Mini-Raster mit Treffer */
.hero-sea {
    width: 150px; height: 90px; border-radius: 8px; margin: 0 auto 14px;
    background:
        radial-gradient(circle at 30% 40%, rgba(229, 72, 77, .9) 5px, transparent 6px),
        radial-gradient(circle at 65% 65%, rgba(255, 255, 255, .55) 4px, transparent 5px),
        linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px),
        linear-gradient(135deg, #0d2b3d, #123a56);
    background-size: 100% 100%, 100% 100%, 18px 18px, 18px 18px, 100% 100%;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

/* Bretter */
.boards { display: grid; gap: 18px; justify-content: center; grid-template-columns: minmax(0, 480px); }
.board-wrap h3 { font-size: 14px; color: var(--muted); margin-bottom: 8px; text-align: center; letter-spacing: .04em; }
.sea-board {
    display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    background: linear-gradient(135deg, #0d2b3d, #123a56);
    border: 1px solid var(--panel-border); border-radius: 10px; padding: 6px;
    aspect-ratio: 1;
}
/* F2 (Etappe 23): Marker dürfen die Zellen NIE aufblähen — feste 1:1-Zellen,
   Inhalt absolut zentriert statt im Grid-Fluss */
.cell {
    border: 0; padding: 0; border-radius: 3px; background: rgba(255, 255, 255, .07);
    position: relative; font: inherit; color: inherit; cursor: default;
    min-width: 0; min-height: 0; overflow: hidden;
    font-size: clamp(9px, 2.4vw, 16px); line-height: 0;
}
.cell::after { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; }
.cell.can { cursor: crosshair; }
.cell.can:hover, .cell.can:focus-visible { background: rgba(79, 140, 255, .45); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.ship { background: rgba(151, 160, 179, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cell.miss { background: rgba(255, 255, 255, .04); }
.cell.miss::after { content: '●'; color: rgba(255, 255, 255, .45); font-size: 55%; }
.cell.hit { background: rgba(229, 72, 77, .3); }
.cell.hit::after { content: '✕'; color: var(--red); font-weight: 900; text-shadow: 0 0 8px rgba(229, 72, 77, .8); }
.cell.sunk { background: rgba(229, 72, 77, .55); }
.cell.sunk::after { content: '✕'; color: #fff; font-weight: 900; }
.cell.pop { animation: shot-in .3s ease-out; }
@keyframes shot-in { from { transform: scale(.4); } to { transform: scale(1); } }

.place-btns { display: flex; gap: 10px; justify-content: center; }
.place-btns .btn { min-height: 48px; min-width: 140px; }

/* §4.16 Desktop-Fill: beide Bretter nebeneinander */
@media (min-width: 1100px) {
    .boards { grid-template-columns: repeat(2, minmax(0, 520px)); }
}

/* F1 (Etappe 23): manuelles Platzieren — Schiff wählen, Ziel tippen, drehen */
.cell.shipsel { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(242, 193, 78, .3); cursor: pointer; }
.cell.ship.pick { cursor: pointer; }
.cell.spot { cursor: copy; }
.cell.spot:hover { background: rgba(79, 140, 255, .35); }