/* =====================================================================
   Interactive Game — kiosk styles (Samsung QM55B-T, vertical / portrait)
   Active panel ~1080 x 1920. Everything scales from --unit.
   ===================================================================== */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Portrait "interactive-TV" stage box. In portrait it is the whole viewport;
     on a wide / landscape window it is a centred 9:16 column (see .stage).
     EVERY size in this file scales from --unit, which is 1px of the 1080-wide
     design mapped onto the real stage width — so the composition auto-arranges
     to any screen and never reads off the raw viewport width. */
  --stage-w: min(100vw, 56.25vh);
  --unit: calc(var(--stage-w) / 1080);             /* 1 design-px */
  --bg: #ffffff;
  --ink: #1c1b1a;
  --ink-soft: #6f6a64;
  --line: #ece7e1;
  --card: #ffffff;
  --radius: calc(28 * var(--unit));
  --shadow-1: 0 calc(2*var(--unit)) calc(14*var(--unit)) rgba(35,25,15,.06);
  --shadow-2: 0 calc(18*var(--unit)) calc(60*var(--unit)) rgba(40,28,15,.14);
  --accent: #b4552d;
  --accent-glow: #f4c9a8;
  --ease: cubic-bezier(.22,.61,.36,1);
  font-family: "Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html,body{ height:100%; background:#e7e2db; color:var(--ink); touch-action:pan-x pan-y; }
body.kiosk{
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Stage & screens ---------- */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:stretch; justify-content:center;
  background:var(--bg); overflow:hidden;
}
/* On a landscape / wide viewport keep the interactive-TV portrait aspect ratio
   (2160 x 3840 = 9:16): full height, centred horizontally, the sides letterboxed. */
@media (min-aspect-ratio: 100/151){
  .stage{
    left:50%; right:auto;
    width: var(--stage-w);
    transform: translateX(-50%);
    box-shadow: 0 0 calc(60*var(--unit)) rgba(0,0,0,.18);
  }
}
.screen{
  position:absolute; inset:0;
  padding: calc(64*var(--unit)) calc(54*var(--unit)) calc(50*var(--unit));
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transform: translateY(calc(26*var(--unit))) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease), visibility .5s;
}
.screen.is-active{ opacity:1; visibility:visible; transform:none; filter:none; }
.screen.is-leaving{ opacity:0; transform: translateY(calc(-22*var(--unit))) scale(.985); }

/* ---------- Landing: full-bleed, no chrome except the language switch ---------- */
.screen--landing{ padding:0; overflow:hidden; }

.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:999px;
  overflow:hidden; background:#fff; box-shadow:var(--shadow-1);
  transition: opacity .35s var(--ease);
}
.screen--landing .lang-toggle{
  position:absolute; z-index:6;
  top: calc(40*var(--unit)); right: calc(40*var(--unit));
  animation: fadeDown .7s .15s var(--ease) both;
}
.lang-toggle.is-hidden{ opacity:0; pointer-events:none; }
.lang-toggle__opt{
  padding: calc(12*var(--unit)) calc(22*var(--unit));
  font-size: calc(18*var(--unit)); font-weight:700; letter-spacing:.12em;
  color:var(--ink-soft); transition: color .3s, background .3s; white-space:nowrap;
}
.lang-toggle__opt.is-on{ color:#fff; background:var(--ink); }

/* ---------- Orbits: big scattered material spheres ----------
   Each theme is placed at a fixed slot (percentage of the screen) and sized
   from --comp, so the whole composition scales with any portrait resolution.
   Discs deliberately bleed past the screen edges; .orbits clips them.
   The curved theme name hugs the arc that faces the centre headline. */
.orbits{
  /* One shared size for every disc — scaled from the stage, not the viewport. */
  --comp: calc(384*var(--unit));
  position:absolute; inset:0; overflow:hidden; z-index:1;
}
.orbit{
  position:absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  width: var(--comp);
  height: var(--comp);
  transform: translate(-50%, -50%);
  cursor:pointer;
}
.orbit__wrap{
  position:relative; width:100%; height:100%;
  animation: orbIn .8s var(--ease) both;
}
/* Each disc drifts on its own vector / speed / phase (set inline by game.js),
   so the composition never pulses in unison. Slow (14–26s), gentle. */
.orbit__float{
  width:100%; height:100%;
  animation: floatDrift var(--float-dur, 18s) ease-in-out var(--float-delay, 0s) infinite alternate;
}
.orbit__disc{
  position:relative; width:100%; height:100%; border-radius:50%;
  background-size:cover; background-position:center;
  box-shadow: 0 calc(var(--comp) * .015) calc(var(--comp) * .11) rgba(40,28,15,.34);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change: transform; isolation:isolate;
}
.orbit__disc::after{           /* subtle inner sheen */
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(120% 90% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
}
/* Halo sits INSIDE .orbit__float, so it stays centred on the disc as it drifts.
   A radial gradient that fades fully to transparent, softly blurred, breathing
   on its own random clock (--glow-dur / --glow-delay from game.js). */
.orbit__glow{
  position:absolute; inset:-42%; border-radius:50%; z-index:-1;
  background: radial-gradient(circle at 50% 50%,
              var(--glow, #f4c9a8) 0%,
              rgba(255,255,255,0) 66%);
  filter: blur(calc(var(--comp) * .09));
  opacity:.5;
  animation: glowPulse var(--glow-dur, 7s) ease-in-out var(--glow-delay, 0s) infinite;
}
/* Theme name set on a circular path around the disc. The SVG overlays the
   disc box 1:1 (viewBox 0 0 100 100) and paints outside its bounds. */
.orbit__ring{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:3;
}
.orbit__ring text{
  fill:var(--ink);
  font-family:"Manrope","Inter",sans-serif;
  font-weight:800; font-size:9.4px; letter-spacing:.9px;
  text-transform:uppercase;
  paint-order:stroke; stroke:var(--bg); stroke-width:2.8px; stroke-linejoin:round;
}
.orbit:active .orbit__disc{ transform: scale(.95); }
.orbit.is-press .orbit__disc{ transform: scale(.9); box-shadow: var(--shadow-1); }
@media (hover:hover){
  .orbit:hover .orbit__disc{
    transform: scale(1.045);
    box-shadow: 0 calc(var(--comp) * .045) calc(var(--comp) * .14) rgba(40,28,15,.34);
  }
}

/* Pick a theme -> the discs scatter away; the chosen one swells and dissolves
   while the full-screen theme sheet flies in behind it. */
.orbits.is-exiting{ pointer-events:none; }
.orbits.is-exiting .orbit{ animation: orbFly .45s var(--ease) forwards; }
.orbits.is-exiting .orbit.is-chosen{ animation: orbChosen .5s var(--ease) forwards; z-index:5; }
@keyframes orbFly{
  to{ opacity:0; transform: translate(-50%, -50%) scale(.12); }
}
@keyframes orbChosen{
  35%{ opacity:1; }
  to{ opacity:0; transform: translate(-50%, -50%) scale(3.1); }
}

/* ---------- Centre headline, sitting among the spheres ---------- */
.orbits-heading{
  position:absolute; z-index:4; pointer-events:none;
  /* Nudged right of centre; both language lines stay centred on each other. */
  left: var(--head-x, 63%); top: var(--head-y, 34%);
  transform: translate(-50%, -50%);
  width: calc(760*var(--unit)); text-align:center;
}
.orbits-heading::before{           /* soft light halo keeps text legible near a disc edge */
  content:""; position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:150%; height:320%; border-radius:50%; z-index:-1;
  background: radial-gradient(closest-side, rgba(255,255,255,.94), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));
}
.orbits-heading h1{
  font-family:"Manrope","Inter",sans-serif; font-weight:800;
  font-size: calc(74*var(--unit)); line-height:1.03;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
  animation: fadeDown .7s .12s var(--ease) both;
}
.orbits-heading p{
  font-size: calc(28*var(--unit)); color:var(--ink-soft);
  letter-spacing:.18em; text-transform:uppercase;
  margin-top: calc(14*var(--unit));
  animation: fadeDown .7s .2s var(--ease) both;
}

/* ---------- Intro: full-screen theme sheet (built for a portrait TV) ---------- */
.screen--intro,.screen--results{ align-items:center; justify-content:center; }

/* The theme sheet takes the whole screen with the accent gradient behind it,
   and flies in (zoom + unblur) as the material discs fly away. */
.screen--intro{
  padding:0;
  background:
    radial-gradient(70% 44% at 84% 6%, var(--accent-glow), transparent 70%),
    radial-gradient(64% 40% at 10% 98%, var(--accent-glow), transparent 72%),
    radial-gradient(135% 95% at 50% -18%, var(--accent-glow), #ffffff 62%);
  transform: translateY(0) scale(.78); filter: blur(14px);
}
.screen--intro.is-active{ transform:none; filter:none; }
.screen--intro.is-leaving{ opacity:0; transform: scale(1.16); filter: blur(16px); }

.intro-card{
  position:relative; width:100%; height:100%; max-width:none;
  background:transparent; border-radius:0; box-shadow:none; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: calc(40*var(--unit));
  padding: calc(96*var(--unit)) calc(72*var(--unit));
  text-align:center;
}
/* Oversized ghost initial of the theme name, sitting behind the copy. */
.intro-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity:.55; transform: translateY(-6%);
}
.results-card{
  position:relative; z-index:1; width:min(94%, calc(1000*var(--unit)));
  background:var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: calc(96*var(--unit)) calc(84*var(--unit));
  text-align:center; overflow:hidden;
}
.intro-glow{
  position:absolute; top:calc(-160*var(--unit)); left:50%; transform:translateX(-50%);
  width: calc(520*var(--unit)); height: calc(520*var(--unit)); border-radius:50%;
  background: var(--accent-glow); filter: blur(calc(70*var(--unit))); opacity:.5;
  animation: glowPulse 7s ease-in-out infinite;
}
.intro-kicker,.results-kicker{
  position:relative; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  font-size: calc(18*var(--unit)); color:var(--accent);
}
.results-kicker{ font-size: calc(26*var(--unit)); }
.intro-kicker{
  z-index:1;
  font-size: calc(30*var(--unit)); letter-spacing:.42em;
  padding: calc(16*var(--unit)) calc(36*var(--unit));
  border:2px solid var(--accent); background:rgba(255,255,255,.5);
  border-radius:999px;
}
.intro-title{
  position:relative; z-index:1; font-family:"Manrope",sans-serif; font-weight:800;
  font-size: calc(158*var(--unit)); letter-spacing:.04em; text-transform:uppercase;
  line-height:1; margin:0;
  color:var(--ink);
  text-shadow: 0 calc(8*var(--unit)) calc(30*var(--unit)) rgba(30,20,10,.14);
}
.intro-title::after{           /* accent underline bar */
  content:""; display:block; width: calc(210*var(--unit)); height: calc(13*var(--unit));
  margin: calc(30*var(--unit)) auto 0; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}
.intro-desc{
  position:relative; z-index:1; color:var(--ink);
  font-size: calc(52*var(--unit)); font-weight:500;
  line-height:1.4; max-width: 26ch; margin:0 auto;
}
.intro-desc strong{ color:var(--accent); }
.intro-meta{
  position:relative; z-index:1; margin:0;
  font-size: calc(30*var(--unit)); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:var(--accent);
  padding: calc(18*var(--unit)) calc(42*var(--unit)); border-radius:999px;
  box-shadow: 0 calc(12*var(--unit)) calc(34*var(--unit)) rgba(30,20,10,.24);
}
.intro-actions{
  position:relative; display:flex; gap: calc(32*var(--unit));
  justify-content:center; margin:0; flex-wrap:wrap;
}
.results-actions{
  position:relative; display:flex; gap: calc(18*var(--unit));
  justify-content:center; margin-top: calc(40*var(--unit)); flex-wrap:wrap;
}
.screen--intro .btn{
  font-size: calc(38*var(--unit));
  padding: calc(32*var(--unit)) calc(68*var(--unit));
}

/* ---------- Buttons ---------- */
.btn{
  border:0; cursor:pointer; border-radius:999px;
  font-family:"Inter",sans-serif; font-weight:700;
  font-size: calc(22*var(--unit)); letter-spacing:.04em;
  padding: calc(20*var(--unit)) calc(40*var(--unit));
  transition: transform .18s var(--ease), box-shadow .25s, background .25s, color .25s;
}
.btn:active{ transform: scale(.96); }
.btn--primary{ background:var(--ink); color:#fff; box-shadow: 0 calc(10*var(--unit)) calc(30*var(--unit)) rgba(0,0,0,.18); }
.btn--primary:active{ box-shadow: var(--shadow-1); }
.btn--ghost{ background:#f4f1ec; color:var(--ink); }
.btn--block{ width:100%; margin-top: calc(26*var(--unit)); }

/* ---------- Quiz ---------- */
.screen--quiz{
  padding-top: calc(56*var(--unit));
  background:
    radial-gradient(90% 40% at 50% -8%, var(--accent-glow), transparent 68%),
    var(--bg);
}
.quiz-topbar{
  display:flex; align-items:center; gap: calc(22*var(--unit));
}
.icon-btn{
  flex:none; width: calc(58*var(--unit)); height: calc(58*var(--unit)); border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  font-size: calc(22*var(--unit)); cursor:pointer; box-shadow:var(--shadow-1);
  transition: transform .18s var(--ease);
}
.icon-btn:active{ transform:scale(.9); }
.progress{ flex:1; height: calc(12*var(--unit)); border-radius:999px; background:#eee7df; overflow:hidden; }
.progress__bar{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-glow));
  transition: width .5s var(--ease);
}
.quiz-count{ font-weight:700; font-size: calc(22*var(--unit)); color:var(--ink-soft); flex:none; }

.quiz-body{
  flex:1; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding: calc(40*var(--unit)) 0; overflow-y:auto;
}
.quiz-body > *{ width:100%; max-width: calc(1480*var(--unit)); margin-left:auto; margin-right:auto; }
.quiz-kicker{
  align-self:center;
  font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  font-size: calc(30*var(--unit)); color:#fff; background:var(--accent);
  padding: calc(12*var(--unit)) calc(30*var(--unit)); border-radius:999px;
  width:auto !important;
  animation: fadeDown .5s var(--ease) both;
}
.quiz-question{
  font-family:"Manrope",sans-serif; font-weight:800;
  font-size: calc(84*var(--unit)); line-height:1.14; margin: calc(34*var(--unit)) 0;
  letter-spacing:.005em;
  animation: fadeDown .55s .04s var(--ease) both;
}
.quiz-desc{ color:var(--ink-soft); font-size: calc(36*var(--unit)); line-height:1.5; margin-bottom: calc(18*var(--unit)); }

.answers{ display:flex; flex-direction:column; gap: calc(26*var(--unit)); margin-top: calc(36*var(--unit)); }
.answer{
  --i:0;
  position:relative;
  display:flex; align-items:center; gap: calc(30*var(--unit));
  text-align:left; width:100%;
  background:#fff; border:2px solid var(--line); border-radius: calc(26*var(--unit));
  padding: calc(40*var(--unit)) calc(46*var(--unit));
  font-size: calc(46*var(--unit)); font-weight:600; color:var(--ink);
  cursor:pointer; box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), border-color .25s, background .25s, box-shadow .25s;
  animation: answerIn .5s var(--ease) both; animation-delay: calc(var(--i) * .07s + .12s);
}
.answer::before{           /* accent rail that lights up on touch/hover */
  content:""; position:absolute; left:0; top:14%; bottom:14%; width: calc(8*var(--unit));
  border-radius:999px; background:var(--accent); opacity:0; transition: opacity .25s;
}
.answer__key{
  flex:none; width: calc(78*var(--unit)); height: calc(78*var(--unit)); border-radius:50%;
  display:grid; place-items:center; font-weight:800;
  background: var(--accent-glow); color:var(--accent);
  font-size: calc(34*var(--unit));
  transition: background .25s, color .25s, transform .25s;
}
.answer:active{ transform: scale(.985); }
@media (hover:hover){
  .answer:hover{ border-color: var(--accent); box-shadow: var(--shadow-2); }
  .answer:hover::before{ opacity:1; }
  .answer:hover .answer__key{ background:var(--accent); color:#fff; transform: scale(1.06); }
}
.answer.is-correct{ background:#eef7ee; border-color:#8fce97; color:#1e5b2a; }
.answer.is-correct .answer__key{ background:#2f9d4d; color:#fff; }
.answer.is-wrong{ background:#fdeeec; border-color:#e6a99c; color:#8a2e1c; }
.answer.is-wrong .answer__key{ background:#d4573f; color:#fff; }
.answer.is-muted{ opacity:.45; }
.answers.is-locked .answer{ cursor:default; }

/* ---------- Feedback: near-full-screen answer sheet that flies in ----------
   Sits over everything, uses the accent gradient, big TV-legible type.
   Toggled with .is-on; .is-leaving plays the fly-out before the next question. */
/* Backdrop: dims + blurs the quiz behind the windowed panel. */
.feedback{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  /* inset on every side: the panel fills the middle of the stage */
  padding: calc(210*var(--unit)) calc(150*var(--unit));
  background: rgba(26,24,22,.44);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity:0; visibility:hidden;
  transition: opacity .42s var(--ease), visibility .42s;
}
.feedback.is-on{ opacity:1; visibility:visible; }
.feedback.is-leaving{ opacity:0; visibility:visible; }

/* The window itself — fills the inset area, never touches the edges. */
.feedback__panel{
  position:relative;
  width:100%;
  max-height:100%;
  overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: calc(28*var(--unit));
  padding: calc(96*var(--unit)) calc(84*var(--unit));
  text-align:center;
  background: radial-gradient(135% 90% at 50% 0%, var(--accent-glow), #ffffff 70%);
  border-radius: calc(38*var(--unit));
  box-shadow: 0 calc(40*var(--unit)) calc(120*var(--unit)) rgba(24,16,8,.4);
  transform: translateY(6%) scale(.92);
  transition: transform .42s var(--ease);
}
.feedback.is-on .feedback__panel{ transform:none; }
.feedback.is-leaving .feedback__panel{ transform: translateY(-7%) scale(.96); }
.feedback__head{ }
.feedback__badge{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size: calc(42*var(--unit)); padding: calc(18*var(--unit)) calc(44*var(--unit));
  border-radius:999px; background:#2f9d4d; color:#fff;
}
.feedback.is-wrong .feedback__badge{ background:#d4573f; }
.feedback__correct{
  margin-top: calc(16*var(--unit)); font-size: calc(52*var(--unit));
  display:flex; flex-direction:column; gap: calc(8*var(--unit));
  max-width: 26ch;
}
.feedback__label{ font-size: calc(26*var(--unit)); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.feedback__expl{
  margin-top: calc(10*var(--unit)); font-size: calc(40*var(--unit)); line-height:1.5;
  color:var(--ink-soft); max-width: 34ch;
}
.feedback .btn{
  margin-top: calc(34*var(--unit));
  font-size: calc(40*var(--unit)); padding: calc(30*var(--unit)) calc(84*var(--unit));
}
.feedback .btn--block{ width:auto; }

/* ---------- Results ---------- */
.results-title{
  position:relative; font-family:"Manrope",sans-serif; font-weight:800;
  font-size: calc(72*var(--unit)); margin: calc(14*var(--unit)) 0 calc(40*var(--unit));
}
.score-ring{ position:relative; width: calc(430*var(--unit)); height: calc(430*var(--unit)); margin: 0 auto; }
.score-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.score-ring__track{ fill:none; stroke:#eee7df; stroke-width:10; }
.score-ring__value{
  fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.score-ring__num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Manrope",sans-serif; font-weight:800; font-size: calc(110*var(--unit));
}
.score-ring__num i{ font-style:normal; font-size: calc(46*var(--unit)); color:var(--ink-soft); margin-left: calc(6*var(--unit)); }
.results-line{ font-size: calc(38*var(--unit)); margin-top: calc(34*var(--unit)); }
.results-verdict{
  font-weight:700; font-size: calc(40*var(--unit)); margin-top: calc(14*var(--unit));
  color:var(--accent);
}
.results-topicstats{
  display:flex; gap: calc(22*var(--unit)); justify-content:center; flex-wrap:wrap;
  margin-top: calc(40*var(--unit));
}
.results-topicstats .stat{
  background:#f7f4ef; border-radius: calc(20*var(--unit));
  padding: calc(24*var(--unit)) calc(34*var(--unit)); min-width: calc(210*var(--unit));
}
.results-topicstats .stat b{ display:block; font-family:"Manrope",sans-serif; font-size: calc(46*var(--unit)); }
.results-topicstats .stat span{ font-size: calc(20*var(--unit)); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

.screen--results .results-actions{ margin-top: calc(52*var(--unit)); gap: calc(26*var(--unit)); }
.screen--results .results-actions .btn{
  font-size: calc(32*var(--unit)); padding: calc(28*var(--unit)) calc(56*var(--unit));
}

/* Confetti covers the whole results screen, not just the card. */
.results-burst{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.results-burst i{
  position:absolute; top:-10%; width: calc(18*var(--unit)); height: calc(30*var(--unit));
  border-radius:2px; opacity:0; animation: confetti 3s ease-in forwards;
}

/* ---------- Toast / idle ---------- */
.toast{
  position:fixed; left:50%; bottom: calc(60*var(--unit)); transform: translate(-50%, calc(40*var(--unit)));
  background:var(--ink); color:#fff; font-weight:600; font-size: calc(20*var(--unit));
  padding: calc(16*var(--unit)) calc(30*var(--unit)); border-radius:999px;
  opacity:0; pointer-events:none; transition: opacity .3s, transform .3s var(--ease);
  z-index:50;
}
.toast.is-on{ opacity:1; transform: translate(-50%,0); }
.idle-veil{ position:fixed; inset:0; background:rgba(255,255,255,0); z-index:40; }

/* ---------- rich text from admin ---------- */
.rich p{ margin: 0 0 .6em; }
.rich p:last-child{ margin-bottom:0; }
.rich strong,.rich b{ font-weight:700; color:var(--ink); }
.rich ul,.rich ol{ margin: .4em 0 .7em 1.3em; }
.rich li{ margin:.2em 0; }
.rich h2{ font-size:1.25em; margin:.4em 0; }
.rich h3{ font-size:1.12em; margin:.4em 0; }
.rich img{ max-width:100%; height:auto; border-radius: calc(14*var(--unit)); margin:.5em 0; }
.rich a{ color:var(--accent); }
.rich blockquote{ border-left: calc(4*var(--unit)) solid var(--accent-glow); padding-left:1em; color:var(--ink-soft); margin:.6em 0; }

/* ---------- keyframes ---------- */
@keyframes fadeDown{ from{ opacity:0; transform: translateY(calc(-14*var(--unit))); } to{ opacity:1; transform:none; } }
@keyframes orbIn{ from{ opacity:0; transform: scale(.6); } to{ opacity:1; transform: scale(1); } }
@keyframes answerIn{ from{ opacity:0; transform: translateY(calc(18*var(--unit))); } to{ opacity:1; transform:none; } }
@keyframes feedbackIn{ from{ opacity:0; transform: translateY(calc(18*var(--unit))) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes floatDrift{
  from{ transform: translate(0, 0) rotate(0); }
  to{ transform: translate(var(--float-x, 0%), var(--float-y, -4%)) rotate(var(--float-r, 0deg)); }
}
@keyframes glowPulse{ 0%,100%{ transform: scale(.9); opacity:.32; } 50%{ transform: scale(1.22); opacity:.72; } }
@keyframes confetti{
  0%{ opacity:1; transform: translateY(0) rotate(0); }
  100%{ opacity:0; transform: translateY(120vh) rotate(680deg); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.08ms !important; }
}