/* ===== SONAR RENDERER — scene and tile styles ===== */

/* Override .mines-grid CSS grid layout when sonar renderer owns the container */
.mines-grid.sonar-scene-root {
  display: block;
  max-width: 500px;
  width: 100%;
  height: min(500px, 68vh);
  aspect-ratio: auto;
  position: relative;
}

/* Scene: fills its container absolutely, centers the grid */
.sonar-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #040A10;
}

/* ── Background layers ── */

.sonar-sweep {
  position: absolute;
  width: min(340px, 78vmin);
  height: min(340px, 78vmin);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 255, 136, 0.10) 12deg,
    rgba(0, 255, 136, 0.04) 28deg,
    transparent 48deg
  );
  animation: sonar-rotate 4s linear infinite;
  pointer-events: none;
}

@keyframes sonar-rotate {
  to { transform: rotate(360deg); }
}

.sonar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 136, 0.18);
  pointer-events: none;
}

.sonar-pulse {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 136, 0.22);
  animation: sonar-pulse 3.5s ease-out infinite;
  pointer-events: none;
}
.sonar-pulse-2 { animation-delay: 1.17s; }
.sonar-pulse-3 { animation-delay: 2.33s; }

@keyframes sonar-pulse {
  0%   { width: 0;      height: 0;      opacity: 0.5; }
  100% { width: 400px;  height: 400px;  opacity: 0;   }
}

.sonar-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sonar-cross::before,
.sonar-cross::after {
  content: '';
  position: absolute;
  background: rgba(0, 255, 136, 0.06);
}
.sonar-cross::before { width: 100%; height: 1px; top: 50%; }
.sonar-cross::after  { width: 1px; height: 100%; left: 50%; }

/* ── Tile grid ── */

.sonar-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  width: min(320px, 72vmin);
  height: min(320px, 72vmin);
}

.sonar-tile {
  background: rgba(5, 14, 24, 0.9);
  border: 1px solid #1A3A52;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #3A6070;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.sonar-tile.tile-hidden:hover:not(.tile-disabled) {
  border-color: rgba(0, 255, 136, 0.35);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.12) inset;
}

.sonar-tile.tile-disabled {
  cursor: default;
}

/* Safe reveal */
.sonar-tile.tile-safe {
  background: rgba(0, 255, 136, 0.06);
  border-color: rgba(0, 255, 136, 0.40);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.14) inset;
  color: #00FF88;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.55);
  cursor: default;
}

/* Mine hit — override mines.css .tile-mine (lower specificity) */
.sonar-tile.tile-mine {
  background: rgba(255, 60, 0, 0.12);
  border-color: rgba(255, 60, 0, 0.50);
  box-shadow: 0 0 14px rgba(255, 60, 0, 0.20) inset;
  color: #FF3C00;
  cursor: default;
}

.sonar-tile.tile-mine::after {
  content: '✸';
  font-size: 18px;
  text-shadow: 0 0 8px rgba(255, 60, 0, 0.65);
}

/* Auto-revealed mines — override mines.css opacity:0.5 */
.sonar-tile.tile-auto-revealed,
.sonar-tile.tile-mine-revealed {
  background: rgba(255, 60, 0, 0.04);
  border-color: rgba(255, 60, 0, 0.20);
  color: rgba(255, 60, 0, 0.40);
  opacity: 1;
  cursor: default;
}

.sonar-tile.tile-auto-revealed::after,
.sonar-tile.tile-mine-revealed::after {
  content: '✸';
  font-size: 14px;
}

/* Flip animation — reuses mines-flip keyframe defined in mines.css */
.sonar-tile.tile-flip {
  animation: mines-flip 0.32s ease;
}