/* Прогресс ученика: значок уровня в шапке, праздник после решения, полоска урока
   со звездой/кубком, стили имени (косметика за уровни). Цвета — из переменных темы. */

/* ---------- значок уровня в шапке ---------- */
.main-header ul li a.level-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.85rem;
    white-space: nowrap;
}
/* Мини-полоска опыта — только на широких экранах, чтобы шапка не переносилась */
@media (max-width: 1400px) { .level-chip-bar { display: none !important; } }
.level-chip-icon { font-size: 1.1rem; line-height: 1; }
.level-chip-bar {
    display: inline-block;
    width: 42px;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.level-chip-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffd319, #ff7a45);
    border-radius: 3px;
}

/* ---------- полоска прогресса урока ---------- */
.lesson-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.lesson-progress-track {
    flex: 1;
    min-width: 160px;
    height: 14px;
    border-radius: 999px;
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
    overflow: hidden;
    position: relative;
}
.lesson-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    position: relative;
    overflow: hidden;
}
/* Анимации прогресса и имён — только если ученик включил «Анимации» (data-anim). */
html[data-anim] .lesson-progress-fill { transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
html[data-anim] .lesson-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: progress-shine 2.8s ease-in-out infinite;
}
@keyframes progress-shine { 60%, 100% { transform: translateX(100%); } }
.lesson-progress-text { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.lesson-award {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.lesson-award.star { background: var(--badge-warning-bg); color: var(--badge-warning-fg); box-shadow: var(--badge-warning-ring); }
.lesson-award.trophy { position: relative; overflow: hidden; isolation: isolate; }
.lesson-award.gold-static {
    background: linear-gradient(135deg, #8a6a12 0%, #d4af37 22%, #fff1a8 42%, #e8c547 55%, #b8860b 78%, #f3d36b 100%);
    color: #3a2a00;
}
.lesson-award.locked { opacity: 0.45; filter: grayscale(1); background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.lesson-award .award-icon { display: inline-block; }
html[data-anim] .lesson-award:not(.locked) .award-icon { animation: award-pop 2.4s ease-in-out infinite; }
@keyframes award-pop { 0%, 80%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.35) rotate(-10deg); } 94% { transform: scale(1.15) rotate(8deg); } }

/* маленькие отметки в списке уроков уровня */
.lesson-mini-progress { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.lesson-mini-track { width: 90px; height: 6px; border-radius: 3px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.lesson-mini-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); }

/* ---------- стили имени (косметика) ---------- */
.name-icon { margin-right: 4px; }
/* «Свечение»: переливающийся градиент в цветах темы, бегущий блик и пульсирующий ореол */
.name-style-glow {
    font-weight: 700;
    background-image: linear-gradient(100deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary)) 30%,
        color-mix(in srgb, var(--color-accent, var(--color-primary)) 35%, #ffffff) 50%,
        var(--color-accent, var(--color-primary)) 70%, var(--color-primary) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--color-primary) 80%, transparent))
            drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent, var(--color-primary)) 45%, transparent));
}
html[data-anim] .name-style-glow { animation: glow-sweep 3.2s linear infinite, glow-pulse 2.6s ease-in-out infinite; }
.name-style-glow { position: relative; display: inline-block; max-width: 100%; box-sizing: border-box; padding-right: 0.8em; }
.name-style-glow::after {
    content: '✦'; position: absolute; top: -0.3em; right: 0; font-size: 0.65em; pointer-events: none;
    color: var(--color-accent, var(--color-primary)); -webkit-text-fill-color: var(--color-accent, var(--color-primary));
    text-shadow: 0 0 4px var(--color-accent, var(--color-primary)), 0 0 8px var(--color-primary);
}
html[data-anim] .name-style-glow::after { animation: gold-twinkle 1.6s ease-in-out infinite; }
/* светлые темы: насыщеннее и без «дымки» вокруг букв */
html:not([data-dark]) .name-style-glow {
    background-image: linear-gradient(100deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary)) 35%,
        color-mix(in srgb, var(--color-primary) 55%, #ffffff) 50%, var(--color-accent, var(--color-primary)) 65%, var(--color-primary) 100%);
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--color-primary) 55%, transparent))
            drop-shadow(0 1px 3px color-mix(in srgb, var(--color-accent, var(--color-primary)) 30%, transparent));
}
html:not([data-dark])[data-anim] .name-style-glow { animation: glow-sweep 3.2s linear infinite; }
@keyframes glow-sweep { from { background-position: 110% 0; } to { background-position: -140% 0; } }
@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--color-primary) 80%, transparent))
                       drop-shadow(0 0 5px color-mix(in srgb, var(--color-accent, var(--color-primary)) 35%, transparent)); }
    50% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-primary) 95%, transparent))
                  drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent, var(--color-primary)) 70%, transparent)); }
}

/* значки с 15 уровня — анимированные (только при включённых анимациях) */
.icon-anim { display: inline-block; transform-origin: 50% 60%; }
/* значки «Цифры» (ур. 10) и «Анимированные цифры» (ур. 15): до трёх цифр ученика на плашке */
.icon-digits { display: inline-flex; align-items: center; gap: 0.04em; padding: 0.06em 0.26em; border-radius: 0.38em; vertical-align: 0.06em;
    font: 800 0.78em/1.15 'Courier New', monospace; color: #2b1600; background: linear-gradient(135deg, #ffe066, #ffb347);
    box-shadow: inset 0 -0.08em 0 rgba(0, 0, 0, 0.18), 0 0 0 0.06em rgba(255, 170, 0, 0.55); }
.icon-digits span { display: inline-block; }
.icon-digits-anim { color: #fff; background: linear-gradient(120deg, #7c4dff, #00b4ff, #00e5a0, #ff4ecd, #7c4dff); background-size: 300% 100%;
    box-shadow: 0 0 0.35em rgba(124, 77, 255, 0.7), inset 0 -0.08em 0 rgba(0, 0, 0, 0.25); text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.8); }
html[data-anim] .icon-digits-anim { animation: digits-bg 3s linear infinite; }
html[data-anim] .icon-digits-anim span { animation: digits-roll 2.4s ease-in-out calc(var(--i) * 0.18s) infinite; }
@keyframes digits-bg { to { background-position: 300% 0; } }
@keyframes digits-roll {
    0%, 55%, 100% { transform: none; }
    65% { transform: translateY(-0.28em) scale(1.15); }
    75% { transform: translateY(0.06em) scale(0.95); }
    85% { transform: none; }
}
html[data-anim] .icon-star { animation: icon-star 2.4s ease-in-out infinite; }
html[data-anim] .icon-rocket { animation: icon-rocket 1.6s ease-in-out infinite; }
html[data-anim] .icon-comet { animation: icon-comet 2.2s ease-in-out infinite; }
html[data-anim] .icon-bolt { animation: icon-bolt 1.8s steps(1, end) infinite; }
html[data-anim] .icon-diamond { animation: icon-diamond 2.6s ease-in-out infinite; }
html[data-anim] .icon-crown { animation: icon-crown 2.2s ease-in-out infinite; }
@keyframes icon-star {
    0%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0)); }
    50% { transform: rotate(18deg) scale(1.18); filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9)); }
}
@keyframes icon-rocket {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(1px, -2px) rotate(-6deg); }
    75% { transform: translate(-1px, 1px) rotate(5deg); }
}
@keyframes icon-comet {
    0%, 100% { transform: translateX(0) rotate(0); filter: drop-shadow(0 0 0 rgba(255, 140, 0, 0)); }
    40% { transform: translateX(3px) rotate(-8deg); filter: drop-shadow(-4px 0 4px rgba(255, 140, 0, 0.8)); }
}
@keyframes icon-bolt {
    0%, 70%, 100% { filter: none; opacity: 1; }
    74% { filter: drop-shadow(0 0 6px rgba(255, 235, 59, 1)) brightness(1.4); }
    80% { opacity: 0.6; }
    84% { filter: drop-shadow(0 0 8px rgba(255, 235, 59, 1)) brightness(1.6); opacity: 1; }
}
@keyframes icon-diamond {
    0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 1px rgba(120, 220, 255, 0.4)) hue-rotate(0deg); }
    50% { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(120, 220, 255, 0.95)) hue-rotate(25deg); }
}
@keyframes icon-crown {
    0%, 100% { transform: translateY(0) rotate(-4deg); filter: drop-shadow(0 0 2px rgba(255, 200, 40, 0.5)); }
    50% { transform: translateY(-2px) rotate(4deg); filter: drop-shadow(0 0 6px rgba(255, 200, 40, 0.95)); }
}
.name-style-rainbow, .name-style-fire, .name-style-ice, .name-style-galaxy {
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
html[data-anim] .name-style-rainbow, html[data-anim] .name-style-fire,
html[data-anim] .name-style-ice, html[data-anim] .name-style-galaxy { animation: gold-text-shift 4s linear infinite; }
.name-style-rainbow { background-image: linear-gradient(90deg, #ff3b3b, #ff9f1a, #ffe500, #39d353, #00b4ff, #8b5cf6, #ff3b3b); }
.name-style-fire { background-image: linear-gradient(90deg, #b31217, #ff5e00, #ffd000, #ff5e00, #b31217); filter: drop-shadow(0 0 2px rgba(255, 94, 0, 0.5)); }
.name-style-ice { background-image: linear-gradient(90deg, #1e88e5, #8fd8ff, #ffffff, #8fd8ff, #1e88e5); filter: drop-shadow(0 0 2px rgba(80, 180, 255, 0.6)); }
.name-style-galaxy { background-image: linear-gradient(90deg, #5b21b6, #db2777, #2563eb, #9333ea, #5b21b6); filter: drop-shadow(0 0 2px rgba(147, 51, 234, 0.6)); }

/* ---------- новые стили имени ---------- */
/* Переливающийся градиент по буквам — золото, океан, лава, голограмма, северное сияние, корона */
.name-style-gold, .name-style-ocean, .name-style-lava, .name-style-holo, .name-style-aurora, .name-style-crown {
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;
}
html[data-anim] .name-style-gold, html[data-anim] .name-style-crown { animation: gold-text-shift 3s linear infinite; }
html[data-anim] .name-style-ocean { animation: gold-text-shift 5s linear infinite; }
html[data-anim] .name-style-lava { animation: gold-text-shift 7s ease-in-out infinite alternate; }
html[data-anim] .name-style-holo { animation: gold-text-shift 2.5s linear infinite; }
html[data-anim] .name-style-aurora { animation: gold-text-shift 6s ease-in-out infinite alternate; }
.name-style-gold, .name-style-crown { background-image: linear-gradient(100deg, #9a6b00, #f5c518, #fff6c2, #f5c518, #9a6b00); filter: drop-shadow(0 0 1px rgba(160, 110, 0, 0.6)); }
.name-style-ocean { background-image: linear-gradient(90deg, #00579b, #00b4d8, #7ae7ff, #00b4d8, #00579b); filter: drop-shadow(0 0 2px rgba(0, 180, 216, 0.5)); }
.name-style-lava { background-image: linear-gradient(90deg, #e03a1e, #ff6d00, #ffb703, #ff6d00, #e03a1e); filter: drop-shadow(0 0 2px rgba(255, 80, 0, 0.55)); }
.name-style-holo { background-image: linear-gradient(110deg, #ff7eb3, #7afcff, #feff9c, #b28dff, #7afcff, #ff7eb3); filter: drop-shadow(0 0 1px rgba(120, 120, 255, 0.8)); }
html:not([data-dark]) .name-style-holo { background-image: linear-gradient(110deg, #d6336c, #0c8599, #9c7a00, #7048e8, #0c8599, #d6336c); }
.name-style-aurora { background-image: linear-gradient(90deg, #00c896, #00e5ff, #7c4dff, #ff4ecd, #7c4dff, #00e5ff, #00c896); filter: drop-shadow(0 0 3px rgba(0, 229, 160, 0.45)); }
html:not([data-dark]) .name-style-aurora { background-image: linear-gradient(90deg, #00875a, #0077b6, #5f3dc4, #c2255c, #5f3dc4, #0077b6, #00875a); }
/* в светлых темах — без светлых бликов, иначе имя сливается с белым фоном */
html:not([data-dark]) .name-style-gold, html:not([data-dark]) .name-style-crown { background-image: linear-gradient(100deg, #7a4f00, #b8860b, #e0a800, #b8860b, #7a4f00); }
html:not([data-dark]) .name-style-ice { background-image: linear-gradient(90deg, #0d47a1, #1e88e5, #29b6f6, #1e88e5, #0d47a1); }
/* Корона над первой буквой */
.name-style-crown { position: relative; display: inline-block; margin-top: 0.35em; }
.name-style-crown::before { content: '👑'; position: absolute; left: -0.1em; top: -0.85em; font-size: 0.7em; -webkit-text-fill-color: initial; filter: drop-shadow(0 0 2px rgba(255, 200, 40, 0.8)); }
html[data-anim] .name-style-crown::before { animation: icon-crown 2.4s ease-in-out infinite; }

/* Неон — светящаяся вывеска, изредка «мигает» */
.name-style-neon { color: #ff4fd8; font-weight: 700; text-shadow: 0 0 4px #ff4fd8, 0 0 10px #ff4fd8, 0 0 18px rgba(255, 79, 216, 0.6); }
html:not([data-dark]) .name-style-neon { color: #c2008f; text-shadow: 0 0 3px rgba(255, 79, 216, 0.7), 0 0 8px rgba(255, 79, 216, 0.4); }
html[data-anim] .name-style-neon { animation: neon-flicker 5s linear infinite; }
@keyframes neon-flicker { 0%, 89%, 93%, 100% { opacity: 1; } 90%, 92% { opacity: 0.45; } 91% { opacity: 0.9; } }

/* Матрица — зелёный моноширинный «код», вспыхивает */
.name-style-matrix { font-family: 'Courier New', monospace; font-weight: 700; color: #39ff14; text-shadow: 0 0 5px rgba(57, 255, 20, 0.8); letter-spacing: 0.02em; }
html:not([data-dark]) .name-style-matrix { color: #0a8a00; text-shadow: 0 0 2px rgba(10, 138, 0, 0.5); }
html[data-anim] .name-style-matrix { animation: matrix-blink 3.5s steps(1) infinite; }
@keyframes matrix-blink { 0%, 85%, 100% { filter: none; } 86% { filter: brightness(1.8) blur(0.4px); } 88% { filter: hue-rotate(40deg); } }

/* Пиксели — ступенчатая 8-битная тень */
.name-style-pixel { font-family: 'Courier New', monospace; font-weight: 800; color: #ffd319; text-shadow: 2px 0 #e8590c, 2px 2px #e8590c, 0 2px #e8590c, 4px 4px rgba(0, 0, 0, 0.35); letter-spacing: 0.05em; }
html:not([data-dark]) .name-style-pixel { color: #e8590c; text-shadow: 2px 0 #ffd319, 2px 2px #ffd319, 0 2px #ffd319, 3px 3px rgba(0, 0, 0, 0.25); }
html[data-anim] .name-style-pixel { animation: pixel-hop 2s steps(2) infinite; }
@keyframes pixel-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-2px); } }
.name-style-pixel { display: inline-block; }

/* Электричество — голубое сияние, разряды */
.name-style-electric { color: #7df9ff; font-weight: 700; text-shadow: 0 0 3px #00d8ff, 0 0 9px rgba(0, 216, 255, 0.7); }
html:not([data-dark]) .name-style-electric { color: #0077b6; text-shadow: 0 0 3px rgba(0, 180, 255, 0.6); }
html[data-anim] .name-style-electric { animation: electric-zap 2.6s linear infinite; }
@keyframes electric-zap {
    0%, 100% { text-shadow: 0 0 3px #00d8ff, 0 0 9px rgba(0, 216, 255, 0.7); }
    46% { text-shadow: 0 0 3px #00d8ff, 0 0 9px rgba(0, 216, 255, 0.7); }
    48% { text-shadow: 0 0 6px #fff, 0 0 16px #00d8ff, 0 0 26px #00d8ff; }
    50% { text-shadow: 0 0 2px #00d8ff; }
    52% { text-shadow: 0 0 8px #fff, 0 0 20px #00d8ff; }
}

/* Глитч — изредка «дёргается» с цветным сдвигом */
.name-style-glitch { font-weight: 700; color: var(--color-text); text-shadow: 1px 0 rgba(255, 0, 80, 0.7), -1px 0 rgba(0, 220, 255, 0.7); display: inline-block; }
html[data-anim] .name-style-glitch { animation: glitch-jump 3.2s steps(1) infinite; }
@keyframes glitch-jump {
    0%, 88%, 100% { transform: none; text-shadow: 1px 0 rgba(255, 0, 80, 0.7), -1px 0 rgba(0, 220, 255, 0.7); }
    89% { transform: translate(2px, -1px) skewX(-8deg); text-shadow: -3px 0 rgba(255, 0, 80, 0.9), 3px 0 rgba(0, 220, 255, 0.9); }
    91% { transform: translate(-2px, 1px); text-shadow: 3px 0 rgba(255, 0, 80, 0.9), -3px 0 rgba(0, 220, 255, 0.9); }
    93% { transform: translate(1px, 0) skewX(6deg); }
}

/* Звёздная пыль — мерцающие звёздочки вокруг имени */
.name-style-stardust { position: relative; display: inline-block; font-weight: 700; color: #c9b8ff; text-shadow: 0 0 6px rgba(160, 130, 255, 0.8); padding: 0 0.7em 0 0.1em; }
html:not([data-dark]) .name-style-stardust { color: #5f3dc4; text-shadow: 0 0 3px rgba(95, 61, 196, 0.45); }
.name-style-stardust::before, .name-style-stardust::after { position: absolute; font-size: 0.6em; color: #ffe066; text-shadow: 0 0 4px #ffe066; }
.name-style-stardust::before { content: '✦'; left: -0.55em; top: -0.35em; }
.name-style-stardust::after { content: '✧'; right: 0; bottom: -0.15em; }
html[data-anim] .name-style-stardust::before { animation: gold-twinkle 1.8s ease-in-out infinite; }
html[data-anim] .name-style-stardust::after { animation: gold-twinkle 1.8s ease-in-out 0.9s infinite; }

/* ---------- «сочные» эффекты вокруг имени: огонь, лава, лёд, голограмма, сияние, галактика ---------- */
/* Ячейка с именем режет длинное имя многоточием, но даёт эффектам выйти за строку (где браузер умеет). */
/* по горизонтали — ровно по краю (многоточие), по вертикали эффекты (искры, капли, снег) свободно выходят за строку */
.name-cell { overflow-x: clip !important; overflow-y: visible !important; }
/* В ячейке имя — обычный текст (inline): Firefox при нехватке места прячет inline-block целиком
   за «…», а inline-текст обрезает многоточием как положено. Эффекты-псевдоэлементы работают и так. */
.name-cell [class^="name-style-"], .name-cell [class*=" name-style-"], .name-cell .medal-text { display: inline !important; max-width: none; }
.name-style-fire, .name-style-lava, .name-style-ice, .name-style-holo, .name-style-aurora, .name-style-galaxy {
    position: relative; display: inline-block; max-width: 100%; z-index: 0; vertical-align: bottom;
}
.name-style-fire::before, .name-style-fire::after, .name-style-lava::before, .name-style-lava::after,
.name-style-ice::before, .name-style-ice::after, .name-style-holo::after, .name-style-aurora::before,
.name-style-galaxy::before, .name-style-galaxy::after {
    content: ''; position: absolute; pointer-events: none; -webkit-text-fill-color: initial;
}

/* Огонь: пламя-ореол за именем дрожит, вверх летят искры */
.name-style-fire::before {
    inset: -0.15em -0.25em -0.05em; z-index: -1; border-radius: 40% 40% 30% 30%;
    background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255, 170, 0, 0.75), rgba(255, 70, 0, 0.45) 45%, transparent 75%);
    filter: blur(3px); transform-origin: 50% 100%;
}
.name-style-fire::after {
    left: 0; right: 0; top: -0.8em; height: 1.6em; z-index: 1; opacity: 0; background-repeat: no-repeat;
    background-image: radial-gradient(circle, #ffd54f 0 1.6px, transparent 2.6px), radial-gradient(circle, #ff8f00 0 1.3px, transparent 2.3px),
                      radial-gradient(circle, #ffe082 0 1.1px, transparent 2px), radial-gradient(circle, #ffab40 0 1.5px, transparent 2.5px),
                      radial-gradient(circle, #fff3b0 0 1px, transparent 2px);
    background-size: 6px 6px;
}
html[data-anim] .name-style-fire::before { animation: fire-flicker 0.9s ease-in-out infinite alternate; }
html[data-anim] .name-style-fire::after { animation: fire-sparks 1.6s linear infinite; }
@keyframes fire-flicker {
    0% { transform: scale(1, 0.9) skewX(-2deg); opacity: 0.8; }
    35% { transform: scale(1.04, 1.12) skewX(2deg); opacity: 1; }
    70% { transform: scale(0.98, 0.95) skewX(-1deg); opacity: 0.85; }
    100% { transform: scale(1.03, 1.18) skewX(1deg); opacity: 1; }
}
@keyframes fire-sparks {
    0% { opacity: 0; background-position: 10% 95%, 32% 100%, 55% 92%, 74% 100%, 90% 96%; }
    15% { opacity: 1; }
    55% { opacity: 1; background-position: 13% 45%, 28% 55%, 58% 40%, 71% 50%, 93% 48%; }
    100% { opacity: 0; background-position: 8% 0%, 34% 8%, 53% 0%, 77% 5%, 88% 0%; }
}

/* Лава: раскалённая кромка снизу, с неё тягуче стекают капли */
.name-style-lava::before {
    left: 0; right: 0; bottom: 0.02em; height: 0.18em; z-index: -1; border-radius: 0.1em;
    background: linear-gradient(90deg, #c1121f, #ff6d00, #ffb703, #ff6d00, #c1121f); filter: blur(1px); opacity: 0.85;
}
.name-style-lava::after {
    left: 0; right: 0; top: 90%; height: 0.95em; z-index: 1;
    background-image: radial-gradient(ellipse 0.24em 0.4em at 50% 0, #ff6d00 70%, transparent 74%),
                      radial-gradient(ellipse 0.2em 0.34em at 50% 0, #ffb703 70%, transparent 74%),
                      radial-gradient(ellipse 0.23em 0.42em at 50% 0, #ff4500 70%, transparent 74%);
    background-repeat: no-repeat; background-size: 0.5em 0.95em; filter: drop-shadow(0 0 2px rgba(255, 110, 0, 0.8));
    background-position: 18% 0, 55% 0, 82% 0;
}
html[data-anim] .name-style-lava::after { animation: lava-drip 2.8s cubic-bezier(.55, 0, .9, .45) infinite; }
@keyframes lava-drip {
    0% { background-position: 18% -0.25em, 55% -0.3em, 82% -0.25em; background-size: 0.5em 0.45em; opacity: 1; }
    40% { background-position: 18% 0, 55% -0.15em, 82% 0; background-size: 0.5em 0.95em; }
    75% { background-position: 18% 0.35em, 55% 0.1em, 82% 0.45em; opacity: 1; }
    100% { background-position: 18% 0.75em, 55% 0.6em, 82% 0.8em; background-size: 0.5em 0.6em; opacity: 0; }
}

/* Лёд: с имени сыплются снежинки, по буквам бежит морозный блеск */
.name-style-ice::before, .name-style-ice::after {
    left: 0; right: 0; top: 55%; z-index: 1; font-size: 0.5em; line-height: 1; letter-spacing: 0.9em; text-align: center;
    color: #cfefff; text-shadow: 0 0 3px #8fd8ff; white-space: nowrap; overflow: hidden; opacity: 0;
}
html:not([data-dark]) .name-style-ice::before, html:not([data-dark]) .name-style-ice::after { color: #4fa8e0; text-shadow: 0 0 2px #fff; }
.name-style-ice::before { content: '❄ ❅ ❆ ❄'; }
.name-style-ice::after { content: '❅ ❄ ❆'; padding-left: 0.6em; }
html[data-anim] .name-style-ice::before { animation: ice-snow 2.6s linear infinite; }
html[data-anim] .name-style-ice::after { animation: ice-snow 2.6s linear 1.3s infinite; }
@keyframes ice-snow {
    0% { transform: translate(0, -0.4em) rotate(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(0.4em, 2.4em) rotate(25deg); opacity: 0; }
}

/* Голограмма: мерцает, сдвигается цветом, по ней бегут строки развёртки */
.name-style-holo::after {
    inset: 0; z-index: 1; mix-blend-mode: overlay; opacity: 0.55;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 3px);
}
html[data-anim] .name-style-holo { animation: gold-text-shift 2.5s linear infinite, holo-flicker 3.4s steps(1) infinite; }
html[data-anim] .name-style-holo::after { animation: holo-scan 1.2s linear infinite; }
@keyframes holo-flicker {
    0%, 70%, 100% { opacity: 1; filter: drop-shadow(0 0 1px rgba(120, 120, 255, 0.8)); transform: none; }
    72% { opacity: 0.55; filter: drop-shadow(0 0 3px #7afcff) hue-rotate(60deg); transform: translateX(1px); }
    74% { opacity: 0.9; transform: translateX(-1px); }
    76% { opacity: 0.6; filter: hue-rotate(-40deg); }
    78% { opacity: 1; transform: none; }
}
@keyframes holo-scan { from { background-position: 0 0; } to { background-position: 0 6px; } }

/* Северное сияние: переливающаяся размытая лента волнами вокруг имени */
.name-style-aurora::before {
    inset: -0.35em -0.5em; z-index: -1; border-radius: 50%;
    background: linear-gradient(90deg, rgba(0, 200, 150, 0.55), rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 78, 205, 0.45), rgba(0, 200, 150, 0.55));
    background-size: 300% 100%; filter: blur(7px);
}
html:not([data-dark]) .name-style-aurora::before { opacity: 0.6; }
html[data-anim] .name-style-aurora::before { animation: aurora-wave 5s ease-in-out infinite; }
@keyframes aurora-wave {
    0% { background-position: 0% 50%; transform: skewX(-8deg) scaleY(0.85); }
    25% { transform: skewX(6deg) scaleY(1.15) translateY(-0.05em); }
    50% { background-position: 100% 50%; transform: skewX(-4deg) scaleY(0.95); }
    75% { transform: skewX(8deg) scaleY(1.2) translateY(0.04em); }
    100% { background-position: 0% 50%; transform: skewX(-8deg) scaleY(0.85); }
}

/* Галактика: за именем вращается аккреционный диск чёрной дыры, имя слегка затягивает */
@property --bh-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.name-style-galaxy { padding-right: 1.25em; }
.name-style-galaxy::before {
    right: -0.15em; top: 50%; width: 1.5em; height: 1.5em; transform: translateY(-50%) scaleY(0.62) rotate(-18deg); z-index: -1; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #000 26%, transparent 31%),
        conic-gradient(from var(--bh-angle), rgba(147, 51, 234, 0), rgba(219, 39, 119, 0.95), rgba(255, 200, 130, 1), rgba(37, 99, 235, 0.9), rgba(147, 51, 234, 0) 55%, rgba(91, 33, 182, 0.8), rgba(147, 51, 234, 0));
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 70%);
            mask: radial-gradient(circle at 50% 50%, #000 55%, transparent 70%);
    filter: blur(0.6px);
}
.name-style-galaxy::after {
    right: 0.35em; top: 50%; width: 0.42em; height: 0.42em; transform: translateY(-50%); z-index: 0; border-radius: 50%;
    background: #000; box-shadow: 0 0 4px 2px rgba(255, 200, 130, 0.7), 0 0 10px 4px rgba(147, 51, 234, 0.5);
}
html:not([data-dark]) .name-style-galaxy::before { opacity: 0.7; }
html[data-anim] .name-style-galaxy { animation: gold-text-shift 4s linear infinite, bh-pull 3.5s ease-in-out infinite; }
html[data-anim] .name-style-galaxy::before { animation: bh-spin 2.4s linear infinite; }
html[data-anim] .name-style-galaxy::after { animation: bh-pulse 3.5s ease-in-out infinite; }
@keyframes bh-spin { to { --bh-angle: 360deg; } }
@keyframes bh-pull { 0%, 100% { transform: none; } 50% { transform: skewX(-6deg) translateX(0.04em); } }   /* буквы тянутся к дыре */
@keyframes bh-pulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.2); } }

/* ---------- праздник ---------- */
.celebrate-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10001; }
.celebrate-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.35s;
    cursor: pointer;
}
.celebrate-overlay.shown { opacity: 1; }
.celebrate-card {
    width: min(420px, calc(100vw - 32px));
    padding: 24px 26px 18px;
    border-radius: 20px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
    text-align: center;
    transform: scale(0.7) translateY(30px);
    transition: transform 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.celebrate-overlay.shown .celebrate-card { transform: scale(1) translateY(0); }
.celebrate-headline { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); line-height: 1.2; }
.celebrate-task { margin-top: 4px; font-size: 0.95rem; opacity: 0.8; }
.celebrate-xp {
    margin: 14px auto 8px;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1.15rem;
    background: var(--badge-warning-bg);
    color: var(--badge-warning-fg);
    box-shadow: var(--badge-warning-ring);
    animation: xp-pop 0.6s 0.3s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes xp-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.celebrate-level { display: flex; justify-content: space-between; font-size: 0.85rem; opacity: 0.85; margin-top: 4px; }
.celebrate-bar { height: 10px; border-radius: 999px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; margin: 4px 0 10px; }
.celebrate-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffd319, #ff7a45, #ff2bd6); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.celebrate-lesson { font-size: 0.85rem; opacity: 0.8; }
.celebrate-award { margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-weight: 800; animation: xp-pop 0.6s 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
.celebrate-award.star { background: var(--badge-warning-bg); color: var(--badge-warning-fg); box-shadow: var(--badge-warning-ring); }
.celebrate-award.trophy { background: linear-gradient(135deg, #8a6a12, #d4af37 30%, #fff1a8 50%, #e8c547 65%, #b8860b); color: #2a1d00; }
.celebrate-award.levelup { background: var(--badge-info-bg); color: var(--badge-info-fg); box-shadow: var(--badge-info-ring); }
.celebrate-unlocked { margin-top: 6px; font-size: 0.9rem; }
.celebrate-close { margin-top: 12px; font-size: 0.75rem; opacity: 0.55; }

/* ---------- профиль: прогресс и косметика ---------- */
.progress-card-level { display: flex; align-items: center; gap: 14px; }
.progress-card-icon { font-size: 2.6rem; line-height: 1; }
.progress-card-bar { height: 12px; border-radius: 999px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; margin: 8px 0 4px; }
.progress-card-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd319, #ff7a45, #ff2bd6); }
.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 10px 12px 12px; }
.cosmetic-option {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
    border: 2px solid transparent; border-radius: 12px; background: var(--color-surface);
    cursor: pointer; text-align: center; transition: transform 0.12s, box-shadow 0.12s;
}
.cosmetic-option:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cosmetic-option input { position: absolute; opacity: 0; pointer-events: none; }
.cosmetic-option:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
.cosmetic-option:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.cosmetic-option.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); }
.cosmetic-option.locked:hover { transform: none; box-shadow: none; }
.cosmetic-show { font-size: 1.6rem; line-height: 1.2; min-height: 1.9rem; }
.cosmetic-name { font-size: 0.8rem; font-weight: 600; }
.cosmetic-lock { font-size: 0.72rem; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
    .lesson-progress-fill { transition: none; }
    .lesson-progress-fill::after, .lesson-award .award-icon,
    .name-style-rainbow, .name-style-fire, .name-style-ice, .name-style-galaxy, .name-style-glow, .icon-anim, .icon-digits-anim, .icon-digits-anim span,
    .name-style-gold, .name-style-ocean, .name-style-lava, .name-style-holo, .name-style-aurora, .name-style-crown, .name-style-crown::before,
    .name-style-neon, .name-style-matrix, .name-style-pixel, .name-style-electric, .name-style-glitch, .name-style-stardust::before, .name-style-stardust::after,
    .name-style-fire::before, .name-style-fire::after, .name-style-lava::after, .name-style-ice::before, .name-style-ice::after,
    .name-style-holo::after, .name-style-aurora::before, .name-style-galaxy::before, .name-style-galaxy::after,
    .celebrate-xp, .celebrate-award { animation: none; }
    .celebrate-card, .celebrate-bar span { transition: none; }
}