/* ══════════════════════════════════════════════════════════════════════
   FlexLex — study-mode preview modal
   ----------------------------------------------------------------------
   Two things live here: the modal shell, and a faithful CSS rebuild of the
   app's session chrome (app bar, gradient progress rail, prompt cards,
   chunky buttons, choice tiles) that every mode demo composes from.

   `--m` / `--md` are the active mode's colour and its darker depth. They
   are set per-mode on both the overlay and the .dm root, so a rule can
   reach for the mode colour without knowing which mode it is.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ OVERLAY ══ */
.mx {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* `display: flex` above is an AUTHOR rule, so it beats the UA's
   `[hidden] { display: none }` no matter the specificity — without this the
   closed overlay stays laid over the whole page and, being invisible but
   full-viewport at z-index 100, silently swallows every click on the site. */
.mx[hidden] { display: none; }
/* Belt and braces: an overlay that is not open must never take a pointer
   event, whatever its display ends up being. */
.mx:not(.is-open) { pointer-events: none; }
body.mx-open { overflow: hidden; }

.mx__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 14, 22, .62);
  backdrop-filter: blur(9px) saturate(130%);
  opacity: 0;
  transition: opacity 240ms ease;
}
.mx.is-open .mx__scrim { opacity: 1; }

.mx__panel {
  position: relative;
  width: 100%;
  max-width: 1020px;
  min-width: 0;
  max-height: calc(100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 30px 32px 22px;
  box-shadow: 0 40px 90px -30px rgba(20, 18, 26, .55);
  opacity: 0;
  transform: translateY(22px) scale(.965);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .9, .25, 1.05);
}
.mx.is-open .mx__panel { opacity: 1; transform: none; }

/* A wash of the active mode's colour so the whole sheet takes its tone. */
.mx__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--m) 20%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 100%, color-mix(in srgb, var(--m) 12%, transparent), transparent 70%);
  transition: background 320ms ease;
}
.mx__panel > * { position: relative; }

.mx__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--card-2);
  border: 1px solid var(--card-border);
  color: var(--muted);
  transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.mx__close:hover { color: var(--ink); background: var(--scaffold); transform: rotate(90deg); }
.mx__close .sym { font-size: 22px; }

.mx__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* ── Phone frame ── */
.mx__phone {
  width: 320px;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #3A362C, #17150F);
  box-shadow:
    0 30px 60px -24px color-mix(in srgb, var(--m) 55%, transparent),
    0 18px 40px -18px rgba(20, 18, 26, .5);
  animation: mx-float 7s ease-in-out infinite;
}
:root[data-theme="dark"] .mx__phone { background: linear-gradient(160deg, #38342A, #0B0A07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mx__phone { background: linear-gradient(160deg, #38342A, #0B0A07); }
}
@keyframes mx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-.5deg); }
}
.mx__screen {
  height: 596px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--scaffold);
}

/* ── Copy column ── */
.mx__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--m);
  margin-bottom: 10px;
}
.mx__eyebrow .sym { font-size: 19px; }
.mx__eyebrow b {
  background: var(--m);
  color: #fff;
  font-size: .62rem;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
}
.mx__title {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin-bottom: 10px;
}
.mx__lede { color: var(--muted); font-size: 1rem; line-height: 1.65; margin-bottom: 20px; }
.mx__list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.mx__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
  animation: mx-in 420ms both cubic-bezier(.2, .9, .3, 1);
  animation-delay: var(--d);
}
.mx__list .sym { font-size: 19px; color: var(--m); margin-top: 1px; }
.mx__list b { font-weight: 700; }
@keyframes mx-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mx__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mx__nav { display: flex; align-items: center; gap: 6px; }
.mx__arrow {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--card-2);
  border: 1px solid var(--card-border);
  color: var(--muted);
  transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mx__arrow:hover { color: var(--m); border-color: var(--m); transform: scale(1.06); }
.mx__arrow .sym { font-size: 22px; }
.mx__count {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: .82rem;
  color: var(--muted);
  min-width: 44px;
  text-align: center;
}

/* ── Mode rail ── */
.mx__rail {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--card-border);
}
.mx__dot {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--card-2);
  border: 1px solid var(--card-border);
  color: var(--muted);
  transition: transform var(--t-fast), background var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
.mx__dot .sym { font-size: 21px; }
.mx__dot:hover { transform: translateY(-3px); color: var(--m); }
.mx__dot.on {
  background: var(--m);
  border-color: var(--m);
  color: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--m) 62%, #000);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .mx { padding: 12px; }
  .mx__panel { padding: 24px 20px 18px; max-height: calc(100vh - 24px); }
  .mx__grid { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .mx__copy { max-width: 520px; }
}
@media (max-width: 380px) {
  .mx__phone { width: 292px; }
  .mx__screen { height: 540px; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE SESSION SHELL — session_kit.dart sessionAppBar() + fx_widgets
   GradientProgressBar, rebuilt in CSS.
   ══════════════════════════════════════════════════════════════════════ */
.dm {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--scaffold);
  font-size: 14px;
}
.dm--enter { animation: dm-enter 340ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes dm-enter {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

.dm__bar { display: flex; align-items: center; gap: 9px; padding: 14px 12px 8px; }
.dm__chip {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--m), var(--md));
  flex: none;
}
.dm__chip .sym { font-size: 19px; }
.dm__name {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.02em;
}
.dm__grow { flex: 1; }
.dm__pill {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.dm__hearts {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900; font-size: 13px;
  color: var(--heart);
  margin-left: 7px;
}
.dm__hearts .sym { font-size: 17px; }

/* GradientProgressBar — green → teal → blue, always, whatever the mode. */
.dm__prog {
  height: 11px;
  margin: 4px 14px 2px;
  border-radius: var(--r-pill);
  background: var(--card);
  overflow: hidden;
}
:root[data-theme="dark"] .dm__prog { background: rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dm__prog { background: rgba(255, 255, 255, .12); }
}
.dm__prog i {
  display: block;
  height: 100%;
  width: 1%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #58CC02, #12CDB0, #12B6F3);
  transition: width 320ms cubic-bezier(.2, .8, .3, 1);
}

.dm__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
}
.dm__body--flush { padding: 10px 12px 12px; gap: 8px; }
.dm__row { display: flex; gap: 10px; }
.dm__row--tf { margin-top: 6px; }

/* ── Prompt card — the white/dark surface every mode puts the word on ── */
.pc {
  position: relative;
  background: var(--card);
  border: 2px solid color-mix(in srgb, var(--m) 28%, transparent);
  border-radius: 24px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--md) 40%, transparent);
  animation: dm-swap 260ms ease both;
}
.pc--sm { padding: 20px 18px; border-radius: 20px; }
.pc--spell { padding: 22px 18px 20px; }
@keyframes dm-swap {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.pc__word {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1.2;
  word-break: break-word;
}
.pc__word--alt { color: var(--muted); }
.pc__arrow { color: var(--muted); margin: 6px 0; }
.pc__arrow .sym { font-size: 20px; }

.dm__tts {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--m) 12%, transparent);
  color: var(--m);
}
.dm__tts .sym { font-size: 21px; }

/* ── Answer field — flexInputDecoration() ── */
.dm__field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 46px 12px 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 2px solid var(--card-border);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dm__field.is-focus { border-color: var(--m); }
.dm__field.is-ok {
  border-color: #43A047;
  background: color-mix(in srgb, #43A047 10%, var(--card));
}
.dm__field.is-bad {
  border-color: #E5484D;
  background: color-mix(in srgb, #E5484D 10%, var(--card));
}
.dm__typed { white-space: pre; }
.dm__field:has(.dm__typed:empty)::before {
  /* Each mode carries its own hint text, exactly as the app does:
     "Type the answer" / "Type fast!" / "Spell the word". */
  content: attr(data-ph);
  color: var(--muted);
  opacity: .7;
}
.dm__caret {
  width: 2px;
  height: 19px;
  margin-left: 1px;
  background: var(--m);
  animation: dm-blink 1s steps(1) infinite;
}
@keyframes dm-blink { 50% { opacity: 0; } }
.dm__fb { position: absolute; right: 13px; display: grid; place-items: center; }
.dm__fb .sym { font-size: 22px; }
.dm__field.is-ok .dm__fb { color: #43A047; }
.dm__field.is-bad .dm__fb { color: #E5484D; }
.dm__field.is-ok .dm__fb .sym,
.dm__field.is-bad .dm__fb .sym { animation: dm-pop 420ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes dm-pop { from { transform: scale(0); } to { transform: scale(1); } }

.shake { animation: dm-shake 420ms cubic-bezier(.36, .07, .19, .97) both; }
@keyframes dm-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.dm__correction {
  font-size: 13px;
  font-weight: 700;
  color: var(--m);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.dm__correction.show { opacity: 1; transform: none; }

/* ── ChunkyPress — the app's pressable slab button ── */
.chunky {
  flex: none;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-md);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  background: var(--m);
  box-shadow: 0 4px 0 var(--md);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, opacity var(--t-fast);
}
.dm__row .chunky { flex: 1; }
.chunky .sym { font-size: 21px; }
.chunky:active, .chunky.is-press { transform: translateY(4px); box-shadow: none; }
.chunky--green { background: #43A047; box-shadow: 0 4px 0 #2F7D34; }
.chunky--red { background: #E5484D; box-shadow: 0 4px 0 #C23339; }
.chunky--mode { background: var(--m); box-shadow: 0 4px 0 var(--md); }
.chunky.is-dim { opacity: .4; }

/* ══ 1 · FLASHCARDS ══ */
.fc { flex: 1; min-height: 0; perspective: 1200px; }
.fc__card {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.3, .8, .3, 1);
  cursor: pointer;
}
.fc__card.is-flipped { transform: rotateY(180deg); }
.fc__card.fly-right { transition: transform 260ms ease-in, opacity 260ms ease-in; transform: translateX(120%) rotate(14deg); opacity: 0; }
.fc__card.fly-left  { transition: transform 260ms ease-in, opacity 260ms ease-in; transform: translateX(-120%) rotate(-14deg); opacity: 0; }
.fc__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px;
  text-align: center;
  border-radius: 26px;
  background: var(--card);
  border: 2px solid color-mix(in srgb, var(--m) 28%, transparent);
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--md) 45%, transparent);
}
.fc__back { transform: rotateY(180deg); }
.fc__word {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 29px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.fc__hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══ 3 · CHOICE TILES ══ */
.opts { display: flex; flex-direction: column; gap: 11px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 15px 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1.8px solid var(--card-border);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  transition: transform 90ms ease-out, border-color 160ms, background 160ms, color 160ms;
  animation: mx-in 300ms both;
  animation-delay: var(--d, 0ms);
}
.opt:hover { border-color: var(--m); }
.opt:active, .opt.is-press { transform: scale(.975); }
.opt__ico { display: grid; place-items: center; }
.opt__ico .sym { font-size: 22px; animation: dm-pop 480ms cubic-bezier(.2, 1.6, .4, 1) both; }
.opt.is-ok {
  border-color: #43A047;
  background: color-mix(in srgb, #43A047 10%, var(--card));
  color: #2F7D34;
  animation: dm-spring 620ms cubic-bezier(.2, 1.3, .4, 1) both;
}
.opt.is-ok .opt__ico { color: #43A047; }
.opt.is-bad {
  border-color: #E5484D;
  background: color-mix(in srgb, #E5484D 10%, var(--card));
  color: #C23339;
  animation: dm-shake 480ms cubic-bezier(.36, .07, .19, .97) both;
}
.opt.is-bad .opt__ico { color: #E5484D; }
:root[data-theme="dark"] .opt.is-ok { color: #7BD98A; }
:root[data-theme="dark"] .opt.is-bad { color: #FF8A8A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opt.is-ok { color: #7BD98A; }
  :root:not([data-theme="light"]) .opt.is-bad { color: #FF8A8A; }
}
@keyframes dm-spring {
  0% { transform: scale(1); }
  35% { transform: scale(1.045); }
  70% { transform: scale(.99); }
  100% { transform: scale(1); }
}

/* _SparkleBurst — seven sparks off the trailing check. */
.spark { position: absolute; right: 24px; top: 50%; pointer-events: none; }
.spark i {
  position: absolute;
  width: 5px; height: 5px;
  margin: -2.5px;
  background:
    linear-gradient(#43A047, #43A047) center/100% 1.6px no-repeat,
    linear-gradient(#43A047, #43A047) center/1.6px 100% no-repeat;
  animation: dm-spark 620ms ease-out forwards;
}
.spark i:nth-child(1) { --a: 0deg; }
.spark i:nth-child(2) { --a: 51deg; }
.spark i:nth-child(3) { --a: 103deg; }
.spark i:nth-child(4) { --a: 154deg; }
.spark i:nth-child(5) { --a: 206deg; }
.spark i:nth-child(6) { --a: 257deg; }
.spark i:nth-child(7) { --a: 309deg; }
@keyframes dm-spark {
  from { transform: rotate(var(--a)) translateX(8px); opacity: 1; }
  to   { transform: rotate(var(--a)) translateX(38px); opacity: 0; }
}

/* ══ 4 · TEST ══ */
.tq { text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.tf {
  flex: 1;
  height: 54px;
  border-radius: var(--r-md);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 16px;
  background: var(--card);
  border: 2px solid var(--card-border);
  color: var(--ink);
  transition: transform 90ms, background 180ms, border-color 180ms, color 180ms;
}
.tf--t.is-on { border-color: #43A047; background: color-mix(in srgb, #43A047 12%, var(--card)); color: #2F7D34; }
.tf--f.is-on { border-color: #E5484D; background: color-mix(in srgb, #E5484D 12%, var(--card)); color: #C23339; }
.tf.is-on { animation: dm-spring 560ms cubic-bezier(.2, 1.3, .4, 1) both; }
.tq__verdict {
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 15px;
  opacity: 0;
  transition: opacity var(--t-base);
}
.tq__verdict.show { opacity: 1; }
.tq__verdict.ok { color: #43A047; }

/* Connect: two columns of taps joined by drawn wires. */
.cn { position: relative; flex: 1; min-height: 0; display: flex; gap: 34px; }
.cn__col { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 8px; }
.cn__item {
  padding: 11px 10px;
  border-radius: 13px;
  background: var(--card);
  border: 1.6px solid var(--card-border);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.cn__item.is-on { border-color: var(--m); background: color-mix(in srgb, var(--m) 12%, var(--card)); transform: scale(1.03); }
.cn__item.is-tied { border-color: var(--m); }
.cn__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cn__wire {
  stroke: var(--m);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: cn-draw 380ms ease-out forwards;
}
@keyframes cn-draw { to { stroke-dashoffset: 0; } }

/* ══ 5 · MATCH ══ */
.mg {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}
.mg__t {
  display: grid;
  place-items: center;
  padding: 6px 5px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--card-border);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  overflow: hidden;
  transition: transform 140ms cubic-bezier(.2, .9, .3, 1), opacity 300ms ease,
              border-color 160ms, background 160ms, color 160ms;
  animation: mx-in 320ms both;
  animation-delay: var(--d);
}
.mg__t span { display: block; overflow-wrap: anywhere; }
.mg__t:hover { border-color: var(--m); }
.mg__t.is-sel { border-color: #1E88E5; border-width: 2px; background: color-mix(in srgb, #1E88E5 12%, var(--card)); color: #1E88E5; }
.mg__t.is-ok  { border-color: #43A047; border-width: 2px; background: color-mix(in srgb, #43A047 12%, var(--card)); color: #43A047; }
.mg__t.is-bad { border-color: #E5484D; border-width: 2px; background: color-mix(in srgb, #E5484D 12%, var(--card)); color: #E5484D; animation: dm-shake 400ms both; }
.mg__t.gone { opacity: 0; transform: scale(.5); pointer-events: none; }

/* ══ 6 · RUSH ══ */
.rush__hud { display: flex; align-items: center; gap: 10px; }
.rush__score {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.rush__shields { display: flex; gap: 2px; color: var(--m); }
.rush__shield { font-size: 19px; transition: opacity 220ms, transform 220ms; }
.rush__shield.off { opacity: .26; transform: scale(.86); }

.rush__rail { height: 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.rush__rail i {
  display: block; height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--m);
  transition: width 220ms ease-out, background 220ms;
}
.rush__rail i.hot { background: #FFA000; }
.rush__combo {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  min-height: 13px;
  margin-top: -8px;
}
.rush__combo.hot { color: #FFA000; }

.rush__track { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.rush__zone {
  position: absolute; inset: 0 0 0 52%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #E5484D 14%, transparent));
}
.rush__gate {
  position: absolute; top: 0; bottom: 0; left: 78%;
  width: 2.5px;
  background: repeating-linear-gradient(180deg,
    color-mix(in srgb, #E5484D 75%, transparent) 0 9px, transparent 9px 17px);
}
.rush__card {
  position: absolute;
  top: 14%;
  left: var(--x, -6%);
  max-width: 56%;
  padding: 16px 20px;
  border-radius: 22px;
  background: var(--card);
  border: 2px solid color-mix(in srgb, var(--m) 28%, transparent);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--md) 50%, transparent);
}
.rush__card span {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.02em;
}
.rush__card.hit { animation: rush-hit 300ms ease-out forwards; }
.rush__card.gone { animation: rush-gone 340ms ease-in forwards; }
@keyframes rush-hit  { to { opacity: 0; transform: scale(1.14); } }
@keyframes rush-gone { to { opacity: 0; transform: translateY(26px) rotate(9deg); } }

.rush__pop {
  position: absolute;
  top: 44%; left: 50%;
  transform: translate(-50%, 0);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 19px;
  color: #43A047;
  opacity: 0;
  pointer-events: none;
}
.rush__pop.bad { color: #E5484D; }
.rush__pop.show { animation: rush-pop 800ms ease-out forwards; }
@keyframes rush-pop {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.85); }
  25%  { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

.rush__missed {
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #E5484D 12%, transparent);
  border: 1px solid color-mix(in srgb, #E5484D 42%, transparent);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  opacity: 0;
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  transition: opacity 180ms, max-height 180ms, padding-block 180ms;
}
.rush__missed.show { opacity: 1; max-height: 44px; padding-block: 8px; }
.rush__missed b { font-weight: 900; }

/* ══ 7 · SPELL ══ */
.sp__speak {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--m) 14%, transparent);
  color: var(--m);
}
.sp__speak .sym { font-size: 42px; }
.sp__speak i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--m);
  opacity: 0;
}
.sp__speak.ring i { animation: sp-ring 1s ease-out forwards; }
.sp__speak.ring i:nth-of-type(2) { animation-delay: .28s; }
@keyframes sp-ring {
  from { opacity: .6; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.55); }
}
.sp__label { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 16px; }
.sp__hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--m);
}
.sp__hint .sym { font-size: 18px; }
.sp__hinttext {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--t-base);
}
.sp__hinttext.show { opacity: 1; }

/* ══ 8 · LEARN ══ */
.ph { display: flex; align-items: flex-start; justify-content: center; }
.ph__step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; }
.ph__dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--muted);
  transition: width 250ms, height 250ms, background 250ms, border-color 250ms, color 250ms;
}
.ph__dot .sym { font-size: 17px; }
.ph__lbl { font-size: 10px; font-weight: 500; color: var(--muted); }
.ph__step.done .ph__dot {
  border-color: var(--m);
  color: var(--m);
  background: color-mix(in srgb, var(--m) 9%, transparent);
}
.ph__step.now .ph__dot {
  width: 40px; height: 40px;
  border: 2px solid var(--m);
  color: var(--m);
  background: color-mix(in srgb, var(--m) 13%, transparent);
  animation: ph-pulse 1.6s ease-in-out infinite;
}
.ph__step.now .ph__dot .sym { font-size: 20px; }
.ph__step.now .ph__lbl { color: var(--m); font-weight: 700; }
@keyframes ph-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ph__link {
  width: 24px; height: 2px;
  margin-top: 16px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background 250ms;
}
.ph__link.on { background: var(--m); }
.ph__round {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: -6px;
}
.ph__streak {
  position: absolute;
  top: 2px; right: 2px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--streak) 16%, var(--card));
  color: var(--streak);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  animation: dm-pop 420ms cubic-bezier(.2, 1.5, .4, 1) both;
}
.ph__streak .sym { font-size: 15px; }

/* ══ 9 · STORY ══ */
.dm--story .dm__body { overflow-y: auto; }
.st__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st__badge {
  padding: 3px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--m) 20%, transparent);
  color: var(--m);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 11px;
}
.st__chips { display: flex; gap: 5px; flex-wrap: wrap; }
.st__chip {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--m) 12%, transparent);
  color: var(--m);
  font-size: 11px;
  font-weight: 700;
}
.st__hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: -4px;
}
.st__hint .sym { font-size: 16px; }
.st__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 18px;
}
.st__text { font-size: 14.5px; line-height: 1.9; min-height: 260px; }
.st__w {
  background: color-mix(in srgb, var(--m) 18%, transparent);
  border-bottom: 2px solid var(--m);
  border-radius: 4px;
  padding: 1px 3px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.st__w:hover, .st__w.on { background: var(--m); color: #fff; }

/* ══ REDUCED MOTION ══
   The demos already render a settled frame instead of looping; this stops
   the decorative chrome too. */
@media (prefers-reduced-motion: reduce) {
  .mx__phone { animation: none; }
  .dm__caret { animation: none; }
  .ph__step.now .ph__dot { animation: none; }
  .mx__list li, .opt, .mg__t, .pc, .dm--enter { animation: none; }
}