/* ==========================================================================
   Slide deck. Sizes use --u/--v/--m: viewport units, upgraded to container
   units where supported so the same slide renders correctly in a scaled preview.
   Learners have low vision: English >= ~44px, Russian & cues >= ~24px.
   ========================================================================== */

.deck {
  --u: 1vw; --v: 1vh; --m: 1vmin;
  --ink: #141414; --ru: #2b2b2b; --cue: #c62828;
  --accent: #2f6db5; --accent-ink: #1d4f8c; --bg: #f5f8fc; --plate: #e2ecf8; --soft: #ecf2fa;
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg); color: var(--ink);
  overflow: hidden; container-type: size;
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
@supports (width: 1cqw) { .deck { --u: 1cqw; --v: 1cqh; --m: 1cqmin; } }
.deck.deck-static { position: absolute; inset: auto; left: 0; top: 0; z-index: auto; transform-origin: 0 0; pointer-events: none; }
.deck-preview-host { position: relative; overflow: hidden; border-radius: 12px; background: #eee; }

/* --- decoration ---------------------------------------------------------- */
.deck-motif { position: absolute; inset: 0; pointer-events: none; color: var(--accent); z-index: 0; }
.motif { position: absolute; width: calc(var(--m) * 36); height: calc(var(--m) * 36); opacity: .12; }
.motif-tr { top: 0; right: 0; }
.motif-bl { bottom: 0; left: 0; width: calc(var(--m) * 28); height: calc(var(--m) * 28); opacity: .10; }
.deck.is-title .motif-tr { width: calc(var(--m) * 58); height: calc(var(--m) * 58); opacity: .16; }
.deck.is-title .motif-bl { width: calc(var(--m) * 40); height: calc(var(--m) * 40); opacity: .13; }
.deck.is-teacher .deck-motif { display: none; }

.deck-progress { position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 4; }
.deck-progress i { display: block; height: 100%; width: 0; background: var(--accent); opacity: .7; border-radius: 0 3px 3px 0; transition: width .35s ease; }

/* --- slide frame ----------------------------------------------------------- */
.deck-stage { position: absolute; inset: 0; z-index: 2; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--v) * 6) calc(var(--u) * 6) calc(var(--v) * 12);
  user-select: none; -webkit-user-select: none;
}
.slide.tight { padding-top: calc(var(--v) * 4.5); padding-bottom: calc(var(--v) * 11); }
.slide-in {
  margin: auto; width: 100%; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--v) * 3.2);
}
.slide.tight .slide-in { gap: calc(var(--v) * 2.2); }
.in-next .slide-in { animation: deckInR .42s cubic-bezier(.2, .7, .2, 1) both; }
.in-prev .slide-in { animation: deckInL .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes deckInR { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes deckInL { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .in-next .slide-in, .in-prev .slide-in { animation: none; } }

/* --- the learning text --------------------------------------------------------- */
.phrase {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: calc(var(--v) * 1.6) calc(var(--u) * 2.2); max-width: 100%;
  padding: .12em .45em; border-radius: 18px; cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
@media (hover: hover) { .phrase[data-say]:hover { background: var(--soft); } }
.phrase.speaking, .vcard.speaking, .rrow.speaking { background: var(--soft); box-shadow: 0 0 0 3px var(--accent) inset; }
.w { display: inline-flex; flex-direction: column; align-items: center; }
.en {
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 780; letter-spacing: -.005em; line-height: 1.04; color: var(--ink);
  font-size: clamp(44px, calc(var(--u) * 7.4), 118px);
}
.cue {
  font-weight: 600; color: var(--cue); line-height: 1.1; margin-top: .14em; white-space: nowrap;
  font-size: clamp(24px, calc(var(--u) * 2.9), 46px);
}
.blank {
  display: block; width: 1.9em; height: .9em; margin-top: .06em;
  border: max(3px, .055em) dashed var(--accent); border-radius: .18em; background: var(--soft);
}
.ru {
  font-weight: 500; color: var(--ru); line-height: 1.3; max-width: 32ch; text-wrap: balance;
  font-size: clamp(24px, calc(var(--u) * 2.9), 46px);
}
.ru.ru-sm { font-size: clamp(21px, calc(var(--u) * 2.2), 34px); max-width: 46ch; }
.note { color: #5f5f5f; font-weight: 500; font-size: clamp(19px, calc(var(--u) * 2), 30px); }
.kicker {
  display: inline-block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(14px, calc(var(--u) * 1.35), 21px); color: var(--accent-ink);
  background: var(--soft); border: 2px solid var(--plate); padding: .5em 1.15em; border-radius: 999px;
}
.s-head {
  font-family: 'Rubik', 'Golos Text', sans-serif; font-weight: 700; color: var(--accent-ink);
  font-size: clamp(26px, calc(var(--u) * 2.9), 46px); line-height: 1.1;
}

.lines { display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * 2.2); max-width: 100%; }
.lines.dense { gap: calc(var(--v) * 1.5); }
.lines.dense .en { font-size: clamp(40px, calc(var(--u) * 5.4), 80px); }
.lines.dense .cue { font-size: clamp(22px, calc(var(--u) * 2.35), 35px); }
.lines.dense6 { gap: calc(var(--v) * .9); }
.lines.dense6 .en { font-size: clamp(34px, calc(var(--u) * 3.8), 56px); }
.lines.dense6 .cue { font-size: clamp(20px, calc(var(--u) * 1.95), 29px); }
.lines.dense6 .phrase { padding-top: .04em; padding-bottom: .04em; }

/* --- pictures ------------------------------------------------------------------- */
.vis {
  position: relative; flex: none; display: grid; place-items: center;
  width: clamp(120px, calc(var(--m) * 31), 320px); aspect-ratio: 1;
}
.vis::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--plate); box-shadow: inset 0 0 0 calc(var(--m) * .7) rgba(255, 255, 255, .5);
}
.vis > * { position: relative; }
.vis.sm { width: clamp(96px, calc(var(--m) * 19), 210px); }
.vis.xs { width: clamp(80px, calc(var(--m) * 14), 160px); }
.vis-img { width: 82%; height: 82%; object-fit: contain; display: block; }
.vis-emoji { font-size: calc(var(--m) * 16); line-height: 1; }
.vis.sm .vis-emoji { font-size: calc(var(--m) * 10); }
.vis.is-photo { width: clamp(150px, calc(var(--m) * 42), 460px); aspect-ratio: 4 / 3; }
.vis.is-photo.sm { width: clamp(120px, calc(var(--m) * 28), 320px); }
.vis.is-photo::before { border-radius: 22px; }
.vis-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 calc(var(--m) * .8) #fff, 0 10px 28px -12px rgba(0, 0, 0, .35); }
.vis-swatch { width: 60%; height: 60%; border-radius: 50%; box-shadow: inset 0 -.4em 0 rgba(0, 0, 0, .12), 0 0 0 .25em #fff, 0 6px 16px -6px rgba(0, 0, 0, .3); }
.vis-num { display: flex; flex-direction: column; align-items: center; gap: .08em; color: var(--accent-ink); }
.vis-num b { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: calc(var(--m) * 11); line-height: .95; }
.vis-num i { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--m) * .7); width: calc(var(--m) * 14); }
.vis-num u { width: calc(var(--m) * 2.1); height: calc(var(--m) * 2.1); border-radius: 50%; background: var(--accent); text-decoration: none; }

/* --- title ---------------------------------------------------------------------- */
.s-title .slide-in { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: calc(var(--u) * 4); max-width: 1500px; }
.t-text { flex: 1 1 58%; min-width: 0; }
.t-eyebrow { font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-ink); font-size: clamp(15px, calc(var(--u) * 1.5), 24px); }
.t-num {
  font-family: 'Rubik', sans-serif; font-weight: 800; color: var(--accent); line-height: .88; letter-spacing: -.04em;
  font-size: clamp(96px, calc(var(--u) * 15), 250px); margin: .1em 0 .04em;
}
.t-h { font-family: 'Rubik', sans-serif; font-weight: 700; color: var(--ink); line-height: 1.04; text-wrap: balance; font-size: clamp(40px, calc(var(--u) * 5.8), 96px); }
.t-sub { margin-top: .55em; font-weight: 500; color: #3e3e3e; line-height: 1.3; font-size: clamp(21px, calc(var(--u) * 2.3), 36px); max-width: 30ch; }
.t-art { flex: 0 0 auto; position: relative; width: clamp(240px, calc(var(--m) * 54), 560px); aspect-ratio: 1; }
.t-plate { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--plate); box-shadow: inset 0 0 0 calc(var(--m) * .8) rgba(255, 255, 255, .55), 0 18px 40px -26px rgba(40, 30, 10, .45); }
.t-plate > img, .t-plate > span { width: 80%; height: 80%; object-fit: contain; display: grid; place-items: center; }
.t-plate .vis-emoji { font-size: calc(var(--m) * 13); }
.t-plate .vis-photo { width: 100%; height: 100%; border-radius: 50%; }
.t-plate-0 { width: 62%; aspect-ratio: 1; left: 4%; top: 6%; }
.t-plate-1 { width: 40%; aspect-ratio: 1; right: 0; top: 30%; background: #fff; }
.t-plate-2 { width: 34%; aspect-ratio: 1; left: 30%; bottom: 0; background: var(--soft); }
.t-art.n1 .t-plate-0 { width: 86%; left: 7%; top: 7%; }
@container (max-aspect-ratio: 1/1) {
  .s-title .slide-in { flex-direction: column; text-align: center; }
  .t-sub { margin-left: auto; margin-right: auto; }
  .t-art { width: calc(var(--m) * 70); }
}

/* --- vocabulary ----------------------------------------------------------------- */
.s-vocab .slide-in { gap: calc(var(--v) * 2.6); }
.vgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: calc(var(--m) * 2); width: 100%; max-width: 1450px; }
.vcard {
  appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  background: #fff; border-radius: 22px; padding: calc(var(--m) * 1.6) 8px calc(var(--m) * 1.8);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 26px -16px rgba(40, 30, 10, .35);
  transition: transform .15s, box-shadow .2s;
}
@media (hover: hover) { .vcard:hover { transform: translateY(-2px); } }
.vcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vvis { position: relative; display: grid; place-items: center; width: clamp(64px, calc(var(--m) * 14), 170px); aspect-ratio: 1; margin-bottom: .2em; }
.vvis::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--plate); }
.vvis > * { position: relative; }
.vvis .vis-img { width: 84%; height: 84%; }
.vvis .vis-emoji { font-size: calc(var(--m) * 7.5); }
.vvis .vis-num b { font-size: calc(var(--m) * 5.5); }
.vvis .vis-num i { width: calc(var(--m) * 7); gap: calc(var(--m) * .35); }
.vvis .vis-num u { width: calc(var(--m) * 1.1); height: calc(var(--m) * 1.1); }
.vgrid.rows2 .vvis { width: clamp(56px, calc(var(--m) * 10.5), 130px); }
.vgrid.rows3 .vvis { width: clamp(48px, calc(var(--m) * 7), 90px); }
.ven { font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; font-weight: 780; line-height: 1.05; font-size: clamp(30px, calc(var(--u) * 3.5), 60px); }
.vcue { font-weight: 600; color: var(--cue); font-size: clamp(20px, calc(var(--u) * 2.05), 33px); }
.vru { font-weight: 500; color: #555; font-size: clamp(17px, calc(var(--u) * 1.75), 28px); }
.vgrid.rows3 .ven { font-size: clamp(26px, calc(var(--u) * 2.7), 44px); }

/* --- pattern frame ------------------------------------------------------------- */
.s-frame .en { font-size: clamp(50px, calc(var(--u) * 8.6), 132px); }
.s-frame .cue { font-size: clamp(24px, calc(var(--u) * 3.1), 48px); }
.s-frame .two .en { font-size: clamp(44px, calc(var(--u) * 6.4), 100px); }
.s-frame .two .cue { font-size: clamp(22px, calc(var(--u) * 2.5), 38px); }

/* --- multi / milestone -------------------------------------------------------- */
.milestone {
  display: inline-flex; align-items: center; gap: .4em; font-family: 'Rubik', sans-serif; font-weight: 800;
  color: var(--accent-ink); font-size: clamp(26px, calc(var(--u) * 3.1), 48px);
}
.milestone svg { width: 1.1em; height: 1.1em; color: #e9a91f; }

/* --- practice prompt ------------------------------------------------------------ */
.big-h { font-family: 'Rubik', sans-serif; font-weight: 800; line-height: 1.05; text-wrap: balance; color: var(--ink); font-size: clamp(44px, calc(var(--u) * 6.4), 104px); }
.sub { font-weight: 500; color: #333; line-height: 1.3; font-size: clamp(24px, calc(var(--u) * 3), 48px); max-width: 32ch; text-wrap: balance; }
.reminder { opacity: .72; padding: .6em 1.2em; border-radius: 22px; border: 2px dashed var(--plate); }
.reminder .en { font-size: clamp(32px, calc(var(--u) * 4.4), 64px); font-weight: 700; }
.reminder .cue { font-size: clamp(19px, calc(var(--u) * 2.1), 31px); }

/* --- accumulating build ------------------------------------------------------- */
.build { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--v) * 1.7); max-width: min(94%, 1150px); }
.bline { padding-left: .6em; border-left: 6px solid transparent; text-align: left; }
.bline .phrase { justify-content: flex-start; padding-left: .1em; }
.bline.done .en { font-size: clamp(36px, calc(var(--u) * 4.1), 60px); color: #3b3b3b; font-weight: 700; }
.bline.newl { border-left-color: var(--accent); }
.bline.newl .en { font-size: clamp(44px, calc(var(--u) * 5.6), 80px); }
.bru { font-weight: 500; color: var(--ru); margin-top: .1em; padding-left: .45em; font-size: clamp(22px, calc(var(--u) * 2.5), 38px); }

/* --- dialogue ----------------------------------------------------------------------- */
.dwrap { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--v) * 2.4); max-width: min(96%, 1250px); }
.dline { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.6); text-align: left; }
.dchip {
  flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent);
  font-family: 'Rubik', sans-serif; font-weight: 800; width: clamp(48px, calc(var(--m) * 7.5), 76px); aspect-ratio: 1;
  font-size: clamp(22px, calc(var(--m) * 3.6), 36px); margin-top: .2em; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
}
.dline.spB .dchip { background: #b4532a; }
.dbody { display: flex; flex-direction: column; align-items: flex-start; }
.dbody .phrase { justify-content: flex-start; padding-left: .1em; }
.dbody .en { font-size: clamp(38px, calc(var(--u) * 4.7), 68px); }
.dbody .cue { font-size: clamp(20px, calc(var(--u) * 2.1), 32px); }
.dru { color: #555; font-weight: 500; padding-left: .35em; font-size: clamp(19px, calc(var(--u) * 2), 30px); }

/* --- review checklist --------------------------------------------------------- */
.rvlist { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--v) * 2); max-width: min(94%, 1050px); }
.rrow { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.4); text-align: left; cursor: pointer; padding: .15em .5em .15em .2em; border-radius: 16px; }
.rcheck { flex: none; display: grid; place-items: center; width: clamp(38px, calc(var(--m) * 5.6), 60px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; margin-top: .15em; }
.rcheck svg { width: 62%; height: 62%; }
.rtxt { display: flex; flex-direction: column; }
.ren { font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; font-weight: 780; line-height: 1.12; font-size: clamp(34px, calc(var(--u) * 4.1), 60px); }
.rru { color: #555; font-weight: 500; font-size: clamp(19px, calc(var(--u) * 2), 30px); }
.rvlist.many { gap: calc(var(--v) * 1.3); }
.rvlist.many .ren { font-size: clamp(30px, calc(var(--u) * 3.4), 50px); }
.rvlist.many .rru { font-size: clamp(18px, calc(var(--u) * 1.75), 26px); }

/* --- spotlight word ------------------------------------------------------------- */
.bigword .en { font-size: clamp(72px, calc(var(--u) * 12.5), 200px); }
.bigword .cue { font-size: clamp(32px, calc(var(--u) * 4.4), 66px); }

/* --- teacher notes (hidden from students) ------------------------------------------ */
.s-teacher { background: #fff7e2; }
.s-teacher .slide-in { align-items: stretch; text-align: left; max-width: 1150px; }
.note-card { background: #fffdf6; border: 2px solid #ecd79c; border-radius: 26px; padding: calc(var(--m) * 4) calc(var(--m) * 5); box-shadow: 0 18px 50px -34px rgba(90, 60, 0, .55); }
.note-tag { display: inline-flex; align-items: center; gap: .55em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(12px, calc(var(--u) * 1.05), 16px); color: #7a5b0f; background: #fbebbd; border-radius: 999px; padding: .6em 1.1em; }
.note-tag svg { width: 1.4em; height: 1.4em; }
.note-card h2 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(26px, calc(var(--u) * 2.8), 44px); margin: .55em 0 .5em; line-height: 1.15; }
.note-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; }
.note-card li { position: relative; padding-left: 1.4em; font-weight: 500; line-height: 1.45; color: #262626; font-size: clamp(18px, calc(var(--u) * 1.75), 27px); user-select: text; -webkit-user-select: text; }
.note-card li::before { content: ""; position: absolute; left: .25em; top: .6em; width: .45em; height: .45em; border-radius: 50%; background: #d4a72c; }

/* --- optional-slide badge --------------------------------------------------------- */
.stretch-badge {
  position: absolute; top: calc(var(--v) * 4); right: calc(var(--u) * 3.5); z-index: 3;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a3341c;
  font-size: clamp(14px, calc(var(--u) * 1.35), 20px); background: #fff; border: 2px solid #f2c6b8;
  border-radius: 16px; padding: .55em 1.1em;
}
.stretch-badge small { font-size: .72em; font-weight: 600; letter-spacing: .01em; text-transform: none; color: #8a4a3a; }

/* --- controls ------------------------------------------------------------------- */
.deck-bar {
  position: absolute; left: 50%; bottom: max(14px, calc(var(--v) * 2.4)); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 2px; padding: 6px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, .07); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(30, 20, 0, .32);
  transition: opacity .35s, transform .35s;
}
.deck.idle .deck-bar { opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
.deck.idle { cursor: none; }
.deck-bar button {
  appearance: none; border: 0; background: transparent; color: #1f1f1f; cursor: pointer;
  height: 50px; min-width: 50px; padding: 0 13px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 17px 'Golos Text', system-ui, sans-serif;
}
.deck-bar button:hover { background: rgba(0, 0, 0, .06); }
.deck-bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.deck-bar button:disabled { opacity: .3; cursor: default; background: transparent; }
.deck-bar button.on { background: #fbebbd; color: #6b4e00; }
.deck-bar svg { width: 25px; height: 25px; flex: none; }
.deck-count { min-width: 76px; text-align: center; font: 700 17px 'Golos Text', system-ui, sans-serif; color: #444; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .deck-bar .lbl { display: none; }
  .deck-bar button { height: 48px; min-width: 46px; padding: 0 9px; }
  .deck-count { min-width: 60px; font-size: 16px; }
}
.deck-toast {
  position: absolute; left: 50%; bottom: calc(var(--v) * 2.4 + 76px); transform: translateX(-50%); z-index: 7;
  background: #1c1c1c; color: #fff; font: 600 17px 'Golos Text', system-ui, sans-serif;
  padding: .65em 1.3em; border-radius: 999px; opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
.deck-toast.show { opacity: .94; }