/* ── Tile base ─────────────────────────────────────────────── */

#mine-grid {
  display: grid;
  grid-template-columns: repeat(12, var(--tile-size, 72px));
  grid-template-rows: repeat(10, var(--tile-size, 72px));
  gap: var(--tile-gap, 3px);
  user-select: none;
}

.tile {
  width: var(--tile-size, 72px);
  height: var(--tile-size, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--tile-size, 72px) * 0.45);
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  transition: filter 0.08s ease;
}

/* ── Unopened — 3-D bevel via box-shadow ───────────────────── */

.tile.unopened {
  background: var(--tile-unopened, #3a5a8a);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.35),
    inset -2px -2px 0 rgba(0,0,0,0.45),
    inset 1px 1px 0 rgba(255,255,255,0.18);
  border: 1px solid var(--tile-border, #1e3a5a);
}

.tile.unopened:hover {
  background: var(--tile-hover, #4a6a9a);
  filter: brightness(1.12);
}

/* ── Flagged ───────────────────────────────────────────────── */

.tile.flagged {
  background: var(--tile-flagged, #6a4a1a);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.25),
    inset -2px -2px 0 rgba(0,0,0,0.45);
  border: 1px solid var(--tile-border, #1e3a5a);
}

.tile.flagged::after {
  content: '🚩';
  font-size: calc(var(--tile-size, 72px) * 0.4);
  line-height: 1;
  /* override system emoji color rendering just for size/position */
  position: absolute;
}

.tile.flagged:hover {
  filter: brightness(1.12);
}

/* Pulled flag flying off — a ghost copy, since the tile's ::after is already gone */
.flag-ghost {
  position: absolute;
  font-size: calc(var(--tile-size, 72px) * 0.4);
  line-height: 1;
  pointer-events: none;
}

/* ── Opened — safe tile ────────────────────────────────────── */

.tile.opened {
  background: var(--tile-opened, #1a2a3a);
  border: 1px solid var(--tile-border, #1e3a5a);
  cursor: default;
  box-shadow: none;
}

/* Number glow — inset glow scaled by data-n attribute via CSS custom property.
   The inline style on each numbered tile sets --glow-a1 and --glow-a2. */
.tile.opened[data-n] {
  box-shadow:
    inset 0 0 3px rgba(var(--num-glow-rgb, 180,220,255), var(--glow-a1, 0.08)),
    inset 0 0 7px rgba(var(--num-glow-rgb, 180,220,255), var(--glow-a2, 0.04));
  color: var(--tile-num-color, #e8e8e8);
}

/* Defused state — player has flagged all adjacent mines for this numbered tile */
.tile.opened.defused {
  box-shadow: none !important;
  color: var(--tile-num-defused, rgba(200,200,200,0.35)) !important;
  transition: filter 0.08s ease, color 0.35s ease, box-shadow 0.35s ease;
}

/* ── Detonated (mine hit) ──────────────────────────────────── */

.tile.detonated {
  background: var(--tile-detonated, #2a0a0a);
  border: 1px solid #550000;
  cursor: default;
  animation: detonate-flash 0.3s ease forwards;
}

.tile.detonated::after {
  content: '💥';
  font-size: calc(var(--tile-size, 72px) * 0.52);
  line-height: 1;
  position: absolute;
}

@keyframes detonate-flash {
  0%   { filter: brightness(3) saturate(0); }
  30%  { filter: brightness(2) saturate(1); }
  100% { filter: brightness(1); }
}

/* Mine-hit glow from the screen edges (boardFx.vignetteFlash) — above the field, below the level popup */
.hit-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  background: radial-gradient(ellipse at center,
    rgba(255, 90, 20, 0) 50%,
    rgba(255, 70, 20, 0.28) 78%,
    rgba(170, 15, 0, 0.6) 100%);
}

/* ── Artillery highlight (3×3 hover preview) ──────────────── */

.tile.artillery-target {
  outline: 2px solid rgba(255,200,0,0.75);
  outline-offset: -2px;
  filter: brightness(1.25);
  z-index: 2;
}

/* ── Number color classes (fallback — overridden by themes in Phase 6) ── */

.num-1 { color: #7ab8ff; }
.num-2 { color: #7affa0; }
.num-3 { color: #ffaa7a; }
.num-4 { color: #c07aff; }
.num-5 { color: #ff7a7a; }
.num-6 { color: #7af0f0; }
.num-7 { color: #e8e8e8; }
.num-8 { color: #aaaaaa; }

/* ── Level-complete popup ──────────────────────────────────── */

#level-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  animation: popup-fade-in 0.25s ease forwards;
}

@keyframes popup-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#level-popup {
  background: #0d1e30;
  border: 2px solid rgba(255,220,100,0.4);
  border-radius: 6px;
  padding: 32px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
  animation: popup-scale-in 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes popup-scale-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.popup-title {
  font-size: 22px;
  font-weight: bold;
  color: #ffe566;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255,200,0,0.5);
}

.popup-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
}

.popup-btn {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 11px 36px;
  background: #c8a200;
  color: #000;
  border: 2px solid #ffe566;
  border-radius: 3px;
  transition: background 0.12s, transform 0.08s;
}

.popup-btn:hover {
  background: #ffe566;
  transform: scale(1.04);
}

.popup-btn:active {
  transform: scale(0.97);
}