/* Titan — mini-jeu « Sonar du chantier naval » (js/sonar.js) : l'écran, le viseur, les
   cercles d'écho et la silhouette révélée à chaque contact. Le cadre vient de
   css/components/game.css. L'état est porté par #sonar-arena : data-state (hunt, won, lost). */

.sonar-arena { position: relative; aspect-ratio: 16 / 8.4; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); user-select: none; -webkit-user-select: none;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9.5%, rgba(95, 214, 200, .09) 9.5% 10%),
    linear-gradient(90deg, transparent 49.9%, rgba(95, 214, 200, .12) 49.9% 50.1%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.8%, rgba(95, 214, 200, .12) 49.8% 50.2%, transparent 50.2%),
    radial-gradient(ellipse at 50% 50%, #062a2c, #020a10 78%);
}
/* le balayage : un faisceau qui tourne */
.sonar-arena::before { content: ''; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(95, 214, 200, .22), transparent 16%); animation: sonar-sweep 5s linear infinite; }
@keyframes sonar-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sonar-arena[data-state="lost"] { filter: saturate(.3) brightness(.7); }
.sonar-arena[data-state="won"]::before { animation-play-state: paused; opacity: .4; }
.sonar-field { position: absolute; inset: 0; cursor: crosshair; }
.sonar-field:focus-visible { outline: 2px solid var(--sea-hi); outline-offset: -4px; }

.sonar-ring, .sonar-cross, .sonar-echo { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: none; }
/* un écho : un point au centre, un cercle dont le diamètre vaut deux fois la distance */
.sonar-ring { width: var(--d); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(170, 255, 240, 1); box-shadow: 0 0 12px rgba(95, 214, 200, .5), inset 0 0 12px rgba(95, 214, 200, .25); animation: sonar-grow .7s ease-out; }
.sonar-ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; }
.sonar-ring.hit { border-color: #fff; border-width: 2px; box-shadow: 0 0 22px rgba(255, 255, 255, .9); }
@keyframes sonar-grow { from { width: 0; opacity: 0; } }
.sonar-cross { width: 26px; height: 26px; opacity: .8; background: linear-gradient(#d2fff7, #d2fff7) 50% 50% / 100% 1px no-repeat, linear-gradient(#d2fff7, #d2fff7) 50% 50% / 1px 100% no-repeat; }
/* la silhouette : longue, courbe, visible une seconde */
.sonar-echo { width: 34%; height: 12%; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%, rgba(210, 255, 247, .9), rgba(95, 214, 200, .5) 45%, transparent 70%); filter: blur(5px); transform: translate(-50%, -50%) rotate(-14deg); }
.sonar-echo.show { animation: sonar-echo 2.2s ease-out; }
@keyframes sonar-echo { 12% { opacity: 1; } to { opacity: 0; } }
.sonar-arena[data-state="won"] .sonar-echo { animation: none; opacity: .9; width: 60%; height: 22%; transition: width 2s, height 2s; }

@media (max-width: 680px) {
  .sonar-arena { margin-inline: 16px; aspect-ratio: 4 / 4.2; }
}
@media (prefers-reduced-motion: reduce) {
  .sonar-arena::before, .sonar-ring, .sonar-echo.show { animation: none; }
}