/* THE GOD TERMINAL — surprise scenes 01–05 (js/scenes/01…05).
 * Each block is prefixed with its scene's class (.sc-<name>) and uses palette
 * tokens throughout, except the sprinkles, which stay candy-coloured. */

/* ═════════════ 01 · sprinkles ═════════════ */
.sc-sprinkles .win-body { display: grid; gap: 0.7rem; }

.spr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.spr-now { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--text-bright); }
.spr-swatch {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--c, var(--dim));
  box-shadow: 0 0 10px var(--c, transparent), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  transition: background-color 120ms, box-shadow 120ms;
}
.spr-hue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spr-count { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.spr-count b { display: inline-block; min-width: 2ch; text-align: right; color: var(--text-bright); text-shadow: var(--text-glow); }
.spr-count.is-done, .spr-count.is-done b { color: var(--good); }

.spr-tray {
  position: relative;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), transparent 40%),
    color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
}
.spr-drawer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  overflow: hidden;
  border-radius: 5px;
}
/* Compartments: drawn inset so the grid itself stays gapless (the picker moves in cell units). */
/* A layer per compartment: sorting flashes and pops repaint one cell, not the whole drawer. */
.spr-cell {
  position: relative;
  aspect-ratio: 1.12;
  border-radius: 4px;
  will-change: transform;
}
.spr-cell::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--text) 6%, transparent), rgba(0, 0, 0, 0.35) 75%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 -1px 0 color-mix(in srgb, var(--text) 9%, transparent);
}
.spr-bit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66%;
  height: 24%;
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 45%, #fff) 0%,
    var(--c) 42%,
    color-mix(in srgb, var(--c) 62%, #000) 100%);
  opacity: 0.55;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.spr-bit.is-sorted {
  opacity: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 30%, #fff) 0%,
    color-mix(in srgb, var(--c) 85%, #fff) 45%,
    var(--c) 100%);
  box-shadow: 0 0 8px var(--c), 0 0 2px #fff;
}
.spr-picker {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 12);
  height: calc(100% / 8);
  border: 2px solid var(--text-bright);
  border-radius: 5px;
  box-shadow: 0 0 14px var(--glow), inset 0 0 8px var(--glow);
  opacity: 0;
  transition: transform 70ms linear, opacity 200ms;
  pointer-events: none;
}
.spr-picker.is-on { opacity: 1; }
/* Only in the tree for the finale: an idle blend layer over the drawer costs every frame. */
.spr-glint {
  position: absolute;
  inset: -20% 0;
  display: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
}
.spr-glint.is-on { display: block; }
.spr-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--good);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  box-shadow: 0 0 30px -4px var(--good), 0 10px 30px rgba(0, 0, 0, 0.6);
  color: var(--good);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 0 12px var(--good);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.spr-banner.is-on { opacity: 1; }
.spr-tick {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--good);
  color: var(--bg);
  font-size: 1rem;
  text-shadow: none;
}
@media (max-width: 599px) {
  .spr-banner { font-size: 1rem; padding: 0.5rem 0.8rem; white-space: normal; text-align: center; }
  .spr-head { font-size: 0.8rem; letter-spacing: 0.06em; }
}

/* ═════════════ 02 · snack folder ═════════════ */
.snk {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  padding: 0.5rem 0.2rem 0.1rem;
}
/* A manila folder in the palette's warm status colour; the front flap tilts open. */
.snk-folder {
  --folder: var(--warn);
  position: relative;
  width: 7.5rem;
  height: 6rem;
  margin-top: 0.7rem;
  perspective: 420px;
}
.snk-back {
  position: absolute;
  inset: 0.6rem 0 0 0;
  border-radius: 3px 8px 8px 8px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--folder) 58%, #000),
    color-mix(in srgb, var(--folder) 34%, #000));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--folder) 70%, #fff), 0 0 26px -8px var(--folder);
}
.snk-back::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.6rem;
  width: 46%;
  height: 0.75rem;
  border-radius: 5px 8px 0 0;
  background: color-mix(in srgb, var(--folder) 58%, #000);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--folder) 70%, #fff);
}
.snk-paper {
  position: absolute;
  left: 13%;
  right: 11%;
  top: 1rem;
  height: 2.6rem;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--folder) 30%, transparent) 7px 8px),
    linear-gradient(180deg, color-mix(in srgb, var(--text-bright) 35%, #fff), color-mix(in srgb, var(--text-bright) 60%, #aaa));
  transform: rotate(-3deg);
  box-shadow: 6px -4px 0 -1px color-mix(in srgb, var(--text-bright) 45%, #ddd);
}
.snk-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78%;
  border-radius: 5px 5px 8px 8px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--folder) 70%, #fff) 0%,
    var(--folder) 22%,
    color-mix(in srgb, var(--folder) 72%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -10px 18px -10px rgba(0, 0, 0, 0.5),
    0 10px 20px -8px rgba(0, 0, 0, 0.8);
  transition: transform 240ms cubic-bezier(.3, .8, .4, 1);
}
.snk-front::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 34%;
  height: 0.5rem;
  border-radius: 999px;
  translate: -50% 0;
  background: color-mix(in srgb, var(--folder) 60%, #000);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.snk-folder.is-open .snk-front { transform: rotateX(-34deg); }
.snk-cookie {
  position: absolute;
  left: 50%;
  top: 34%;
  font-size: 3.2rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -70%);
  filter: drop-shadow(0 0 14px var(--good));
}
.snk-cookie.is-on { opacity: 1; }
.snk-fly {
  position: absolute;
  z-index: 2;
  font-size: 1.5rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.snk-info { display: grid; gap: 0.75rem; min-width: 0; }
.snk-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
}
.snk-fileicon { flex: none; font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 0 6px var(--glow)); }
.snk-names { position: relative; flex: 1; min-width: 0; height: 1.5em; overflow: hidden; }
.snk-name {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5em;
  text-shadow: var(--text-glow);
}
.snk-meter { --meter-h: 0.9rem; --meter-radius: 3px; }
.snk-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; }
.snk-pct {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 0.75;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  font-variant-numeric: tabular-nums;
}
.snk-pct b { font-weight: 400; }
.snk-pct small { margin-left: 0.06em; font-size: 0.55em; color: var(--dim); }
.snk-pct.is-done, .snk-pct.is-done small { color: var(--good); text-shadow: 0 0 16px var(--good); }
.snk-status {
  padding-bottom: 0.2rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.snk-status.is-done { color: var(--good); text-shadow: 0 0 10px var(--good); }
@media (max-width: 599px) {
  .snk { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.9rem; }
  .snk-info { width: 100%; }
  .snk-folder { width: 6.2rem; height: 5rem; }
  .snk-pct { font-size: 3rem; }
}

/* ═════════════ 03 · bubbles ═════════════ */
.sc-bubbles .win-body { display: grid; gap: 0.55rem; }
.bub-stage { position: relative; height: 13rem; margin: -0.6rem -0.5rem 0; }
.bub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bub-status {
  position: relative;
  height: 1.7rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text-bright);
  clip-path: inset(0 -3rem); /* clip the slide vertically, keep the glow sideways */
}
.bub-status span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 calc(12px * var(--glow-k)) var(--accent-2), 0 0 2px var(--glow);
  animation: bub-pulse 820ms ease-in-out infinite alternate;
}
.bub-status span.is-done {
  color: var(--good);
  text-shadow: 0 0 14px var(--good);
  font-size: 1.2rem;
  animation: none;
}
@keyframes bub-pulse {
  from { scale: 1; opacity: 0.86; }
  to { scale: 1.045; opacity: 1; }
}
html[data-reduced-motion="on"] .bub-status span { animation: none; }
.bub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding-top: 0.2rem;
}
.bub-meter { --meter-h: 0.8rem; --meter-radius: 999px; --meter-color: var(--accent-2); }
.bub-pct {
  min-width: 4.4ch;
  text-align: right;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  font-variant-numeric: tabular-nums;
}
.bub-pct.is-done { color: var(--good); text-shadow: 0 0 12px var(--good); }
@media (max-width: 599px) {
  .bub-stage { height: 11rem; }
  .bub-status { height: 2.8rem; font-size: 0.95rem; letter-spacing: 0.04em; }
  .bub-status span { line-height: 1.3; }
}

/* ═════════════ 04 · airplanes ═════════════ */
.sc-airplanes .win-body { overflow: hidden; }
.air-board {
  position: relative;
  display: grid;
  gap: calc(var(--tw) * 0.45);
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--tw) * 2.2 - 1px), color-mix(in srgb, var(--text) 5%, transparent) calc(var(--tw) * 2.2 - 1px) calc(var(--tw) * 2.2)),
    color-mix(in srgb, var(--bg) 82%, #000);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.75);
  font-size: calc(var(--tw) * 1.42);
  transition: border-color 300ms, box-shadow 300ms;
}
.air-board.is-done {
  border-color: var(--warn);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 22px -6px var(--warn);
}
.air-head,
.air-row {
  display: grid;
  grid-template-columns: var(--wf) var(--wd) var(--ws);
  column-gap: var(--tw);
  align-items: center;
  border-radius: 3px;
}
.air-head {
  padding-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.air-board.is-done .air-head { color: var(--warn); }
.air-board.is-narrow .air-row {
  grid-template-columns: var(--wf) var(--wd);
  grid-template-areas: 'f d' 's s';
  row-gap: 2px;
  padding-bottom: calc(var(--tw) * 0.35);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.air-board.is-narrow .air-head { grid-template-columns: 1fr; }
.air-board.is-narrow .air-status { grid-area: s; }

/* Each field is its own compositor layer, so a flipping glyph repaints only its field rather
 * than the whole board of styled tiles (≈3× the frame rate with several boards on screen). */
.air-field {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tw));
  gap: var(--gap);
  will-change: transform;
}
.air-flight { color: var(--text-bright); }
.air-dest { color: var(--text); }
.air-status { color: var(--good); }
.air-status.is-scenic { color: var(--warn); }

/* One split-flap tile: lighter top flap, darker bottom flap, a hinge across the middle. */
.air-tile {
  position: relative;
  font-style: normal;
  display: grid;
  place-items: center;
  height: calc(var(--tw) * 1.75);
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 9%, #0b0b0b) 0 50%,
    color-mix(in srgb, var(--text) 5%, #050505) 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 1px rgba(0, 0, 0, 0.7);
}
.air-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: rgba(0, 0, 0, 0.7);
}
.air-tile b {
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 calc(7px * var(--glow-k)) currentColor;
}
.air-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ═════════════ 05 · alphabet soup ═════════════ */
.soup {
  --pasta: color-mix(in srgb, var(--warn) 50%, var(--text-bright));
  --tile-glow: var(--accent);
  display: grid;
  gap: 0.6rem;
}
.soup.is-overflow { --tile-glow: var(--warn); }
.soup.is-done { --tile-glow: var(--good); }
.soup-stage { position: relative; margin: -0.4rem -0.3rem 0; }
.soup-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A pasta tile: cream, softly domed, letter pressed in. Transform is set per frame. */
.soup-tile {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--ts);
  height: var(--ts);
  margin: calc(var(--ts) / -2) 0 0 calc(var(--ts) / -2);
  border-radius: 26%;
  background:
    radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--pasta) 55%, #fff) 0 18%, transparent 46%),
    linear-gradient(180deg, var(--pasta), color-mix(in srgb, var(--pasta) 72%, #000));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 3px 5px rgba(0, 0, 0, 0.5);
  color: color-mix(in srgb, var(--pasta) 22%, #000);
  font-size: calc(var(--ts) * 0.64);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  transition: box-shadow 160ms, background-color 160ms;
}
.soup-tile b { font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.soup-tile.is-set {
  background:
    radial-gradient(circle at 34% 26%, #fff 0 16%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--pasta) 70%, #fff), var(--pasta));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px #fff,
    0 0 0 1.5px color-mix(in srgb, var(--tile-glow) 85%, #fff),
    0 0 calc(18px * var(--glow-k) + 4px) var(--tile-glow),
    0 4px 8px rgba(0, 0, 0, 0.55);
}
.soup.is-overflow .soup-tile.is-set b { animation: soup-jiggle 110ms ease-in-out 3 alternate; }
@keyframes soup-jiggle {
  from { transform: rotate(-9deg) scale(1.08); }
  to { transform: rotate(9deg) scale(1.08); }
}
html[data-reduced-motion="on"] .soup.is-overflow .soup-tile.is-set b { animation: none; }

.soup-status {
  min-height: 1.4em;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--dim);
}
.soup-status.is-warn { color: var(--warn); text-shadow: 0 0 10px color-mix(in srgb, var(--warn) 60%, transparent); }
.soup-status.is-done { color: var(--good); text-shadow: 0 0 12px var(--good); }
@media (max-width: 599px) {
  .soup-status { font-size: 0.8125rem; letter-spacing: 0.08em; }
}