/* «العب معانا»: Mahfoof nostalgia game.
   Design contract: docs/visual-direction.md (tokens 2.2, type 5, layout 6,
   screens 7 to 11, motion 12, desktop stage 15). One dark theme on purpose. */

/* ---------------------------------------------------------------- fonts (5.3) */

@font-face {
  font-family: "Readex Pro";
  src: url("../assets/fonts/readex-ar.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../assets/fonts/readex-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E, U+FEFF;
}
/* Metric-matched stand-in while Readex loads, so the swap does not jump. */
@font-face {
  font-family: "Readex Fallback";
  src: local("Geeza Pro"), local("GeezaPro"), local("Noto Sans Arabic"), local("NotoSansArabic-Regular"), local("Tahoma");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 32%;
}

/* ---------------------------------------------------------------- tokens (2.2) */

@property --ambient {
  syntax: "<color>";
  inherits: true;
  initial-value: #c42414;
}

:root {
  color-scheme: dark;

  --room: #220b08;
  --room-2: #351613;
  --room-3: #47211d;
  --glow: #3f1a14;
  --edge: #94685d;
  --ink: #fff5ec;
  --ink-2: #e3cec0;
  --ink-3: #c3a599;

  --mahfoof: #c42414;
  --mahfoof-deep: #9b1207;
  --mahfoof-hi: #f1735a;
  --on-red: #ffffff;
  --on-red-2: #ffe5de;
  --tile-light: #c94d47;
  --tile-dark: #a7211d;

  --win: #f6c360;
  --win-ink: #381703;
  --miss: #352621;

  --desk: #150504;
  --scrim: rgba(8, 2, 1, 0.72);
  --subtitle-bg: rgba(0, 0, 0, 0.55);

  --p-action: #fd8537;
  --p-adventure: #50cec9;
  --p-sport: #9fd959;
  --p-comedy: #f0d450;
  --p-zumurruda: #48cd8c;
  --p-bonbon: #f693c0;
  --p-abjad: #77a4f6;
  --p-science: #55c6f4;
  --p-movies: #be95ec;
  --p-history: #d6b894;
  --p-aflam: var(--p-movies);
  --p-tareekh: var(--p-history);

  --f-display: "Readex Pro", "Readex Fallback", "Geeza Pro", sans-serif;
  --f-text: "Readex Pro", "Readex Fallback", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;

  /* type scale (5.4); cqi versions below when supported */
  --t-hero: clamp(2rem, 1.1rem + 4.4vw, 2.625rem);
  --t-title: clamp(1.625rem, 1.05rem + 2.6vw, 2rem);
  --t-voice: 1.5rem;
  --t-prompt: clamp(1.4375rem, 1.05rem + 1.8vw, 1.75rem);
  --t-answer: 1.1875rem;
  --t-body: 1.0625rem;
  --t-meta: 0.9375rem;
  --t-small: 0.875rem;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 90ms;
  --dur-state: 150ms;
  --dur-fade: 200ms;
  --dur-in: 260ms;
  --dur-out: 160ms;

  --z-topbar: 10;
  --z-banner: 20;
  --z-bumper: 30;
  --z-transition: 35;
  --z-scrim: 40;
  --z-sheet: 50;
  --z-toast: 60;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --stage-h: 100vh;
  --tile: 9.25vw;
  --ambient: #c42414;
}
/* OKLCH tokens where the engine supports them (hex above for older webviews). */
@supports (color: oklch(0 0 0)) {
  :root {
    --room: oklch(0.185 0.040 28);
    --room-2: oklch(0.245 0.050 28);
    --room-3: oklch(0.300 0.058 28);
    --glow: oklch(0.270 0.060 30);
    --edge: oklch(0.560 0.060 35);
    --ink: oklch(0.975 0.016 65);
    --ink-2: oklch(0.865 0.030 55);
    --ink-3: oklch(0.745 0.040 42);
    --mahfoof-deep: oklch(0.440 0.170 30);
    --mahfoof-hi: oklch(0.700 0.160 33);
    --on-red-2: oklch(0.940 0.030 35);
    --tile-light: oklch(0.585 0.160 26);
    --tile-dark: oklch(0.475 0.170 28);
    --win: oklch(0.845 0.130 82);
    --win-ink: oklch(0.250 0.060 50);
    --miss: oklch(0.285 0.025 40);
    --desk: oklch(0.145 0.030 28);
    --scrim: oklch(0.100 0.020 28 / 0.72);
    --subtitle-bg: oklch(0 0 0 / 0.55);
    --p-action: oklch(0.74 0.17 50);
    --p-adventure: oklch(0.78 0.11 192);
    --p-sport: oklch(0.82 0.17 130);
    --p-comedy: oklch(0.87 0.15 97);
    --p-zumurruda: oklch(0.76 0.15 158);
    --p-bonbon: oklch(0.78 0.13 352);
    --p-abjad: oklch(0.72 0.13 262);
    --p-science: oklch(0.78 0.12 228);
    --p-movies: oklch(0.74 0.13 305);
    --p-history: oklch(0.80 0.06 72);
  }
}
@supports (height: 100svh) {
  :root { --stage-h: 100svh; }
}
@supports (width: 1cqi) {
  :root {
    --t-hero: clamp(2rem, 1.1rem + 4.4cqi, 2.625rem);
    --t-title: clamp(1.625rem, 1.05rem + 2.6cqi, 2rem);
    --t-prompt: clamp(1.4375rem, 1.05rem + 1.8cqi, 1.75rem);
    --tile: 9.25cqi;
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--room);
}
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--room);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, h3, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus-visible { outline: none; }
.bumper :focus-visible { outline-color: var(--on-red); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
/* Readex Pro is the only face (Salman chose option A, 2026-09-29); it runs
   larger than the old poster face, so hero sizes step down by about 15%. */
.intro-title.display, .break-title.display { font-size: calc(var(--t-hero) * 0.85); }
/* Legacy alternate headline class, now the same face as .display. */
.display-alt { font-family: var(--f-text); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.intro-title.display-alt, .break-title.display-alt { font-size: calc(var(--t-hero) * 0.85); }
.crt-nosignal.display-alt, .intro-name.display-alt { font-weight: 600; font-size: 1.125rem; }

.icon { flex: none; }
.icon-wrap { display: inline-flex; flex: none; }

/* ---------------------------------------------------------------- stage (6, 15) */

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: var(--stage-h);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  container-name: stage;
  touch-action: manipulation;
  background: var(--room) radial-gradient(120% 60% at 50% 32%, var(--glow) 0%, var(--room) 62%);
}
.screens { position: absolute; inset: 0; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.is-leaving { pointer-events: none; }

@media (min-width: 600px) {
  :root { --stage-h: clamp(640px, calc(100vh - 48px), 932px); }
  @supports (height: 100svh) {
    :root { --stage-h: clamp(640px, calc(100svh - 48px), 932px); }
  }
  html { background: var(--desk); }
  body {
    background: transparent;
    display: grid;
    place-items: center;
    padding: 24px 0;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60vmax 45vmax at 50% 50%, color-mix(in oklch, var(--ambient) 38%, transparent), transparent 70%);
    transition: --ambient 700ms var(--ease-out-quart);
  }
  .stage {
    width: 430px;
    border-radius: 16px;
    box-shadow: 0 24px 80px oklch(0.05 0.02 28 / 0.6);
  }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border-radius: 10px;
  font: 700 var(--t-answer)/1.3 var(--f-text);
  text-align: center;
  transition: transform var(--dur-press) var(--ease-out-quart), background-color var(--dur-state), color var(--dur-state);
}
.btn:active { transform: scale(0.98); }
.btn-white { min-height: 60px; background: var(--on-red); color: var(--mahfoof); }
.btn-white:active { background: var(--on-red-2); }
.btn-ink { background: var(--ink); color: var(--room); }
.btn-ink:active { background: var(--ink-2); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--edge); }
.btn-outline:active { background: var(--room-3); }
.btn-text {
  min-height: 44px;
  padding: 8px 12px;
  font: 600 var(--t-meta)/1.4 var(--f-text);
  color: var(--on-red);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .btn-white:hover { background: var(--on-red-2); }
  .btn-ink:hover { background: var(--ink-2); }
  .btn-outline:hover { background: var(--room-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
  .btn-text:hover { text-decoration-thickness: 2.5px; }
}

/* ---------------------------------------------------------------- wordmark, tiles */

.wordmark { height: 26px; width: auto; flex: none; user-select: none; -webkit-user-drag: none; }
.wordmark--intro { height: 26px; }
.wordmark--break { height: 24px; }
.wordmark--text { font-size: 22px; line-height: 1; color: var(--on-red); }

.tiles-slot { position: absolute; pointer-events: none; z-index: 0; }
.tiles-slot--tl { top: 0; left: 0; }
.tiles-slot--br { bottom: 0; right: 0; }
.tiles { width: calc(var(--tile) * var(--cols)); height: auto; }
.tiles .tile-l { fill: var(--tile-light); }
.tiles .tile-d { fill: var(--tile-dark); }
.tiles .glyph-l { color: var(--tile-light); }
.tiles .glyph-d { color: var(--tile-dark); }

/* ---------------------------------------------------------------- bumper world */

.bumper {
  z-index: var(--z-bumper);
  background: var(--mahfoof);
  color: var(--on-red);
}
.bumper-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: calc(14px + var(--safe-t)) 20px 0;
}

/* ---------------------------------------------------------------- intro (7.1) */

.intro { padding-bottom: 0; }
.intro-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-t)) 20px 0;
  min-height: calc(40px + var(--safe-t));
}
.intro-divider { width: 1px; height: 20px; background: var(--on-red); opacity: 0.6; flex: none; }
.intro-name { font-size: 1.25rem; white-space: nowrap; }
.intro-mid {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px 16px;
}
.crt-wrap { position: relative; align-self: center; margin-bottom: 10px; }
.crt {
  position: relative;
  height: clamp(150px, 30vh, 262px);
  height: clamp(150px, calc(var(--stage-h) * 0.3), 262px);
  aspect-ratio: 4 / 3;
  max-width: calc(100cqi - 52px);
  border-radius: 16px;
  background: radial-gradient(90% 90% at 50% 45%, var(--glow), var(--room) 70%);
  box-shadow: 0 0 0 6px oklch(0.26 0.035 28), 0 0 0 7px oklch(0.40 0.05 28);
  overflow: hidden;
}
.crt-glass { position: absolute; inset: 0; --cut: var(--room); }
.crt-planet {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(32px, 9.5cqi, 40px);
  height: clamp(32px, 9.5cqi, 40px);
  will-change: transform;
}
.crt-planet svg { width: 100%; height: 100%; }
.crt-loading, .crt-nosignal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  text-align: center;
}
.crt-loading { font: 500 var(--t-meta)/1.4 var(--f-text); }
.crt-nosignal { font-size: 1.5rem; }
.onair {
  position: absolute;
  left: 14px;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mahfoof);
  box-shadow: 0 0 6px var(--mahfoof);
}
.intro-title {
  font-size: var(--t-hero);
  color: var(--on-red);
  text-wrap: balance;
  margin-top: 8px;
}
.intro-title--resume { font-size: var(--t-title); }
.intro-promise {
  font: 400 var(--t-meta)/1.6 var(--f-text);
  color: var(--on-red-2);
  text-wrap: pretty;
}
.intro-meta { font: 500 var(--t-meta)/1.6 var(--f-text); color: var(--on-red); }
/* A friend's challenge (?c=): a dark ticket on the red card, under the TV. */
.vs-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--room);
  color: var(--ink-2);
  font: 500 var(--t-small)/1.6 var(--f-text);
  --cut: var(--room);
}
.vs-planet { flex: none; display: grid; place-items: center; }
.vs-planet svg { width: 26px; height: 26px; }
.vs-text { display: flex; flex-direction: column; min-width: 0; text-wrap: pretty; }
.vs-kicker { font-weight: 700; color: var(--ink); }
.intro.has-vs .crt { height: clamp(130px, 24vh, 230px); height: clamp(130px, calc(var(--stage-h) * 0.24), 230px); }
.intro.has-vs .intro-promise { display: none; }
.intro-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px calc(22px + var(--safe-b));
}
.consent {
  font: 400 var(--t-small)/1.7 var(--f-text);
  color: var(--on-red-2);
  text-wrap: pretty;
  margin-top: 4px;
}
.inline-link {
  color: var(--on-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 12px 2px;
  margin: -12px -2px;
}
/* The static first paint (index.html) */
.intro--shell .crt-loading { color: var(--ink-3); }

@media (max-height: 720px) {
  .intro-promise { display: none; }
  .intro-mid { gap: 6px; padding-top: 8px; padding-bottom: 12px; }
}

/* ---------------------------------------------------------------- power-on (12.2) */

.power {
  position: absolute;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--room) radial-gradient(120% 60% at 50% 32%, var(--glow) 0%, var(--room) 62%);
  pointer-events: none;
}
.power-line {
  position: absolute;
  inset: auto 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: color-mix(in oklch, var(--ink) 60%, transparent);
  transform: scaleX(0.04);
  opacity: 0;
}

/* ---------------------------------------------------------------- topbar (7.2, 9) */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-topbar);
  height: calc(48px + var(--safe-t));
  padding: var(--safe-t) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: opacity var(--dur-fade), visibility var(--dur-fade);
}
.topbar.is-hidden { opacity: 0; visibility: hidden; }
.topbar-progress { min-width: 0; display: flex; align-items: center; }
.wordmark.bug { height: 16px; opacity: 0.6; }
.wordmark--text.bug { font-size: 14px; color: var(--ink-3); }

.progress {
  --pip: clamp(6px, calc((100vw - 106px - 4px * var(--n) - 11px * var(--a)) / (var(--n) + 1.6 * var(--a))), 10px);
  display: flex;
  align-items: center;
  gap: 10px;
}
@supports (width: 1cqi) {
  .progress { --pip: clamp(6px, calc((100cqi - 106px - 4px * var(--n) - 11px * var(--a)) / (var(--n) + 1.6 * var(--a))), 10px); }
}
.progress .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mahfoof);
  box-shadow: 0 0 6px var(--mahfoof);
  margin-inline-end: -2px;
  flex: none;
}
.seg { display: flex; align-items: center; gap: 4px; }
.pip {
  width: var(--pip);
  height: var(--pip);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--ink-3) 60%, transparent);
  flex: none;
  transition: background-color 180ms, box-shadow 180ms, transform 180ms var(--ease-out-quart);
}
.pip[data-current] { box-shadow: inset 0 0 0 2px var(--ink); transform: scale(1.2); }
.pip[data-state="correct"] { background: var(--win); box-shadow: none; }
.pip[data-state="wrong"] { background: var(--ink-3); box-shadow: none; }
.pip[data-state="answered"] { background: var(--ink); box-shadow: none; }
.pip[data-state="skipped"] { background: color-mix(in oklch, var(--ink-3) 45%, transparent); box-shadow: none; }
.station {
  width: calc(var(--pip) * 1.6);
  height: calc(var(--pip) * 1.6);
  border-radius: 50%;
  margin-inline-start: 1px;
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ink-3) 60%, transparent);
  flex: none;
  transition: background-color 240ms, box-shadow 240ms, transform 240ms var(--ease-out-quart);
}
.station[data-state="done"] {
  background: var(--ink);
  box-shadow: 0 0 10px color-mix(in oklch, var(--ink) 45%, transparent);
}
.station[data-state="final"] { background: var(--final, var(--ink)); box-shadow: 0 0 10px color-mix(in oklch, var(--final, var(--ink)) 45%, transparent); }
.progress--bonus .station { box-shadow: inset 0 0 0 2px var(--win); }
.progress--bonus .station[data-state="final"] { background: var(--win); box-shadow: 0 0 10px color-mix(in oklch, var(--win) 45%, transparent); }

/* ---------------------------------------------------------------- question screens (7.2 to 7.6) */

.q { padding-top: calc(48px + var(--safe-t)); }
/* Spare height is shared between this spacer and the TV panel, so a tall
   screen does not leave a mostly empty panel (critique r2, P2-1). */
.q-space { flex: 0 0 0; min-height: 0; }
.q-goal {
  padding: 2px 16px 0;
  font: 500 var(--t-meta)/1.6 var(--f-text);
  color: var(--ink-2);
}
/* The question sits on the TV: the intro's CRT window, grown into the prompt
   zone (same glow and bezel rings), with a red lower third naming the act. */
.q-zone {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 16px 12px;
  padding: 20px 16px 14px;
  border-radius: 16px;
  background: radial-gradient(90% 90% at 50% 45%, var(--glow), var(--room) 70%);
  box-shadow: 0 0 0 6px oklch(0.26 0.035 28), 0 0 0 7px oklch(0.40 0.05 28);
}
/* Content sits at the bottom of the panel, close to the answers (6, 7.2). An
   auto margin instead of justify-content: flex-end keeps overflow scrollable
   (200% zoom). */
.q-zone::before { content: ""; margin-top: auto; }
.q-lower {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--mahfoof);
  color: var(--on-red);
  font: 600 var(--t-small)/1.6 var(--f-text);
}
.q-lower-led { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--on-red); }
/* Tall screens only (a zoomed or short screen keeps the uncapped panel, so
   nothing can overflow it): the spacer above the panel shares the spare
   height, and the panel stops growing at 46% of the height. */
@media (min-height: 780px) {
  .q-space { flex: 1 1 0; }
  .q-zone { max-height: 58vh; max-height: 58svh; }
}
.q--audio .q-lower { display: none; }
.q-goal ~ .q-zone { margin-top: 10px; }
.q-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 var(--t-small)/1.7 var(--f-text);
  color: var(--ink-2);
}
.q-prompt {
  font: 600 var(--t-prompt)/1.55 var(--f-text);
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.q-prompt--lyric { display: flex; flex-direction: column; gap: 10px; }
.q-lead { font: 500 var(--t-body)/1.7 var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.lyric {
  align-self: center;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--subtitle-bg);
  color: var(--ink);
  font: 500 1.125rem/1.6 var(--f-text);
  text-align: center;
  text-wrap: balance;
}
.lyric-line { display: block; }
.q-ask { display: block; }
.q.is-answered .q-lead,
.q.is-answered .q-kicker,
.q.is-answered .q-goal { display: none; }
.q.has-banner .q-zone { padding-block: 14px 10px; }
.q-reaction {
  min-height: calc(1.625rem * 1.35);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--ink-2);
  font-size: 1.625rem;
  line-height: 1.35;
}
/* Host reactions in Readex bold: 22px keeps them a voice, not a headline. */
.q-reaction .display { font-size: 1.375rem; }
/* A host line over six words drops to the answer size so it stays one glance. */
.q-reaction .voice-long { font: 600 var(--t-answer)/1.5 var(--f-text); color: var(--ink-2); }
.banner-status .voice-long { font: 600 1.1875rem/1.4 var(--f-text); }
.q-pair { display: inline-flex; gap: 6px; --cut: var(--glow); }
.q-pair-planet { color: var(--ink-3); opacity: 0.9; }
.q-pair-planet svg { width: 32px; height: 32px; }

/* The TV shows the episode (2026-10-01): a frame from the moment the question
   comes from, then the cartoon's card from the episode after the answer. It
   takes only the panel's spare height above the prompt (flex basis and minimum
   0), so it never pushes an answer off screen and the text never sits on it;
   what is left over goes above it (.q-zone::before). Under 64px app.js marks it
   thin and it is not drawn (a slit of a face reads as a glitch). */
.q-pic {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 34vh;
  max-height: calc(var(--stage-h) * 0.34);
  border-radius: 10px;
  overflow: hidden;
  background: var(--room);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 12%, transparent);
}
.q-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.q-pic.is-thin { visibility: hidden; }
.q-pic-badge {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--subtitle-bg);
  color: var(--ink);
  font: 600 var(--t-small)/1.6 var(--f-text);
}
.q-pic.is-revealed .q-pic-badge { display: none; }

/* The lower third and «ساعدني» share one row under the prompt. */
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.q-foot .q-lower { margin-top: 0; }
.q--audio .q-foot { display: none; }
.q-help {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--room);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: var(--ink);
  font: 600 var(--t-small)/1.2 var(--f-text);
  transition: transform var(--dur-press) var(--ease-out-quart), box-shadow var(--dur-state), background-color var(--dur-state);
}
/* A 48px tall hit area around the 36px pill. */
.q-help::after { content: ""; position: absolute; inset: -6px 0; }
.q-help-meta { font-weight: 400; color: var(--ink-3); }
.q-help:active { transform: scale(0.97); background: var(--room-2); }
@media (hover: hover) and (pointer: fine) {
  .q-help:hover { background: var(--room-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
}
.play-row .q-help { margin-inline-start: auto; }
.play-row .q-help-meta { display: none; }
.q.is-locked .q-help { visibility: hidden; }

.opt[data-state="removed"] { opacity: 0.32; pointer-events: none; }
.opt[data-state="removed"] .opt-label { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.q-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px max(24px, calc(var(--safe-b) + 12px));
}
.q.has-banner .q-answers { padding-bottom: 12px; }

/* answer buttons (8) */
.opts { display: flex; flex-direction: column; gap: 10px; }
/* The button fills its cell, so cells in one grid row share one height. */
.opt-cell { display: flex; }
.opt-cell > .opt { flex: 1; }
.opt-cell.is-gone { display: none; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--room-2);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  color: var(--ink);
  font: 600 var(--t-answer)/1.4 var(--f-text);
  text-align: start;
  transition: background-color var(--dur-state), box-shadow var(--dur-state), color var(--dur-state), opacity var(--dur-fade), transform var(--dur-press) var(--ease-out-quart);
}
.opt-label { flex: 1; min-width: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.opt-slot { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.opt-key {
  display: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  font: 500 13px/18px var(--f-text);
  color: var(--ink-3);
  text-align: center;
}
.opt:active { transform: scale(0.98); background: var(--room-3); }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { background: var(--room-3); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
  .opt-key { display: block; }
}
.q.is-locked .opt { pointer-events: none; }
.q.is-locked .opt-key { display: none; }
.opt[data-state="picked"] { background: var(--room-3); box-shadow: inset 0 0 0 2px var(--ink); }
.opt[data-state="correct"] { background: var(--win); color: var(--win-ink); box-shadow: none; }
.opt[data-state="wrong"] { background: var(--miss); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--miss); }
.opt[data-state="wrong"] .opt-slot { color: var(--ink-3); }
.opt[data-state="dim"] { opacity: 0.4; }
.opt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

.opts--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts--pair .opt { min-height: 64px; justify-content: center; font-size: 1.3125rem; font-weight: 700; text-align: center; }
.opts--pair .opt-slot { position: absolute; inset-inline-end: 10px; }
.opts--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts--grid .opt { min-height: 56px; padding: 10px 14px; font-size: var(--t-body); gap: 8px; }
.opts--grid .opt-slot { width: 20px; }
.opt-cell--wide { grid-column: 1 / -1; }

.q-skip {
  width: 100%;
  min-height: 44px;
  font: 500 var(--t-meta)/1.4 var(--f-text);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-align: center;
}
.q.is-picked .q-skip, .q.is-locked .q-skip { visibility: hidden; }

/* feedback banner (7.3) */
.banner {
  position: relative;
  z-index: var(--z-banner);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px max(16px, calc(var(--safe-b) + 12px));
  border-radius: 16px 16px 0 0;
  background: var(--room-3);
}
.banner-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.375rem;
  color: var(--ink);
}
.banner-status.is-win { color: var(--win); }
.win-disc {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--win);
  color: var(--win-ink);
  flex: none;
}
.banner-status { flex-wrap: wrap; row-gap: 4px; }
/* From three correct answers in a row (2026-10-01). Gold: it counts wins. */
.streak {
  margin-inline-start: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--win);
  color: var(--win-ink);
  font: 700 var(--t-small)/1.6 var(--f-text);
  white-space: nowrap;
  animation: streak-in 320ms var(--ease-out-quart) 180ms backwards;
}
@keyframes streak-in { from { opacity: 0; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .streak { animation: none; } }
.banner-answer { font: 600 var(--t-body)/1.5 var(--f-text); color: var(--ink); }
.banner-reveal {
  font: 400 var(--t-body)/1.7 var(--f-text);
  color: var(--ink-2);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.banner-next { margin-top: 8px; min-height: 56px; }

/* audio block (7.4, 14) */
.play-row { display: flex; align-items: center; gap: 16px; padding: 2px 0 4px; }
.q.is-answered .play-row { display: none; }
.play {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mahfoof);
  color: var(--on-red);
  transition: transform var(--dur-press) var(--ease-out-quart), background-color var(--dur-state);
}
.play:active { transform: scale(0.96); background: var(--mahfoof-deep); }
.play-ring { position: absolute; inset: -6px; pointer-events: none; }
.play-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.play-ring circle { stroke: var(--ink); }
.ring-spin { opacity: 0; transform-origin: 42px 42px; stroke: color-mix(in oklch, var(--ink) 25%, transparent) !important; }
.ring-fill { opacity: 0; }
.play-glyph { display: grid; place-items: center; }
.play-text { min-width: 0; }
.play-label { font: 600 var(--t-body)/1.5 var(--f-text); color: var(--ink); }
.play-meta { font: 400 var(--t-small)/1.6 var(--f-text); color: var(--ink-3); }
.play-row[data-state="loading"] .ring-spin { opacity: 1; animation: spin 900ms linear infinite; }
.play-row[data-state="playing"] .ring-fill,
.play-row[data-state="paused"] .ring-fill { opacity: 1; }
.play-row[data-state="used"] .play,
.play-row[data-state="error"] .play { background: var(--room-3); color: var(--ink-3); pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* short screens: keep every question inside the viewport (6, fit heights) */
@media (max-height: 740px) {
  /* Only where the banner needs the room: the answered prompt keeps 2 lines. */
  .q.is-answered .q-prompt:not(.q-prompt--lyric) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .q-zone { gap: 8px; margin-block: 4px 8px; padding: 12px; }
  .q-goal + .q-zone { margin-top: 8px; }
  .q.has-banner .q-zone { padding-block: 10px 8px; }
  .q--audio .q-kicker { display: none; }
  .q-answers { gap: 8px; }
  .opts { gap: 8px; }
  .opt { min-height: 56px; padding-block: 12px; }
  .q-prompt--lyric { gap: 8px; }
  .lyric { padding: 8px 12px; }
  .play-row { gap: 14px; }
}
@media (max-height: 690px) {
  .q--audio .q-lead { font-size: var(--t-meta); line-height: 1.6; }
  .opts--grid .opt { min-height: 52px; }
}

/* ---------------------------------------------------------------- break (7.7) */

.break-center {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
}
.break-title {
  font-size: var(--t-hero);
  margin: 0 24px 14px;
  text-wrap: balance;
}
.rule { position: relative; height: 3px; }
.rule-line { position: absolute; inset: 0; background: var(--on-red); transform-origin: right center; }
.stations {
  position: absolute;
  inset-inline-start: 24px;
  top: 50%;
  display: flex;
  gap: 18px;
  transform: translateY(-50%);
}
.station-b {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mahfoof);
  border: 2.5px solid var(--on-red);
  box-shadow: 0 0 0 4px var(--mahfoof);
  transition: background-color 240ms var(--ease-out-quart);
}
.station-b.is-done { background: var(--on-red); }
.break-lines {
  margin: 18px 24px 0;
  font: 500 1.125rem/1.7 var(--f-text);
  color: var(--on-red);
  text-wrap: pretty;
}
.break-teaser { color: var(--on-red-2); font-weight: 400; }
.break-next {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 12px calc(12px + var(--safe-b));
  padding: 0 12px;
  font: 600 1.125rem/1 var(--f-text);
  color: var(--on-red);
}

/* ---------------------------------------------------------------- bonus offer (7.10) */

.offer-center {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 24px 0;
}
.offer-title { font-size: var(--t-title); margin: 0 24px; }
.offer-rule { position: relative; height: 2px; }
.offer-pips {
  position: absolute;
  inset-inline-start: 24px;
  top: 50%;
  display: flex;
  gap: 14px;
  transform: translateY(-50%);
}
.offer-pip {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--mahfoof);
  box-shadow: inset 0 0 0 2px var(--on-red), 0 0 0 4px var(--mahfoof);
}
.offer-line { margin: 0 24px; font: 500 1.125rem/1.7 var(--f-text); text-wrap: pretty; }
.offer-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px calc(22px + var(--safe-b));
}

/* ---------------------------------------------------------------- reveal (7.8) */

.reveal { overflow: hidden; }
.reveal-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(70% 45% at 50% 42%, color-mix(in oklch, var(--planet) 22%, transparent), transparent);
}
.reveal-ring { position: absolute; inset: 0; --cut: var(--room); }
.rv-planet {
  position: absolute;
  width: 48px;
  height: 48px;
  color: var(--ink-3);
  opacity: 0.35;
  transition: color 90ms, opacity 90ms, transform 120ms var(--ease-out-quart), filter 120ms;
}
.rv-planet svg { width: 48px; height: 48px; }
.rv-planet svg[opacity] { opacity: 1; }
.rv-planet.is-lit {
  color: var(--c);
  opacity: 1;
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px color-mix(in oklch, var(--c) 40%, transparent));
}
.rv-planet.is-dim { opacity: 0.15; }
.rv-planet.is-winner { z-index: 2; }
.reveal-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.625rem;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.reveal-chip, .chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--room-3);
  color: var(--ink-2);
  font: 500 var(--t-small)/1.6 var(--f-text);
}
.reveal-chip {
  position: absolute;
  width: max-content;
  transform: translate(-50%, -50%);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
}
.reveal-chipline {
  position: absolute;
  inset-inline: 16px;
  text-align: center;
  font: 500 var(--t-small)/1.7 var(--f-text);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- result (7.9) */

.result { overflow: hidden; }
.result-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 45% at 50% 38%, color-mix(in oklch, var(--planet) 22%, transparent), transparent);
}
.result-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(16px + var(--safe-t)) 16px calc(96px + var(--safe-b));
}
.result-scroll::-webkit-scrollbar { display: none; }
.result-scroll > * { flex-shrink: 0; }
.card {
  flex: none;
  /* Leaves room for a two-line row (the save hint) above the action bar on
     every phone: card bottom about 524 / 448 / 628 at 740 / 664 / 844 tall. */
  width: min(100%, calc((var(--stage-h) - 232px) * 9 / 16));
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--room-2);
}
.card-img { width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: default; user-select: auto; }
.card-ph { width: 100%; height: 100%; background: radial-gradient(70% 40% at 50% 34%, color-mix(in oklch, var(--planet) 16%, transparent), transparent), var(--room); }
.result-line {
  width: 100%;
  max-width: 34ch;
  font: 500 var(--t-body)/1.7 var(--f-text);
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
}
.result-line--bonus { color: var(--ink); }
.result-desc {
  width: 100%;
  max-width: 36ch;
  font: 400 var(--t-body)/1.75 var(--f-text);
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}
/* The score as text when the card leaves it out (game.json result.shareScoreMin). */
.result-score {
  width: 100%;
  font: 700 var(--t-answer)/1.4 var(--f-text);
  color: var(--ink);
  text-align: center;
  margin-bottom: -8px;
}
.result-bonus-score { color: var(--win); font-weight: 600; }
.result-hint {
  width: 100%;
  font: 400 var(--t-small)/1.7 var(--f-text);
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}
.result-hint bdi { font-weight: 600; color: var(--ink); }
.result-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 36ch;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--room-2);
  color: var(--ink);
  font: 600 var(--t-body)/1.5 var(--f-text);
  text-align: center;
  text-wrap: balance;
  --cut: var(--room-2);
}
.result-vs .vs-planet svg { width: 22px; height: 22px; }
.result-vs.is-win { box-shadow: inset 0 0 0 1.5px var(--win); }
.result-streak {
  width: 100%;
  margin-top: -8px;
  font: 600 var(--t-meta)/1.6 var(--f-text);
  color: var(--ink-2);
  text-align: center;
}
.episode {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--room-2);
  text-decoration: none;
  transition: background-color var(--dur-state), transform var(--dur-press);
}
.episode:active { transform: scale(0.98); background: var(--room-3); }
@media (hover: hover) and (pointer: fine) { .episode:hover { background: var(--room-3); } }
.episode-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mahfoof);
  color: var(--on-red);
}
.episode-text { display: flex; flex-direction: column; min-width: 0; }
.episode-kicker { font: 400 var(--t-small)/1.6 var(--f-text); color: var(--mahfoof-hi); }
.episode-title { font: 600 1rem/1.5 var(--f-text); color: var(--ink); text-wrap: pretty; }
.pulled { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pulled-label { font: 500 var(--t-small)/1.6 var(--f-text); color: var(--ink-3); }
.pulled-list { display: flex; flex-wrap: wrap; gap: 8px; }
.result-more { width: 100%; display: flex; flex-direction: column; }
.row-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font: 500 var(--t-meta)/1.4 var(--f-text);
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-align: center;
}
.actionbar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-topbar);
  display: grid;
  /* The secondary takes its label's width, so «العب مرة ثانية» never wraps at 360px. */
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  padding: 24px 16px calc(12px + var(--safe-b));
  background: linear-gradient(to top, var(--room) 70%, transparent);
}
.actionbar .btn { min-height: 56px; font-size: 1.0625rem; padding-inline: 12px; white-space: nowrap; }
.actionbar .bar-secondary { padding-inline: 18px; }

/* DOM card: used when no canvas image can be drawn (section 11 layout, in cqi of the card) */
.card-dom {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #220b08;
  color: #fff5ec;
  overflow: hidden;
  --cut: #220b08;
}
.cd-glow { position: absolute; inset: 0; background: radial-gradient(65% 36% at 50% 33%, color-mix(in oklch, var(--planet) 28%, transparent), transparent); }
.cd-lead { position: relative; margin-top: 11.5cqi; font: 500 4.1cqi/1.5 var(--f-text); color: #e3cec0; }
.cd-planet { position: relative; width: 40.7cqi; height: 40.7cqi; margin-top: 3cqi; }
.cd-planet svg { width: 100%; height: 100%; }
.cd-prefix { position: relative; margin-top: 1cqi; font-size: 5.9cqi; line-height: 1.2; color: #e3cec0; }
.cd-name { position: relative; font-size: 15.7cqi; line-height: 1.15; }
/* Planet name on the DOM fallback card (share.js draws the image card). */
.cd-name--text { font: 700 13.9cqi/1.3 var(--f-text); }
.cd-desc { position: relative; margin-top: 2cqi; padding: 0 10cqi; font: 400 3.9cqi/1.5 var(--f-text); }
.cd-score { position: relative; margin-top: 3cqi; font: 700 5cqi/1.4 var(--f-text); }
.cd-pips { position: relative; display: flex; justify-content: center; gap: 1.7cqi; margin-top: 2.4cqi; }
.cd-pips span { width: 3.7cqi; height: 3.7cqi; border-radius: 0.6cqi; box-shadow: inset 0 0 0 0.4cqi #c3a599; }
.cd-pips span.is-win { background: #f6c360; box-shadow: none; }
.cd-band {
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4.5cqi 7.4cqi 0;
  background: #c42414;
  border-top: 0.5cqi solid #fff;
}
.cd-band .wordmark { height: 7.8cqi; }
.cd-handle { font: 600 4.3cqi/1 var(--f-text); color: #fff; padding-top: 1.5cqi; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(96px + var(--safe-b));
  z-index: var(--z-toast);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--room);
  font: 600 var(--t-meta)/1.4 var(--f-text);
  transform: translate(-50%, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- privacy sheet (7.11) */

.sheet {
  width: 100%;
  max-width: 430px;
  max-height: none;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.sheet::backdrop { background: rgba(8, 2, 1, 0.72); background: oklch(0.100 0.020 28 / 0.72); }
.sheet-panel {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85svh;
  padding: 8px 16px 0;
  border-radius: 16px 16px 0 0;
  background: var(--room-2);
  box-shadow: 0 -8px 24px oklch(0.08 0.02 28 / 0.5);
}
.sheet-handle { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--ink-3); margin-bottom: 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; }
.sheet-title { font: 700 var(--t-answer)/1.4 var(--f-text); }
.sheet-x { width: 44px; height: 44px; margin-inline-end: -10px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); }
.sheet-x:active { background: var(--room-3); }
.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: calc(20px + var(--safe-b));
}
.sheet-list { display: flex; flex-direction: column; gap: 10px; }
.sheet-list li { font: 400 var(--t-body)/1.75 var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.sheet-en { padding-top: 16px; border-top: 1px solid var(--room-3); }
.sheet-en .sheet-list li { line-height: 1.6; }
.sheet-done { margin-top: 4px; }
@media (min-width: 600px) {
  .sheet { margin-bottom: max(0px, calc((100vh - var(--stage-h)) / 2)); }
  .sheet-panel { border-radius: 16px; }
}

/* ---------------------------------------------------------------- debug panel (?debug=1) */

.debug {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: var(--z-toast);
  width: min(360px, calc(100vw - 16px));
  max-height: 38vh;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: oklch(0.12 0.02 28 / 0.94);
  color: var(--ink-2);
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
  text-align: left;
}
.debug-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--room-3); }
.debug-toggle { margin-left: auto; padding: 2px 8px; border-radius: 4px; background: var(--room-3); color: var(--ink); font: inherit; }
.debug-list { overflow-y: auto; padding: 4px 8px 8px; }
.debug-list li { padding: 2px 0; border-bottom: 1px solid oklch(0.25 0.03 28); word-break: break-all; }
.debug-list b { color: var(--win); font-weight: 600; }
.debug-payload { color: var(--ink-3); }
.debug.is-collapsed .debug-list { display: none; }

/* ---------------------------------------------------------------- noscript */

.noscript {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--mahfoof);
  color: var(--on-red);
  font: 600 var(--t-body)/1.7 var(--f-text);
  text-align: center;
}

/* ---------------------------------------------------------------- reduced motion (12.3) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .play-row[data-state="loading"] .ring-spin { opacity: 0; }
  .play-row[data-state="loading"] .play-meta::after { content: " ..."; }
}
.is-hidden-tab .crt-planet { animation-play-state: paused; }