/* Baikal English — дизайн-система и раскладки.
   Размеры текста на слайдах считаются от размера сцены (cqi/cqh), поэтому один
   и тот же слайд читается и на телефоне, и на проекторе в конце класса. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../fonts/nunito-cyrillic-wght-normal.woff2) format('woff2-variations'), url(../fonts/nunito-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../fonts/nunito-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/nunito-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(../fonts/nunito-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/nunito-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+2113, U+A720-A7FF;
}

/* Andika (SIL) — шрифт для начинающих читателей: I, l и 1 различаются. Им набран текст заданий,
   Nunito остаётся для заголовков и интерфейса (research/05, раздел 3.3). */
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/andika-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/andika-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/andika-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/andika-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --ink: #12314a;
  --ink-2: #33536c;
  --muted: #4a6479;
  --bg: #eaf5fb;
  --paper: #ffffff;
  --lake: #1673b8;
  --lake-d: #0d5891;
  --lake-l: #d9ecf8;
  --deep: #0a3556;
  --turq: #129aab;
  --ice: #e4f3fa;
  --line: #c9e2ef;
  --gold: #f3b33d;
  --gold-d: #c98a12;
  --gold-l: #fff1d2;
  --ok: #1a7f45;
  --ok-l: #dff4e7;
  --ok-line: #7fcc9d;
  --bad: #b3261e;
  --bad-l: #fde6e1;
  --hint: #8a5a00;
  --hint-l: #fff2d6;
  --t0: #1673b8;
  --t1: #b4531a;
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 8px 28px rgba(10, 53, 86, 0.12);
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-text: 'Andika', 'Nunito', 'Segoe UI', system-ui, Arial, sans-serif;
  --scale: 1;
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 17h8V5h10v8h-6V9h-2v6h10V3H6' fill='none' stroke='%231673b8' stroke-width='2.2' stroke-linecap='square'/%3E%3Cpath d='M20 17h8V5h10v8h-6V9h-2v6h10V3H26' fill='none' stroke='%231673b8' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.35;
}
button, input { font: inherit; color: inherit; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- иконки и кнопки ---------- */

.ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.ico svg { width: 100%; height: 100%; }
.ico.big { width: 3.5em; height: 3.5em; color: var(--gold-d); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 48px; padding: 0.5em 1.1em;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.2s, opacity 0.2s;
  user-select: none;
}
.btn:hover { background: #f6fbfe; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-primary { background: var(--lake); border-color: var(--lake-d); color: #fff; box-shadow: 0 4px 0 var(--lake-d); }
.btn-primary:hover { background: #1c80c9; }
.btn-primary:active { box-shadow: 0 1px 0 var(--lake-d); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(22, 115, 184, 0.08); }
.btn-sm { min-height: 40px; padding: 0.35em 0.8em; font-size: 0.92rem; }
.btn-xl { min-height: 60px; padding: 0.6em 1.6em; font-size: 1.25rem; border-radius: 18px; }

.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; flex: none; text-decoration: none;
}
.btn-ico:hover { background: var(--ice); color: var(--lake); }
.btn-ico .ico { width: 24px; height: 24px; }

/* ---------- каркас урока ---------- */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(120% 70% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #eef8fd 0%, #e2f1f9 100%);
}

.bar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px max(8px, env(safe-area-inset-left)) 4px max(8px, env(safe-area-inset-right));
  padding-top: max(4px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 5;
}
.bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px;
  background: var(--ornament) repeat-x; background-size: 24px 12px; opacity: 0.35; pointer-events: none;
}
.bar-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.bar-title b { font-size: 1rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--deep); }
.pos { font-size: 0.85rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.bar-tools { display: flex; gap: 2px; }

.scoreboard { display: flex; gap: 6px; }
.team {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-radius: 999px;
  font-weight: 800; font-size: 0.9rem; border: 2px solid transparent; background: #f2f7fa; max-width: 11rem;
}
.team-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team b { min-width: 2ch; text-align: right; font-size: 1.05rem; }
.team.t0 { color: var(--t0); }
.team.t1 { color: var(--t1); }
.team.turn.t0 { border-color: var(--t0); background: #e3f0fa; }
.team.turn.t1 { border-color: var(--t1); background: #fdeee3; }
.team.bump b { animation: bump 0.4s; }

.stage { position: relative; overflow: hidden; container-type: size; container-name: stage; }

.nav {
  display: flex; align-items: center; gap: 10px;
  padding: 8px max(10px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--line);
}
.nav .btn { min-height: 48px; }
.nav-mid { flex: 1; display: flex; align-items: center; }
.progress { flex: 1; height: 10px; border-radius: 99px; background: var(--ice); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--turq), var(--lake)); transition: width 0.35s; }

/* ---------- слайд ---------- */

.slide {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
  --fs-body: calc(var(--scale) * clamp(16px, 0.9vw + 0.8vh, 30px));
  --fs-q: calc(var(--scale) * clamp(20px, 1.5vw + 1.4vh, 50px));
  --fs-opt: calc(var(--scale) * clamp(18px, 1.2vw + 1.2vh, 42px));
  --fs-title: calc(var(--scale) * clamp(21px, 1.7vw + 1.2vh, 52px));
  --fs-small: calc(var(--scale) * clamp(14px, 0.6vw + 0.7vh, 24px));
  font-size: var(--fs-body);
}
@supports (width: 1cqi) {
  .slide {
    padding: clamp(12px, 2.2cqi, 40px) clamp(14px, 3cqi, 64px) clamp(14px, 2.2cqh, 40px);
    --fs-body: calc(var(--scale) * clamp(16px, 0.95cqi + 0.95cqh, 3.6cqh));
    --fs-q: calc(var(--scale) * clamp(20px, 1.6cqi + 1.75cqh, 6cqh));
    --fs-opt: calc(var(--scale) * clamp(18px, 1.4cqi + 1.55cqh, 5.2cqh));
    --fs-title: calc(var(--scale) * clamp(21px, 1.8cqi + 1.5cqh, 6.2cqh));
    --fs-small: calc(var(--scale) * clamp(14px, 0.7cqi + 0.8cqh, 2.8cqh));
  }
}

.slide.in-r { animation: inR 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slide.in-l { animation: inL 0.36s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slide.out-l { animation: outL 0.36s forwards; pointer-events: none; }
.slide.out-r { animation: outR 0.36s forwards; pointer-events: none; }
@keyframes inR { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
@keyframes inL { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }
@keyframes outL { to { opacity: 0; transform: translateX(-6%); } }
@keyframes outR { to { opacity: 0; transform: translateX(6%); } }

.kicker { margin: 0; font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lake-d); }
.s-head { flex: none; }
.s-title { margin: 0.1em 0 0; font-size: var(--fs-title); font-weight: 900; line-height: 1.12; color: var(--deep); }
.s-sub { margin: 0.3em 0 0; color: var(--ink-2); font-size: var(--fs-body); }
.s-body { flex: 1 1 auto; display: grid; gap: clamp(12px, 2.5cqi, 40px); align-items: center; min-height: 0; }
.s-media { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.s-media img { display: block; width: 100%; height: auto; max-height: 38cqh; object-fit: contain; border-radius: var(--r); box-shadow: var(--shadow); background: #fff; }
.s-media figcaption { font-size: 0.6em; color: var(--muted); margin-top: 6px; }
.s-main { min-width: 0; }
.s-para { margin: 0 0 0.6em; }
.s-list { margin: 0; padding-left: 1.2em; }
.s-list li { margin: 0.25em 0; }
.s-note { margin: 0.8em 0 0; color: var(--muted); font-size: var(--fs-small); }
.s-instr { margin: 0 0 0.6em; color: var(--ink-2); }
.s-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.s-actions .btn { font-size: max(1rem, 0.7em); }

@container stage (orientation: landscape) and (min-width: 760px) {
  .s-body.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .s-body.has-media.story, .s-body.has-media.song { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .s-media img { max-height: 68cqh; }
}

/* шаговое раскрытие */
.step { opacity: 0; transform: translateY(14px); transition: opacity 0.35s, transform 0.35s; }
.step.in { opacity: 1; transform: none; }
.rule-table tr.step { transform: none; }
.rule-table tr.step:not(.in) { opacity: 0.08; }

/* ---------- титульный слайд ---------- */

.s-title-slide { padding: 0 !important; }
.hero { position: relative; flex: 1; display: flex; align-items: flex-end; min-height: 100%; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 53, 86, 0) 35%, rgba(10, 53, 86, 0.55) 100%); pointer-events: none; }
.hero-card {
  position: relative; z-index: 1; margin: clamp(12px, 3cqi, 56px);
  max-width: min(760px, 92cqi);
  background: rgba(255, 255, 255, 0.94); border-radius: 24px; box-shadow: var(--shadow);
  padding: clamp(16px, 2.6cqi, 40px) clamp(18px, 3cqi, 48px);
  border-top: 6px solid var(--gold);
}
.hero-title { margin: 0.1em 0 0.15em; font-size: calc(var(--scale) * clamp(28px, 3cqi + 2.4cqh, 84px)); line-height: 1.02; font-weight: 1000; color: var(--deep); letter-spacing: -0.01em; }
.hero-sub { margin: 0 0 0.6em; font-size: var(--fs-body); color: var(--ink-2); }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0.9em; padding: 0; }
.badges li { padding: 4px 12px; border-radius: 999px; background: var(--ice); color: var(--lake-d); font-weight: 800; font-size: var(--fs-small); }
.hero-card .btn-xl { font-size: calc(var(--scale) * clamp(18px, 1cqi + 1cqh, 30px)); }

/* ---------- раздел ---------- */

.s-section { align-items: center; justify-content: center; text-align: center; }
.section-card { max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.section-img { width: min(46cqh, 70cqi); height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.section-title { margin: 0; font-size: calc(var(--scale) * clamp(28px, 2.6cqi + 2.2cqh, 76px)); font-weight: 1000; color: var(--deep); line-height: 1.05; }
.section-card::after { content: ''; display: block; width: 220px; height: 14px; margin-top: 10px; background: var(--ornament) repeat-x; background-size: 28px 14px; opacity: 0.7; }

/* ---------- реплики: история и диалог ---------- */

.story-log, .chat-log { display: flex; flex-direction: column; gap: clamp(8px, 1.4cqh, 18px); }
.msg { display: flex; align-items: flex-end; gap: 10px; cursor: pointer; max-width: 100%; }
.msg-right { flex-direction: row-reverse; }
.msg-bubble {
  position: relative; background: #fff; border: 2px solid var(--line); border-color: color-mix(in srgb, var(--c) 35%, white); border-radius: 20px 20px 20px 6px;
  padding: 0.45em 0.85em 0.55em; box-shadow: 0 3px 0 var(--line); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 18%, white); min-width: 0;
}
.msg-right .msg-bubble { border-radius: 20px 20px 6px 20px; background: #f4f8fb; background: color-mix(in srgb, var(--c) 9%, white); }
.msg-name { display: block; font-size: 0.62em; font-weight: 900; color: var(--c); text-transform: uppercase; letter-spacing: 0.05em; }
.chat-text { display: block; font-weight: 700; font-size: var(--fs-q); line-height: 1.25; }
.msg-ru { display: block; font-size: 0.62em; color: var(--muted); margin-top: 2px; }
.msg-say { color: var(--lake); opacity: 0.5; align-self: center; }
.msg:hover .msg-say { opacity: 1; }
.s-story .chat-text { font-size: calc(var(--fs-body) * 1.02); }
.s-story .msg-ru { font-size: 0.72em; }
.s-story .story-log { gap: clamp(6px, 1cqh, 14px); }

/* ---------- аватары ---------- */

.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden;
  background: #eef4f8; background: color-mix(in srgb, var(--c) 18%, white); border: 3px solid var(--c);
  font-size: var(--fs-body);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.avatar-fallback { font-weight: 900; color: var(--c); font-size: 1.1em; }
.avatar.sm { width: 2.2em; height: 2.2em; font-size: calc(var(--fs-body) * 0.95); }
.avatar.xl { width: min(22cqh, 34cqi, 340px); height: min(22cqh, 34cqi, 340px); border-width: 5px; }
.avatar.pp { width: 100%; height: 100%; border-radius: 10px; border-width: 0; }
.avatar.opt-avatar { width: 2.6em; height: 2.6em; }

/* ---------- правило-таблица ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: var(--shadow); background: #fff; }
.rule-table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-q) * 0.78); }
@container stage (orientation: landscape) and (min-width: 1000px) {
  .s-rule .s-body:not(.has-media) .s-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 clamp(16px, 2.5cqi, 48px); align-items: start; }
  .s-rule .s-body:not(.has-media) .s-main > .s-para { grid-column: 1 / -1; }
  .s-rule .s-body:not(.has-media) .notes { margin-top: 0; }
}
.rule-table th, .rule-table td { padding: 0.26em 0.7em; text-align: left; border-bottom: 1px solid var(--ice); white-space: nowrap; }
.rule-table thead th { background: var(--deep); color: #fff; font-size: 0.6em; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; white-space: normal; line-height: 1.2; }
.rule-table thead th.hl { background: var(--gold-d); }
.rule-table tbody th { color: var(--muted); font-weight: 800; }
.rule-table td { font-weight: 800; color: var(--lake-d); }
.rule-table td.hl { background: var(--gold-l); color: #8a5a00; }
.rule-table tbody tr { cursor: pointer; }
.rule-table tbody tr:hover td { background: var(--ice); }
.rule-table tbody tr:hover td.hl { background: #ffe7ad; }
.notes { list-style: none; padding: 0; margin: 0.8em 0 0; display: grid; gap: 0.45em; }
.note { display: flex; gap: 0.5em; align-items: flex-start; background: var(--gold-l); border-radius: var(--r-sm); padding: 0.45em 0.7em; font-size: calc(var(--fs-body) * 0.95); }
.note .ico { color: var(--gold-d); margin-top: 0.1em; }

/* ---------- «Запомни»: неверно → верно ---------- */

.tips { display: grid; gap: clamp(8px, 1.6cqh, 18px); }
.tip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.tip-bad, .tip-good { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.8em; border-radius: var(--r-sm); font-weight: 800; font-size: calc(var(--fs-q) * 0.85); }
.tip-bad { background: var(--bad-l); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; }
.tip-bad .ico, .tip-good .ico { text-decoration: none; }
.tip-good { background: var(--ok-l); color: var(--ok); }
.tip-note { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
@container stage (max-width: 560px) { .tip-row { grid-template-columns: 1fr; } }

/* ---------- факты ---------- */

.facts { display: grid; gap: clamp(6px, 1cqh, 12px); }
.fact { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--r); padding: 0.35em 0.7em; box-shadow: 0 3px 0 var(--line); }
.fact-n { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--lake); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.fact-img { width: 4.4em; height: 3.3em; object-fit: cover; border-radius: 10px; flex: none; }
.fact-text { flex: 1; min-width: 0; }
.fact-en { margin: 0; font-size: calc(var(--fs-body) * 1.05); line-height: 1.25; }
.fact-ru { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-small); }

/* ---------- флип-карточки ---------- */

.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 17cqi, 260px), 1fr)); gap: clamp(8px, 1.4cqi, 20px); }
.fcard { perspective: 900px; border: 0; padding: 0; background: none; cursor: pointer; aspect-ratio: 4 / 3; min-height: 100px; }
.fcard-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.5s; transform-style: preserve-3d; }
.fcard.flipped .fcard-inner { transform: rotateY(180deg); }
.fcard-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r); padding: 8px;
  background: #fff; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line);
}
.fcard-back { transform: rotateY(180deg); background: var(--lake); border-color: var(--lake-d); color: #fff; box-shadow: 0 5px 0 var(--lake-d); }
.fcard-t { font-weight: 900; font-size: calc(var(--fs-opt) * 0.95); line-height: 1.1; text-align: center; }
.fcard-sub { font-size: var(--fs-small); opacity: 0.8; text-align: center; }
.fcard-ipa { font-size: var(--fs-small); opacity: 0.9; font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif; }
.fcard-flag { height: 38%; max-height: 70px; width: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.fcard-flag.sm { height: 22%; }
.fcard-img { height: 55%; width: auto; object-fit: contain; }

/* ---------- упражнение ---------- */

.s-ex { gap: clamp(8px, 1.4cqh, 16px); }
.ex-head { flex: none; display: flex; align-items: flex-start; gap: 12px; }
.ex-titles { flex: 1; min-width: 0; }
.ex-count { color: var(--muted); letter-spacing: 0; }
.ex-instr { margin: 0.2em 0 0; display: flex; flex-wrap: wrap; gap: 0 0.6em; align-items: baseline; }
.ex-instr .en { font-weight: 800; color: var(--ink-2); }
.ex-instr .ru { color: var(--muted); font-size: 0.85em; }
.ex-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: #fff; padding: 0; cursor: pointer; }
.dot.cur { border-color: var(--lake); transform: scale(1.25); }
.dot.good { background: var(--ok); border-color: var(--ok); }
.dot.mid { background: var(--gold); border-color: var(--gold-d); }
.dot.miss { background: #f3a79a; border-color: var(--bad); }
.ex-turn { flex: none; }
.turn-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; color: #fff; font-weight: 800; font-size: var(--fs-small); animation: pop 0.35s; }
.turn-badge.t0 { background: var(--t0); }
.turn-badge.t1 { background: var(--t1); }

.ex-body { flex: 1 0 auto; display: flex; }
.ex-body.item-in .ex-item { animation: itemIn 0.32s ease-out; }
@keyframes itemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ex-item { flex: 1; display: grid; gap: clamp(10px, 2.2cqi, 40px); align-items: center; align-content: center; min-height: 0; }
.ex-media { display: flex; justify-content: center; align-items: center; min-height: 0; }
.ex-media > img { display: block; max-width: 100%; max-height: 30cqh; width: auto; height: auto; object-fit: contain; border-radius: var(--r); box-shadow: var(--shadow); background: #fff; }
.ex-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.8cqh, 22px); }
.ex-media > img.img-obj { height: min(24cqh, 240px); width: auto; max-width: 100%; }
.ex-media > img.img-obj[src$='.svg'] { height: min(18cqh, 180px); border-radius: 10px; }
.ex-item.board .ex-main { justify-content: center; }

@container stage (orientation: landscape) and (min-width: 760px) {
  .ex-item.has-media { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
  .ex-media > img { max-height: 58cqh; }
  .ex-media > img.img-obj { height: min(46cqh, 440px); }
  .ex-media > img.img-obj[src$='.svg'] { height: min(34cqh, 320px); }
  .ex-item.has-media .media-guest { flex-direction: column; }
  .ex-media .passport-guest { flex-direction: column; }
  .avatar.xl { width: min(44cqh, 28cqi, 340px); height: min(44cqh, 28cqi, 340px); border-width: 6px; }
  .passport-guest .bubble::before { left: 50%; top: -12px; margin: 0 0 0 -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--line); }
}

.ex-foot { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.ex-actions { display: flex; gap: 8px; margin-left: auto; }
.btn-go { font-size: calc(var(--scale) * clamp(16px, 0.6cqi + 1cqh, 26px)); opacity: 0.55; }
.btn-go.ready { opacity: 1; background: var(--ok); border-color: #1b6e3e; color: #fff; box-shadow: 0 4px 0 #1b6e3e; animation: nudge 1.6s 0.8s 3; }

.feedback { flex: 1 1 260px; min-height: 48px; display: flex; align-items: center; border-radius: 14px; padding: 0 12px; font-size: calc(var(--fs-body) * 0.95); opacity: 0; transition: opacity 0.2s; }
.feedback.show { opacity: 1; animation: fbIn 0.3s; }
.feedback.ok { background: var(--ok-l); color: #17603a; }
.feedback.bad { background: var(--bad-l); color: #8f2616; }
.feedback.hint { background: var(--hint-l); color: #7a4a00; }
.fb-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; }
.fb-line .ico { width: 1.3em; height: 1.3em; }
.fb-line b { font-weight: 900; }
@keyframes fbIn { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* вопрос */
.q { display: flex; flex-direction: column; gap: 6px; }
.q-who { display: flex; align-items: center; gap: 10px; font-weight: 900; color: var(--ink-2); }
.q-row { display: flex; align-items: flex-start; gap: 8px; }
.q-text, .sentence { margin: 0; font-size: var(--fs-q); font-weight: 800; line-height: 1.3; color: var(--deep); }
.q-ru { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.speak { color: var(--lake); background: var(--ice); margin-top: 0.1em; }
.speak:hover { background: var(--lake-l); }

.blank {
  display: inline-block; min-width: 3.2em; padding: 0 0.2em; margin: 0 0.1em;
  border-bottom: 4px dashed var(--lake); text-align: center; color: var(--lake); line-height: 1.1;
}
.blank.filled { border-bottom-style: solid; border-color: var(--ok); color: var(--ok); animation: pop 0.35s; }

/* варианты */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4cqi, 18px); }
.opts.opts-long { grid-template-columns: 1fr; }
.opts.opts-3 { grid-template-columns: 1fr; }
@container stage (min-width: 700px) { .opts.opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opts.opts-media { grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 16cqi, 240px), 1fr)); }
.opt {
  position: relative; display: flex; align-items: center; gap: 0.55em;
  min-height: 56px; padding: 0.4em 0.8em; text-align: left;
  border: 3px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer;
  font-size: var(--fs-opt); font-weight: 800; color: var(--ink);
  box-shadow: 0 5px 0 var(--line);
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.2s, border-color 0.2s;
}
.opt:hover:not(:disabled) { border-color: #9ccbe6; transform: translateY(-2px); box-shadow: 0 7px 0 var(--line); }
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.opt-key {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 8px; background: var(--ice); color: var(--lake); font-size: 0.62em; font-weight: 900;
}
.opt-in { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; }
.opt-t { line-height: 1.15; }
.opt-sub { font-size: 0.55em; color: var(--muted); font-weight: 700; }
.opt-flag { height: 1.6em; width: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2); }
.opt-img { max-height: 22cqh; width: auto; border-radius: 10px; }
.opts-media .opt { flex-direction: column; align-items: stretch; }
.opts-media .opt-key { position: absolute; top: 8px; left: 8px; }
.opt.ok { background: var(--ok-l); border-color: var(--ok); color: #17603a; box-shadow: 0 5px 0 var(--ok-line); animation: pop 0.35s; }
.opt.ok .opt-key { background: var(--ok); color: #fff; }
.opt.shown { border-style: dashed; animation: none; }
.opt.bad { background: var(--bad-l); border-color: #f0a596; color: #a13a2a; box-shadow: none; opacity: 0.75; text-decoration: line-through; }
.opt:disabled { cursor: default; }
.opts.locked .opt:not(.ok):not(.bad) { opacity: 0.55; }

.opts-tf { grid-template-columns: 1fr 1fr; }
.opts-tf .opt { justify-content: center; min-height: 72px; }
.tf-ico { width: 1.3em; height: 1.3em; }
.tf-yes .tf-ico { color: var(--ok); }
.tf-no .tf-ico { color: var(--bad); }

/* банк слов, фишки, пропуски */
.bank { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2cqi, 16px); justify-content: center; min-height: 3em; padding: 10px; border-radius: var(--r); background: rgba(255, 255, 255, 0.55); border: 2px dashed var(--line); }
.bank.locked { opacity: 0.6; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 48px; padding: 0.2em 0.75em; border-radius: 14px;
  background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line);
  font-size: var(--fs-opt); font-weight: 800; cursor: pointer; touch-action: none; user-select: none;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
}
.chip:hover:not(:disabled) { transform: translateY(-2px); }
.chip.used { opacity: 0.25; box-shadow: none; }
.chip.sel { border-color: var(--lake); background: var(--lake-l); transform: translateY(-4px) scale(1.04); box-shadow: 0 8px 0 #9ccbe6; }
.chip.dragging { opacity: 0.3; }
.chip.ok { border-color: var(--ok); background: var(--ok-l); color: #17603a; box-shadow: 0 3px 0 var(--ok-line); }
.chip.bad { border-color: var(--bad); background: var(--bad-l); }
.chip.shown { border-style: dashed; }
.chip-flag { height: 1.1em; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.ghost { position: fixed; z-index: 100; pointer-events: none; margin: 0; box-shadow: 0 14px 30px rgba(10, 53, 86, 0.3); }

.slot {
  display: inline-block; min-width: 3.4em; min-height: 1.3em; padding: 0 0.25em; margin: 0 0.1em;
  border: 0; border-bottom: 4px dashed var(--lake); background: rgba(22, 115, 184, 0.06); border-radius: 8px 8px 0 0;
  font: inherit; color: var(--lake); cursor: pointer; line-height: 1.15; vertical-align: baseline;
}
@media (pointer: coarse) { .slot { min-height: 40px; padding: 0.2em 0.3em; } .word { min-height: 44px; min-width: 44px; } }
.slot.filled { border-bottom-style: solid; }
.slot.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-l); cursor: default; }
.slot.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-l); }
.slot.shown { border-bottom-style: dashed; }

/* напиши */
.type-in {
  font-size: 0.95em; font-weight: 800; color: var(--lake-d); padding: 0.05em 0.35em; margin: 0 0.15em;
  border: 0; border-bottom: 4px solid var(--lake); border-radius: 8px 8px 0 0; background: var(--lake-l);
  min-width: 5ch; max-width: 100%; outline: none;
}
.type-in:focus { background: #fff; box-shadow: 0 0 0 3px var(--gold); }
.type-in.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-l); }
.type-in.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-l); animation: shake 0.45s; }
.type-row { display: flex; justify-content: flex-start; }
.check-btn { font-size: calc(var(--fs-opt) * 0.7); }

/* собери предложение */
.order-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 2.4em; padding: 10px 12px;
  border-radius: var(--r); background: #fff; border: 3px solid var(--line); font-size: var(--fs-opt);
}
.order-line.ok { border-color: var(--ok); background: var(--ok-l); }
.order-line .chip { font-size: 1em; }
.order-end { font-weight: 900; font-size: 1.2em; color: var(--ink-2); margin-left: -4px; }
.order-ru { font-size: var(--fs-body); }

/* найди ошибку */
.mistake-line { display: flex; flex-wrap: wrap; gap: 0.25em; }
.word { font: inherit; font-weight: 800; color: var(--deep); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 0.05em 0.35em; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.word:hover:not(:disabled) { border-color: #9ccbe6; }
.word.bad { background: var(--bad-l); border-color: var(--bad); animation: shake 0.45s; }
.word.found { background: var(--hint-l); border-color: var(--gold-d); text-decoration: line-through wavy var(--bad); }
.word.fixed { background: var(--ok-l); border-color: var(--ok); color: var(--ok); animation: pop 0.4s; }
.word:disabled { cursor: default; }
.fix-ask { margin: 0 0 6px; font-weight: 800; color: var(--ink-2); }

/* послушай */
.listen-wrap { display: flex; justify-content: center; }
.listen-btn {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 1.2em; border-radius: 999px;
  border: 0; background: var(--lake); color: #fff; font-weight: 900; font-size: var(--fs-q); cursor: pointer;
  box-shadow: 0 6px 0 var(--lake-d);
}
.listen-btn .ico { width: 1.3em; height: 1.3em; }
.listen-btn.playing { animation: pulse 1s infinite; }

/* паспорт */
.media-guest { flex-direction: column; gap: 12px; }
.passport-guest { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.bubble { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 0.5em 0.9em; font-weight: 800; font-size: calc(var(--fs-q) * 0.9); box-shadow: 0 4px 0 var(--line); display: flex; align-items: center; gap: 8px; }
.bubble::before { content: ''; position: absolute; left: -12px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-left: 0; border-right-color: var(--line); }
.passport {
  position: relative; border-radius: 16px; overflow: hidden; background:
    repeating-linear-gradient(135deg, rgba(18, 154, 171, 0.06) 0 2px, transparent 2px 9px), #fbfdf6;
  border: 3px solid #b8cfb0; box-shadow: var(--shadow); font-size: calc(var(--fs-body) * 1.05);
}
.pp-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 14px; background: #7a1f2b; color: #f8e6b8; font-weight: 900; letter-spacing: 0.15em; }
.pp-head small { letter-spacing: 0.08em; opacity: 0.8; }
.pp-body { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 12px 14px 16px; align-items: center; }
.pp-photo { width: 4.2em; height: 5.2em; border-radius: 10px; overflow: hidden; background: #e7eee3; border: 2px solid #c6d6bf; }
.pp-fields { display: grid; gap: 4px; }
.pp-row { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr; gap: 8px; align-items: baseline; }
.pp-k { font-size: 0.62em; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7d62; font-weight: 800; }
.pp-v { font-weight: 900; color: #243b1f; display: inline-flex; align-items: center; gap: 6px; }
.pp-flag { height: 1em; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.pp-blank { min-width: 6em; border-bottom: 3px dashed #7a1f2b; min-height: 1.2em; }
.pp-blank.filled { border-bottom-style: solid; color: #0d5891; animation: pop 0.35s; }
.pp-stamp {
  position: absolute; right: 6%; bottom: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 7.2em; height: 7.2em; border-radius: 50%; border: 4px double #1f5fae; color: #1f5fae;
  font-size: 0.8em; line-height: 1.05; opacity: 0; transform: scale(2.2) rotate(-18deg); pointer-events: none;
  mix-blend-mode: multiply;
}
.pp-stamp b { font-size: 1.15em; letter-spacing: 0.06em; }
.pp-stamp small { font-weight: 800; letter-spacing: 0.08em; }
.passport.stamped .pp-stamp { animation: stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
@keyframes stamp { to { opacity: 0.85; transform: scale(1) rotate(-14deg); } }

/* диалог */
.w-chat .chat-log { max-height: none; }
.chat-choices { min-height: 60px; }
.chat-choices .opts { margin-top: 4px; }

/* разложи */
.buckets { display: grid; gap: clamp(8px, 1.4cqi, 18px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buckets.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buckets.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container stage (max-width: 620px) { .buckets.n3, .buckets.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bucket {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; min-height: clamp(110px, 20cqh, 260px);
  border-radius: var(--r); border: 3px dashed var(--bc, var(--line)); background: #f7fbfd; background: color-mix(in srgb, var(--bc, #cfe4f0) 10%, white);
  cursor: pointer; text-align: center; font: inherit; color: inherit; transition: transform 0.15s, background-color 0.15s;
}
.bucket.b0 { --bc: #1673b8; }
.bucket.b1 { --bc: #d7961a; }
.bucket.b2 { --bc: #238a4e; }
.bucket.b3 { --bc: #8b5cf6; }
.bucket.over { transform: scale(1.03); background: #e8f2f8; background: color-mix(in srgb, var(--bc) 22%, white); border-style: solid; }
.bucket-t { font-weight: 900; font-size: calc(var(--fs-opt) * 0.85); color: var(--bc); }
.bucket-sub { font-size: var(--fs-small); color: var(--muted); }
.bucket-zone { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bucket-zone .chip { font-size: calc(var(--fs-opt) * 0.8); min-height: 40px; }
.sort-pool { margin-top: 4px; }

/* соедини пары */
.match-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-weight: 900; color: var(--muted); text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.06em; }
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3cqi, 60px); }
.match-col { display: grid; gap: clamp(6px, 1cqh, 12px); align-content: start; }
.match-item {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0.25em 0.6em;
  border-radius: 14px; border: 3px solid var(--line); background: #fff; box-shadow: 0 4px 0 var(--line);
  font-size: calc(var(--fs-opt) * 0.85); font-weight: 800; cursor: pointer;
}
.match-item .opt-in { flex-direction: row; justify-content: center; gap: 0.5em; }
.match-item.sel { border-color: var(--lake); background: var(--lake-l); transform: scale(1.03); }
.match-item.ok { --h: 150; background: hsl(var(--h) 70% 93%); border-color: hsl(var(--h) 50% 48%); color: hsl(var(--h) 60% 25%); box-shadow: 0 3px 0 hsl(var(--h) 45% 75%); cursor: default; }
.match-item.shown { border-style: dashed; }
.match-item.bad { border-color: var(--bad); background: var(--bad-l); animation: shake 0.45s; }

/* мемори */
.mem-grid { display: grid; gap: clamp(6px, 1.2cqi, 16px); grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 150cqh); margin: 0 auto; }
.mem-grid.n12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mem-grid.n16 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container stage (orientation: landscape) and (min-width: 760px) {
  .mem-grid.n12 { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 190cqh); }
  .mem-grid.n16 { grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(100%, 230cqh); }
}
.mem { perspective: 700px; border: 0; padding: 0; background: none; cursor: pointer; aspect-ratio: 3 / 4; }
.mem-grid.n16 .mem { aspect-ratio: 1; }
@container stage (orientation: landscape) { .mem, .mem-grid.n16 .mem { aspect-ratio: 4 / 3; } }
.mem-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.4s; transform-style: preserve-3d; }
.mem.up .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mem-back { background: linear-gradient(135deg, var(--lake), var(--deep)); box-shadow: 0 4px 0 #062a45; }
.mem-logo { width: 60%; height: 40%; background: var(--ornament) center / contain no-repeat; filter: brightness(0) invert(1); opacity: 0.55; }
.mem-front { transform: rotateY(180deg); background: #fff; border: 3px solid var(--line); font-weight: 900; font-size: calc(var(--fs-opt) * 0.72); padding: 4px; text-align: center; }
.mem-front .opt-in { gap: 2px; }
.mem-front .opt-flag { height: 1.5em; }
.mem.ok .mem-front { background: var(--ok-l); border-color: var(--ok); color: #17603a; }

/* блиц */
.blitz { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.blitz-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.blitz-clock { display: flex; align-items: center; gap: 10px; font-size: calc(var(--fs-title) * 1.2); color: var(--lake); }
.blitz-clock .ico { width: 1.2em; height: 1.2em; }
.blitz-clock small { font-size: 0.4em; color: var(--muted); }
.blitz-rules, .blitz-best, .blitz-team { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.blitz-result { margin: 0; font-size: var(--fs-title); font-weight: 900; }
.blitz-win { margin: 0; font-size: var(--fs-q); font-weight: 900; color: var(--gold-d); }
.blitz-count { font-size: calc(var(--fs-title) * 4); font-weight: 1000; color: var(--lake); text-align: center; animation: pop 0.5s; }
.blitz-count.pop { animation: pop 0.5s; }
.blitz-top { display: flex; align-items: center; gap: 12px; font-size: var(--fs-q); font-weight: 900; }
.blitz-top span { display: inline-flex; align-items: center; gap: 6px; }
.blitz-bar { flex: 1; height: 16px; border-radius: 99px; background: var(--ice); overflow: hidden; }
.blitz-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--bad), var(--gold), var(--ok)); transition: width 0.25s linear; }
.blitz-q { display: flex; flex-direction: column; gap: 12px; }

/* песня */
.song-player { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.song-track { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; }
.song-seek { flex: 1; padding: 10px 0; cursor: pointer; }
.song-bar { height: 10px; border-radius: 99px; background: var(--ice); overflow: hidden; }
.song-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--turq), var(--lake)); }
.song-time { font-weight: 800; color: var(--muted); font-size: var(--fs-small); min-width: 6ch; }
.lyrics { margin-top: 12px; max-height: 44cqh; overflow-y: auto; padding: 6px 4px; border-radius: var(--r); background: rgba(255, 255, 255, 0.6); scroll-behavior: smooth; }
.lyric { margin: 0.25em 0; padding: 0.1em 0.5em; font-weight: 800; font-size: calc(var(--fs-q) * 0.8); color: var(--ink-2); border-radius: 10px; transition: all 0.25s; }
.lyric.chorus { color: var(--lake-d); }
.lyric.now { background: var(--gold-l); color: var(--deep); transform: scale(1.03); transform-origin: left center; }
.lyric.past { opacity: 0.55; }

/* итоги и грамота */
.s-results { align-items: center; }
.results { width: min(100%, 860px); display: flex; flex-direction: column; gap: 14px; }
.cert {
  position: relative; text-align: center; background: #fff; border-radius: 24px; padding: 22px 24px 20px;
  border: 3px solid var(--gold); box-shadow: var(--shadow);
}
.cert::before, .cert::after { content: ''; position: absolute; left: 20px; right: 20px; height: 12px; background: var(--ornament) repeat-x; background-size: 24px 12px; opacity: 0.55; }
.cert::before { top: 8px; }
.cert::after { bottom: 8px; }
.cert-lesson { margin: 4px 0; font-size: var(--fs-title); font-weight: 1000; color: var(--deep); }
.stars { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.stars .star { width: clamp(44px, 7cqh, 80px); height: clamp(44px, 7cqh, 80px); color: #d9e5ec; }
.stars .star svg { fill: currentColor; }
.stars .star.on { color: var(--gold); animation: starIn 0.6s both; }
.stars .star.on:nth-child(2) { animation-delay: 0.25s; }
.stars .star.on:nth-child(3) { animation-delay: 0.5s; }
.cert-score { margin: 4px 0; font-size: var(--fs-q); }
.cert-for, .cert-msg, .cert-blitz, .cert-date { margin: 4px 0; }
.cert-name { color: var(--lake-d); font-size: 1.15em; }
.cert-date { color: var(--muted); font-size: var(--fs-small); }
.cert-teams .team-final { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.team-card { display: flex; flex-direction: column; align-items: center; padding: 12px 22px; border-radius: 18px; background: var(--ice); min-width: 9em; }
.team-card span { font-weight: 800; }
.team-card b { font-size: calc(var(--fs-title) * 1.3); }
.team-card.t0 { color: var(--t0); }
.team-card.t1 { color: var(--t1); }
.team-card.lead { box-shadow: 0 0 0 4px var(--gold); }
.name-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.name-in, .team-in { font-size: 1rem; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); min-width: 12em; background: #fff; }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); }
.res-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 30%) 4.5em; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.7); padding: 6px 12px; border-radius: 12px; }
.res-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.res-bar { height: 10px; border-radius: 99px; background: var(--ice); overflow: hidden; }
.res-bar i { display: block; height: 100%; background: var(--ok); }
.res-n { text-align: right; font-weight: 800; color: var(--muted); }

/* ---------- оверлеи ---------- */

.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10, 53, 86, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade 0.2s; }
.panel { background: #fff; border-radius: 22px; width: min(620px, 100%); max-height: min(88vh, 900px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 8px 18px 18px; }
.panel-head { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; z-index: 1; }
.panel-head h2 { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--deep); }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-item { width: 100%; display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-weight: 700; }
.menu-item:hover { background: var(--ice); }
.menu-item.cur { background: var(--lake-l); }
.mi-n { font-weight: 900; color: var(--muted); }
.mi-k { font-size: 0.8rem; color: var(--turq); font-weight: 800; white-space: nowrap; }
.menu-item.ex .mi-k { color: var(--gold-d); }

.settings { display: grid; gap: 4px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--ice); cursor: pointer; position: relative; }
.set-t { flex: 1; display: flex; flex-direction: column; }
.set-t small { color: var(--muted); font-size: 0.85rem; }
.set-row input[type='checkbox'] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 52px; height: 30px; border-radius: 99px; background: #c9d6de; position: relative; transition: background 0.2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.set-row input:checked + .switch { background: var(--ok); }
.set-row input:checked + .switch::after { transform: translateX(22px); }
.set-row input:focus-visible + .switch { outline: 3px solid var(--gold); outline-offset: 2px; }
.set-scale { cursor: default; }
.scale-ctl { display: flex; align-items: center; gap: 4px; }
.scale-val { min-width: 3.5em; text-align: center; }
.team-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 12px; }
.team-name { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 0.85rem; }
.team-name.t0 { color: var(--t0); }
.team-name.t1 { color: var(--t1); }
.team-in { min-width: 0; width: 100%; }
.kbd-help { font-size: 0.9rem; color: var(--ink-2); padding-top: 8px; }
.kbd-help p { margin: 0 0 4px; }
.kbd-help ul { margin: 0; padding-left: 1.1em; }
kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 3px; background: #fff; font-family: inherit; font-weight: 800; font-size: 0.85em; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(10, 53, 86, 0.25); font-weight: 700;
  width: max-content; max-width: calc(100vw - 24px); animation: fbIn 0.3s;
}

.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.img-missing { min-height: 120px; min-width: 160px; background: repeating-linear-gradient(45deg, var(--ice) 0 10px, #fff 10px 20px) !important; }

/* ---------- анимации ---------- */

.shake { animation: shake 0.45s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 6px 0 var(--lake-d), 0 0 0 0 rgba(22, 115, 184, 0.5); } 50% { box-shadow: 0 6px 0 var(--lake-d), 0 0 0 14px rgba(22, 115, 184, 0); } }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(8deg); } to { transform: scale(1) rotate(0); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- узкие экраны ---------- */

@media (max-width: 560px) {
  .nav .lbl { display: none; }
  .nav .btn { min-width: 56px; padding: 0.5em 0.8em; }
  .pos { display: none; }
  .team { padding: 3px 8px; font-size: 0.8rem; max-width: 7.5rem; }
  .bar-title b { font-size: 0.92rem; }
  .ex-foot { gap: 8px; }
  .feedback { flex-basis: 100%; }
  .feedback:not(.show) { display: none; }
  .ex-actions { width: 100%; justify-content: space-between; }
  .ex-actions .btn-go { flex: 1; }
}
@media (max-width: 420px) {
  .rule-table { font-size: calc(var(--fs-q) * 0.8); }
  .rule-table th, .rule-table td { padding: 0.3em 0.45em; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .bar { padding-top: 2px; padding-bottom: 2px; }
  .bar .btn-ico { width: 40px; height: 40px; }
  .nav { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .nav .btn { min-height: 40px; }
  .bar::after { display: none; }
}
@media (max-width: 400px) {
  .bar-tools .btn-ico { width: 40px; }
  .opts:not(.opts-media):not(.opts-tf) { grid-template-columns: 1fr; }
}
@media (pointer: coarse) { .opt-key { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- печать грамоты ---------- */

@media print {
  body.print-cert .app > :not(.stage), body.print-cert .toast, body.print-cert .confetti { display: none !important; }
  body.print-cert .stage { overflow: visible; }
  body.print-cert .slide { position: static; overflow: visible; }
  body.print-cert .results > :not(.cert) { display: none !important; }
  body.print-cert .cert { box-shadow: none; }
}

/* Текст заданий — Andika: различимые I / l / 1 (местоимение I!) */
.q-text, .sentence, .opt, .chip, .slot, .type-in, .chat-text, .msg-ru, .rule-table td, .rule-table th, .fact-en, .lyric,
.word, .match-item, .mem-front, .fcard-t, .fcard-sub, .bubble, .pp-v, .tip-bad, .tip-good, .s-para, .note, .q-ru, .ex-instr, .blitz-q {
  font-family: var(--font-text);
}
.opt, .chip, .word, .match-item, .mem-front, .fcard-t, .q-text, .sentence, .lyric, .rule-table td, .pp-v { font-weight: 700; }
/* В репликах и фактах выделение должно быть видно: обычный текст 400, ключевые слова — жирные и синие */
.chat-text, .fact-en, .tip-bad, .tip-good { font-weight: 400; }
.chat-text strong, .fact-en strong, .tip-good strong, .q-text strong, .s-para strong, .note strong { font-weight: 700; color: var(--lake-d); }
.tip-good strong { color: inherit; }

/* Пауза: «чёрный экран» для кликера (клавиша . или B) — только ледяной фон и логотип */
.blank-screen { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  background: radial-gradient(120% 90% at 50% 20%, #10456f, #06243b); color: #cfe6f4; cursor: pointer; animation: fade 0.25s; }
.blank-screen img { width: 96px; height: 96px; opacity: 0.9; }
.blank-screen p { margin: 0; font-weight: 800; letter-spacing: 0.08em; }

.res-list li.res-go { cursor: pointer; }
.res-list li.res-go:hover { background: #fff; box-shadow: 0 0 0 2px var(--line); }

/* Хоровой дрилл */
.drill { display: grid; gap: clamp(8px, 1.2cqh, 14px); }
@container stage (min-width: 900px) { .drill.n6, .drill.n8, .drill.n10, .drill.n12 { grid-template-columns: 1fr 1fr; } }
.drill-row {
  display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.8em; border-radius: var(--r); border: 0; text-align: left;
  background: #fff; box-shadow: 0 3px 0 var(--line); cursor: pointer; font: inherit; color: inherit; font-size: var(--fs-q);
}
.s-drill .s-main { margin: auto 0; }
.drill-flag { height: 1.1em; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.drill-q { font-family: var(--font-text); font-weight: 700; color: var(--deep); }
.drill-arrow { color: var(--muted); }
.drill-a { font-family: var(--font-text); font-weight: 700; color: var(--ok); min-width: 5em; border-bottom: 3px dashed transparent; }
.drill-a.step:not(.in) { opacity: 1; transform: none; color: transparent; border-bottom-color: var(--line); }

/* Маршрут и экранное время */
.route-badge { font-size: 0.75rem; font-weight: 800; color: #fff; background: var(--lake); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.screen-timer { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 0.85rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.screen-timer .ico { width: 16px; height: 16px; }
.screen-timer.near { border-color: var(--gold-d); background: var(--gold-l); color: #6b4700; }
.screen-timer.over { border-color: var(--bad); background: var(--bad-l); color: var(--bad); }
.set-route { cursor: default; flex-wrap: wrap; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn.on { background: var(--lake); color: #fff; border-color: var(--lake-d); box-shadow: 0 3px 0 var(--lake-d); }

/* Буквы вариантов совпадают с печатными карточками A/B/C/D: цвет + буква */
.opt:nth-child(1) .opt-key { background: #1673b8; color: #fff; }
.opt:nth-child(2) .opt-key { background: #fff; color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.opt:nth-child(3) .opt-key { background: #f3b33d; color: var(--deep); }
.opt:nth-child(4) .opt-key { background: #1a7f45; color: #fff; }