/* THE GOD TERMINAL — full-screen shows: stage element, shared kit (.sk-*), F-key shows. */

/* ───────── show root: full-screen, centred, with a radial dim behind the content ───────── */
.show {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
/* Oversized so the entrance/exit scale never reveals its edge. */
.show::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 52% at 50% 50%,
    color-mix(in srgb, var(--bg) 80%, transparent) 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 50%,
    color-mix(in srgb, var(--bg) 30%, transparent) 100%);
}

/* ───────── kit: big glowing display text ───────── */
.sk-big {
  --sk-color: var(--text-bright);
  --sk-glow: var(--accent);
  --sk-size: clamp(3.5rem, 13vw, 11rem);
  --sk-bloom: calc(0.45 + var(--glow-k) * 0.55);
  position: relative;
  font-family: var(--font-display);
  font-size: var(--sk-size);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--sk-color);
  text-shadow:
    0 0 0.03em color-mix(in srgb, var(--sk-color) 70%, #fff),
    0 0 calc(0.1em * var(--sk-bloom)) var(--sk-glow),
    0 0 calc(0.28em * var(--sk-bloom)) color-mix(in srgb, var(--sk-glow) 65%, transparent),
    0 0 calc(0.7em * var(--sk-bloom)) color-mix(in srgb, var(--sk-glow) 35%, transparent);
}
.sk-line { display: block; }
.sk-word { display: inline-block; white-space: nowrap; }
/* Each letter on its own layer: the wide glow is costly to raster, and this keeps
 * per-letter entrances, flashes and shines from repainting the whole line. */
.sk-ch { display: inline-block; transform-origin: 50% 88%; will-change: transform; }

.sk-caption {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  text-shadow: var(--text-glow);
}

/* Glass HUD panel used inside shows (adds to base.css .panel). */
.sk-panel {
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  border-color: var(--line-bright);
  box-shadow: 0 0 calc(40px * var(--glow-k)) calc(-8px * var(--glow-k)) var(--glow),
              inset 0 0 calc(40px * var(--glow-k)) calc(-20px * var(--glow-k)) var(--glow);
}

.sk-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Rotating light rays + core glow; the mask fades them out radially. */
.sk-rays {
  --sk-ray: var(--accent);
  --sk-ray-2: var(--accent-2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sk-ray) 26%, transparent),
    color-mix(in srgb, var(--sk-ray) 7%, transparent) 26%, transparent 55%);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, 0.42) 28%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, 0.42) 28%, transparent 62%);
}
.sk-rays::before,
.sk-rays::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: sk-spin 18s linear infinite;
}
.sk-rays::before {
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--sk-ray) 26%, transparent) 0deg 2deg, transparent 6deg 15deg);
}
.sk-rays::after {
  background: repeating-conic-gradient(from 6deg,
    color-mix(in srgb, var(--sk-ray-2) 18%, transparent) 0deg 1deg, transparent 3.5deg 11.25deg);
  animation-duration: 27s;
  animation-direction: reverse;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
html[data-reduced-motion="on"] .sk-rays::before,
html[data-reduced-motion="on"] .sk-rays::after { animation: none; }

/* ───────── F1 · excellent ───────── */
.ex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Hard stepped shadows extrude the letters into chunky arcade type under the glow. */
.ex-text {
  --sk-size: clamp(4.5rem, 23vw, 15.5rem);
  --ex-deep: color-mix(in srgb, var(--sk-glow) 50%, var(--bg));
  line-height: 0.84;
  text-shadow:
    0 0.03em 0 color-mix(in srgb, var(--sk-glow) 75%, var(--bg)),
    0 0.06em 0 var(--ex-deep),
    0 0.09em 0 color-mix(in srgb, var(--sk-glow) 30%, var(--bg)),
    0 0.12em 0.06em color-mix(in srgb, var(--bg) 80%, transparent),
    0 0 0.03em color-mix(in srgb, var(--sk-color) 70%, #fff),
    0 0 calc(0.12em * var(--sk-bloom)) var(--sk-glow),
    0 0 calc(0.4em * var(--sk-bloom)) color-mix(in srgb, var(--sk-glow) 55%, transparent),
    0 0 calc(0.9em * var(--sk-bloom)) color-mix(in srgb, var(--sk-glow) 30%, transparent);
}
.ex-stars {
  display: flex;
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
  margin-top: clamp(0.75rem, 2.6vh, 1.75rem);
}
.ex-star {
  display: block;
  width: clamp(2.4rem, 5.5vw, 4.25rem);
  color: var(--accent-3);
  opacity: 0;
  filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--accent-3) 75%, transparent));
}
.ex-star svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ───────── F2 · not today, biscuit ───────── */
.nt-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: grayscale(0.7) brightness(0.85);
  backdrop-filter: grayscale(0.7) brightness(0.85);
}
.nt-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nt-text {
  --sk-size: clamp(3.6rem, 15vw, 11.5rem);
  --sk-color: color-mix(in srgb, var(--bad) 72%, #fff);
  --sk-glow: var(--bad);
  line-height: 0.88;
}
.nt-text .sk-ch { transform-origin: 50% 95%; }

.nt-scene {
  /* --warn is the golden tone in every palette, so the biscuit always reads as one;
   * rain and tears are a pale, washed-out tint that suits the drained mood. */
  --nt-biscuit: var(--warn);
  --nt-water: color-mix(in oklab, var(--text-bright) 78%, var(--dim));
  position: relative;
  width: clamp(10rem, 29vh, 16.5rem);
  aspect-ratio: 1 / 1.08;
  margin-top: clamp(0.5rem, 2.5vh, 1.75rem);
}
.nt-cloud {
  position: absolute;
  left: 2%;
  right: 2%;
  top: -4%;
  opacity: 0;
}
.nt-cloud svg {
  display: block;
  width: 100%;
  height: auto;
  fill: color-mix(in srgb, var(--dim) 32%, var(--panel-strong));
  stroke: color-mix(in srgb, var(--dim) 80%, var(--text-bright));
  stroke-width: 3;
  filter: drop-shadow(0 0 0.6rem color-mix(in srgb, var(--dim) 50%, transparent));
  animation: nt-bob 2.2s ease-in-out infinite alternate;
}
@keyframes nt-bob { to { transform: translateY(6%); } }

.nt-rain {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 34%;
  height: 30%;
  overflow: hidden;
}
.nt-drop {
  position: absolute;
  top: 0;
  width: 3px;
  height: 24%;
  border-radius: 3px;
  background: linear-gradient(transparent, var(--nt-water));
  opacity: 0;
}
/* Negative delays (--t) start every drop mid-fall, so the rain arrives as a shower. */
.nt-scene.is-raining .nt-drop { animation: nt-fall var(--d) linear var(--t) infinite; }
@keyframes nt-fall {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateY(420%); opacity: 0; }
}

.nt-biscuit {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  translate: -50% 0;
  transform-origin: 50% 100%;
  opacity: 0;
}
.nt-biscuit svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 0.7rem color-mix(in srgb, var(--nt-biscuit) 40%, transparent));
}
.nt-b-body { fill: color-mix(in srgb, var(--nt-biscuit) 30%, var(--panel-strong)); stroke: var(--nt-biscuit); stroke-width: 3; }
.nt-b-rim { fill: none; stroke: var(--nt-biscuit); stroke-width: 2; stroke-dasharray: 3 6; opacity: 0.55; }
.nt-b-holes { fill: color-mix(in srgb, var(--nt-biscuit) 65%, transparent); }
.nt-b-face { fill: none; stroke: var(--text-bright); stroke-width: 3.5; stroke-linecap: round; }
.nt-b-eyes { fill: var(--text-bright); }
.nt-b-tear { fill: var(--nt-water); opacity: 0; }
.nt-b-tear.is-falling { animation: nt-tear 1.1s ease-in forwards; }
@keyframes nt-tear {
  0% { opacity: 0; transform: translateY(-4px) scale(0.4); }
  25% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(26px) scale(0.85); }
}
html[data-reduced-motion="on"] .nt-cloud svg { animation: none; }
html[data-reduced-motion="on"] .nt-drop { animation-duration: 1.2s; }

/* ───────── F3 delivery / F9 sandwich: network map ───────── */
.dg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vh, 1.25rem);
  width: min(74rem, 94vw);
}
.dg-title { display: grid; place-items: center; }
.dg-title > .sk-big { grid-area: 1 / 1; --sk-size: clamp(2.6rem, 7vw, 6.25rem); }
.dg-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(38rem, 64vh);
  overflow: hidden;
}
.dg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.dg-counter {
  flex: none;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 calc(10px * var(--glow-k)) color-mix(in srgb, var(--accent) 60%, transparent);
}
.dg-map { position: relative; flex: 1; min-height: 0; }
/* Faint map grid. */
.dg-map::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}
.dg-banner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  max-width: 94%;
  padding: 0.6rem clamp(1rem, 3vw, 2rem) 0.8rem;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow: 0 0 calc(48px * var(--glow-k)) calc(-6px * var(--glow-k)) var(--glow);
}
.dg-banner-cap { font-size: clamp(0.85rem, 1.3vw, 1.1rem); color: var(--accent); }
.dg-banner-text { --sk-size: clamp(2.4rem, 6vw, 5rem); --sk-glow: var(--accent-3); line-height: 0.95; }

/* ───────── F4 · picnic ───────── */
.pc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.8vh, 1rem);
  width: min(56rem, 92vw);
}
.pc-title { display: grid; place-items: center; }
.pc-title > .sk-big { grid-area: 1 / 1; --sk-size: clamp(2.6rem, 7.2vw, 6.5rem); }
.pc-done { --sk-glow: var(--good); }
.pc-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.pc-basket {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 1;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--accent) 45%, transparent));
}
.pc-pct {
  min-width: 4ch;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 0.8;
  text-align: right;
  color: var(--text-bright);
  text-shadow: 0 0 0.08em var(--accent), 0 0 0.3em color-mix(in srgb, var(--accent) 45%, transparent);
}
.pc-pct small { font-size: 0.55em; color: var(--accent); }
.pc.is-done .pc-pct { color: color-mix(in srgb, var(--good) 55%, #fff); }
.pc-meter {
  --meter-color: var(--accent);
  --meter-h: clamp(1.1rem, 2.6vh, 1.6rem);
  --meter-radius: 4px;
  width: 100%;
}
.pc-list {
  width: 100%;
  height: clamp(9rem, 28vh, 16rem);
  overflow: hidden;
}
.pc-rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0 clamp(0.75rem, 2vw, 1.25rem) 0.5rem;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
.pc-row {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(0.875rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--dim);
}
.pc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--faint); translate: 0 -0.3em; }
.pc-size { flex: none; font-variant-numeric: tabular-nums; color: var(--accent-2); }
.pc-row:last-child { color: var(--text-bright); text-shadow: var(--text-glow); }
.pc-row.is-total { font-weight: 800; color: var(--good); text-shadow: 0 0 10px color-mix(in srgb, var(--good) 60%, transparent); }
.pc-row.is-total .pc-size { color: var(--good); }
.pc-fly {
  position: absolute;
  left: 0;
  top: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--accent) 60%, transparent));
}

/* ───────── F6 · alphabet soup ───────── */
.sp-word {
  --sk-size: clamp(3.4rem, 13vw, 10.5rem);
  max-width: 94vw;
}
.sp-word .sk-ch { color: var(--c, var(--text)); }
.sp-word .sk-ch.is-locked { color: var(--sk-color); }
.sp-word.is-done { --sk-glow: var(--accent-3); }

/* ───────── mobile ───────── */
@media (max-width: 599px) {
  .dg-panel { height: min(34rem, 60vh); }
  .dg-head { padding: 0.5rem 0.75rem; letter-spacing: 0.06em; }
  .pc-list { height: clamp(8rem, 26vh, 12rem); }
  .pc-row { gap: 0.4rem; }
  /* Big enough to break onto two lines, which reads far better on a phone than one small line. */
  .sp-word { --sk-size: clamp(3.4rem, 19vw, 6rem); }
}