/* Radar Strike: two sonar grids. */
.bg-tray[data-game="radarstrike"] { --tint: 20, 120, 110; --edge-rgb: 8, 70, 64; }
.rd-board { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rd-wrap { width: 100%; }
.rd-wrap.big { width: 88%; }
.setup .rd-wrap.big { width: 100%; }
.rd-wrap.small { width: 58%; min-width: 210px; }
@media (min-width: 900px) { .rd-board:not(.setup) { flex-direction: row; align-items: flex-start; } .rd-board:not(.setup) .rd-wrap.big { width: 60%; } .rd-board:not(.setup) .rd-wrap.small { width: 40%; min-width: 0; margin-top: 30px; } }
.rd-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #fff; margin: 0 2px 6px 6%; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); font-size: 14px; }
.rd-title span { opacity: .85; font-size: 12px; }
.rd-grid { display: grid; grid-template-columns: .6fr repeat(8, 1fr); gap: 3px; }
.rd-lab, .rd-corner { display: flex; align-items: center; justify-content: center; font: 700 clamp(9px, 1.6vw, 12px) var(--body); color: rgba(255, 255, 255, .8); }
.rd-cell { position: relative; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(150, 240, 225, .5), rgba(20, 110, 120, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); overflow: visible; }
.rd-cell.own { background: radial-gradient(circle at 50% 35%, rgba(160, 200, 255, .5), rgba(40, 80, 150, .55)); }
.my-turn .rd-cell.can { cursor: pointer; }
.my-turn .rd-cell.can:hover { background: radial-gradient(circle, rgba(255, 240, 170, .9), rgba(245, 197, 66, .5)); }
.my-turn .rd-cell.can:hover::after { content: ''; position: absolute; inset: 18%; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.rd-cell.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
.rd-hull { position: absolute; inset: 12%; background: linear-gradient(160deg, #E6ECF5, #8C99AE); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 2px 3px rgba(0, 0, 0, .35); }
.rd-cell.ship.h .rd-hull { left: -2px; right: -2px; border-radius: 0; }
.rd-cell.ship.v .rd-hull { top: -2px; bottom: -2px; border-radius: 0; }
.rd-cell.ship.h.head .rd-hull { left: 12%; border-radius: 50% 0 0 50%; }
.rd-cell.ship.h.tail .rd-hull { right: 12%; border-radius: 0 40% 40% 0; }
.rd-cell.ship.v.head .rd-hull { top: 12%; border-radius: 50% 50% 0 0; }
.rd-cell.ship.v.tail .rd-hull { bottom: 12%; border-radius: 0 0 40% 40%; }
.rd-cell.foe.ship .rd-hull { background: linear-gradient(160deg, #6B2B2E, #3A1517); }
.rd-cell.ghost .rd-hull { opacity: .45; }
.rd-cell.picked .rd-hull { background: linear-gradient(160deg, #FFE38F, #E0A010); }
.setup .rd-cell { cursor: pointer; }
.rd-miss { position: relative; z-index: 2; width: 28%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.rd-hit { position: relative; z-index: 2; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF3B0 0 18%, #FF8A3D 45%, #E5484D 75%); box-shadow: 0 0 10px rgba(255, 120, 60, .8); }
.rd-hit.sunk { background: radial-gradient(circle, #FFB4A0 0 15%, #B42228 60%, #6B1014); box-shadow: none; width: 40%; }
.rd-cell.last .rd-miss, .rd-cell.last .rd-hit { animation: rd-splash .5s ease-out; }
.rd-cell.last::before { content: ''; position: absolute; inset: -2px; border-radius: 8px; border: 2px solid #FFD964; z-index: 3; }
@keyframes rd-splash { from { transform: scale(2.4); opacity: .2; } }