/* Lahza school deck — "Rescue" style: vest red + lifeline teal + signal amber, light and dark.
   One 16:9 stage scaled to any screen; sizes in cqw so everything scales with it. */
:root {
  --bg: #F4F7FB; --bg2: #E9F1FA; --surface: #FFFFFF; --surface2: #F7FAFD;
  --ink: #0F172A; --ink2: #1E293B; --muted: #5B6474; --line: rgba(15,23,42,.08);
  --red: #E5383B; --red-soft: #FDE8E8; --teal: #0E9F9A; --teal-soft: #DDF5F3; --amber: #F2A11F; --violet: #6E4FA3;
  --glow1: rgba(229,56,59,.20); --glow2: rgba(14,159,154,.20); --glow3: rgba(242,161,31,.16);
  --shadow: 0 1.4cqw 3cqw -1.8cqw rgba(15,23,42,.35);
  --head: 'Baloo Bhaijaan 2', 'Tajawal', system-ui, sans-serif;
  --body: 'Tajawal', 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F1E; --bg2: #0F1730; --surface: #141C33; --surface2: #18213D;
    --ink: #F1F5F9; --ink2: #E2E8F0; --muted: #9AA6BD; --line: rgba(255,255,255,.08);
    --red: #FF5A5F; --red-soft: rgba(255,90,95,.14); --teal: #2DD4BF; --teal-soft: rgba(45,212,191,.13); --amber: #FBBF24; --violet: #A78BFA;
    --glow1: rgba(255,90,95,.22); --glow2: rgba(45,212,191,.18); --glow3: rgba(251,191,36,.12);
    --shadow: 0 1.4cqw 3cqw -1.6cqw rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0F1E; --bg2: #0F1730; --surface: #141C33; --surface2: #18213D;
  --ink: #F1F5F9; --ink2: #E2E8F0; --muted: #9AA6BD; --line: rgba(255,255,255,.08);
  --red: #FF5A5F; --red-soft: rgba(255,90,95,.14); --teal: #2DD4BF; --teal-soft: rgba(45,212,191,.13); --amber: #FBBF24; --violet: #A78BFA;
  --glow1: rgba(255,90,95,.22); --glow2: rgba(45,212,191,.18); --glow3: rgba(251,191,36,.12);
  --shadow: 0 1.4cqw 3cqw -1.6cqw rgba(0,0,0,.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05070F; }
body { font-family: var(--body); color: var(--ink); display: grid; place-items: center; }

.stage {
  position: relative; container-type: size; isolation: isolate;
  width: min(100vw, 177.78vh); height: min(100vh, 56.25vw);
  background: var(--bg); overflow: hidden; transition: background .4s;
}
/* living background: three soft lights drifting + a faint dot grid */
.stage::before, .stage::after { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; }
.stage::before {
  background:
    radial-gradient(32cqw 32cqw at 82% 30%, var(--glow2), transparent 70%),
    radial-gradient(30cqw 30cqw at 55% 88%, var(--glow3), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
.stage::after {
  background-image: radial-gradient(var(--line) 1.2px, transparent 1.3px);
  background-size: 2.4cqw 2.4cqw; inset: 0; opacity: .9;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
@keyframes drift {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-4%,3%,0) rotate(4deg); }
  100% { transform: translate3d(3%,-3%,0) rotate(-3deg); }
}

.slide {
  position: absolute; inset: 0; z-index: 1; padding: 5cqw 6cqw 7cqw;
  display: none; flex-direction: column; justify-content: center; gap: 1.6cqw;
}
.slide.on, .slide.out { display: flex; }
.slide.on { animation: enter .6s var(--ease) both; }
.slide.out { animation: leave .38s ease both; pointer-events: none; }
@keyframes enter { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 6cqw)) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -5cqw)) scale(.98); } }

/* staggered entrance of the slide's parts and list items */
.slide.on > *, .slide.on li, .slide.on .ag {
  animation: rise .6s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .07s);
}
@keyframes rise { from { opacity: 0; transform: translateY(2cqw); } to { opacity: 1; transform: none; } }

h1, h2, h3 { font-family: var(--head); color: var(--ink); margin: 0; line-height: 1.22; }
h1 { font-size: 7.6cqw; letter-spacing: -.02em; }
h2 { font-size: 3.6cqw; }
h3 { font-size: 2cqw; margin-bottom: .8cqw; }
.kicker {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .7cqw;
  font-family: var(--head); font-weight: 700; font-size: 1.4cqw; color: var(--red);
  background: var(--red-soft); border-radius: 999px; padding: .35cqw 1.4cqw;
}
.kicker::before { content: ''; width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--glow1); } 50% { box-shadow: 0 0 0 .7cqw transparent; } }
.lead { font-size: 2.1cqw; line-height: 1.65; margin: 0; color: var(--ink2); max-width: 72cqw; }
.note { font-size: 1.45cqw; color: var(--muted); margin: 0; }
strong, b { color: var(--red); font-weight: 800; }

/* lists */
ol.steps, ol.dots, ol.stations { margin: 0; padding: 0; list-style: none; display: grid; gap: 1cqw; counter-reset: s; }
ol.steps li, ol.stations li {
  counter-increment: s; position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 1.4cqw; padding: 1cqw 1.6cqw; padding-inline-start: 5.4cqw; font-size: 1.85cqw; line-height: 1.5;
  box-shadow: var(--shadow); color: var(--ink2);
}
ol.steps li::before, ol.stations li::before {
  content: counter(s); position: absolute; inset-inline-start: 1.3cqw; top: 50%; transform: translateY(-50%);
  width: 2.9cqw; height: 2.9cqw; border-radius: .9cqw; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red), #FF7A59); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1.6cqw;
}
.lang-ar ol.steps li::before, .lang-ar ol.stations li::before { content: counter(s, arabic-indic); }
ol.dots li { position: relative; padding-inline-start: 2.4cqw; font-size: 1.8cqw; line-height: 1.5; color: var(--ink2); }
ol.dots li::before { content: ''; position: absolute; inset-inline-start: .3cqw; top: .85cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 .35cqw var(--teal-soft); }
.s-steps ol.steps { gap: .8cqw; }
.s-steps ol.steps li { font-size: 1.7cqw; padding-top: .8cqw; padding-bottom: .8cqw; }

.head { display: flex; align-items: center; gap: 2cqw; }
.head .ico, .s-topic .t-ico, .ag img { background: #fff; border-radius: 1.6cqw; padding: .5cqw; box-shadow: var(--shadow); }
.head .ico { width: 8cqw; height: 8cqw; object-fit: contain; }
.head h2 { margin-top: .6cqw; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.8cqw; padding: 1.8cqw 2.2cqw; box-shadow: var(--shadow); }
.card h3 { color: var(--teal); }

/* art: a floating "photo card" that looks deliberate on light and dark */
.cover-art, .side-art {
  background: #fff; border-radius: 2.4cqw; padding: 1cqw; box-shadow: var(--shadow);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-1.2cqw) rotate(1deg); } }

/* cover */
.s-cover { flex-direction: row; align-items: center; justify-content: space-between; gap: 3cqw; }
.cover-txt { display: flex; flex-direction: column; gap: 1.4cqw; max-width: 50cqw; }
.cover-txt .logo { width: 12cqw; filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.15)); }
.cover-txt h1 { background: linear-gradient(100deg, var(--ink) 30%, var(--red) 70%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shine 8s ease-in-out infinite alternate, rise .7s var(--ease) both; }
@keyframes shine { to { background-position: 100% 0; } }
.cover-txt .sub { font-family: var(--head); font-size: 3cqw; color: var(--teal); margin: 0; }
.cover-txt .by { font-size: 1.55cqw; color: var(--muted); margin: 0; line-height: 1.5; }
.cover-art { width: 44cqw; }
.btn-start {
  align-self: flex-start; margin-top: 1cqw; font: 800 2.2cqw var(--head); color: #fff; cursor: pointer;
  background: linear-gradient(120deg, var(--red), #FF7A59); border: 0; border-radius: 999px; padding: 1cqw 3.4cqw;
  box-shadow: 0 1.2cqw 2.4cqw -1cqw var(--glow1); transition: transform .2s var(--ease);
  animation: rise .6s var(--ease) both, beat 2.4s ease-in-out 1.2s infinite;
}
.btn-start:hover { transform: translateY(-.3cqw) scale(1.03); }
@keyframes beat { 0%,100% { box-shadow: 0 0 0 0 var(--glow1); } 50% { box-shadow: 0 0 0 1.4cqw transparent; } }

/* agenda */
.ag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4cqw; margin-top: 1cqw; }
.ag {
  font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 1.6cqw;
  padding: 1.2cqw .8cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; box-shadow: var(--shadow);
}
.ag:hover { transform: translateY(-.5cqw) scale(1.03); border-color: var(--red); }
.ag img { width: 6.2cqw; height: 6.2cqw; object-fit: contain; padding: .3cqw; }
.ag b { font: 800 1.6cqw var(--head); color: var(--red); }
.ag span { font: 700 1.4cqw var(--head); color: var(--ink); text-align: center; line-height: 1.3; }

/* topic opener */
.s-topic { align-items: flex-start; }
.s-topic .big-n {
  position: absolute; inset-inline-end: 3cqw; top: 50%; transform: translateY(-50%);
  font: 800 36cqw/1 var(--head); color: transparent; -webkit-text-stroke: .25cqw var(--line);
  background: linear-gradient(160deg, var(--glow1), var(--glow2)); -webkit-background-clip: text; background-clip: text;
}
.slide.on.s-topic .big-n { animation: bigin 1s var(--ease) both; }
@keyframes bigin { from { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); } to { opacity: 1; transform: translateY(-50%); } }
.s-topic .t-ico { width: 13cqw; height: 13cqw; object-fit: contain; }
.slide.on.s-topic .t-ico { animation: pop .8s var(--ease) both, float 6s ease-in-out .8s infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
.s-topic h2 { font-size: 4.6cqw; max-width: 70cqw; }

/* quiz */
.s-quiz { align-items: center; text-align: center; }
.s-quiz .kicker { align-self: center; color: var(--teal); background: var(--teal-soft); }
.s-quiz .kicker::before { background: var(--teal); }
.s-quiz .q { font-size: 3.8cqw; max-width: 80cqw; }
.s-quiz .hint { font-size: 1.7cqw; color: var(--muted); margin: 0; }
.votes { display: flex; gap: 2cqw; }
.vote {
  font: 800 2.4cqw var(--head); cursor: pointer; border-radius: 999px; padding: .9cqw 3.6cqw;
  background: var(--surface); color: var(--ink); border: .22cqw solid var(--line); box-shadow: var(--shadow);
  transition: transform .2s var(--ease), background .3s, color .3s, opacity .3s;
}
.vote:hover { transform: translateY(-.3cqw); }
.answer { display: none; flex-direction: column; gap: 1.2cqw; align-items: center; max-width: 80cqw; }
.s-quiz.shown .answer { display: flex; }
.s-quiz.shown .answer > * { animation: rise .5s var(--ease) both; }
.s-quiz.shown .answer > *:nth-child(2) { animation-delay: .12s; }
.s-quiz.shown .vote { opacity: .3; }
.s-quiz.shown .vote.right { opacity: 1; color: #fff; background: var(--teal); border-color: var(--teal); animation: win .6s var(--ease); }
@keyframes win { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.why { font: 700 2.3cqw/1.5 var(--head); margin: 0; color: var(--ink); }
.danger { text-align: start; width: min(100%, 64cqw); background: var(--surface); border: 1px solid var(--line); border-inline-start: .6cqw solid var(--red); border-radius: 1.4cqw; padding: 1.2cqw 2cqw; box-shadow: var(--shadow); }
.danger h3 { color: var(--red); font-size: 1.7cqw; }
.danger ol.dots li { font-size: 1.5cqw; }
.danger ol.dots li::before { background: var(--red); box-shadow: 0 0 0 .35cqw var(--red-soft); }

/* video */
.s-video { flex-direction: row; align-items: center; justify-content: space-between; gap: 4cqw; }
.v-side { display: flex; flex-direction: column; gap: 1.2cqw; max-width: 42cqw; }
.v-side h2 { font-size: 4.4cqw; }
.v-side .url { font: 700 1.6cqw var(--head); color: var(--teal); margin: 0; }
.vbox { position: relative; height: 100%; display: flex; align-items: center; }
.vbox::before { content: ''; position: absolute; inset: 6% -6%; border-radius: 3cqw; background: linear-gradient(140deg, var(--red), var(--amber), var(--teal)); filter: blur(3cqw); opacity: .45; z-index: -1; animation: drift 10s ease-in-out infinite alternate; }
.vbox video { height: 100%; max-height: 84cqh; aspect-ratio: 9/16; border-radius: 2cqw; background: #000; box-shadow: var(--shadow); border: .3cqw solid var(--surface); }
.vbox .tag { position: absolute; top: 1.4cqw; inset-inline-start: 1.4cqw; font: 700 1.2cqw var(--head); background: rgba(0,0,0,.65); color: #fff; border-radius: 999px; padding: .2cqw 1cqw; }
video::cue { font-size: 2.2cqw; }

/* hands-on / challenge / qr / end */
.s-practice, .s-challenge, .s-qr { flex-direction: row; align-items: center; justify-content: space-between; gap: 4cqw; }
.s-practice > div, .s-challenge > div, .s-qr > div:first-child { display: flex; flex-direction: column; gap: 1.4cqw; max-width: 56cqw; }
.side-art { max-height: 74cqh; max-width: 32cqw; object-fit: contain; }
ol.stations { grid-template-columns: 1fr 1fr; }
.s-challenge h2 { font-size: 4.4cqw; background: linear-gradient(100deg, var(--red), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-challenge ol.steps li { font-size: 1.75cqw; }
.qr-box { background: #fff; border-radius: 2cqw; padding: 1.6cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; box-shadow: var(--shadow); position: relative; }
.qr-box::after { content: ''; position: absolute; inset: -.6cqw; border-radius: 2.4cqw; border: .3cqw solid var(--teal); opacity: .6; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.97); opacity: .7; } to { transform: scale(1.08); opacity: 0; } }
.qr-box .qr { width: 24cqw; height: 24cqw; }
.qr-box span { font: 700 1.6cqw var(--head); color: #0E9F9A; }
.s-end { align-items: center; text-align: center; }
.s-end .logo { width: 12cqw; }
.end-row { display: flex; align-items: center; gap: 4cqw; }
.end-row .qr { width: 16cqw; height: 16cqw; }
.handles { font: 800 3.4cqw var(--head); color: var(--red); display: flex; flex-direction: column; }
.handles small { font-size: 1.5cqw; color: var(--muted); font-weight: 600; }

/* bar + progress */
.bar {
  position: fixed; bottom: 1.2vh; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px;
  background: rgba(10,15,30,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font: 600 14px var(--body); opacity: .2; transition: opacity .25s;
}
.bar:hover, body.awake .bar { opacity: 1; }
.bar button, .bar a { font: inherit; color: #fff; background: transparent; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.bar button:hover, .bar a:hover { background: rgba(255,255,255,.14); }
.bar [data-go] { font-size: 20px; line-height: 1; }
.count { padding: 0 6px; direction: ltr; white-space: nowrap; }
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: 4; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--amber), var(--teal)); transition: width .5s var(--ease); }

/* phone held upright: the bar wraps, labels shrink */
@media (max-width: 700px), (max-height: 500px) {
  .bar { font-size: 12px; padding: 4px 6px; bottom: 8px; max-width: 96vw; flex-wrap: wrap; justify-content: center; }
  .bar .lbl { display: none; }
}

/* topic menu overlay reuses the agenda slide */
body.menu .s-agenda { display: flex !important; z-index: 3; background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the art keeps floating after its entrance */
.slide.on .cover-art, .slide.on .side-art { animation: rise .7s var(--ease) both, float 6s ease-in-out .7s infinite; }

/* ── Light-mode backdrop (Osama, 25 Oct 2026): heartbeat line, rings, floating hearts — no crosses (his call) ── */
.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco .ecg { position: absolute; left: -2%; right: -2%; width: 104%; top: 58%; height: 14cqw; }
.deco .ecg path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .24;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 6s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes trace { 0% { stroke-dashoffset: 1; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.deco .rings { position: absolute; width: 46cqw; height: 46cqw; right: -14cqw; top: -16cqw; animation: spin 60s linear infinite; }
.deco .rings circle { fill: none; stroke: var(--teal); stroke-width: 1.4; opacity: .18; stroke-dasharray: 6 10; }
@keyframes spin { to { transform: rotate(360deg); } }
.deco .wave { position: absolute; inset-inline-end: -10cqw; bottom: -18cqw; width: 60cqw; height: 40cqw; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow3), transparent); animation: drift 14s ease-in-out infinite alternate; }
.deco .heart { position: absolute; display: block; animation: bob 7s ease-in-out infinite; width: 2.6cqw; height: 2.6cqw; opacity: .2; background: var(--red);
  clip-path: polygon(50% 95%, 3% 45%, 0 25%, 12% 5%, 32% 2%, 50% 18%, 68% 2%, 88% 5%, 100% 25%, 97% 45%); }
.deco .h1 { top: 64%; right: 6%; animation-delay: -3s; }
.deco .h2 { top: 20%; right: 12%; width: 1.8cqw; height: 1.8cqw; background: var(--teal); animation-delay: -6s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.6cqw) rotate(12deg); } }
/* stronger colour wash in light mode so the white is never flat */
:root:not([data-theme="dark"]) .stage { background:
  linear-gradient(135deg, #FFF6F3 0%, #F4F7FB 40%, #ECF8F6 100%); }
/* dark mode stays as Osama liked it: no backdrop shapes */
:root[data-theme="dark"] .deco { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deco { display: none; }
  :root:not([data-theme="light"]) .stage { background: var(--bg); } }

/* practice drill: looping 1-minute compression video + metronome (27 Oct 2026) */
.s-drill { flex-direction: row; align-items: center; justify-content: space-between; gap: 3cqw; }
.drill-side { display: flex; flex-direction: column; gap: 1.2cqw; max-width: 36cqw; }
.drill-side h2 { font-size: 3.2cqw; }
.drill-side ol.steps li { font-size: 1.45cqw; padding-top: .7cqw; padding-bottom: .7cqw; }
.drill-vid { position: relative; flex: 1; display: flex; align-items: center; }
.drill-vid::before { content: ''; position: absolute; inset: 8% -3%; border-radius: 3cqw; background: linear-gradient(140deg, var(--red), var(--amber), var(--teal)); filter: blur(3cqw); opacity: .4; z-index: -1; }
.drill-vid video { width: 100%; aspect-ratio: 16/9; border-radius: 1.8cqw; background: #000; box-shadow: var(--shadow); border: .3cqw solid var(--surface); }
.drill-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw 1.4cqw; margin-top: .4cqw; }
.cycles { font: 800 2cqw var(--head); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3cqw 1.4cqw; box-shadow: var(--shadow); }
.cycles b { color: var(--red); }
.cycles.bump { animation: win .6s var(--ease); }
.rep { font: 700 1.4cqw var(--body); color: var(--muted); display: inline-flex; align-items: center; gap: .5cqw; cursor: pointer; }
.rep input { width: 1.5cqw; height: 1.5cqw; accent-color: var(--teal); }
.metro { font: 700 1.4cqw var(--head); cursor: pointer; border-radius: 999px; padding: .5cqw 1.4cqw; background: var(--surface); color: var(--ink); border: .2cqw solid var(--line); box-shadow: var(--shadow); }
.metro.on { background: var(--teal); color: #fff; border-color: var(--teal); animation: beat 0.545s ease-in-out infinite; }

/* Lahza logo floating faintly in the top-left corner, light and dark (Osama, 27 Oct 2026: in place of the
   drifting red glow). Always on the left, whatever the language. */
.bg-logo { position: absolute; left: 3cqw; top: 3cqw; width: 15cqw; z-index: 0; pointer-events: none;
  opacity: .14; filter: saturate(.9); animation: logofloat 14s ease-in-out infinite; }
:root[data-theme="dark"] .bg-logo { opacity: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-logo { opacity: .2; } }
@keyframes logofloat { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(1.2cqw, 1.6cqw) rotate(3deg); } }

/* Myth-or-fact slides flip to the OPPOSITE theme, so the class feels the change when the question comes
   (Osama, 27 Oct 2026): light deck → dark quiz, dark deck → light quiz. The slide paints its own background. */
.slide.s-quiz {
  --bg: #0A0F1E; --surface: #141C33; --ink: #F1F5F9; --ink2: #E2E8F0; --muted: #9AA6BD; --line: rgba(255,255,255,.1);
  --red: #FF5A5F; --red-soft: rgba(255,90,95,.16); --teal: #2DD4BF; --teal-soft: rgba(45,212,191,.15); --amber: #FBBF24;
  --glow1: rgba(255,90,95,.24); --glow2: rgba(45,212,191,.2); --shadow: 0 1.4cqw 3cqw -1.6cqw rgba(0,0,0,.7);
  color-scheme: dark; color: var(--ink);
  background:
    radial-gradient(40cqw 30cqw at 85% 15%, var(--glow2), transparent 70%),
    radial-gradient(40cqw 30cqw at 15% 90%, var(--glow1), transparent 70%),
    var(--bg);
}
:root[data-theme="dark"] .slide.s-quiz {
  --bg: #F4F7FB; --surface: #FFFFFF; --ink: #0F172A; --ink2: #1E293B; --muted: #5B6474; --line: rgba(15,23,42,.1);
  --red: #E5383B; --red-soft: #FDE8E8; --teal: #0E9F9A; --teal-soft: #DDF5F3; --amber: #F2A11F;
  --glow1: rgba(229,56,59,.18); --glow2: rgba(14,159,154,.2); --shadow: 0 1.4cqw 3cqw -1.8cqw rgba(15,23,42,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .slide.s-quiz {
    --bg: #F4F7FB; --surface: #FFFFFF; --ink: #0F172A; --ink2: #1E293B; --muted: #5B6474; --line: rgba(15,23,42,.1);
    --red: #E5383B; --red-soft: #FDE8E8; --teal: #0E9F9A; --teal-soft: #DDF5F3; --amber: #F2A11F;
    --glow1: rgba(229,56,59,.18); --glow2: rgba(14,159,154,.2); --shadow: 0 1.4cqw 3cqw -1.8cqw rgba(15,23,42,.35);
    color-scheme: light;
  }
}