/* Компоненты (design.md §4, §7, эталон docs/mockup.html) */

/* ---------- Кнопки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: var(--r-lg);
  font: 700 .9375rem/1.25rem var(--font-display); letter-spacing: .01em; text-transform: uppercase;
  background: var(--primary); color: var(--on-primary); box-shadow: 0 var(--ledge) 0 var(--primary-ledge);
  transition: transform var(--d-press) var(--ease-out), box-shadow var(--d-press) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(var(--ledge)); box-shadow: 0 0 0 var(--primary-ledge); }
.btn:disabled { background: var(--surface-2); color: var(--text-faint); box-shadow: 0 var(--ledge) 0 var(--surface-ledge); }
.btn--success { background: var(--success); color: var(--on-success); box-shadow: 0 var(--ledge) 0 var(--success-ledge); }
.btn--success:active:not(:disabled) { box-shadow: 0 0 0 var(--success-ledge); }
.btn--oops { background: var(--oops); color: var(--on-oops); box-shadow: 0 var(--ledge) 0 var(--oops-ledge); }
.btn--oops:active:not(:disabled) { box-shadow: 0 0 0 var(--oops-ledge); }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 var(--ledge) 0 var(--accent-ledge); }
.btn--xp { background: var(--xp); color: var(--on-xp); box-shadow: 0 var(--ledge) 0 var(--xp-ledge); }
.btn--ghost {
  background: transparent; color: var(--primary-text); border: 2px solid var(--border);
  box-shadow: 0 var(--ledge-sm) 0 var(--border); min-height: 52px;
}
.btn--ghost:active:not(:disabled) { box-shadow: 0 0 0 var(--border); transform: translateY(var(--ledge-sm)); }
.btn--small { min-height: 44px; width: auto; font-size: .8125rem; padding: 0 14px; }
.btn--text { background: none; box-shadow: none; color: var(--primary-text); min-height: 48px; text-transform: none; font: 600 .9375rem/1.25rem var(--font-body); }
.btn--text:active:not(:disabled) { transform: none; box-shadow: none; opacity: .7; }

.icon-btn {
  width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--text-muted); flex: none;
}
.icon-btn:active { opacity: .7; }
.spk {
  width: 40px; height: 40px; border-radius: 12px; background: var(--primary); color: #fff;
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--primary-ledge); flex: none;
}
.spk:active { transform: translateY(3px); box-shadow: none; }

/* ---------- Верхняя строка главной ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: max(4px, var(--safe-top)) 12px 0; flex: none; }
.chip { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px; border-radius: var(--r-sm); font: 700 .9375rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.chip:active { background: var(--surface); }
.chip--course { gap: 8px; }
.flag { height: 28px; padding: 0 8px; border-radius: 8px; background: var(--primary); color: #fff; display: grid; place-items: center; font: 700 .75rem/1 var(--font-display); box-shadow: 0 3px 0 var(--primary-ledge); }
.chip--course .lvl { font: 600 .8125rem/1 var(--font-body); color: var(--text-muted); }
.chip--streak { color: var(--accent-text); }
.chip--streak.is-off { color: var(--text-faint); }
.chip--freeze { color: var(--primary-text); }
.chip--xp { color: var(--xp-text); }

.dropdown {
  position: absolute; left: 12px; right: 12px; z-index: 30;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 4px 0 var(--surface-ledge), 0 20px 40px -12px rgb(0 0 0 / .5); padding: 16px;
  animation: drop-in var(--d-base) var(--ease-out);
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
.dropdown h3 { font: 700 1rem/1.4 var(--font-display); margin-bottom: 8px; }

/* ---------- Обложка юнита ---------- */
.unit-head {
  position: sticky; top: 0; z-index: 5; margin: 4px var(--screen-pad) 0;
  border-radius: var(--r-xl); background: var(--grad-hero); box-shadow: 0 var(--ledge) 0 #3F25B8;
  display: flex; align-items: stretch; color: #fff;
}
.unit-head.is-locked { background: var(--surface-2); box-shadow: 0 var(--ledge) 0 var(--surface-ledge); color: var(--text-muted); }
.unit-head .txt { flex: 1; padding: 14px 16px; min-width: 0; }
.unit-head small { font: 600 .75rem/1rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.unit-head b { display: block; font: 700 1.125rem/1.5rem var(--font-display); margin-top: 2px; }
.unit-head .guide { width: 64px; display: grid; place-items: center; border-left: 2px solid rgb(255 255 255 / .25); color: inherit; }
.unit-sticky-wrap { position: sticky; top: 0; z-index: 6; background: var(--bg); padding-bottom: 6px; }
.jump-btn { margin: 10px auto 0; }

/* ---------- Тропинка ---------- */
.path { position: relative; margin: 8px 0 24px; overflow-x: clip; }
.path .trail { position: absolute; left: 0; top: 0; pointer-events: none; }
.node {
  position: absolute; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  transform: translateX(-50%); transition: transform var(--d-press);
}
.node:active { transform: translateX(-50%) translateY(6px); box-shadow: none !important; }
.node--done { background: var(--primary); box-shadow: 0 6px 0 var(--primary-ledge); color: #fff; }
.node--gold { background: var(--xp); box-shadow: 0 6px 0 var(--xp-ledge); color: var(--on-xp); }
.node--locked { background: var(--locked); box-shadow: 0 6px 0 var(--surface-ledge); color: var(--text-faint); }
.node--current { background: var(--accent); box-shadow: 0 6px 0 var(--accent-ledge); color: var(--on-accent); }
.node--review.node--current, .node--review.node--done { background: var(--xp); box-shadow: 0 6px 0 var(--xp-ledge); color: var(--on-xp); }
.node--chest, .node--checkpoint { border-radius: 22px; }
.node--chest.is-ready { background: var(--xp); box-shadow: 0 6px 0 var(--xp-ledge); color: var(--on-xp); animation: wiggle 1.6s ease-in-out 3; }
.node--chest.is-opened { background: var(--surface-2); box-shadow: 0 6px 0 var(--surface-ledge); color: var(--text-muted); }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -6deg; } 40% { rotate: 6deg; } 60% { rotate: -3deg; } }
.ring {
  position: absolute; width: 96px; height: 96px; transform: translate(-50%, -12px); border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--p, 0%), var(--surface-2) var(--p, 0%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px); mask: radial-gradient(circle, transparent 41px, #000 42px);
  pointer-events: none;
}
.start-bubble {
  position: absolute; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--border); white-space: nowrap; z-index: 2;
  font: 700 .8125rem/1 var(--font-display); color: var(--accent-text); letter-spacing: .04em; animation: breathe 2.4s ease-in-out 3;
}
.start-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--border); border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
@keyframes breathe { 50% { transform: translateX(-50%) translateY(-5px); } }
.path .mascot-at { position: absolute; width: 96px; height: 96px; pointer-events: none; }

.node-pop {
  position: absolute; z-index: 20; left: var(--screen-pad); right: var(--screen-pad);
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 4px 0 var(--surface-ledge), 0 18px 36px -10px rgb(0 0 0 / .5); padding: 16px;
  animation: drop-in var(--d-base) var(--ease-out);
}
.node-pop h3 { font: 700 1.0625rem/1.4 var(--font-display); }
.node-pop p { color: var(--text-muted); margin: 2px 0 14px; font-size: .9375rem; }
.node-pop.is-current { background: var(--accent); border-color: var(--accent-ledge); color: var(--on-accent); }
.node-pop.is-current p { color: var(--on-accent); opacity: .8; }
.node-pop.is-current .btn { background: #fff; color: var(--accent-ledge); box-shadow: 0 var(--ledge) 0 rgb(0 0 0 / .2); }

.fab {
  position: absolute; right: 16px; z-index: 8; height: 52px; padding: 0 16px; border-radius: var(--r-full);
  display: flex; align-items: center; gap: 8px; font: 700 .875rem/1 var(--font-display);
}
.fab--review { bottom: 12px; background: var(--xp); color: var(--on-xp); box-shadow: 0 4px 0 var(--xp-ledge); }
.fab--back { bottom: 76px; width: 52px; padding: 0; justify-content: center; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--surface-ledge); color: var(--primary-text); border-radius: var(--r-md); }

/* ---------- Нижние вкладки ---------- */
.tabbar { flex: none; display: flex; justify-content: space-around; padding: 6px 8px max(6px, var(--safe-bottom)); border-top: 2px solid var(--border); background: var(--bg); }
.tab { position: relative; width: 96px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-faint); font: 600 .75rem/.875rem var(--font-body); }
.tab .pill { width: 52px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; }
.tab[aria-current="page"] { color: var(--primary-text); }
.tab[aria-current="page"] .pill { background: var(--primary-soft); }
.tab .count { position: absolute; top: 2px; left: 56px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--xp); color: var(--on-xp); font: 700 .6875rem/20px var(--font-display); text-align: center; }

/* ---------- Урок: шапка и прогресс ---------- */
.lesson-top { display: flex; align-items: center; gap: 8px; padding: max(4px, var(--safe-top)) 12px 0 8px; min-height: 56px; flex: none; position: relative; }
.progress { flex: 1; height: 16px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; position: relative; }
.progress i { position: absolute; inset: 0; background: var(--grad-hero); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease-back); }
.progress i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .3); }
.progress--plain i { background: var(--primary); transition-timing-function: var(--ease-out); }
.combo { display: flex; align-items: center; gap: 2px; min-width: 44px; height: 32px; padding: 0 6px; color: var(--accent-text); font: 700 .875rem/1 var(--font-display); }
.combo.bump { animation: pop .3s var(--ease-back); }
.lesson-title-mini { font: 700 .875rem/1 var(--font-display); color: var(--text-muted); }

.lesson-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px var(--screen-pad) 16px; display: flex; flex-direction: column; }
.lesson-body.anim-in { animation: slide-in var(--d-base) var(--ease-out); }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } }
.badge-new { align-self: flex-start; font: 700 .75rem/1 var(--font-display); letter-spacing: .06em; color: var(--accent-text); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.task-h { font: 700 1.25rem/1.625rem var(--font-display); margin-bottom: 16px; }
.lesson-foot { flex: none; padding: 12px var(--screen-pad) max(16px, var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 3; }
.lesson-foot .row2 { display: flex; gap: 10px; }
.lesson-foot .row2 .btn { flex: 1; }

/* ---------- Вопрос-облачко ---------- */
.prompt { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.prompt .mascot { width: 84px; height: 92px; flex: none; }
.bubble { position: relative; flex: 1; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--r-lg); display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.bubble::before { content: ""; position: absolute; left: -9px; bottom: 18px; width: 14px; height: 14px; background: var(--bg); border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: rotate(45deg); }
.bubble .q { font: 600 1.25rem/1.75rem var(--font-body); min-width: 0; overflow-wrap: break-word; }
.bubble .sub { display: block; margin-top: 4px; font: 500 .9375rem/1.375rem var(--font-body); color: var(--text-muted); }
.q-plain { font: 600 1.375rem/1.875rem var(--font-body); margin-bottom: 16px; }

/* подсказки по нажатию на слово */
.gl { border-bottom: 2px dashed var(--text-faint); cursor: pointer; border-radius: 2px; }
.gl:active, .gl.is-open { background: var(--primary-soft); }
.gl.is-new { color: var(--accent-text); border-bottom-color: var(--accent); }
.gloss-pop {
  position: absolute; z-index: 40; max-width: 260px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--surface-ledge), 0 14px 30px -8px rgb(0 0 0 / .5);
  font: 500 .9375rem/1.375rem var(--font-body); animation: drop-in var(--d-fast) var(--ease-out);
}
.gloss-pop div + div { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }

/* ---------- Варианты ответа ---------- */
.options { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left;
  border-radius: var(--r-lg); background: var(--surface); border: 2px solid var(--border); box-shadow: 0 var(--ledge-sm) 0 var(--surface-ledge);
  font: 600 1.0625rem/1.4 var(--font-body); transition: transform var(--d-press);
}
.opt:active:not(:disabled) { transform: translateY(var(--ledge-sm)); box-shadow: none; }
.opt .num { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--border); display: grid; place-items: center; font: 700 .8125rem/1 var(--font-display); color: var(--text-muted); flex: none; }
.opt.is-selected { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 var(--ledge-sm) 0 var(--primary-ledge); }
.opt.is-selected .num { background: var(--primary); border-color: var(--primary); color: #fff; }
.opt.is-correct { border-color: var(--success); }
.opt.is-correct .num { background: var(--success); border-color: var(--success); color: var(--on-success); }
.opt.is-wrong { border-color: var(--oops); }
.opt.is-wrong .num { background: var(--oops); border-color: var(--oops); color: var(--on-oops); }
.opt.is-dim { opacity: .5; }

/* ---------- Плитки ---------- */
.answer-lane { min-height: 116px; background: repeating-linear-gradient(to bottom, transparent 0 54px, var(--border) 54px 56px); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding-top: 4px; }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; padding-bottom: 8px; }
.tile {
  height: 48px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--border);
  box-shadow: 0 var(--ledge-sm) 0 var(--surface-ledge); font: 600 1.125rem/1 var(--font-body); display: flex; align-items: center;
  transition: transform var(--d-press); white-space: nowrap;
}
.tile:active:not(:disabled) { transform: translateY(var(--ledge-sm)); box-shadow: none; }
.tile.is-ghost { background: var(--surface-2); border-color: transparent; box-shadow: none; color: transparent; pointer-events: none; }
.tile.is-correct { border-color: var(--success); }
.tile.is-wrong { border-color: var(--oops); animation: shake .2s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- match ---------- */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: auto 0; } /* карточки по центру экрана */
.match .col { display: flex; flex-direction: column; gap: 12px; }
.match .tile { width: 100%; height: 60px; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; font-size: 1rem; padding: 0 8px; }
.match .tile.is-selected { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 var(--ledge-sm) 0 var(--primary-ledge); }
.match .tile.is-matched { border-color: var(--success); opacity: .35; animation: flash .4s; }
.match .tile.is-wrong { border-color: var(--oops); }
@keyframes flash { 0% { background: var(--success-bg); } }

/* ---------- listen ---------- */
.listen-btns { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 4px 0 20px; }
.listen-big { width: 96px; height: 96px; border-radius: 28px; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 5px 0 var(--primary-ledge); }
.listen-big:active { transform: translateY(5px); box-shadow: none; }
.listen-slow { width: 56px; height: 56px; border-radius: 18px; background: var(--surface); border: 2px solid var(--border); color: var(--primary-text); display: grid; place-items: center; box-shadow: 0 4px 0 var(--surface-ledge); }
.listen-slow:active { transform: translateY(4px); box-shadow: none; }
.reveal { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); }
.reveal b { color: var(--text); font-weight: 600; }

/* ---------- type ---------- */
.type-input {
  width: 100%; min-height: 110px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface);
  border: 2px solid var(--border); resize: none; font: 500 1.125rem/1.5 var(--font-body); color: var(--text);
}
.type-input:focus { outline: none; border-color: var(--primary); }
.type-input:disabled { opacity: .85; }
.hint-line { margin-top: 10px; color: var(--text-muted); font-size: .9375rem; }

/* ---------- gap ---------- */
.gap-text { font: 600 1.375rem/2.4rem var(--font-body); margin: 8px 0 6px; }
.gap-slot { display: inline-block; min-width: 88px; padding: 0 8px; border-bottom: 3px solid var(--primary-text); text-align: center; color: var(--primary-text); line-height: 2rem; }
.gap-slot.is-correct { border-color: var(--success); color: var(--success-text); }
.gap-slot.is-wrong { border-color: var(--oops); color: var(--oops-text); }
.gap-input { width: 140px; height: 44px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); font: 600 1.25rem/1 var(--font-body); color: var(--text); text-align: center; vertical-align: middle; }
.gap-input:focus { outline: none; border-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: auto; padding-top: 16px; }

/* ---------- speak ---------- */
.mic { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 5px 0 var(--accent-ledge); margin: 16px auto 8px; position: relative; }
.mic:active { transform: translateY(5px); box-shadow: none; }
.mic.is-live::before, .mic.is-live::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--accent); animation: ripple 1.4s infinite; }
.mic.is-live::after { animation-delay: .7s; }
@keyframes ripple { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
.heard { min-height: 28px; text-align: center; font: 600 1.0625rem/1.5 var(--font-body); color: var(--text-muted); }
.heard .ok { color: var(--success-text); }
.heard .miss { color: var(--oops-text); text-decoration: underline wavy; }
.self-check { display: flex; gap: 10px; margin-top: 12px; }
.self-check .btn { flex: 1; min-width: 0; padding: 0 10px; }

/* ---------- dialog ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; font: 500 1.0625rem/1.4 var(--font-body); animation: rise .25s var(--ease-out); }
.msg .ru { display: block; font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.msg-them { align-self: flex-start; background: var(--surface); border: 1.5px solid var(--border); border-bottom-left-radius: 6px; }
.msg-me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 6px; }
.msg-typing { align-self: flex-end; background: var(--surface-2); color: var(--text-faint); border-bottom-right-radius: 6px; letter-spacing: .2em; }
.who { display: flex; align-items: center; gap: 8px; font: 600 .875rem/1 var(--font-body); color: var(--text-muted); margin-bottom: 6px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-hero); color: #fff; display: grid; place-items: center; font: 700 .75rem/1 var(--font-display); }

/* ---------- Плашка «верно/неверно» ---------- */
.sheet-bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-float); animation: sheet-in .26s var(--ease-back) both; }
.sheet-bg.ok { background: var(--success-bg); }
.sheet-bg.bad { background: var(--oops-bg); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet-content { padding: 4px 0 2px; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; animation: pop .3s var(--ease-back) .1s both; }
.ok .sheet-ico, .sheet-content.ok .sheet-ico { background: var(--success); color: var(--on-success); }
.sheet-content.bad .sheet-ico { background: var(--oops); color: var(--on-oops); }
@keyframes pop { from { transform: scale(.6); } }
.sheet-content h2 { flex: 1; font: 700 1.25rem/1.625rem var(--font-display); }
.sheet-content.ok h2, .sheet-content.ok p, .sheet-content.ok .icon-btn { color: var(--success-text); }
.sheet-content.bad h2, .sheet-content.bad p, .sheet-content.bad .icon-btn { color: var(--oops-text); }
.sheet-content p { margin: 6px 0 0 52px; font: 500 1rem/1.5rem var(--font-body); }
.sheet-content p.answer-line { font-weight: 700; font-size: 1.0625rem; }
.sheet-content p.mascot-line { font-size: .875rem; opacity: .85; margin-top: 8px; }
.sheet-content mark { background: var(--xp); color: var(--on-xp); border-radius: 3px; padding: 0 1px; }

/* баннер комбо */
.combo-banner {
  position: absolute; left: 50%; top: 70px; z-index: 25; transform: translateX(-50%);
  padding: 10px 20px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  font: 800 1.125rem/1 var(--font-display); letter-spacing: .03em; box-shadow: 0 4px 0 var(--accent-ledge);
  animation: banner 1.2s var(--ease-out) forwards; white-space: nowrap; pointer-events: none;
}
@keyframes banner { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15% { opacity: 1; transform: translateX(-50%) scale(1.08); } 25% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-12px); } }

/* ---------- Тост, модалка ---------- */
.toast {
  position: absolute; left: 16px; right: 16px; top: calc(max(4px, var(--safe-top)) + 60px); z-index: 60; pointer-events: none;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1.5px solid var(--border);
  font: 500 .9375rem/1.4 var(--font-body); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .5); animation: drop-in var(--d-base) var(--ease-out);
}
.modal-scrim { position: absolute; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: flex-end; animation: fade var(--d-fast); }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-height: 88%; overflow-y: auto; background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 20px var(--screen-pad) max(20px, var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px;
  animation: sheet-in .26s var(--ease-out);
}
.modal h2 { font: 700 1.25rem/1.6rem var(--font-display); }
.modal textarea { width: 100%; min-height: 96px; padding: 12px; border-radius: var(--r-md); border: 2px solid var(--border); background: var(--surface); color: var(--text); resize: vertical; }

/* ---------- Карточки ---------- */
.card { background: var(--surface); border: 1.5px solid var(--border); box-shadow: 0 4px 0 var(--surface-ledge); border-radius: var(--r-xl); padding: 16px; }
.card + .card { margin-top: 12px; }
.card-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.card-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.card-btn:disabled { opacity: .55; }
.card-btn .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.card-btn b { display: block; font: 700 1rem/1.3 var(--font-display); }
.card-btn small { color: var(--text-muted); font-size: .875rem; }
.pick { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left; border-radius: var(--r-lg); background: var(--surface); border: 2px solid var(--border); box-shadow: 0 var(--ledge-sm) 0 var(--surface-ledge); font: 600 1.0625rem/1.3 var(--font-body); }
.pick small { display: block; font: 500 .875rem/1.3 var(--font-body); color: var(--text-muted); }
.pick.is-selected { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 var(--ledge-sm) 0 var(--primary-ledge); }
.pick .tag { margin-left: auto; padding: 4px 10px; border-radius: var(--r-full); background: var(--xp); color: var(--on-xp); font: 700 .6875rem/1.2 var(--font-display); }
.picks { display: flex; flex-direction: column; gap: 12px; }
.picks.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.picks.grid2 .pick { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; }

/* ---------- Онбординг ---------- */
.ob-top { display: flex; align-items: center; gap: 8px; padding: max(4px, var(--safe-top)) 12px 0 8px; min-height: 56px; }
.ob-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px var(--screen-pad) 16px; display: flex; flex-direction: column; gap: 16px; }
.ob-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px var(--screen-pad); }
.ob-hero .mascot { width: 160px; height: 160px; }
.say { display: flex; align-items: flex-end; gap: 10px; }
.say .mascot { width: 96px; height: 96px; flex: none; }
.say .bubble { font: 600 1.0625rem/1.5 var(--font-body); }
.brand { font: 800 2rem/1 var(--font-display); background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Итог урока ---------- */
.stage {
  flex: none; min-height: 44%; background: var(--grad-hero); display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: max(24px, var(--safe-top)) var(--screen-pad) 24px; position: relative; overflow: hidden; color: #fff; text-align: center;
}
.stage .mascot { width: 140px; height: 140px; margin-bottom: 12px; }
.stage h1 { font: 800 1.75rem/2.125rem var(--font-display); }
.stage p { font: 500 .9375rem/1.375rem var(--font-body); opacity: .92; margin-top: 4px; }
.stage .pillnote { margin-top: 10px; padding: 6px 14px; border-radius: var(--r-full); background: rgb(17 14 27 / .28); font-weight: 600; opacity: 1; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; animation: fall 1.2s var(--ease-out) forwards; }
@keyframes fall { 70% { opacity: 1; } to { transform: translateY(var(--y)) rotate(var(--r)); opacity: 0; } }
.result-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px var(--screen-pad) 8px; display: flex; flex-direction: column; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border-radius: var(--r-lg); border: 2px solid var(--c); overflow: hidden; text-align: center; opacity: 0; animation: rise .35s var(--ease-out) forwards; }
.stat:nth-child(2) { animation-delay: .08s; } .stat:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stat small { display: block; background: var(--c); color: #1A1530; font: 700 .625rem/1 var(--font-display); letter-spacing: .05em; padding: 7px 4px; }
.stat div { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 2px 4px; font: 800 1.25rem/1 var(--font-display); color: var(--c2); font-variant-numeric: tabular-nums; }
.stat span { display: block; padding: 0 4px 10px; font: 600 .75rem/1rem var(--font-body); color: var(--text-muted); }
.stat--xp { --c: var(--xp); --c2: var(--xp-text); } .stat--acc { --c: var(--success); --c2: var(--success-text); } .stat--time { --c: #9C85FF; --c2: var(--primary-text); }
details.breakdown summary { cursor: pointer; color: var(--primary-text); font-weight: 600; padding: 6px 0; }
details.breakdown li { list-style: none; display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-muted); }
.result-foot { flex: none; padding: 12px var(--screen-pad) max(16px, var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }
.big-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 24px var(--screen-pad); }
.flame-big { color: var(--accent); animation: pop .5s var(--ease-back); }
.flame-num { font: 800 4rem/1 var(--font-display); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.goal-bar { width: 100%; height: 20px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--xp); border-radius: inherit; transition: width .8s var(--ease-out); }

.week { display: flex; justify-content: space-between; width: 100%; }
.day { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 .75rem/1 var(--font-body); color: var(--text-muted); }
.day b { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--text-muted); }
.day.is-on b { background: var(--accent); color: var(--on-accent); }
.day.is-frozen b { background: var(--primary-soft); color: var(--primary-text); }
.day.is-today b { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: .75rem; color: var(--text-muted); }
.cal b { height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 600; }
.cal b.is-on { background: var(--accent); color: var(--on-accent); }
.cal b.is-frozen { background: var(--primary-soft); color: var(--primary-text); }
.cal b.is-empty { background: transparent; }

/* ---------- Профиль ---------- */
.page-h { font: 700 1.375rem/1.75rem var(--font-display); padding: max(16px, var(--safe-top)) var(--screen-pad) 12px; }
.section-h { font: 700 1rem/1.4 var(--font-display); margin: 20px 0 10px; }
.prof-head { display: flex; align-items: center; gap: 16px; }
.ava-big { width: 72px; height: 72px; border-radius: 50%; background: var(--grad-hero); color: #fff; display: grid; place-items: center; font: 800 1.75rem/1 var(--font-display); flex: none; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: 0 3px 0 var(--surface-ledge); }
.stat-card .v { display: flex; align-items: center; gap: 8px; font: 800 1.375rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.stat-card small { color: var(--text-muted); font-size: .8125rem; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 16px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: .75rem; color: var(--text-muted); }
.bars .bar i { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--primary); min-height: 3px; }
.bars .bar.is-today i { background: var(--accent); }
.strength { display: flex; height: 14px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-2); }
.strength i:nth-child(1) { background: var(--success); } .strength i:nth-child(2) { background: var(--xp); } .strength i:nth-child(3) { background: var(--oops); }
.legend { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--text-muted); margin-top: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--border); width: 100%; text-align: left; }
.set-row:last-child { border-bottom: 0; }
.set-row small { display: block; color: var(--text-muted); font-size: .8125rem; }
.set-row select { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px; max-width: 55%; color: var(--text); }
.switch { width: 52px; height: 32px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--border); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text-faint); transition: transform var(--d-fast); }
.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.danger { color: var(--oops-text); }

/* ---------- Маскот ---------- */
.mascot { display: block; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot.is-stub .gills { transform-origin: 50% 60%; }
.mascot.is-stub.happy .gills, .mascot.is-stub.cheer .gills { animation: fluff .6s ease-in-out 3; }
.mascot.is-stub.cheer svg { animation: bounce .5s ease-in-out 4; transform-origin: 50% 90%; }
@keyframes fluff { 50% { transform: scale(1.12); } }
@keyframes bounce { 50% { transform: translateY(-8px) rotate(4deg); } }
.mascot-say { display: flex; align-items: center; gap: 10px; }
.mascot-say .mascot { width: 72px; height: 72px; flex: none; }
.mascot-say .bubble { font: 500 .9375rem/1.4 var(--font-body); }

.banner-update { margin: 8px var(--screen-pad) 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--primary-soft); border: 1.5px solid var(--primary); font-size: .9375rem; }
.banner-update .btn { margin-left: auto; }
.cheat-phrase { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cheat-phrase b { display: block; font-weight: 600; }
.cheat-phrase small { color: var(--text-muted); }
del { color: var(--oops-text); }
.word-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.word-row small { color: var(--text-muted); }
.boxdots { display: flex; gap: 3px; align-items: center; }
.boxdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-2); }
.boxdots i.on { background: var(--success); }
.goal-card { padding: 12px 16px; }
.goal-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.goal-card .goal-bar { height: 14px; }
/* listen: варианты скрыты до первого прослушивания */
.options.is-veiled { position: relative; }
.options.is-veiled .opt { filter: blur(7px); opacity: .55; pointer-events: none; }
.options.is-veiled::after { content: "Сначала послушай 🔊"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 1rem/1.3 var(--font-display); color: var(--text); }
.ru-toggle { display: block; margin-top: 2px; font: 600 .8125rem/1.4 var(--font-body); color: var(--primary-text); padding: 2px 0; }
.big-center .mascot { width: 140px; height: 140px; flex: none; }