/* ============================================================
   2D Grid Navigation – mini-map overlay + page transitions
   ============================================================ */

/* ── Mini-map ─────────────────────────────────────────────── */
.grid-minimap {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 150;
  display: grid;
  /* 3 cols × 2 rows – cross shape: [L][C][R] / [.][B][.] */
  grid-template-columns: repeat(3, 20px);
  grid-template-rows: repeat(2, 14px);
  gap: 3px;
  padding: 6px;
  background: rgba(10, 14, 26, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 6px;
}

.grid-minimap-cell {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s, border-color 0.3s;
}

.grid-minimap-cell.gm-active {
  background: rgba(6, 182, 212, 0.42);
  border-color: rgba(6, 182, 212, 0.8);
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
}

.grid-minimap-cell.gm-inactive {
  background: transparent;
  border-color: transparent;
}

.grid-minimap-cell.gm-available {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
}

/* ── Page-transition fade ─────────────────────────────────── */
@keyframes gn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.gn-entering {
  animation: gn-fade-in 0.175s ease forwards;
}