/* ============================================================================
   WOBBLE FORGE — layout.css
   File 3/6. App/stage/#ui layering, effect-layer stacking, screen stacking,
   HUD zone grid with a reserved central tower band, and shared flex
   primitives (.wf-head, .wf-row, .wf-col).
   ========================================================================== */

/* ---- App shell ----------------------------------------------------------- */
.wf-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--wf-bg-a) 0%, var(--wf-bg-b) 78%);
  color: var(--wf-cream);
}

/* ---- Renderer canvas ----------------------------------------------------- */
/* Fills the viewport; keeps receiving pointer input outside UI hit areas. */
.wf-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--wf-z-canvas);
  display: block;
  touch-action: none;
  background: transparent;
}

/* ---- Effect layers (outside #ui, non-interactive) ------------------------ */
.wf-flash,
.wf-vignette,
.wf-safe-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wf-flash {
  z-index: var(--wf-z-fx);
  opacity: var(--wf-level);
  background: #ffffff;
  mix-blend-mode: screen;
  will-change: opacity;
}

.wf-vignette {
  z-index: var(--wf-z-fx);
  opacity: var(--wf-level);
  will-change: opacity;
  /* Default (STABLE/UNSTABLE): barely-there darkening at the corners. */
  background:
    radial-gradient(120% 100% at 50% 50%,
      rgba(20, 24, 41, 0) 52%,
      rgba(20, 24, 41, 0.34) 88%,
      rgba(20, 24, 41, 0.52) 100%);
}

/* DANGER / CRITICAL edge shading (red-tinted). */
.wf-vignette.is-danger {
  background:
    radial-gradient(118% 96% at 50% 52%,
      rgba(232, 64, 47, 0) 46%,
      rgba(232, 64, 47, 0.28) 80%,
      rgba(142, 30, 19, 0.6) 100%);
}

.wf-vignette.is-critical {
  background:
    radial-gradient(120% 96% at 50% 54%,
      rgba(232, 64, 47, 0) 38%,
      rgba(226, 60, 44, 0.4) 74%,
      rgba(142, 30, 19, 0.78) 100%);
  animation: wf-pulse 1.1s var(--wf-ease-out) infinite;
}

/* ---- Safe frame (respects notch / home-indicator insets) ----------------- */
.wf-safe-frame {
  z-index: var(--wf-z-overlay);
  padding:
    var(--wf-safe-t) var(--wf-safe-r)
    var(--wf-safe-b) var(--wf-safe-l);
}

/* Visible only when the debug helper flags it on. */
.wf-safe-frame.is-active {
  border: 2px dashed rgba(255, 201, 60, 0.6);
  inset: 0;
}

/* ---- DOM UI overlay ------------------------------------------------------ */
/* Transparent to pointer input; interactive children opt back in. */
.wf-ui {
  position: absolute;
  inset: 0;
  z-index: var(--wf-z-ui);
  pointer-events: none;
  padding:
    var(--wf-safe-t) var(--wf-safe-r)
    var(--wf-safe-b) var(--wf-safe-l);
}

/* Every screen is authored to fill the padded overlay box. */
.wf-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* ---- Stacking / layering recap ------------------------------------------ */
/* canvas(0) < fx(5) < ui(10) < hud(12) < screens(14) < overlays(20)          */
.wf-screen--game .wf-hud   { z-index: var(--wf-z-hud); }
.wf-screen--pause          { z-index: var(--wf-z-overlay); }
.wf-screen--confirm        { z-index: var(--wf-z-overlay); }

/* ---- HUD zone grid ------------------------------------------------------- */
/* Named zones; the middle column is reserved for the tower and stays empty. */
.wf-screen--game .wf-hud {
  position: absolute;
  inset: 0;
  display: grid;
  padding: var(--wf-pad-edge);
  gap: var(--wf-hud-gap);
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, var(--wf-tower-band))
    minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* The `tower` column is reserved: nothing but the small top-centre plates
     ever enter it, so the tower always has a clear vertical band. */
  grid-template-areas:
    "score   center  actions"
    "left    tower   rail"
    "gauges  .       block";
  align-items: start;
  justify-items: stretch;
}

/* ---- HUD clusters -------------------------------------------------------- */
.wf-hud__cluster {
  display: flex;
  flex-direction: column;
  gap: var(--wf-sp-2);
  min-width: 0;
}

.wf-hud__cluster--score   { grid-area: score; align-items: flex-start; }
.wf-hud__cluster--center  { grid-area: center; align-items: center; justify-self: center; }
.wf-hud__cluster--actions { grid-area: actions; align-items: flex-end; justify-self: end; }
.wf-hud__rail             { grid-area: rail; justify-self: end; align-self: start; }
.wf-hud__cluster--block   { grid-area: block; align-items: flex-end; align-self: end; justify-self: end; }
.wf-hud__cluster--gauges  {
  grid-area: gauges;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  align-self: end;
  justify-self: start;
  gap: var(--wf-sp-3);
}

/* Central band is never a grid item — it is deliberately left clear. */
.wf-hud__tower-band {
  grid-area: tower;
  pointer-events: none;
}

/* Full-bleed HUD layers that are positioned manually, not by the grid. */
.wf-hud > .wf-feed,
.wf-hud > .wf-objective,
.wf-hud > .wf-coach,
.wf-hud > .wf-intro,
.wf-hud > .wf-ghost-bar,
.wf-hud > .wf-controls {
  position: absolute;
  z-index: 2;
}

/* ---- Shared flex primitives --------------------------------------------- */
.wf-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--wf-sp-3);
  flex-wrap: wrap;
}

.wf-row--between { justify-content: space-between; }
.wf-row--end     { justify-content: flex-end; }
.wf-row--wrap    { flex-wrap: wrap; }

.wf-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--wf-sp-3);
}

.wf-col--center { align-items: center; }

/* ---- Screen header bar --------------------------------------------------- */
.wf-head {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wf-sp-3);
  padding: var(--wf-sp-4) var(--wf-pad-edge) var(--wf-sp-2);
  pointer-events: none;
}

.wf-head > * { pointer-events: auto; }

.wf-head__title {
  font-family: var(--wf-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--wf-ls-wide);
  font-size: clamp(var(--wf-fs-lg), 3.4vw, var(--wf-fs-2xl));
  text-align: center;
  color: var(--wf-cream);
  text-shadow: 0 3px 0 rgba(20, 24, 41, 0.55);
}

.wf-head__spacer {
  width: var(--wf-btn-h);
  height: var(--wf-btn-h);
}

/* ---- Screen body scroll regions ----------------------------------------- */
/* The page never scrolls; individual panels may, with contained scrolling. */
.wf-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--wf-gold) rgba(20, 24, 41, 0.4);
}

.wf-scroll::-webkit-scrollbar { width: 10px; }
.wf-scroll::-webkit-scrollbar-track {
  background: rgba(20, 24, 41, 0.4);
  border-radius: var(--wf-r-pill);
}
.wf-scroll::-webkit-scrollbar-thumb {
  background: var(--wf-gold);
  border: 2px solid var(--wf-navy);
  border-radius: var(--wf-r-pill);
}