/*
  Шрифты UI (Press Start 2P + DotGothic16) — SELF-HOSTED (/fonts/*.woff2), latin+cyrillic.
  Раньше грузились @import'ом с fonts.googleapis.com — в РФ Google режется/тормозит,
  а @import render-blocking → пустой первый экран на мобиле → отказ. Теперь локально.
  CJK/Arabic (Noto SC/KR/Kufi) — для контента тех языков — вынесены в _Layout
  非-блокирующим <link> (OS-фолбэк есть, лендинг не ждёт).
*/
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pressstart2p-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pressstart2p-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pressstart2p-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pressstart2p-latin.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:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dotgothic16-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dotgothic16-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dotgothic16-latin.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;}

/* ══════════════════════════════════════════════════
   CSS VARIABLES
══════════════════════════════════════════════════ */
:root {
    --nav-h:        calc(60px + env(safe-area-inset-top, 0px));
    --bg:           #EEF1F4;       /* холодный светлый */
    --bg-check:     #E8DDD4;       /* клетка фона, тёплый тон */
    --bg-card:      #F8FAFB;
    --bg-nav:       #E2E6EA;
    --bg-input:     #FAFCFD;
    --border:       #1A2530;
    --text:         #1A2530;
    --text-muted:   #546878;
    --accent:       #0D5C72;       /* тёмный морской */
    --accent-h:     #094A5C;
    --accent-2:     #E04B00;       /* оранжевый маскот */
    --accent-2-h:   #BC3E00;
    --emerald:      #1A7A4E;
    --emerald-light:#D6EFE3;
    --amber:        #B8790A;
    --shadow:       4px 4px 0 #1A2530;
    --shadow-sm:    2px 2px 0 #1A2530;
    --shadow-lg:    6px 6px 0 #1A2530;
}

[data-theme="dark"] {
    --bg:           #090D12;       /* глубокий ночной */
    --bg-check:     #0E1520;       /* клетка фона, тёмная */
    --bg-card:      #101720;
    --bg-nav:       #070B0F;
    --bg-input:     #141E28;
    --border:       #5BB8D4;       /* ледяной голубой */
    --text:         #D8EEF5;
    --text-muted:   #4A7A8E;
    --accent:       #38C0DC;       /* яркий циан */
    --accent-h:     #56D0E8;
    --accent-2:     #E04B00;       /* яркий оранжевый */
    --accent-2-h:   #BC3E00;
    --emerald:      #2ECC80;
    --emerald-light:#08301E;
    --amber:        #E8A820;
    --shadow:       4px 4px 0 #5BB8D4;
    --shadow-sm:    2px 2px 0 #5BB8D4;
    --shadow-lg:    6px 6px 0 #5BB8D4;
}

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

html { font-size: 16px; scroll-behavior: smooth; background-color: var(--bg-nav); }

/* scrollbar-gutter: stable — резервируем место под скроллбар всегда, чтобы
   контент не «прыгал» по горизонтали при появлении скроллбара (напр. раскрытие
   FAQ на /about). Только на обычных (скроллящихся) страницах — НЕ на Ленте
   (body.practice-lock, fixed-вёрстка), где это дало бы пустую полосу справа. */
html:has(body:not(.practice-lock)) { scrollbar-gutter: stable; }

body {
    font-family: 'DotGothic16', 'Noto Kufi Arabic', 'Noto Sans SC', 'Noto Sans KR', monospace;
    background-color: var(--bg);
    background-image:
        linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h) + 7px), var(--bg) calc(var(--nav-h) + 71px)),
        repeating-conic-gradient(var(--bg) 0% 25%, var(--bg-check) 0% 50%);
    background-size: 100% 100%, 40px 40px;
    background-repeat: no-repeat, repeat;
    background-position: 0 0, 0 var(--nav-h);
    color: var(--text);
    transition: background 0.25s, color 0.25s;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}


body > * { position: relative; z-index: 1; }

main { flex: 1; z-index: 2; }

a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════════
   PIXEL HELPERS
══════════════════════════════════════════════════ */
.px      { font-family: 'Press Start 2P', monospace; }
.b3      { border: 3px solid var(--border); }
.b2      { border: 2px solid var(--border); }
.sh      { box-shadow: var(--shadow); }
.sh-sm   { box-shadow: var(--shadow-sm); }
.sh-lg   { box-shadow: var(--shadow-lg); }

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */
.nav {
    position: sticky; top: 0; z-index: 200;
    background: color-mix(in srgb, var(--bg-nav) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    padding: env(safe-area-inset-top, 0px) 1.5rem 0;
    height: calc(60px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Группа всех элементов навбара (кроме логотипа) */
.nav__items {
    display: contents; /* на десктопе — как будто обёртки нет */
}

/* Группа мут+тема */
.nav__controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Гамбургер — скрыт на десктопе */
.nav__burger {
    display: none;
    background: none;
    border: 2px solid var(--border);
    color: var(--text);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Logo */
.nav__logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    letter-spacing: -1px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* pixel — красный (как "учись" на лендинге = accent-2)
   speech — загорается мягко, как слово при распознавании  */
.logo-dot   { color: var(--emerald); }
.logo-pixel { color: var(--accent-2); }          /* всегда красный */

@keyframes logoWord {
    0%, 25%, 100% { color: var(--text-muted); }
    12%            { color: var(--accent); }
}

.logo-speech { animation: logoWord 7s ease-in-out infinite; }

/* ── Language buttons (pixel flags) ─────────────────── */
.nav__lang-btns {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.nav__lang-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: none;
    line-height: 1;
}

.nav__lang-btn:hover {
    background: var(--bg);
    color: var(--text);
    transform: translate(-1px,-1px);
    box-shadow: var(--shadow);
}

.nav__lang-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.nav__lang-btn.active:hover {
    background: var(--accent-h);
    color: #fff;
}

.pixel-flag {
    display: block;
    width: 32px;   /* 16px × 2 — nearest-neighbour scale */
    height: 20px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.nav__lang-code { letter-spacing: 1px; }

.pixel-flag--lg { width: 48px; height: 30px; }

/* ── RU theme overrides: saturated blue (deeper than EN teal) ─ */
[data-learn-lang="ru"] {
    --accent:     #0F4BB8;
    --accent-h:   #0A3999;
    --accent-2:   #E04B00;
    --accent-2-h: #BC3E00;
}

[data-learn-lang="ru"][data-theme="dark"] {
    --accent:     #4A82F0;
    --accent-h:   #5A92FF;
    --accent-2:   #E04B00;
    --accent-2-h: #BC3E00;
}

/* ── ZH theme overrides: Chinese red + gold ─────────── */
[data-learn-lang="zh"] {
    --accent:     #C8181A;
    --accent-h:   #A61214;
    --accent-2:   #B8860B;
    --accent-2-h: #9A7209;
}

[data-learn-lang="zh"][data-theme="dark"] {
    --accent:     #FF3D3D;
    --accent-h:   #FF5555;
    --accent-2:   #FFD700;
    --accent-2-h: #FFE040;
}

/* Spacer */
.nav__spacer { flex: 1; }

/* Emerald balance (right side) */
.nav__emerald {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    background: var(--emerald-light);
    border: 2px solid var(--border);
    color: var(--emerald);
    padding: 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ◆ — пиксельный ромб, символ изумруда */
.nav__emerald .gem { font-size: 0.75rem; color: var(--emerald); }

/* Theme toggle */
.theme-btn {
    width: 36px; height: 36px;
    background: none;
    border: 2px solid var(--border);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: none;
}

.theme-btn:hover {
    background: var(--accent-2);
    color: #fff;
    transform: translate(-1px,-1px);
    box-shadow: var(--shadow-sm);
}

.theme-btn:active { transform: none; box-shadow: none; }


/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    padding: 0.8rem 1.5rem;
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: none;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

html:not(.touch) .btn:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.btn:active  { transform: none; box-shadow: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; }

.btn-secondary { background: var(--accent-2); color: #fff; }
.btn-secondary:hover { color: #fff; }

.btn-ghost { background: transparent; color: var(--text); }

.btn-danger { background: transparent; color: var(--accent-2); border-color: var(--accent-2); }
.btn-danger:hover { background: var(--accent-2); color: #fff; }

.btn-red { background: transparent; color: var(--accent-2); border-color: var(--accent-2); }
.btn-red:hover { background: var(--accent-2); color: #fff; }

.btn-emerald { background: var(--emerald); color: #fff; }
.btn-emerald:hover { color: #fff; }

.btn-sm {
    font-size: 0.45rem;
    padding: 0.5rem 1rem;
    border-width: 2px;
    box-shadow: var(--shadow-sm);
}
.btn-sm:hover { box-shadow: var(--shadow); }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    text-align: center;
    padding: 4.5rem 1.5rem 4.5rem;
    position: relative;
    overflow: hidden;
}


.hero__eyebrow {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    letter-spacing: 4px;
    color: var(--emerald);
    border: 2px solid var(--emerald);
    padding: 0.35rem 0.8rem;
    margin-bottom: 2.5rem;
    display: inline-block;
    background: var(--emerald-light);
}

.hero__title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.1rem, 3.5vw, 2.2rem);
    line-height: 1.8;
    max-width: 720px;
}

.hero__title .t-amber { color: var(--accent); }
.hero__title .t-blue  { color: var(--accent-2); }
.hero__title .t-red   { color: var(--accent-2); }

.hero__streak-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.hero__mascot {
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    mix-blend-mode: multiply;
}
[data-theme="dark"] .hero__mascot {
    mix-blend-mode: normal;
}

.hero__sub {
    position: relative;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 620px;
    width: 100%;
    line-height: 1.7;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0.25rem 0.55rem;
    text-align: center;
    border-bottom: 2px solid var(--border);
}
.hero__sub::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--border);
}

.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.2rem;
}

.hero__tg-link {
    display: block;
    margin-top: 0.75rem;
}

.tg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: #a0b0be;
    text-decoration: none;
}

.tg-link:hover {
    color: #7a8fa0;
    text-decoration: underline;
}

[data-theme="dark"] .tg-link {
    color: #2a3c50;
}

[data-theme="dark"] .tg-link:hover {
    color: #3a5268;
}

.tg-link__icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.hero-action-btn {
    min-width: 160px;
    justify-content: center;
}

/* Hero: slogan eyebrow + feed-first CTA with pixel arrows + secondary links */
.hero__headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}
.hero__headline .hero__eyebrow { margin-bottom: 0; }

.hero__cta-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}
.hero__arrow {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: var(--accent);
    flex-shrink: 0;
    user-select: none;
}
.hero__arrow--left  { animation: heroArrowL 0.85s ease-in-out infinite; }
.hero__arrow--right { animation: heroArrowR 0.85s ease-in-out infinite; }
@keyframes heroArrowL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes heroArrowR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@media (prefers-reduced-motion: reduce) {
    .hero__arrow--left, .hero__arrow--right { animation: none; }
}

.hero__sec-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-top: 0.4rem;
}
.hero__sec-link { margin-top: 0; }

.hero__sub-actions {
    margin-top: 0.75rem;
    text-align: center;
}

.hero__all-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    padding-bottom: 2px;
    transition: color 0.15s;
}

.hero__all-link:hover { color: var(--text); }

/* Blinking cursor */
@keyframes blink { 50% { opacity: 0; } }
.cursor::after {
    content: '▌';
    animation: blink 1s step-end infinite;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8em;
    color: var(--accent);
}

/* ══════════════════════════════════════════════════
   DEMO SECTION
══════════════════════════════════════════════════ */
.demo {
    padding: 5rem 1.5rem;
    background: var(--bg-card);
    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
}

.demo__inner {
    max-width: 780px;
    margin: 0 auto;
}

.section-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.section-label::before {
    content: '//';
    color: var(--accent);
}

/* Language tabs */
.demo__tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.demo__tab {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    padding: 0.4rem 0.7rem;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: none;
}

.demo__tab:hover { background: var(--bg); }

.demo__tab.active {
    background: var(--accent-2);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ── Dialog (demo + practice) ────────────────────────── */
.dialog-box {
    border: 3px solid var(--border);
    background: var(--bg-input);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-height: 160px;
}

.demo .dialog-box {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Demo panels wrapper — fixed height, both tabs same size ── */
.demo__panels-wrap {
    position: relative;
    height: 640px;
    overflow: hidden;
}

/* ── Demo panel switcher ── */
.demo__panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transition: opacity 0.28s ease;
}

.demo__panel.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Demo Picture panel ─────────────────────────── */
.demo-pic-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex: 1;
    padding: 1.5rem;
}
.demo-pic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.demo-pic-polaroid.fc-polaroid {
    width: 110px;
    height: 110px;
}
.demo-pic-emoji.fc-emoji {
    font-size: 2.75rem;
}
.demo-pic-btn {
    padding: 0.5rem 1.25rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--text);
    cursor: default;
    user-select: none;
}
.demo-pic-btn--rec {
    border-color: var(--emerald);
    color: var(--emerald);
}
.demo-pic-wrap .pic-transcription { transition: none; }

/* ── Demo flashcard redesign ── */
.demo-fc-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
    padding: 0.75rem 0;
}

/* Stack scene — пропорции совпадают с реальной карточкой */
.demo-fc-scene {
    position: relative;
    width: 100%;
    max-width: 310px;
    aspect-ratio: 460 / 580;
    flex-shrink: 0;
}

/* Ghost cards in background */
.demo-fc-bg {
    position: absolute;
    inset: 0;
    border: 3px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow);
}
.demo-fc-bg--2 { transform: scale(0.88) translateY(14px); opacity: 0.25; z-index: 0; filter: blur(6px); }
.demo-fc-bg--1 { transform: scale(0.94) translateY(7px);  opacity: 0.55; z-index: 1; filter: blur(4px); }

/* Cards in scene — decorative, step-forward animates via CSS */
.demo-fc-scene .fc-card {
    cursor: default;
    pointer-events: none;
    touch-action: auto;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
}

/* Flip triggered on inner (demo-specific, not on parent like real card) */
.demo-fc-scene .fc-card__inner.flipped { transform: rotateY(180deg); }

/* Scale down emoji for smaller demo card */
.demo-fc-scene .fc-emoji { font-size: 4.5rem; }

/* Inner buttons decorative only */
.demo-fc-scene .fc-inner-btn {
    pointer-events: none;
    opacity: 0.8;
    font-size: 0.28rem;
    padding: 0.5rem 0.2rem;
}

/* Swipe labels — overlay centered (matches real card) */
.demo-fc-swipe-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    padding: 0.18rem 0.55rem;
    border: 2px solid;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    pointer-events: none;
    background: var(--bg-card);
}
.demo-fc-swipe-label--yes { color: var(--emerald); border-color: var(--emerald); }
.demo-fc-swipe-label--no  { color: #e55;           border-color: #e55; }
.demo-fc-swipe-label.visible { opacity: 1; }

/* Progress bar */
.demo-fc-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 310px;
}

.demo-fc-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}

.demo-fc-progress__bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    overflow: hidden;
}

.demo-fc-progress__fill {
    height: 100%;
    background: var(--accent-2);
    transition: width 0.5s ease;
    width: 0%;
}

.demo-fc-progress__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.34rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── FAQ support button ── */
.faq__support {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.faq__support-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: var(--text-muted);
}

.faq__support-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.faq__support-email {
    font-family: 'DotGothic16', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
    cursor: pointer;
    user-select: all;
    transition: color 0.2s;
}

/* ── Practice: 3-event carousel window with torn-page edges ── */
.practice .dialog-box {
    padding: 0;
    overflow: hidden;
    position: relative;
    height: 391px;
}

/* Gradient "torn page" fades at top and bottom */
.practice .dialog-box::before,
.practice .dialog-box::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 56px;
    pointer-events: none;
    z-index: 10;
}

.practice .dialog-box::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-input) 0%, transparent 100%);
}

.practice .dialog-box::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-input) 0%, transparent 100%);
}

/* Carousel inner container — slides via translateY */
.dialog-carousel {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    position: relative;
}

.dialog-line {
    display: flex;
    flex-direction: row-reverse; /* пользователь (B) — справа */
    gap: 0.8rem;
    align-items: flex-start;
    opacity: 0.35;
    transition: opacity 0.4s;
}

.dialog-line--npc { flex-direction: row; } /* NPC (A) — слева */

.dialog-line.active-line { opacity: 1; }
.dialog-line.done-line   { opacity: 0.65; }

/* Avatar */
.avatar {
    width: 44px; height: 44px;
    border: 3px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    flex-shrink: 0;
    position: relative;
    image-rendering: pixelated;
    box-shadow: var(--shadow-sm);
    line-height: 1.4;
    gap: 1px;
}

.avatar__face { font-size: 1rem; line-height: 1; }
.avatar__name { color: rgba(255,255,255,0.8); letter-spacing: 0; }

.avatar--user { background: var(--accent-2); color: #fff; }
.avatar--npc  { background: var(--accent);   color: #fff; }

/* Bubble */
.bubble {
    flex: 1;
    max-width: 82%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    padding: 0.7rem 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.dialog-line--npc .bubble {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.dialog-line.active-line .bubble {
    border-color: var(--accent-2);
    box-shadow: var(--shadow);
}

.bubble__emoji {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35em;
    image-rendering: pixelated;
}

.dialog-line--npc .bubble__emoji {
    border-bottom-color: rgba(255,255,255,0.3);
}

.bubble__text {
    font-family: 'DotGothic16', 'Noto Kufi Arabic', 'Noto Sans SC', 'Noto Sans KR', monospace;
    font-size: 1rem;
    line-height: 1.9;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Перевод по long-press (wordtip.js) — гасим нативное выделение/лупу iOS,
       иначе ОС перехватит жест. Наш тултип заменяет браузерный select→translate. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Выделенные для перевода слова + всплывающий тултип (wordtip.js) */
.bubble__text .word.wordtip-sel {
    background: var(--accent-2);
    color: #fff;
    border-radius: 3px;
}
.wordtip {
    position: fixed;
    transform: translate(-50%, calc(-100% - 8px));
    z-index: 10000;
    max-width: 70vw;
    background: var(--bg-card);
    color: var(--text);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 0.4rem 0.6rem;
    font-family: 'DotGothic16', monospace;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    pointer-events: none;
}
.wordtip[hidden] { display: none; }
.st-target { cursor: pointer; }

.bubble__audio {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Score row */
.demo__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.demo__score {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-val {
    font-size: 0.75rem;
    color: var(--emerald);
    min-width: 3.5ch;
    display: inline-block;
    text-align: right;
}

.word {
    display: inline-block;
    padding: 0 2px;
    border-radius: 0;
    transition: color 0.35s ease, background-color 0.35s ease;
    cursor: default;
}

.word.done              { color: var(--emerald); }
.word.done.skipped      { color: var(--emerald); opacity: 0.07; }
.word.active {
    color: #fff;
    background-color: var(--accent-2);
    outline: 2px solid var(--accent-2);
    transform: none;
}

/* Waveform (fake) */
.demo__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 32px;
    margin-bottom: 1.5rem;
}

.wave-bar {
    width: 4px;
    background: var(--text-muted);
    opacity: 0.3;
    transition: height 0.15s, opacity 0.15s, background 0.3s;
}

.wave-bar.active {
    background: var(--accent-2);
    opacity: 1;
}

@keyframes waveAnim {
    0%,100% { height: 4px; }
    50%      { height: var(--h); }
}

/* Controls */
.demo__controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════ */
.features {
    padding: 5rem 1.5rem;
    max-width: 1020px;
    margin: 0 auto;
}

.features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.feat-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 1.75rem;
    overflow: hidden;
    transition: none;
}

.feat-card--wide {
    grid-column: 1 / -1;
}

.feat-card:hover {
    transform: translate(-3px,-3px);
    box-shadow: var(--shadow-lg);
}

.feat-card__icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 2.25rem;
    text-align: center;
    padding-top: 0.1rem;
}

.feat-card__content {
    flex: 1;
    min-width: 0;
}

.feat-card__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    line-height: 1.8;
}

.feat-card__text {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* ══════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════ */
.pricing {
    padding: 5rem 1.5rem;
    background: var(--bg-card);
    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
    scroll-margin-top: 70px;
}

.pricing__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.pricing__sub {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}

/* Блок «что входит» — единый для всех планов */
.pricing__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg);
    border: 2px solid var(--border);
}

.pricing__feat {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.plan-card {
    background: var(--bg);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 2rem;
    position: relative;
    transition: none;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translate(-3px,-3px);
    box-shadow: var(--shadow-lg);
}

.plan-card.popular {
    border-color: var(--accent);
    box-shadow: var(--shadow), 0 0 0 1px var(--accent);
}

.plan-card__badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    background: var(--accent);
    color: #fff;
    padding: 0.3rem 0.7rem;
    border: 2px solid var(--border);
    white-space: nowrap;
}

.plan-card__name {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.plan-card__price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.plan-card__gem { font-size: 1.4rem; color: var(--emerald); }

.plan-card__amount {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.6rem;
    color: var(--emerald);
    line-height: 1;
}

.plan-card__unit {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.plan-card__cost {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.plan-card__subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.plan-card__day-rate {
    font-size: 0.78rem;
    color: var(--emerald);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.plan-card__saving {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    background: color-mix(in srgb, var(--emerald) 12%, transparent);
    color: var(--emerald);
    border: 2px solid var(--emerald);
    padding: 0.3rem 0.6rem;
    margin-bottom: 1.5rem;
}

.plan-card__badge--amber {
    background: var(--accent-2);
    color: #fff;
    border-color: var(--accent-2);
}

.plan-card.annual {
    border-color: var(--accent-2);
    box-shadow: var(--shadow), 0 0 0 1px var(--accent-2);
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.footer {
    border-top: 3px solid var(--border);
    background: var(--bg-nav);
    padding: 2.5rem 2rem;
}

.footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer__logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
}

.footer__cols {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer__col-head {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text);
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.footer__col a {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
}

.footer__col a:hover { color: var(--accent); }

.footer__copy {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Feed page transition ─────────────────────── */
@keyframes feedEnterDown {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes feedEnterUp {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
main.feed-enter-down { animation: feedEnterDown 0.22s ease both; }
main.feed-enter-up   { animation: feedEnterUp   0.22s ease both; }

/* ── Feed nav ↑↓ ──────────────────────────────── */
.feed-nav {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 0.5rem;
    z-index: 200;
}
.feed-nav:not([hidden]) { display: flex; }
.feed-nav__btn {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.12s, transform 0.12s;
    touch-action: manipulation;
}
html:not(.touch) .feed-nav__btn:hover:not(:disabled) {
    box-shadow: var(--shadow);
    transform: translate(-1px, -1px);
}
.feed-nav__btn:disabled { opacity: 0.25; cursor: default; }

@media (max-width: 640px) {
    .feed-nav { right: 0.5rem; }
    .feed-nav__btn { width: 2.25rem; height: 2.25rem; font-size: 0.4rem; }
}

/* ── Кнопка «наверх» ──────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    right: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════
   COMPARE
══════════════════════════════════════════════════ */
.compare {
    padding: 4rem 1.5rem;
    background: var(--bg-card);
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
}

.compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 760px;
    margin: 2rem auto 0;
}

.compare__col {
    border: 2px solid var(--border);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.compare__col--bad  { background: var(--bg); }
.compare__col--good { background: var(--bg); border-color: var(--emerald); box-shadow: var(--shadow), 0 0 0 1px var(--emerald); }

.compare__col-head {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.compare__col--good .compare__col-head { color: var(--emerald); border-color: var(--emerald); }
.compare__col--bad  .compare__col-head { color: var(--accent-2); }

.compare__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.compare__list li {
    font-size: 0.8rem;
    line-height: 1.5;
}

.compare__col--bad  .compare__list li { color: var(--text-muted); }
.compare__col--good .compare__list li { color: var(--text); }

/* ══════════════════════════════════════════════════
   FREE CTA
══════════════════════════════════════════════════ */
.free-cta {
    padding: 5rem 1.5rem;
    text-align: center;
    background: var(--bg-card);
    border-top: 3px solid var(--border);
    border-bottom: 3px solid var(--border);
    box-shadow: inset 0 4px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.free-cta__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.free-cta__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.free-cta__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    line-height: 1.5;
}

.free-cta__sub {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════
   SMART PICK BUTTON (Exercise list)
══════════════════════════════════════════════════ */
.smart-pick-btn {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 0.25rem;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.smart-pick-btn:hover {
    background: var(--accent-h);
    box-shadow: var(--shadow-lg);
    color: #fff;
}

.smart-pick-btn__icon {
    grid-row: 1 / 3;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    align-self: center;
}

.smart-pick-btn__text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    line-height: 1.4;
}

.smart-pick-btn__sub {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

/* ══════════════════════════════════════════════════
   TICKER
══════════════════════════════════════════════════ */
.ticker-wrap {
    overflow: hidden;
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    background: var(--bg-nav);
    padding: 0.55rem 0;
}

.ticker {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: tickerScroll 32s linear infinite;
}

.ticker span {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    white-space: nowrap;
    line-height: 1;
    display: inline-block;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ticker span:nth-child(odd)  { color: var(--accent);  }
.ticker span:nth-child(even) { color: var(--accent-2); }

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════ */
.faq {
    padding: 4rem 1.5rem;
}

.faq__list {
    max-width: 760px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq__item {
    border: 2px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.faq__item[open] {
    box-shadow: var(--shadow);
}

.faq__q {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    line-height: 1.6;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: '▶';
    font-size: 0.4rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.faq__item[open] .faq__q::after {
    transform: rotate(90deg);
}

.faq__a {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    padding: 0 1.25rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

/* ══════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════ */
.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.t-center { text-align: center; }
.t-emerald { color: var(--emerald); }
.t-amber   { color: var(--accent); }
.t-blue    { color: var(--accent-2); }

/* ══════════════════════════════════════════════════
   RESPONSIVE — tablet (≤ 768px)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Pricing grid */
    .pricing__grid      { grid-template-columns: 1fr; }

    /* Compare */
    .compare__grid      { grid-template-columns: 1fr; }

    /* Footer */
    .footer__inner      { flex-direction: column; }
    .footer__cols       { gap: 1.5rem; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — mobile (≤ 640px)
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    :root { --nav-h: calc(52px + env(safe-area-inset-top, 0px)); }
    /* Nav */
    .nav                { padding: env(safe-area-inset-top, 0px) 0.75rem 0; gap: 0.5rem; height: calc(52px + env(safe-area-inset-top, 0px)); }
    .nav__logo          { font-size: 0.7rem; }
    .nav__username      { display: none; }
    .nav__login-btn     { font-size: 0.5rem; padding: 0.4rem 0.7rem; }

    /* Hero */
    .hero               { padding: 2.5rem 1rem 2.5rem; height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)); }
    .hero__title        { font-size: clamp(0.85rem, 5vw, 1.3rem); }
    .hero__mascot       { width: 72px; height: 72px; }
    .hero__sub          { font-size: 0.82rem; }
    .hero__actions      { flex-direction: column; width: 100%; gap: 0.6rem; }
    .hero__actions .btn { width: 100%; text-align: center; }
    .hero__eyebrow      { font-size: 0.4rem; }

    /* Demo */
    .demo               { padding: 2.5rem 1rem; }
    .demo__panels-wrap  { height: 520px; }
    .demo .dialog-box   { padding: 0.75rem; gap: 0.75rem; }

    /* Ticker */
    .ticker             { animation-duration: 22s; }

    /* Features */
    .features           { padding: 2.5rem 1rem; }
    .features__grid     { grid-template-columns: 1fr; gap: 1rem; }
    .feat-card,
    .feat-card--wide    { grid-column: auto; padding: 1.25rem; }
    .feat-card:hover    { transform: none; }

    /* Compare */
    .compare            { padding: 2.5rem 1rem; }
    .compare__col       { padding: 1rem; }

    /* FAQ */
    .faq                { padding: 2.5rem 1rem; }
    .faq__q             { font-size: 0.45rem; padding: 0.85rem 1rem; }
    .faq__a             { padding: 0.65rem 1rem 0.85rem; }

    /* Pricing */
    .pricing            { padding: 2.5rem 1rem; }
    .pricing__grid      { grid-template-columns: 1fr; }
    .pricing__feat      { white-space: normal; }
    .plan-card          { padding: 1.25rem; }
    .plan-card:hover    { transform: none; }

    /* Free CTA */
    .free-cta           { padding: 3rem 1rem; }
    .free-cta__title    { font-size: 0.85rem; }

    /* Exercise list */
    .page               { padding: 1.5rem 1rem; }
    .exercise-grid      { grid-template-columns: 1fr; gap: 0.75rem; }
    .ex-card            { padding: 1rem; }
    .ex-card:hover      { transform: none; }
    .smart-pick-btn     { padding: 1rem 1.25rem; }
    .smart-pick-btn__text { font-size: 0.5rem; }
    .diff-bar           { gap: 0.35rem; flex-wrap: wrap; }
    .diff-btn           { font-size: 0.4rem; padding: 0.35rem 0.5rem; }

    /* Practice page */
    .practice           { padding: 1rem 0.75rem; }
    .done-panel__btns   { flex-direction: column; }
    .done-panel__score  { font-size: 1.8rem; }

    /* Footer */
    .footer             { padding: 2rem 1rem; }
    .footer__logo       { font-size: 0.65rem; }
    .back-to-top        { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); right: 1rem; width: 2rem; height: 2rem; font-size: 0.45rem; }

    /* Cookie banner */
    .cookie-banner      { flex-direction: column; align-items: flex-start; bottom: 0; width: 100%; left: 0; transform: none; border-left: none; border-right: none; border-bottom: none; }
    .cookie-banner__btn { width: 100%; text-align: center; }

    /* Убираем hover-трансформации на touch */
    .feat-card:hover, .plan-card:hover, .ex-card:hover, .learn-btn:hover { box-shadow: var(--shadow); transform: none; }
}

/* ══════════════════════════════════════════════════
   404 PAGE
══════════════════════════════════════════════════ */
.notfound {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
    gap: 1.25rem;
}

.notfound__code {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(3rem, 15vw, 7rem);
    color: var(--accent-2);
    text-shadow: 6px 6px 0 var(--border);
    line-height: 1;
}

.notfound__msg {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.55rem, 2vw, 0.85rem);
    color: var(--text);
    margin: 0;
}

.notfound__sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 360px;
    line-height: 1.8;
    margin: 0;
}

/* ══════════════════════════════════════════════════
   HERO — language pills
══════════════════════════════════════════════════ */
.hero__langs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3rem;
}

.hero__lang-pill {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 2px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: none;
}

.hero__lang-pill:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
    transform: translate(-1px,-1px);
}

/* ══════════════════════════════════════════════════
   EXERCISE LIST PAGE
══════════════════════════════════════════════════ */
.page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.page__header {
    margin-bottom: 2.5rem;
}

.page__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.page__title .t-flag { font-family: 'Noto Sans', sans-serif; font-size: 1.4rem; }

/* Lang filter bar */
.lang-bar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.lang-bar__item {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: none;
    text-decoration: none;
}

.lang-bar__item:hover  { background: var(--accent-2); color: #fff; box-shadow: var(--shadow-sm); }
.lang-bar__item.active { background: var(--accent-2); color: #fff; box-shadow: var(--shadow-sm); }

/* Exercise search */
/* Filters toggle */
.ex-filters-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    padding: 0.45rem 0.85rem;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, color 0.15s;
}
.ex-filters-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ex-filters-toggle__arrow { display: inline-block; transition: transform 0.2s; }
.ex-filters-toggle.open .ex-filters-toggle__arrow { transform: rotate(90deg); }

/* Collapsible panel */
.ex-filters {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    overflow: hidden;
}
.ex-filters.open { grid-template-rows: 1fr; }
.ex-filters__inner { min-height: 0; }

.ex-search-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    border: 3px solid var(--border);
    background: var(--bg-card);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-sm);
}

.ex-search-bar__icon { font-size: 0.85rem; flex-shrink: 0; }

.ex-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'DotGothic16', monospace;
    font-size: 0.9rem;
    color: var(--text);
    outline: none;
}

.ex-search-input::placeholder { color: var(--text-muted); }

.ex-search-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Difficulty filter */
.diff-bar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    align-items: center;
}

.diff-bar__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--text-muted);
    margin-right: 0.5rem;
}

.diff-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 2px solid var(--border);
    background: none;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.diff-btn:hover, .diff-btn.active { background: var(--accent); color: #fff; }

/* Exercise cards */
.exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

.ex-card {
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: none;
    position: relative;
    cursor: pointer;
}

.ex-card:hover {
    transform: translate(-3px,-3px);
    box-shadow: var(--shadow-lg);
}

/* Stretched link — весь блок кликабелен */
.ex-card__link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ex-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ex-card__diff {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--border);
}

.diff-1 { color: var(--emerald);  border-color: var(--emerald); }
.diff-2 { color: var(--accent);   border-color: var(--accent);  }
.diff-3 { color: var(--accent-2); border-color: var(--accent-2); }

.ex-card__cost {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--emerald);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ex-card__cost--premium {
    color: var(--amber);
    border: 2px solid var(--amber);
    padding: 0.2rem 0.5rem;
}

.ex-card__text {
    font-family: 'DotGothic16', 'Noto Kufi Arabic', 'Noto Sans SC', 'Noto Sans KR', monospace;
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.8;
    flex: 1;
}

.ex-card__emoji {
    font-size: 2rem;
    line-height: 1.4;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ex-card__title-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

.ex-card__footer {
    border-top: 2px solid var(--border);
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.ex-card__events {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
}

/* Custom exercise card */
.ex-card--custom {
    border-color: var(--amber);
    background: color-mix(in srgb, var(--amber) 7%, var(--bg-card));
    position: relative;
    overflow: hidden;
}
.ex-card--custom::after {
    content: '✦';
    position: absolute;
    bottom: -0.5rem;
    right: 0.5rem;
    font-size: 3.5rem;
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}
.ex-card--custom__badge {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--amber);
    border: 2px solid var(--amber);
    padding: 0.2rem 0.5rem;
}

/* Custom text input area */
.custom-input-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    margin: 1rem 0 1.5rem;
}
.custom-input-area__hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}
.custom-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'DotGothic16', monospace;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--border);
    padding: 0.75rem 1rem;
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.15s;
}
.custom-textarea:focus {
    border-color: var(--accent);
}
.custom-input-area__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.custom-input-area__counter {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.empty-state__icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state__text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════
   PRACTICE PAGE
══════════════════════════════════════════════════ */
.practice {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
    position: relative;
}
/* fc-header / fc-progress-bar inside practice span full width */
.practice .fc-header       { max-width: 100%; margin-bottom: 1rem; }
.practice .fc-progress-bar { max-width: 100%; margin-bottom: 1.5rem; }

.practice__back {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2rem;
    text-decoration: none;
}

.practice__back:hover { color: var(--accent); }

.practice__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.practice__lang {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.practice__lang .flag { font-family: 'Noto Sans', sans-serif; font-size: 1.2rem; }

.practice__cost {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--emerald);
    background: var(--emerald-light);
    border: 2px solid var(--border);
    padding: 0.35rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Reading card */
.reading-card {
    background: var(--bg-input);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    min-height: 140px;
}

.reading-text {
    font-family: 'DotGothic16', 'Noto Kufi Arabic', 'Noto Sans SC', 'Noto Sans KR', monospace;
    font-size: 1.6rem;
    line-height: 2.2;
    color: var(--text);
}

/* Progress bar */
.progress-bar {
    height: 8px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--emerald);
    transition: width 0.3s ease;
    width: 0%;
}

/* Mic button */
.mic-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.mic-btn {
    width: 80px; height: 80px;
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

.mic-btn:hover {
    background: var(--accent-2);
    transform: translate(-3px,-3px);
    box-shadow: var(--shadow-lg);
}

.mic-btn.recording {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
    animation: micPulse 1s ease-in-out infinite;
}

@keyframes micPulse {
    0%,100% { box-shadow: var(--shadow); }
    50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0.2), var(--shadow); }
}

.mic-btn.retry {
    background: #D97706;
    border-color: #D97706;
    color: #fff;
    box-shadow: 6px 6px 0 rgba(217,119,6,0.35);
    animation: retryPulse 1.1s ease-in-out infinite;
}

@keyframes retryPulse {
    0%,100% { transform: scale(1);    box-shadow: 6px 6px 0 rgba(217,119,6,0.35); }
    50%      { transform: scale(1.07); box-shadow: 8px 8px 0 rgba(217,119,6,0.5); }
}

.mic-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--text-muted);
}

/* Done panel (replaces mic button on finish) */
#micControls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* ── Кнопка "прослушать" текущую реплику ────────────────── */
.listen-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-sm);
    transition: none;
    line-height: 1;
    letter-spacing: 0.02em;
}

.listen-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow);
}

.listen-btn:active { transform: none; box-shadow: none; }

.listen-btn:disabled,
.listen-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.listen-btn[hidden] { display: none; }

/* ── Полноэкранный загрузчик модели ─────────────────────── */
.model-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: overlayIn 0.2s ease-out;
}
.model-overlay[hidden] { display: none !important; }

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.model-overlay__box {
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    min-width: 280px;
    text-align: center;
    animation: boxSlideUp 0.25s ease-out;
}

@keyframes boxSlideUp {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Маскот в центре, вокруг него кружат эмодзи (микрофон/мозг/огонь) — тот же приём,
   что на интро Ленты: даёт понять, что грузим именно модель распознавания речи. */
.model-overlay__orbit {
    position: relative;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.model-overlay__mascot {
    width: 56px;
    height: 70px;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-2) 55%, transparent));
    animation: psMascotFloat 2.4s ease-in-out infinite;
}
@keyframes psMascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Летающие твемоджи вокруг маскота (микрофон / мозг / огонь). */
.model-overlay__emoji {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: psOrbitSpin 6s linear infinite;
}
.model-overlay__emoji span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.6rem 0 0 -0.6rem;
}
.model-overlay__emoji span:nth-child(1) { transform: rotate(0deg)   translateY(-44px); }
.model-overlay__emoji span:nth-child(2) { transform: rotate(120deg) translateY(-44px); }
.model-overlay__emoji span:nth-child(3) { transform: rotate(240deg) translateY(-44px); }
.model-overlay__emoji .tw-emoji {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 50%, transparent));
}
@keyframes psOrbitSpin { to { transform: rotate(360deg); } }

.model-overlay__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text);
    letter-spacing: 0.06em;
    animation: labelBlink 0.9s step-end infinite;
}

@keyframes labelBlink {
    0%, 60%, 100% { opacity: 1; }
    30%            { opacity: 0.3; }
}

.model-overlay__track {
    width: 200px;
    height: 12px;
    border: 3px solid var(--border);
    background: var(--bg-input);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Детерминированный прогресс — ширину выставляет JS по реальному % загрузки. */
.model-overlay__fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 0;
    background: var(--accent);
    transition: width 0.25s ease-out;
}
/* Фолбэк, когда размер модели неизвестен (нет Content-Length): бегущая полоса. */
.model-overlay__fill--indeterminate {
    width: 40%;
    transition: none;
    animation: pixelScan 1.1s ease-in-out infinite;
}

@keyframes pixelScan {
    0%   { left: -40%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .model-overlay__mascot { animation: none; }
    .model-overlay__emoji  { animation: none; }
}

.model-overlay__model {
    font-family: 'DotGothic16', monospace;
    font-size: 0.9rem;
    color: var(--text);
    margin-top: -0.4rem;
}

.model-overlay__sub {
    font-family: 'DotGothic16', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-height: 1.1em; /* резервируем строку под % чтобы блок не прыгал */
}

.model-overlay__note {
    font-family: 'DotGothic16', monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    opacity: 0.85;
    max-width: 220px;
}

.done-panel {
    display: none;
    text-align: center;
    width: 100%;
    animation: fadeSlideUp 0.35s ease-out;
}

.done-panel.visible { display: block; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.done-panel__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--emerald);
    margin-bottom: 0.75rem;
    letter-spacing: 0.04em;
}

.done-panel__score {
    font-family: 'Press Start 2P', monospace;
    font-size: 2.5rem;
    color: var(--emerald);
    margin-bottom: 0.5rem;
}

.done-panel__sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.done-panel__btns {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Done panel tiers */
.done-panel.result--perfect .done-panel__label { color: #FFD700; }
.done-panel.result--perfect .done-panel__score {
    color: #FFD700;
    animation: scorePop 0.35s ease-out 3;
}

@keyframes scorePop {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}

/* Victory particles */
/* iOS silent mode hint — shown once per session in exercise/picture */
.ios-silent-hint {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.72rem;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 200;
    cursor: pointer;
    opacity: 0;
    animation: silentHintAnim 5s forwards;
    pointer-events: auto;
}
@keyframes silentHintAnim {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

.victory-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    line-height: 1;
    font-size: var(--sz, 1.4rem);
    animation: victoryRain var(--dur, 1.2s) ease-in var(--delay, 0s) forwards;
}

@keyframes victoryRain {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(1); }
    10%  { opacity: 1; }
    80%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(65vh) rotate(var(--rot, 200deg)) scale(0.2); }
}

/* Контейнер фиксированной высоты — wave и playback не сдвигают верстку */
.anim-slot {
    position: relative;
    height: 40px;
    margin-bottom: 0.5rem;
}

.anim-slot > .practice__wave,
.anim-slot > .demo__wave,
.anim-slot > .playback-anim {
    position: absolute;
    inset: 0;
    margin-bottom: 0;
    width: 100%;
}

/* Waveform (practice page) */
.practice__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* ── Playback animation (NPC lines) ─────────────────────
   Горизонтальные лучи из динамика — намеренно отличается
   от вертикального waveform микрофона по форме и цвету.
──────────────────────────────────────────────────────── */
.playback-anim {
    display: none;
    align-items: center;
    gap: 0.75rem;
    height: 40px;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.playback-anim.active { display: flex; }

.playback-anim__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    animation: speakerPop 0.7s ease-in-out infinite alternate;
}

@keyframes speakerPop {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1.2);  opacity: 1;   }
}

.playback-anim__rays {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.playback-anim__ray {
    height: 3px;
    background: var(--accent);
    box-shadow: 1px 1px 0 var(--border);
    transform-origin: left center;
    animation: rayPulse 1s ease-in-out infinite alternate;
}

.playback-anim__ray:nth-child(1) { width: 56px; animation-delay: 0s;    }
.playback-anim__ray:nth-child(2) { width: 40px; animation-delay: 0.18s; }
.playback-anim__ray:nth-child(3) { width: 68px; animation-delay: 0.34s; }
.playback-anim__ray:nth-child(4) { width: 32px; animation-delay: 0.09s; }
.playback-anim__ray:nth-child(5) { width: 52px; animation-delay: 0.25s; }

@keyframes rayPulse {
    0%   { transform: scaleX(0.2); opacity: 0.35; }
    100% { transform: scaleX(1);   opacity: 1;    }
}

/* ═══════════════════ AUTH NAV ═══════════════════════════ */
.nav__login-btn { margin-left: 0.5rem; }

.nav__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

/* Аватар + имя — единая кликабельная ссылка на профиль */
.nav__user-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem;
    border: 2px solid transparent;
    text-decoration: none;
    transition: border-color 0.15s;
}

.nav__user-link:hover {
    border-color: var(--border);
    background: var(--bg-card);
}

.nav__avatar {
    width: 28px; height: 28px;
    border-radius: 0;
    border: 2px solid var(--border);
    image-rendering: pixelated;
    object-fit: cover;
    flex-shrink: 0;
}

.nav__avatar--initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent);
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    text-transform: uppercase;
}

.nav__avatar--emoji {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    image-rendering: auto;
}
.nav__avatar--emoji img { width: 18px; height: 18px; }

.nav__username {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    line-height: 2;
    color: var(--text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__logout-form { margin: 0; }

.nav__logout-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.nav__logout-btn:hover { color: #DC2626; }

/* ═══════════════════ LOGIN PAGE ═════════════════════════ */
.login-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.login-card__eyebrow {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}

.login-card__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

.login-card__sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.login-btns {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 3px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    text-decoration: none;
    transition: none;
    box-shadow: 4px 4px 0 var(--border);
}

.login-btn:hover {
    transform: translate(-2px,-2px);
    box-shadow: 6px 6px 0 var(--border);
}
.login-btn:active {
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 var(--border);
}

.login-btn__icon {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.login-btn__icon--text {
    background: #FC3F1D;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    border-radius: 0;
}

.login-btn--yandex       { border-color: #FC3F1D; }
.login-btn--yandex:hover { background: rgba(252,63,29,0.08); }

.login-btn--tg           { border-color: #2AABEE; }
.login-btn--tg:hover     { background: rgba(42,171,238,0.08); }

.vk-widget-wrap {
    width: 100%;
    line-height: 0;
}
.vk-widget-wrap > div {
    width: 100% !important;
}
.vk-widget-wrap iframe {
    border: none !important;
    width: 100% !important;
}

.login-btn--disabled { opacity: 0.4; pointer-events: none; }

.login-tg {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

.login-consent-note {
    margin-top: 1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
}
.login-consent-note a {
    color: var(--accent);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   Admin Panel
   ════════════════════════════════════════════════════════════ */
.admin-page {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.admin-title {
    font-size: 1rem;
    color: var(--c-accent);
    margin: 0;
}

.admin-breadcrumb {
    font-size: 0.5rem;
    color: var(--c-muted);
    text-decoration: none;
}
.admin-breadcrumb:hover { color: var(--c-accent); }
.admin-breadcrumb-sep { margin: 0 0.4rem; color: var(--c-muted); font-size: 0.5rem; }

/* Stats */
.admin-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.stat-card {
    border: 3px solid var(--border);
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    box-shadow: 4px 4px 0 var(--border);
    min-width: 100px;
    text-align: center;
}
.stat-card__value {
    font-size: 1.4rem;
    color: var(--c-accent);
    margin-bottom: 0.25rem;
}
.stat-card__label {
    font-size: 0.4rem;
    color: var(--c-muted);
}

/* Nav cards */
.admin-nav-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 3px solid var(--border);
    background: var(--bg-card);
    padding: 1.25rem 1.5rem;
    box-shadow: 4px 4px 0 var(--border);
    text-decoration: none;
    color: var(--text);
    font-size: 0.5rem;
    transition: none;
}
.admin-nav-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--border); }
.admin-nav-card__icon { font-size: 1.5rem; }

/* Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.45rem;
}
.admin-table th,
.admin-table td {
    border: 2px solid var(--border);
    padding: 0.5rem 0.6rem;
    text-align: left;
}
.admin-table th {
    background: var(--bg-card);
    color: var(--c-muted);
    font-size: 0.4rem;
}
.admin-table__text {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-table__actions {
    white-space: nowrap;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.admin-action {
    background: none;
    border: 2px solid var(--border);
    padding: 0.2rem 0.4rem;
    font-size: 0.55rem;
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    font-family: inherit;
}
.admin-action:hover { border-color: var(--c-accent); color: var(--c-accent); }
.admin-action--danger:hover { border-color: var(--c-wrong); color: var(--c-wrong); }

/* Form */
.admin-form { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.admin-form__row { display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-form__group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 140px; }
.admin-form__group--check { justify-content: flex-end; min-width: auto; }
.admin-form__group label { font-size: 0.4rem; color: var(--c-muted); }
.admin-form__footer { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.admin-input {
    border: 3px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    padding: 0.5rem 0.6rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.admin-input:focus { border-color: var(--c-accent); }
.admin-error { font-size: 0.4rem; color: var(--c-wrong); }

/* Alert */
.admin-alert { padding: 0.75rem 1rem; font-size: 0.45rem; border: 3px solid; margin-bottom: 1rem; }
.admin-alert--ok  { border-color: var(--c-correct); color: var(--c-correct); }
.admin-alert--err { border-color: var(--c-wrong); color: var(--c-wrong); }

/* Badge */
.admin-badge {
    display: inline-block;
    border: 2px solid var(--border);
    padding: 0.1rem 0.35rem;
    font-size: 0.38rem;
    margin-right: 0.25rem;
}
.admin-badge--ok { border-color: var(--c-correct); color: var(--c-correct); }

/* TTS */
.admin-tts { margin-top: 2rem; border-top: 3px solid var(--border); padding-top: 1.5rem; max-width: 640px; }
.admin-tts__title { font-size: 0.5rem; color: var(--c-muted); margin-bottom: 1rem; }
.admin-tts__langs { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-tts__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-tts__info { display: flex; align-items: center; gap: 0.75rem; }
.admin-tts__player { height: 28px; }
.admin-tts__none { font-size: 0.4rem; color: var(--c-muted); }

/* ── Profile page ── */
.profile { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.profile__hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.profile__avatar { width: 64px; height: 64px; border: 3px solid var(--border); box-shadow: var(--shadow); image-rendering: pixelated; object-fit: cover; }
.profile__avatar--initials { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-family: 'Press Start 2P', monospace; font-size: 1.2rem; }
.profile__avatar--emoji { display: flex; align-items: center; justify-content: center; background: var(--bg-card); image-rendering: auto; }
.profile__avatar--emoji img { width: 40px; height: 40px; }
.profile__name { font-family: 'Press Start 2P', monospace; font-size: 0.75rem; color: var(--text); margin-bottom: 0.4rem; }
.profile__meta { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 0.8rem; color: var(--text-muted); }
.profile-card p, .profile-card span:not(.btn):not(.premium-badge):not(.admin-badge):not(.soon-badge):not(.avatar-lock) {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.premium-badge { font-family: 'Press Start 2P', monospace; font-size: 0.45rem; background: var(--amber); color: #fff; padding: 0.35rem 0.8rem; border: 2px solid var(--border); display: inline-flex; align-items: center; gap: 0.3rem; box-shadow: var(--shadow-sm); }

.profile-card { background: var(--bg-card); border: 3px solid var(--border); box-shadow: var(--shadow); padding: 1.5rem; }
.profile-card__title { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--text-muted); margin-bottom: 1.2rem; letter-spacing: 0.04em; }
.account-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat-box { background: var(--bg-card); border: 3px solid var(--border); box-shadow: var(--shadow); padding: 1.2rem; text-align: center; }
.stat-box__val { font-family: 'Press Start 2P', monospace; font-size: 1.6rem; color: var(--emerald); margin-bottom: 0.5rem; }
.stat-box__label { font-family: 'Press Start 2P', monospace; font-size: 0.38rem; color: var(--text-muted); line-height: 1.7; }

.activity-table { width: 100%; border-collapse: collapse; }
.activity-table th { font-family: 'Press Start 2P', monospace; font-size: 0.38rem; color: var(--text-muted); text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border); }
.activity-table td { font-size: 0.85rem; color: var(--text); padding: 0.6rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.activity-table tbody tr { cursor: pointer; transition: background 0.12s; }
.activity-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.score-chip { font-family: 'Press Start 2P', monospace; font-size: 0.4rem; padding: 0.25rem 0.5rem; border: 2px solid var(--border); }
.score-chip--good { color: var(--emerald); border-color: var(--emerald); }
.score-chip--ok   { color: var(--accent);  border-color: var(--accent);  }
.score-chip--low  { color: var(--accent-2); border-color: var(--accent-2); }

.sub-info { display: flex; flex-direction: column; gap: 0.6rem; }
.sub-info__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sub-info__label { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: var(--text-muted); }
.sub-info__val { font-size: 0.9rem; color: var(--text); }

.ex-link { color: var(--accent); text-decoration: underline; }
.ex-link:hover { color: var(--accent-h); }

/* ── Profile collapsible sections ── */
.collapse-header { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.collapse-arrow { font-size: 0.55rem; transition: transform 0.2s; flex-shrink: 0; margin-left: 0.5rem; }
.collapse-arrow.open { transform: rotate(180deg); }
.collapse-more-btn { display: block; width: 100%; margin-top: 0.75rem; padding: 0.45rem 0.75rem; background: none; border: 2px solid var(--border); font-family: 'Press Start 2P', monospace; font-size: 0.35rem; color: var(--text-muted); cursor: pointer; letter-spacing: 0.04em; text-align: center; transition: border-color 0.12s, color 0.12s; }
.collapse-more-btn:hover { border-color: var(--accent); color: var(--accent); }
.deck-stat--clickable { cursor: pointer; transition: background 0.12s; }
.deck-stat--clickable:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.flash-msg { border: 2px solid var(--emerald); background: var(--emerald-light); color: var(--emerald); padding: 0.75rem 1rem; font-family: 'Press Start 2P', monospace; font-size: 0.42rem; line-height: 1.7; }

/* ══════════════════════════════════════════════════
   AVATAR PICKER (profile page)
══════════════════════════════════════════════════ */
.avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.avatar-pick-btn {
    width: 48px; height: 48px;
    font-size: 1.5rem;
    line-height: 1;
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    position: relative;
    padding: 0;
}

.avatar-pick-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow);
    background: var(--bg);
}

.avatar-pick-btn.selected {
    border-color: var(--emerald);
    box-shadow: 0 0 0 3px var(--emerald);
}

.avatar-pick-btn--locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.avatar-pick-btn--locked:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.avatar-lock {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.55rem;
    background: var(--accent-2);
    color: #fff;
    border-radius: 0;
    padding: 1px 3px;
    font-family: 'Press Start 2P', monospace;
    line-height: 1;
    border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════
   LEGAL PAGES (privacy, terms)
══════════════════════════════════════════════════ */
.legal-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.legal-page__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0;
}

/* «О проекте»: блоки возможностей/FAQ внутри текстовой страницы */
.about-page__features { margin-top: 0.5rem; }
.about-page__faq      { margin-top: 0.5rem; }
.about-page__cta {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.legal-page__date {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: -1.25rem;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legal-section h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--accent);
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.legal-section p,
.legal-section li {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.75;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.legal-section ul {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.legal-section a {
    color: var(--accent);
    text-decoration: underline;
}

.legal-section a:hover {
    color: var(--accent-h);
}

/* ══════════════════════════════════════════════════
   PWA INSTALL BANNER (iOS)
══════════════════════════════════════════════════ */
.pwa-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 400px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 9998;
    font-size: 0.6rem;
}

.pwa-banner__icon {
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.pwa-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.5;
    color: var(--text);
}

.pwa-banner__text strong {
    font-size: 0.65rem;
}

.pwa-banner__share {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 0 0.25rem;
    font-size: 0.6rem;
}

.pwa-banner__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.25rem;
    flex-shrink: 0;
}

.pwa-banner.hidden { display: none; }

/* ══════════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════════ */
.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 640px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 9999;
    font-size: 0.65rem;
}

.cookie-banner p {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
    flex: 1;
}

.cookie-banner a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-banner__btn {
    flex-shrink: 0;
    padding: 0.4rem 0.9rem;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 0.6rem;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-banner__btn:hover {
    background: var(--accent-h);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--border);
}

.cookie-banner.hidden {
    display: none;
}

/* ══════════════════════════════════════════════════
   PAYWALL OVERLAY
══════════════════════════════════════════════════ */
.paywall-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.paywall-overlay[hidden] { display: none; }

.paywall-box {
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: calc(100% - 3rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.paywall-box__icon {
    font-size: 2rem;
    color: var(--accent);
}

.paywall-box__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.paywall-box__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: var(--text);
    line-height: 1.8;
}

.paywall-box__sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.paywall-box__btns {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

/* ── Premium modal (fixed, for list pages) ── */
.premium-modal {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}
.premium-modal[hidden] { display: none; }

.premium-modal__benefits {
    text-align: left;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.9;
    padding-left: 1.2rem;
    margin: 0;
    width: 100%;
}
.premium-modal__benefits li::marker { color: var(--accent); }

/* ══════════════════════════════════════════════
   FLASH CARDS
══════════════════════════════════════════════ */

/* ── Deck progress in list ── */
.fc-deck-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.6rem;
}
.fc-deck-progress__bar {
    flex: 1;
    height: 4px;
    background: var(--emerald);
    transition: width 0.4s ease;
    min-width: 2px;
}
.fc-deck-progress__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.32rem;
    color: var(--emerald);
    white-space: nowrap;
}

/* ── Profile deck stats ── */
.deck-stat { margin-bottom: 1.25rem; }
.deck-stat__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}
.deck-stat__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: var(--text);
    text-decoration: none;
}
.deck-stat__title:hover { color: var(--accent); }
.deck-stat__pct {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--emerald);
}
.deck-stat__bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    margin-bottom: 0.25rem;
}
.deck-stat__fill { height: 100%; background: var(--emerald); transition: width 0.5s ease; }
.deck-stat__sub {
    font-family: 'DotGothic16', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Profile materials block ── */
.mat-divider { height: 1px; background: var(--border); opacity: 0.25; margin: 1.4rem 0; }
.mat-section__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.37rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    opacity: 0.75;
    margin-bottom: 0.9rem;
    text-transform: uppercase;
}

/* ── Deck list preview ── */
.fc-deck-preview {
    font-family: 'DotGothic16', monospace;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.75rem;
    line-height: 1.5;
}
.fc-deck-preview__ru { color: var(--accent-2); }

/* ── Practice wrap ── */
.fc-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.5rem 2rem;
    min-height: calc(100vh - 60px);
}

.fc-header {
    width: 100%;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fc-back-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.fc-back-link:hover { color: var(--accent); }

.fc-deck-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: var(--text);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-counter {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.36rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Progress bar ── */
.fc-progress-bar {
    width: 100%;
    max-width: 460px;
    height: 4px;
    background: rgba(128,128,128,0.25);
    margin-bottom: 1.75rem;
}
.fc-progress-bar__fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

/* ── Card stack ── */
.fc-stack {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 580px;
    margin-bottom: 1.5rem;
}

.fc-card {
    position: absolute;
    inset: 0;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    perspective: 900px;
}

/* Stack depth effect */
.fc-card {
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}
.fc-card:nth-last-child(3) { z-index: 0; transform: scale(0.90); opacity: 0.18; filter: blur(6px); pointer-events: none; }
.fc-card:nth-last-child(2) { z-index: 1; transform: scale(0.95); opacity: 0.42; filter: blur(4px); pointer-events: none; }
.fc-card:nth-last-child(1) { z-index: 2; opacity: 1.0;            filter: blur(0);  pointer-events: auto; }

/* Polaroid developing effect — container stays, content fades in on top card */
.fc-card .fc-polaroid .fc-emoji,
.fc-card .fc-polaroid img      { transition: opacity 0.4s ease; }
.fc-card:nth-last-child(n+2) .fc-polaroid .fc-emoji,
.fc-card:nth-last-child(n+2) .fc-polaroid img { opacity: 0; }
.fc-card:nth-last-child(1)   .fc-polaroid .fc-emoji,
.fc-card:nth-last-child(1)   .fc-polaroid img { opacity: 1; }

/* During flip — instantly max-blur background cards to kill flicker */
.fc-stack.flipping .fc-card:nth-last-child(3),
.fc-stack.flipping .fc-card:nth-last-child(2) { filter: blur(12px) !important; transition: none !important; }

/* 3D flip: вся карточка переворачивается целиком */
.fc-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s ease;
}
.fc-card.flipped .fc-card__inner { transform: rotateY(180deg); }

.fc-card__front,
.fc-card__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    padding: 1rem 0.875rem 0.75rem;
}
.fc-card__back { transform: rotateY(180deg); }

/* Polaroid — квадратное поле для эмодзи/картинки */
.fc-polaroid {
    width: 70%;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--border);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.fc-emoji {
    font-size: 6rem;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
    max-width: 90%;
    text-align: center;
}

.fc-emoji .fc-img-src {
    display: block;
    max-width: 100%;
    max-height: 6rem;
    object-fit: contain;
}

/* Центральная зона с текстом */
.fc-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.3rem;
    min-height: 0;
    overflow: hidden;
    padding: 0 0.25rem;
}

.fc-word {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.7;
    word-break: break-word;
    text-align: center;
}

.fc-translation {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--accent-2);
    margin-bottom: 0.2rem;
    word-break: break-word;
    line-height: 1.7;
    text-align: center;
}

.fc-transcription {
    font-family: 'DotGothic16', monospace;
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
}

.fc-score {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--emerald);
    text-align: center;
    min-height: 1.2em;
    margin-top: 0.3rem;
}

/* Слот для анимаций (wave/playback) — всегда резервирует место */
.fc-actions-slot {
    position: relative;
    width: 100%;
    height: 42px;
    flex-shrink: 0;
}

/* Playback animation — absolute внутри fc-actions-slot */
.fc-playback-anim {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.fc-playback-anim.active { display: flex; }
.fc-playback-anim .playback-anim__rays { gap: 4px; }
.fc-playback-anim .playback-anim__ray  { height: 2px; }
.fc-playback-anim .playback-anim__ray:nth-child(1) { width: 40px; }
.fc-playback-anim .playback-anim__ray:nth-child(2) { width: 28px; }
.fc-playback-anim .playback-anim__ray:nth-child(3) { width: 48px; }
.fc-playback-anim .playback-anim__ray:nth-child(4) { width: 22px; }
.fc-playback-anim .playback-anim__ray:nth-child(5) { width: 36px; }

/* Waveform — absolute внутри fc-actions-slot */
.fc-wave {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}
.fc-wave.active { display: flex; }

.fc-speak-result {
    font-family: 'DotGothic16', monospace;
    font-size: 0.8rem;
    min-height: 1.2em;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
}
.fc-speak-result.correct { color: var(--emerald); }
.fc-speak-result.wrong   { color: #e55; }

/* Кнопки внутри карточки — квадратные, как в диалогах */
.fc-inner-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    flex-shrink: 0;
    margin-top: 0.4rem;
}

.fc-inner-btn {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    height: 2.2rem;
    padding: 0 0.25rem;
    border: 2px solid;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    gap: 4px;
    overflow: hidden;
}
.fc-inner-btn--no  { color: #e55; border-color: #e55; }
.fc-inner-btn--no:hover, .fc-inner-btn--no:active  { background: #e55; color: #fff; }
.fc-inner-btn--yes { color: var(--emerald); border-color: var(--emerald); }
.fc-inner-btn--yes:hover, .fc-inner-btn--yes:active { background: var(--emerald); color: #fff; }
.fc-inner-btn--listen { color: var(--accent-2); border-color: var(--accent-2); }
.fc-inner-btn--listen:hover, .fc-inner-btn--listen:disabled { background: var(--accent-2); color: #fff; }
.fc-inner-btn--speak  { color: var(--accent); border-color: var(--accent); }
.fc-inner-btn--speak:hover, .fc-inner-btn--speak:disabled  { background: var(--accent); color: #fff; }

/* Активное состояние при воспроизведении/записи — анимация прямо на кнопке */
.fc-inner-btn.fc-btn-playing {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff;
    pointer-events: none;
}
.fc-inner-btn.fc-btn-recording {
    background: #e55;
    border-color: #e55;
    color: #fff;
    pointer-events: none;
    animation: fc-record-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes fc-record-pulse {
    from { box-shadow: 0 0 0 0 rgba(238,85,85,0.5); }
    to   { box-shadow: 0 0 0 8px rgba(238,85,85,0); }
}

/* Мини-волна внутри кнопки */
.fc-btn-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
    flex-shrink: 0;
}
.fc-btn-bars .wave-bar {
    width: 3px;
    background: currentColor;
    height: 3px;
    flex-shrink: 0;
}

/* Подсказка переворота — снизу на обеих сторонах */
.fc-tap-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--text-muted);
    opacity: 0.8;
    text-align: center;
    margin-top: 0.5rem;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

/* Swipe-лейблы — поверх карточки, в нижней части поляроида */
.fc-swipe-label {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    padding: 0.28rem 0.7rem;
    border: 3px solid;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s;
    white-space: nowrap;
    background: var(--bg-card);
    z-index: 10;
}
.fc-swipe-label--yes { color: var(--emerald); border-color: var(--emerald); }
.fc-swipe-label--no  { color: #e55;           border-color: #e55;           }

/* ── Внешние кнопки (скрыты — кнопки теперь внутри карточки) ── */
.fc-actions { display: none; }

.fc-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
    opacity: 1;
    transition: opacity 0.3s;
    text-align: center;
}
.fc-hint--no  { color: #a05858; }
.fc-hint--yes { color: #3d7a5a; }
.fc-hint--tap { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, transform 0.1s; }
.fc-hint--tap:hover  { opacity: 0.7; }
.fc-hint--tap:active { transform: scale(0.92); opacity: 0.55; }
.fc-hint__arrow { font-size: 0.6rem; }
.fc-tap-hint .hint-no  { color: #a05858; }
.fc-tap-hint .hint-yes { color: #3d7a5a; }

/* ── Done screen ── */
.fc-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    width: 100%;
    height: 580px;
    padding: 1.5rem;
    touch-action: manipulation;
}
.fc-done__icon  { font-size: 2.5rem; }
.fc-done__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--accent);
}
.fc-done__sub {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Tutorial steps inside feed outro card */
.fc-done__steps {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.75;
    padding-left: 1.3rem;
    margin: 0;
    text-align: left;
    width: 100%;
}
.fc-done__steps li { margin-bottom: 0.3rem; }
.fc-done__steps li:last-child { margin-bottom: 0; }
.fc-done__steps li::marker { color: var(--accent); }
.fc-done__btns { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* Стартовая карточка Ленты «Скроллинг с пользой» */
.feed-tut { gap: 0.85rem; }

/* ── Переиспользуемый маскот для outro-карточек ──────────────────────────
   Свечение цветом маскота (--accent-2, оранжевый) по силуэту: PNG с альфой,
   поэтому drop-shadow повторяет форму и не перекрывает. Модификаторы:
   --sm (мельче), --flip (пружинит-переворачивается), --arrows (стрелки кругом). */
.feed-mascot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    perspective: 600px;
}
.feed-mascot img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter:
        drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 70%, transparent))
        drop-shadow(0 0 11px color-mix(in srgb, var(--accent-2) 45%, transparent));
    animation: feedTutGlow 2.4s ease-in-out infinite;
}
@keyframes feedTutGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 70%, transparent))
            drop-shadow(0 0 10px color-mix(in srgb, var(--accent-2) 38%, transparent));
    }
    50% {
        filter:
            drop-shadow(0 0 8px color-mix(in srgb, var(--accent-2) 92%, transparent))
            drop-shadow(0 0 18px color-mix(in srgb, var(--accent-2) 60%, transparent));
    }
}
/* Мельче — для тесной карточки апселла */
.feed-mascot--sm { width: 76px; height: 76px; }
.feed-mascot--sm img { width: 62px; height: 62px; }

/* Флип с инерцией и пружиниванием. Бóльшую часть цикла маскот стоит лицом
   (полная ширина — не выглядит сжатым), флип короткий и пружинит у самого конца. */
.feed-mascot--flip img {
    animation: feedTutGlow 2.4s ease-in-out infinite,
               mascotFlip 4.8s ease-in-out infinite;
}
@keyframes mascotFlip {
    0%, 70%  { transform: rotateY(0deg); }    /* лицом, полная ширина (~3.4с) */
    83%      { transform: rotateY(372deg); }  /* быстрый оборот + перелёт за 360 */
    89%      { transform: rotateY(350deg); }  /* отскок */
    93%      { transform: rotateY(364deg); }
    97%      { transform: rotateY(357deg); }
    100%     { transform: rotateY(360deg); }  /* осели лицом */
}

/* Стрелки, летающие кругом (режим Повторения = «повтор») */
.feed-mascot__orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: mascotOrbit 5.5s linear infinite;
}
.feed-mascot__orbit span {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1;
    color: var(--accent-2);
    margin: -0.5rem 0 0 -0.3rem;
}
.feed-mascot__orbit span:nth-child(1) { transform: rotate(0deg)   translateY(-60px) rotate(115deg); }
.feed-mascot__orbit span:nth-child(2) { transform: rotate(120deg) translateY(-60px) rotate(115deg); }
.feed-mascot__orbit span:nth-child(3) { transform: rotate(240deg) translateY(-60px) rotate(115deg); }
@keyframes mascotOrbit { to { transform: rotate(360deg); } }

/* Твемоджи, летающие кругом (интро Ленты «Для Вас»): мозг / попадание / крутость.
   Тот же спин-механизм, но без тилта — эмодзи плавно кружат вокруг маскота. */
.feed-mascot__orbit--emoji span { margin: -0.6rem 0 0 -0.6rem; }
.feed-mascot__orbit--emoji span:nth-child(1) { transform: rotate(0deg)   translateY(-60px); }
.feed-mascot__orbit--emoji span:nth-child(2) { transform: rotate(120deg) translateY(-60px); }
.feed-mascot__orbit--emoji span:nth-child(3) { transform: rotate(240deg) translateY(-60px); }
.feed-mascot__orbit--emoji .tw-emoji {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 50%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    .feed-mascot img,
    .feed-mascot--flip img { animation: none; transform: none; }
    .feed-mascot__orbit { animation: none; }
}

/* ── Реклама пуш-уведомлений (outro.js push-promo) ──
   Колокольчик мотается из стороны в сторону и светится; вокруг по орбите
   летают мелкие светящиеся твемоджи. */
.push-bell {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0.2rem auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.push-bell__icon {
    display: block;
    transform-origin: 50% 14%;
    animation: pushBellSwing 2.2s ease-in-out infinite,
               pushBellGlow 2.4s ease-in-out infinite;
}
.push-bell__icon .tw-emoji { width: 54px; height: 54px; display: block; }
@keyframes pushBellSwing {
    0%, 100% { transform: rotate(0deg); }
    8%       { transform: rotate(16deg); }
    24%      { transform: rotate(-13deg); }
    40%      { transform: rotate(9deg); }
    54%      { transform: rotate(-6deg); }
    68%      { transform: rotate(3deg); }
    82%      { transform: rotate(0deg); }
}
@keyframes pushBellGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 70%, transparent))
            drop-shadow(0 0 10px color-mix(in srgb, var(--accent-2) 38%, transparent));
    }
    50% {
        filter:
            drop-shadow(0 0 9px color-mix(in srgb, var(--accent-2) 90%, transparent))
            drop-shadow(0 0 18px color-mix(in srgb, var(--accent-2) 55%, transparent));
    }
}
.push-bell__orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: mascotOrbit 6s linear infinite;
}
.push-bell__orbit span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.5rem 0 0 -0.5rem;
}
.push-bell__orbit span:nth-child(1) { transform: rotate(0deg)   translateY(-50px); }
.push-bell__orbit span:nth-child(2) { transform: rotate(120deg) translateY(-50px); }
.push-bell__orbit span:nth-child(3) { transform: rotate(240deg) translateY(-50px); }
.push-bell__orbit .tw-emoji {
    width: 1rem;
    height: 1rem;
    display: block;
    animation: pushOrbitGlow 1.8s ease-in-out infinite;
}
@keyframes pushOrbitGlow {
    0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-2) 45%, transparent)); }
    50%      { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-2) 80%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
    .push-bell__icon  { animation: none; }
    .push-bell__orbit { animation: none; }
    .push-bell__orbit .tw-emoji { animation: none; }
}

/* ── Заголовок с визуализацией распознавания (.word подсвечиваются) ── */
.recog-headline {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
    text-align: center;
}
.recog-headline .word { padding: 0 3px; }
.recog-headline--lg   { font-size: 1rem; }
.recog-headline--md   { font-size: 0.72rem; line-height: 1.8; color: var(--accent); }
.recog-headline--plan { font-size: 0.78rem; color: var(--accent); margin: 0.1rem 0 0.15rem; }

/* Стартовая карточка Ленты «Скроллинг с пользой» */
.feed-tut { gap: 0.85rem; }

/* Eyebrow-лейбл как на лендинге, но без большого нижнего отступа */
.feed-tut__eyebrow { margin-bottom: 0; }

.feed-tut__lead { margin-top: -0.1rem; font-size: 0.85rem; }
.feed-tut__lead--underline {
    text-decoration: underline;
    text-decoration-color: var(--text-muted);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Буллеты с твемоджи вместо маркеров */
.feed-tut__steps { list-style: none; padding-left: 1.6rem; }   /* влево, но с отступом от края */
.feed-tut__steps li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    text-align: left;
}
.feed-tut__steps b { color: var(--text); }
.feed-tut__bullet { flex-shrink: 0; line-height: 1.4; }
.feed-tut__bullet .tw-emoji { width: 1.1rem; height: 1.1rem; vertical-align: -0.15rem; }

/* CTA: кнопка как на лендинге + пиксельные стрелки */
.feed-tut__cta { align-items: center; gap: 0.8rem; }

@media (max-width: 640px) {
    .recog-headline--lg { font-size: 0.85rem; }
    .feed-mascot { width: 92px; height: 92px; }
    .feed-mascot img { width: 76px; height: 76px; }
    .feed-mascot__orbit span:nth-child(1) { transform: rotate(0deg)   translateY(-52px) rotate(115deg); }
    .feed-mascot__orbit span:nth-child(2) { transform: rotate(120deg) translateY(-52px) rotate(115deg); }
    .feed-mascot__orbit span:nth-child(3) { transform: rotate(240deg) translateY(-52px) rotate(115deg); }
    .feed-mascot__orbit--emoji span:nth-child(1) { transform: rotate(0deg)   translateY(-52px); }
    .feed-mascot__orbit--emoji span:nth-child(2) { transform: rotate(120deg) translateY(-52px); }
    .feed-mascot__orbit--emoji span:nth-child(3) { transform: rotate(240deg) translateY(-52px); }
}

/* ── Апселл подписки в Ленте (outro.js) — карточка в стиле /pricing ── */
.upsell-card {
    width: 100%; max-width: 330px;
    padding: 1.5rem 1.4rem;
    text-align: left;
}
.upsell-card .plan-card__name  { margin-bottom: 1rem; }
.upsell-card .plan-card__price { margin-bottom: 0; }
/* Маскот + «Вся Лента» (распознавание) по центру в лево-выровненной карточке */
.upsell-card .feed-mascot { margin: 0.2rem auto 0; }
.upsell-card .recog-headline--plan { text-align: center; }
/* Вариативный хук (прогрессия): new_user / level_up / stuck */
.upsell-head {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.52rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text);
    margin: 0.1rem 0 0.55rem;
}
.upsell-feats {
    list-style: none; margin: 0 0 1.1rem; padding: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.85rem; line-height: 1.3; color: var(--text);
}
.upsell-feats li { position: relative; padding-left: 1.5rem; }
.upsell-feats li::before {
    content: '✓'; position: absolute; left: 0; top: 0.05rem;
    color: var(--emerald); font-weight: 700;
}
.upsell-skip { opacity: 0.6; }
/* Подпись под кнопкой пробного периода: что будет после триала */
.upsell-trial-note {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.75;
    text-align: center;
    margin: 0.35rem 0 0;
}
.upsell-oferta {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.7;
    text-align: center;
    margin: 0.4rem 0 0;
}
.upsell-oferta a { color: inherit; text-decoration: underline; }
/* Прогрессия-пич по варианту апселла */
.upsell-pitch {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
/* Счётчик оставшихся бесплатных — тускло, как кнопка «Продолжить бесплатно» */
.upsell-free-left {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.6;
    text-align: center;
    margin-top: 0.45rem;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .fc-stack       { height: 520px; max-width: 100%; }
    .fc-word        { font-size: 0.75rem; }
    .fc-translation { font-size: 0.75rem; }
    .fc-deck-title  { display: none; }
    .fc-done        { height: 520px; }
}

/* ══════════════════════════════════════════════
   TUTORIAL MODAL
══════════════════════════════════════════════ */

.tutorial-modal {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.tutorial-modal[hidden] { display: none !important; }

.tutorial-modal__box {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.tutorial-modal__icon {
    font-size: 2.2rem;
    line-height: 1;
}

.tutorial-modal__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--accent);
    margin: 0;
    line-height: 1.8;
    letter-spacing: .02em;
}

.tutorial-modal__steps {
    text-align: left;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.75;
    padding-left: 1.4rem;
    margin: 0;
    width: 100%;
}
.tutorial-modal__steps li { margin-bottom: 0.35rem; }
.tutorial-modal__steps li:last-child { margin-bottom: 0; }
.tutorial-modal__steps li::marker { color: var(--accent); }

.tutorial-modal__tip {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    width: 100%;
}

/* "?" trigger button — small, unobtrusive */
.tutorial-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
    line-height: 1;
}
.tutorial-btn:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 480px) {
    .tutorial-modal__box { padding: 1.5rem 1.25rem; }
    .tutorial-modal__steps { font-size: 0.84rem; }
}

/* ════ Помощь при заблокированном микрофоне ════ */
.mic-help {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mic-help--show { display: flex; }
.mic-help__box {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.mic-help__icon { font-size: 2.2rem; line-height: 1; }
.mic-help__title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: var(--accent);
    line-height: 1.8;
    letter-spacing: .02em;
    margin: 0;
}
.mic-help__text {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}
.mic-help__steps {
    text-align: left;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.7;
    padding-left: 1.3rem;
    margin: 0;
    width: 100%;
}
.mic-help__steps li { margin-bottom: 0.4rem; }
.mic-help__steps li:last-child { margin-bottom: 0; }
.mic-help__steps li::marker { color: var(--accent); }
.mic-help__btns {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* ════ SOON BADGE ════ */
.soon-badge {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    background: var(--amber);
    color: #fff;
    padding: 3px 6px;
    border-radius: 2px;
    margin-left: 6px;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}

.hero-action-btn--soon {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ════ LEARN PAGE ════ */
.learn-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

.learn-btn {
    border: 3px solid var(--border);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.learn-btn:not(.learn-btn--soon):hover {
    transform: translate(-3px,-3px);
    box-shadow: var(--shadow-lg);
}

.learn-btn__icon { font-size: 2rem; line-height: 1; }

.learn-btn__label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #fff;
    line-height: 1.6;
}

.learn-btn__sub {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    flex: 1;
}

.learn-btn__cta {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: rgba(255,255,255,0.7);
}

.learn-btn--cards     { background: var(--accent); }
.learn-btn--dialogs   { background: var(--accent-2); }
.learn-btn--picture   { background: var(--amber); }
.learn-btn--fillin    { background: var(--emerald); }
.learn-btn--smalltalk { background: #7C3AED; }
.learn-btn--fact      { background: #157347; }

.learn-btn--soon .soon-badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Picture Practice ─────────────────────────────────────────────── */
.pic-stage {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0 0;
    width: 100%;
}

.pic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 340px;
}

.pic-polaroid {
    width: 88%;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--border);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pic-emoji {
    font-size: 9rem;
    line-height: 1;
    text-align: center;
}
.pic-emoji .pic-emoji-svg,
.fc-emoji .fc-emoji-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.1em;
    pointer-events: none;
}
.bubble__emoji .bubble__emoji-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.1em;
    pointer-events: none;
}
.tw-emoji {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    pointer-events: none;
}
.avatar-emoji {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}
.pic-answer {
    text-align: center;
    width: 100%;
}

.pic-translation {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    min-height: 2rem;
    /* Ответ нельзя выделять — иначе виден замаскированный текст (на экране ▒,
       реальный — в data-w, подставляется при .done/reveal). */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.pic-translation .word              { color: transparent; }
.pic-translation .word.active       { color: transparent; background-color: var(--accent-2); outline: 2px solid var(--accent-2); }
.pic-translation .word.done         { color: var(--emerald); }
.pic-translation .word.done.skipped { color: var(--emerald); opacity: 0.07; }
.pic-answer.revealed .pic-translation .word         { color: var(--text); }
.pic-answer.revealed .pic-translation .word.done    { color: var(--emerald); }

.pic-transcription {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pic-score {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--emerald);
    text-align: center;
    min-height: 1.2em;
    margin-top: 0.3rem;
}

.pic-controls {
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}
/* Призыв говорить голосом над кнопкой микрофона (Picture/FillIn) */
.pic-speak-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.46rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--accent-2);
    text-align: center;
    display: none; /* видна только когда микрофон активен (JS: .pic-speak-hint--on) */
    align-items: center;
    gap: 0.4rem;
    animation: picSpeakPulse 1.8s ease-in-out infinite;
}
.pic-speak-hint--on { display: inline-flex; }
.pic-speak-hint .tw-emoji { width: 0.9rem; height: 0.9rem; }
@keyframes picSpeakPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pic-speak-hint { animation: none; } }

.pic-main-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    padding: 0.9rem 1rem;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow);
    justify-content: center;
    line-height: 1;
    letter-spacing: 0.02em;
    min-width: 90px;
}
.pic-main-btn:hover {
    box-shadow: var(--shadow-lg);
    transform: translate(-2px, -2px);
}
.pic-main-btn--speak { background: var(--accent);   color: #fff; border-color: var(--accent);   }
.pic-main-btn--rec   { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

@media (hover: none) {
    .pic-main-btn:hover { box-shadow: var(--shadow); transform: none; }
}

/* ── Fill-In Practice («Подбери слово») ────────────────────────────────── */

/* Phrase: pixel font, word-break for multi-word */
.pic-translation.fi-phrase {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 2.0;
    word-break: break-word;
    letter-spacing: 0;
}

/* Wrong-answer shake animation */
@keyframes fi-shake {
    0%, 100% { transform: translateX(0); }
    16%, 50% { transform: translateX(-8px); }
    33%, 67% { transform: translateX(8px); }
    83%       { transform: translateX(-4px); }
}
.pic-translation.fi-shake {
    animation: fi-shake 0.48s ease;
}
.pic-translation.fi-shake,
.pic-translation.fi-shake .word { color: #c0392b !important; }

.fi-stage {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0.75rem;
    min-height: 0;
    width: 100%;
}

.fi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1rem;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.fi-card--done {
    text-align: center;
    padding: 2rem 1rem;
}

.fi-phrase {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.fi-blank {
    display: inline-block;
    min-width: 3.5ch;
    padding: 0 0.2em;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
}

.fi-blank--active {
    background: var(--accent);
    color: #fff;
    animation: fiPulse 1s ease-in-out infinite;
}

.fi-blank--pending {
    background: var(--bg-2, #eee);
    color: var(--fg-dim, #888);
}

.fi-blank--done {
    background: #2d7a2d22;
    color: var(--accent-2, #1a8a1a);
    font-style: italic;
}

@keyframes fiPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

.fi-translation {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.8rem;
    color: var(--fg-dim, #888);
    text-align: center;
}

.fi-hint-timer-bar {
    height: 2px;
    background: color-mix(in srgb, var(--border) 50%, transparent);
    border-radius: 2px;
    margin: 0.6rem 0 0;
    overflow: hidden;
}
.fi-hint-timer-fill {
    height: 100%;
    background: color-mix(in srgb, var(--accent) 65%, transparent);
    border-radius: 2px;
    width: 100%;
}

.fi-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 0.4rem;
}

/* Barely-visible chips — styled for both light and dark themes */
.fi-chip {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.36rem;
    padding: 0.35rem 0.6rem;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--border) 45%, transparent);
    color: color-mix(in srgb, var(--text-muted) 65%, transparent);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    touch-action: manipulation;
    letter-spacing: 0;
}
.fi-chip:hover, .fi-chip:active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    border-style: solid;
    opacity: 1;
}

.fi-word-score {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: var(--accent-2, #1a8a1a);
    text-align: center;
}

.pic-dontknow-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--fg-dim, #888);
    transition: background 0.15s;
    touch-action: manipulation;
}

.pic-dontknow-btn:hover { background: var(--bg-2, #eee); }

/* ══════════════════════════════════════════════
   FEED SHELL  (TikTok-стиль SPA-ленты)
══════════════════════════════════════════════ */

/* Body lock: на ленте никаких скроллов и футера */
body.practice-lock { overflow: hidden; height: 100vh; }
body.practice-lock > footer.footer,
body.practice-lock > .back-to-top,
body.practice-lock > .feed-nav { display: none !important; }

.feed-shell {
    position: fixed;
    inset: 0;
    padding-top: var(--nav-h);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    overscroll-behavior: contain;
    z-index: 1;
}
/* Переключатель режимов ленты — обычный flex-элемент, резервирует свою высоту */
.feed-shell__mode-switch {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    margin: 0.5rem auto 0;
    z-index: 5;
    width: min(546px, calc(100vw - 16px));
    max-width: 92vw;
    display: flex;
    align-items: stretch;
    padding: 0;
    background: var(--bg-card);
    border: 3px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* Плавающий индикатор активной кнопки */
.feed-shell__mode-switch::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    left: 0;
    background: var(--accent);
    transition: left 0.28s cubic-bezier(.5,.1,.25,1);
    z-index: 0;
    pointer-events: none;
}
.feed-shell__mode-switch[data-active="for-you"]::before { left: 50%; }
.feed-mode-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.02em;
    flex: 1 1 0;
    padding: 0.55rem 0.4rem;
    cursor: pointer;
    transition: color 0.18s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.feed-mode-btn[aria-selected="true"] { color: #fff; }
@media (max-width: 480px) {
    .feed-mode-btn { padding: 0.5rem 0.3rem; font-size: 0.55rem; }
}

/* Viewport — «экран» карточки. Бордер ставим на него, потому что
   overflow:hidden обрезает контент по его границам. Все форматы — один
   размер: header / progress / контент / controls всегда на одинаковой
   высоте между типами материала. */
.feed-shell__viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--bg);
}

.feed-shell__slide {
    position: absolute;
    inset: 0;
    display: flex;
    background: var(--bg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
    /* will-change added only during animation via JS class */
}
.feed-shell__slide--animating { will-change: transform, opacity; }
.feed-shell__slide[hidden] { display: none !important; }

.feed-shell__slide > .ps-fragment {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* Унаследованные min-height: 100vh / max-width: 780px от standalone-страниц
   ломают раскладку внутри ленты — глушим. */
.feed-shell .fc-wrap,
.feed-shell .practice {
    min-height: 0;
    max-width: none;
    padding: 0.75rem 0.75rem 1rem;
    margin: 0;
}
.feed-shell .fc-header        { flex: 0 0 auto; margin-bottom: 0.75rem; }
.feed-shell .fc-progress-bar  { flex: 0 0 auto; margin-bottom: 1rem; }
/* В ленте заголовок всегда виден — без него кнопка «?» неочевидна */
.feed-shell .fc-deck-title    { display: block; }

/* Picture/FillIn: стейдж — растягивается, кнопка прижата к низу */
.feed-shell .pic-stage    { padding: 0; flex: 1 1 auto; min-height: 0; }
.feed-shell .fi-stage     { padding: 0; flex: 1 1 auto; min-height: 0; }
.feed-shell .pic-controls { padding: 0.5rem 0 0; flex: 0 0 auto; margin-top: 0.75rem; }

/* Exercise: диалог-карусель — растягивается, mic-area внизу */
.feed-shell .practice .dialog-box { height: auto; flex: 1 1 auto; min-height: 0; }
.feed-shell .practice .anim-slot,
.feed-shell .practice .demo__footer,
.feed-shell .practice .mic-area   { flex: 0 0 auto; }

/* FlashCard: stack — растягивается, actions/hint внизу */
.feed-shell .fc-stack    { height: auto; flex: 1 1 auto; min-height: 0; max-width: none; margin-bottom: 0.75rem; }
.feed-shell .fc-actions  { flex: 0 0 auto; }
.feed-shell .fc-hint     { flex: 0 0 auto; margin: 0.5rem 0 0; }

/* Блюр-фон за рамками: виден во время перехода */
.feed-shell__blur-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.feed-shell--transitioning .feed-shell__blur-backdrop { opacity: 1; }

/* Мобильный портрет: фиксированные пропорции; 100% = высота shell (stable, не dvh) */
@media (max-width: 719px) and (orientation: portrait) {
    .feed-shell__viewport {
        flex: 0 0 auto;
        align-self: center;
        margin: 0.5rem 0 auto;
        width: calc(100vw - 16px);
        max-width: 420px;
        height: min(calc((100vw - 16px) * 843 / 546), calc(100% - 56px));
        /* visible: карточки скользят к краям экрана (shell), а не к краям viewport'а */
        overflow: visible;
    }
    .feed-shell__slide {
        inset: 0;
        border: 3px solid var(--border);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }
}

/* ── Узкие экраны: правка верстки под маленькие устройства ──────────────────
   Десктоп/планшет (≥720px) и landscape не затрагиваем — десктопная раскладка
   остаётся как была. Высоту карточки НЕ режем (иначе усилили бы переполнение
   на коротких телефонах) — только горизонтальный отступ под нав и шрифты. */
@media (max-width: 719px) and (orientation: portrait) {
    /* Нав-колонка компактнее: меньше перекрывает правый край карточки */
    .feed-shell__nav { right: 0.4rem; bottom: 0.5rem; gap: 0.4rem; }
    .feed-shell__nav .feed-nav__btn { width: 2.4rem; height: 2.4rem; font-size: 1rem; }

    /* Диалоги: базовый .mic-area тянет margin:2rem 0 (64px) из standalone-страницы —
       в тесной карточке на низких экранах (iPhone SE и подобные) это душит dialog-box
       и режет реплику снизу. Ужимаем поля → пузырю достаётся ~44px высоты.
       Смоллток не трогаем — у него свой компактный .st-mic-area. */
    .feed-shell .ps-fragment--exercise .mic-area { margin: 0.6rem 0; }

    /* Picture/Fill-in: квадратный поляроид (width:88%; aspect-ratio:1/1; flex-shrink:0)
       на низких экранах выше доступной высоты стейджа и, центрируясь, вылезает вверх
       НА ПРОГРЕССБАР. Стейдж делаем query-контейнером и вписываем поляроид И по высоте:
       flex-grow заполняет свободную высоту карточки, max-height:88cqw кэпает высоту по
       88% ширины стейджа (на высоком экране — тот же квадрат 88%, на низком — ужимается). */
    .feed-shell .pic-stage,
    .feed-shell .fi-stage { container-type: size; }
    .feed-shell .pic-card { min-height: 0; height: 100%; justify-content: center; }
    .feed-shell .pic-polaroid {
        flex: 1 1 auto;
        min-height: 0;
        width: auto;
        max-width: 88%;
        max-height: 88cqw;
        margin-inline: auto;
    }
}

/* Отступ под нав-колонку — только когда стрелки ▲▼ реально видны (мышь/desktop-
   узкое окно). На тач-телефонах стрелки скрыты (pointer: coarse), а share-кнопка
   уходит под карточку — там ряд кнопок флешкарты остаётся по центру. */
@media (max-width: 719px) and (orientation: portrait) and (pointer: fine) {
    .feed-shell .fc-inner-actions { padding-right: 2.8rem; }
}

/* Узкие телефоны: пиксель-шрифты, свёрстанные под референс-карточку 546px,
   сжимаем под реальную ширину, чтобы текст не вылезал/не обрезался. */
@media (max-width: 480px) {
    .feed-shell .bubble__text { font-size: 0.82rem; line-height: 1.55; }
    .feed-shell .fc-tap-hint  { font-size: 0.44rem; padding: 0 0.4rem; }
}

/* Оверлей "переверни телефон" */
.feed-shell__rotate-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.feed-shell__rotate-hint__icon {
    font-size: 2.5rem;
    animation: rotate-hint-spin 2s ease-in-out infinite;
}
.feed-shell__rotate-hint__text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.03em;
}
@keyframes rotate-hint-spin {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(90deg); }
    60%  { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}
/* Волл «переверни телефон» — только на тач-телефонах, где портретную
   пиксель-карточку реально не вместить. На десктопе/ноутбуке (включая
   короткие окна и 1280×720) карта адаптируется и волл не нужен. */
@media (max-height: 550px) and (orientation: landscape) and (pointer: coarse) {
    .feed-shell__rotate-hint { display: flex; }
}

/* Стрик-плашка — приветствие на первый заход в Ленту за день */
.feed-streak {
    position: absolute;
    top: calc(var(--nav-h) + 3.1rem);
    left: 50%;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(420px, calc(100vw - 24px));
    padding: 0.6rem 0.95rem;
    background: var(--bg-card);
    border: 3px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, -14px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.feed-streak--show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.feed-streak[hidden] { display: none; }
.feed-streak__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.feed-streak__icon .tw-emoji { width: 1.7rem; height: 1.7rem; vertical-align: middle; }
.feed-streak__body { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.feed-streak__count {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.58rem;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.feed-streak__sub {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Мобильный ландшафт: центрируем портретную карточку */
@media (max-height: 550px) and (orientation: landscape) {
    .feed-shell__viewport {
        flex: 0 0 auto;
        margin: auto;
        height: calc(100dvh - 72px);
        width: min(calc((100dvh - 72px) * 546 / 766), calc(100vw - 32px));
        overflow: visible;
        background: transparent;
    }
    .feed-shell__slide {
        inset: 0;
        border: 3px solid var(--border);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        background: var(--bg);
    }
}

/* Десктоп: рамка на каждом слайде, а не на viewport. */
@media (min-width: 720px) {
    .feed-shell__viewport {
        flex: 0 0 auto;
        margin: auto;
        /* Карточка всегда сохраняет пропорцию 546:766 и вписывается одновременно
           по ширине И по доступной высоте (за вычетом шапки сайта и переключателя
           режимов). На сжатых горизонтальных экранах (напр. 1280×720) карта
           пропорционально уменьшается, а не сплющивается и не обрезается снизу. */
        width: min(546px, 92vw, calc((100dvh - var(--nav-h) - 52px) * 546 / 766));
        aspect-ratio: 546 / 766;
        height: auto;
        overflow: visible;  /* соседний слайд чуть виден при переходе */
        background: transparent;
    }
    .feed-shell__slide {
        border: 3px solid var(--border);
        box-shadow: var(--shadow-lg);
        overflow: hidden;  /* конфетти и контент не вылазят за рамку */
        background: var(--bg);
    }
}

/* Outro / системные карточки */
.outro-card {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.outro-card .fc-done { margin: 0; }

/* ── Лента: карточки-обложки подгоняются под высоту слайда ─────────────────
   .fc-done несёт фикс-высоту (520/580px) из standalone-страниц «готово».
   Внутри слайда Ленты (аспект-лок 546:843 → на узких-высоких экранах вроде
   360×800 карточка ~531px) фикс-высота + центрирование приводят к тому, что
   контент (особенно интро «Скроллинг с пользой») выше карточки и CTA «Начать
   бесплатно» режется рамкой слайда (overflow:hidden). Решение: высота по
   контенту; вертикальный центр через margin:auto на ребёнке — центрирует,
   когда влезает, и прокручивает без обрезки CTA, когда нет. */
.feed-shell .outro-card {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
}
.feed-shell .outro-card > * { margin-block: auto; flex-shrink: 0; }
.feed-shell .outro-card .fc-done {
    height: auto;
    min-height: 0;
    padding: 0.25rem 0.25rem 0.5rem;
}

/* Узкие экраны: подрезаем вертикальные отступы интро, чтобы умещалось без
   прокрутки (маскот/орбиту не трогаем — их геометрия завязана на размер). */
@media (max-width: 480px) {
    .feed-shell .feed-tut { gap: 0.6rem; }
    .feed-shell .feed-tut__lead   { font-size: 0.8rem; }
    .feed-shell .feed-tut__steps  { font-size: 0.8rem; line-height: 1.55; }
    .feed-shell .feed-tut__steps li { margin-bottom: 0.3rem; }
    .feed-shell .feed-tut__cta    { gap: 0.5rem; }
}

.feed-shell__loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
}
.feed-shell__loading[hidden] { display: none !important; }
.feed-shell__spinner {
    width: 3rem; height: 3rem;
    border: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: psSpin 0.8s linear infinite;
}
@keyframes psSpin { to { transform: rotate(360deg); } }

/* Текст под спиннером появляется только если загрузка затянулась (>0.6с) —
   на быстрых загрузках не мелькает. */
.feed-shell__loading-text {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0 1.5rem;
    opacity: 0;
    animation: psLoadTextIn 0.3s ease 0.6s forwards;
}
@keyframes psLoadTextIn { to { opacity: 1; } }

.feed-shell__empty,
.feed-shell__paywall {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.feed-shell__empty[hidden],
.feed-shell__paywall[hidden] { display: none !important; }

/* На тач-устройствах кнопки вверх/вниз не нужны — свайп */
@media (pointer: coarse) {
    .feed-nav__btn--dir { display: none !important; }
}

/* Тутор внутри слайда — absolute, чтобы улетал вместе с карточкой */
.feed-shell__slide .tutorial-modal {
    position: absolute;
    inset: 0;
}

/* Хинт о свайпе */
.feed-shell__swipe-hint {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.feed-shell__swipe-hint[hidden] { display: none !important; }
.feed-shell__swipe-hint__icon {
    font-size: 2.8rem;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    animation: feedSwipeHint 1.5s ease-in-out 3 forwards;
}
@keyframes feedSwipeHint {
    0%   { transform: translateY(20px); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translateY(-30px); opacity: 1; }
    80%  { opacity: 0.8; }
    100% { transform: translateY(-30px); opacity: 0; }
}

/* Конфетти внутри рамки слайда — абсолютное, а не фиксированное */
.feed-shell__slide .victory-particle { position: absolute; }

/* Нав-кнопки: справа, как в TikTok */
.feed-shell__nav {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 50;
}
@media (min-width: 720px) {
    .feed-shell__nav {
        right: 1.25rem;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}
.feed-shell__nav .feed-nav__btn {
    width: 2.75rem; height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ══════════════════════════════════════════════════
   Кнопка перевода и модальное окно перевода
══════════════════════════════════════════════════ */
.bubble { position: relative; }
.pic-polaroid { position: relative; }

.pic-ru-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.45);
    border: none;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: rgba(255,255,255,0.55);
    padding: 0.45rem 0.5rem;
    text-align: center;
    transition: color 0.15s, background 0.15s;
    user-select: none;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.pic-ru-hint--shown {
    font-size: 0.6rem;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.pic-ru-hint:hover { color: #fff; background: rgba(0,0,0,0.6); }

.translate-btn {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    background: none;
    border: none;
    color: rgba(128,128,128,0.45);
    font-size: 0.62rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    line-height: 1;
    border-radius: 3px;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    transition: color 0.15s, background 0.15s;
    z-index: 2;
    user-select: none;
    letter-spacing: 0;
}
.translate-btn:hover,
.translate-btn:focus-visible {
    color: rgba(128,128,128,0.9);
    background: rgba(128,128,128,0.12);
    outline: none;
}

.translate-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9500;
    padding: 1rem;
}
.translate-modal[hidden] { display: none !important; }

.translate-modal__box {
    background: linear-gradient(145deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 100%);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: min(90%, 320px);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.translate-modal__text {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    min-height: 1.8rem;
    word-break: break-word;
}

.translate-modal__warning {
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 0.67rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin: 0;
    line-height: 1.4;
    max-width: 26ch;
}

/* ── Small talk (живой диалог, формат «Диалогов») ───────────────────────── */
.st-scene {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.4rem 0 0.2rem;
}
.st-scene__emoji { display: flex; gap: 0.25rem; }
.st-scene__emoji .tw-emoji { width: 1.4rem; height: 1.4rem; }
.st-scene__persona {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.46rem;
    color: var(--text-muted);
}

/* Диалог: активная строка по центру через carousel-трансформ (как в Exercise), без скролла. */
.ps-fragment--smalltalk .dialog-box { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* Подсказка — приглушённая строка с пунктиром. */
.dialog-line--hint .bubble { border-style: dashed; opacity: 0.8; font-style: italic; }
.dialog-line--live .bubble { opacity: 0.85; }

/* Использованное целевое слово — подсветка в баббле (п.5). */
.bubble__text .word.st-word-hit {
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    padding: 0 2px;
}
/* Karaoke: текущее озвучиваемое слово реплики собеседника. */
.bubble__text .word.st-spk { background: var(--accent-2); color: #fff; border-radius: 3px; }

.st-targets {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    padding: 0.4rem 0;
}
.st-target {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
    opacity: 0.55;
    transition: all 0.2s;
}
.st-target--used {
    opacity: 1;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: scale(1.05);
}

/* Волл дневной квоты в списке Учебника. */
.st-quota-wall {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    border: 2px dashed var(--border);
    background: var(--bg-card);
    padding: 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Кнопки — стиль и расположение как в «Диалогах» (.mic-area/.mic-btn/.listen-btn, п.4). */
.st-mic-area { flex: 0 0 auto; margin: 0.5rem 0 0.9rem; gap: 0.55rem; }
.st-mic-area .mic-btn { width: 64px; height: 64px; font-size: 1.6rem; }
.st-mic-area .mic-btn .tw-emoji { width: 1.9rem; height: 1.9rem; }
.st-mic-area .listen-btn .tw-emoji { width: 0.9rem; height: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Интересные факты — говорящий маскот (видео-луп) + караоке-субтитры + эмодзи.
   Иммерсивный полноэкранный вид: рассчитан на запись экрана для TikTok.
   ═══════════════════════════════════════════════════════════════════════════ */
.ps-fragment--fact {
    position: relative;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    background:
        radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--accent) 16%, var(--bg)) 0%, var(--bg) 62%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Бренд сверху */
.fact-brand {
    position: relative;
    z-index: 4;
    margin-top: 1.1rem;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text);
    text-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent);
    flex: 0 0 auto;
    pointer-events: none;
}
.fact-brand__dot { color: var(--accent-2); }

/* Кнопка-туториал (правый верхний угол) */
.fact-tut-btn {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 6;
}

/* Поле летающих эмодзи — за поляроидом (не налетают на маскота/субтитры) */
.fact-emoji-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.fact-emoji {
    position: absolute;
    bottom: -3rem;
    width: var(--sz);
    height: var(--sz);
    opacity: 0;
    will-change: transform, opacity;
    animation: factEmojiFloat var(--dur) linear forwards;
}
.fact-emoji__img { width: 100%; height: 100%; display: block; }
@keyframes factEmojiFloat {
    0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
    12%  { opacity: 0.85; }
    88%  { opacity: 0.85; }
    100% { transform: translateY(-115vh) translateX(calc(var(--sway) * 60px)) rotate(var(--rot)); opacity: 0; }
}

/* Сцена */
.fact-stage {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 0.5rem 1rem 1.4rem;
    box-sizing: border-box;
}

/* Поляроид с видео — светится по краям */
.fact-polaroid {
    position: relative;
    background: #fbfbf7;
    padding: 0.7rem 0.7rem 0;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.08),
        0 14px 40px rgba(0,0,0,0.45);
    transform: rotate(-1.4deg);
    animation: factGlowPulse 3.4s ease-in-out infinite;
    max-width: min(74vw, 360px);
}
@keyframes factGlowPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 14px 40px rgba(0,0,0,0.45),
                            0 0 28px 4px color-mix(in srgb, var(--accent) 55%, transparent); }
    50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 14px 40px rgba(0,0,0,0.45),
                            0 0 46px 10px color-mix(in srgb, var(--accent-2) 60%, transparent); }
}
.fact-polaroid__frame {
    position: relative;
    width: min(58vw, 300px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
    border-radius: 2px;
}
.fact-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fact-polaroid__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 40px 6px color-mix(in srgb, var(--accent) 40%, transparent);
    mix-blend-mode: screen;
}
.fact-polaroid__caption {
    font-family: 'Press Start 2P', monospace;   /* брендовый пиксельный */
    font-size: 0.62rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: #222;
    padding: 0.5rem 0.3rem 0.6rem;
    word-break: break-word;
}

/* Караоке-субтитры (по частям) */
.fact-subtitles {
    position: relative;
    z-index: 3;
    width: min(86vw, 460px);
    /* Фиксированная высота: высота субтитров не должна двигать поляроид. Текст
       центрируем; если chunk не влезает — fact.js авто-ужимает шрифт (fitSubtitles). */
    height: 3.4em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 0.1em 0.32em;
    overflow: hidden;
    text-align: center;
    font-size: clamp(1rem, 4.2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    text-wrap: balance;
    flex: 0 0 auto;
}
.fact-subtitles--in { animation: factSubIn 0.28s ease both; }
@keyframes factSubIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fact-sub-word {
    display: inline-block;
    color: color-mix(in srgb, var(--text) 38%, transparent);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
    transition: color 0.12s ease, transform 0.12s ease;
}
.fact-sub-word--on {
    color: var(--accent-2);
    transform: translateY(-1px) scale(1.04);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 65%, transparent);
}

/* Затемнение + иконка по паузе */
.fact-pause-veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.22s ease;
    pointer-events: none;
}
.fact-pause-veil--show { background: rgba(0,0,0,0.42); }
.fact-pause-veil__icon {
    font-size: 3.4rem;
    color: #fff;
    opacity: 0;
    transform: scale(0.7);
    text-shadow: 0 4px 18px rgba(0,0,0,0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.fact-pause-veil--show .fact-pause-veil__icon {
    opacity: 1;
    transform: scale(1);
    animation: factVeilPulse 1.6s ease-in-out infinite;
}
@keyframes factVeilPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Индикатор play/pause (левый нижний угол) */
.fact-pp-indicator {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    z-index: 6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-nav) 70%, transparent);
    backdrop-filter: blur(6px);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.fact-pp-indicator__icon { font-size: 0.85rem; line-height: 1; letter-spacing: -1px; }

/* В ленте сцена занимает доступную высоту */
.feed-shell .ps-fragment--fact { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   teach — салатовая тема + хедер репетиторского кабинета.
   .teach-theme переопределяет токены акцента/фона на зелёные (layout всегда light).
   ═══════════════════════════════════════════════════════════════════════════ */
.teach-theme {
    --accent:    #2E9E44;   /* салатово-зелёный акцент (кнопки/ссылки) */
    --accent-h:  #25883A;
    --bg:        #EAF6EA;    /* светло-салатовый фон */
    --bg-check:  #DCEFDC;    /* клетка фона — в тон */
    --bg-nav:    #DCEFDC;
}
.teach-theme .btn-primary { background: var(--emerald); }
.teach-theme .btn-primary:hover { background: var(--accent-h); }

.teach-header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1rem;
    padding: 0.7rem 1.1rem;
    background: color-mix(in srgb, var(--bg-nav) 80%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.teach-header__logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.72rem; letter-spacing: 0.03em; text-decoration: none; color: var(--text);
}
.teach-header__teach { color: var(--emerald); }
.teach-header__spacer { flex: 1; }
.teach-header__link {
    font-size: 0.9rem; text-decoration: none; color: var(--text-muted);
}
.teach-header__link:hover { color: var(--emerald); }
.teach-header__btn {
    font-size: 0.85rem; text-decoration: none; color: #fff; background: var(--emerald);
    padding: 0.4rem 0.9rem; border-radius: 8px;
}

/* Каталог фактов — короткий текст-превью на карточке */
.ex-card__sub-text {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0.2rem 0 0.4rem;
}
@media (prefers-reduced-motion: reduce) {
    .fact-polaroid { animation: none; }
    .fact-pause-veil--show .fact-pause-veil__icon { animation: none; }
}