/**
 * Camera viewport and minimap styles.
 */

/* Viewport — clips the visible area, overflow hidden */
.grid-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.4),
    0 0 30px rgba(0,0,0,0.5),
    0 0 60px var(--c-glow);
  background: rgba(6, 6, 18, 0.75);
}

/* ─── Floor descent — the maze sinks while the dark closes over it
   (js/effects/floorTransition.js). The sink is the independent translate
   property, composing with the camera's inline transform. The snap back to
   0 happens behind the opaque shroud, so it's never seen. ─── */
.floor-shroud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease-in;
}

.floor-shroud--dark { opacity: 1; }

.grid-viewport--descend .grid-wrap {
  translate: 0 28px;
  transition: translate 400ms ease-in;
}

/* Depth veil — the "darker every floor" brightness drop as a translucent
   black layer. Opacity is compositor-only: changing depth never re-filters
   the scene like the old brightness() on .screen--game did. */
.grid-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  background: #000;
  opacity: calc(1 - var(--depth-brightness, 1));
  transition: opacity 1.5s ease;
}

/* Torch / vignette — warm light pooled on the player, darkness beyond. Lives
   in viewport space (not inside the moving grid) and re-centres on the player
   via --torch-x/--torch-y set by the camera. Turns the unexplored void into
   "darkness past your torch" instead of an empty panel. */
.viewport-torch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-torch);
  border-radius: 12px;
  overflow: hidden;
}

/* Warm light — additive (screen), so it brightens the cells near the player
   instead of laying an opaque film that mutes them. Tight pool, low alpha. */
.viewport-torch::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--torch-x, 50%) var(--torch-y, 50%),
    rgba(var(--c-torch), 0.20) 0,
    rgba(var(--c-torch), 0.05) calc(var(--torch-radius, 150px) * 0.7),
    transparent calc(var(--torch-radius, 150px) * 1.2));
}

/* Darkness mutator — vision shrinks to a single cell, so the torch itself
   burns brighter and tighter: the one pool of light left in the world. */
body.mut-darkness .viewport-torch::before {
  background: radial-gradient(circle at var(--torch-x, 50%) var(--torch-y, 50%),
    rgba(var(--c-torch), 0.34) 0,
    rgba(var(--c-torch), 0.10) calc(var(--torch-radius, 150px) * 0.55),
    transparent calc(var(--torch-radius, 150px) * 0.95));
}

body.mut-darkness .viewport-torch::after {
  background: radial-gradient(circle at var(--torch-x, 50%) var(--torch-y, 50%),
    transparent calc(var(--torch-radius, 150px) * 0.7),
    rgba(0, 0, 0, 0.45) calc(var(--torch-radius, 150px) + 90px),
    rgba(0, 0, 0, 0.8) calc(var(--torch-radius, 150px) + 300px));
}

/* Darkness beyond the torch — plain dark vignette, no colour cast. */
.viewport-torch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--torch-x, 50%) var(--torch-y, 50%),
    transparent var(--torch-radius, 150px),
    rgba(0, 0, 0, 0.30) calc(var(--torch-radius, 150px) + 170px),
    rgba(0, 0, 0, 0.66) calc(var(--torch-radius, 150px) + 430px));
}

/* Grid wrap — camera moves this via transform */
.grid-wrap {
  transition: transform 0.18s ease-out;
  will-change: transform;
  transform-origin: 0 0;
}

.grid-wrap--no-transition {
  transition: none !important;
}

/* Floor flicker — periodic dim pulse on L3+. The data attribute drives the
   animation period; shorter on deeper floors. Pseudo-element overlay so it
   doesn't fight the depth filter on .screen--game. */
.grid-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-popup);
}

@keyframes floor-flicker-pulse {
  0%, 38%, 41.5%, 100% { opacity: 0; }
  39%   { opacity: 0.55; }
  40%   { opacity: 0.15; }
  40.5% { opacity: 0.6; }
}

.grid-viewport[data-flicker="3"]::after { animation: floor-flicker-pulse 22s infinite; }
.grid-viewport[data-flicker="4"]::after { animation: floor-flicker-pulse 16s infinite; }
.grid-viewport[data-flicker="5"]::after { animation: floor-flicker-pulse 11s infinite; }

/* Minimap — in right sidebar below event log. Framed in the world accent so
   it reads as part of the themed HUD, not a stray grey tile. */
.minimap {
  width: 100%;
  border: 1px solid var(--c-accent);
  border-radius: 4px;
  background: rgba(6, 6, 18, 0.85);
  box-shadow: 0 0 10px var(--c-accent-glow), inset 0 0 10px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  margin: 10px auto 0; /* centred in the sidebar */
}

/* Hide minimap when in full-map zoom */
.minimap--hidden {
  display: none;
}