/* ==========================================================================
   FASOOLLKA — главная страница (с 30.10.2026 — тема «Сакура», 1 в 1 по макету варианты_дизайна\сакура\
   1_главная_день.png, 2_главная_ночь.png, 5_телефон.png). Прежние стили (аватар, пентаграммы, книги, меню
   на фоне) — архив fasoollka_etap9zs.zip.
   Компьютер: всё на одном экране. Размеры — в rem, а rem на главной = 1/100 ширины или 1/56,25 высоты
   экрана (что меньше): при 1600×900 1rem = 16 px и раскладка совпадает с макетом пиксель в пиксель,
   на любом другом экране она та же, только крупнее или мельче. Слева столбиком японская надпись,
   рядом — профиль, следующий стрим, таймер и кнопки, внизу — цифры канала и последние стримы, справа — неделя
   и топ чата. Узкое или очень низкое окно и телефон — всё друг под другом, листается (раздел 9).
   Анимации — только transform и opacity.
   ========================================================================== */

/* ---------- 1. Каркас ---------- */
@media (min-width: 1101px) and (min-height: 561px) {
    html.page-home { font-size: clamp(10px, min(1vw, 1.7778vh), 24px); }
}
.page-home .app {
    position: relative;
    z-index: 10;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
/* под текстом слева — мягкая дымка цвета мира, справа фон чистый (как в макете) */
.page-home .app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
:root[data-theme="heaven"].page-home .app::before { background: linear-gradient(90deg, rgba(255, 244, 247, .78) 0%, rgba(255, 244, 247, .55) 22%, rgba(255, 244, 247, .12) 42%, transparent 55%); }
:root[data-theme="hell"].page-home .app::before { background: linear-gradient(90deg, rgba(14, 10, 30, .72) 0%, rgba(14, 10, 30, .45) 24%, rgba(14, 10, 30, .08) 44%, transparent 56%), linear-gradient(0deg, rgba(14, 10, 30, .45), transparent 30%); }

.home {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 6.375rem minmax(0, 1fr) 25rem;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 0;
    padding: 2.25rem 3rem 1.5rem;
}
.home__jp   { grid-column: 1; grid-row: 1; }
.lead       { grid-column: 2; grid-row: 1; }
.col--right { grid-column: 3; grid-row: 1 / 3; }
.home__bottom { grid-column: 2; grid-row: 2; }

/* общий вид панелей главной */
.home .panel {
    padding: 0;
    border-radius: 1.5rem;
}

/* ---------- 2. Японская надпись столбиком ---------- */
.home__jp {
    margin: 0;
    padding-top: .4rem;
    writing-mode: vertical-rl;
    justify-self: center;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "MS Mincho", serif;
    font-weight: 600;
    font-size: 3.7rem;
    line-height: 1;
    letter-spacing: .32em;
    color: var(--accent);
    user-select: none;
}
.home__jp--night { letter-spacing: .06em; font-size: 3.6rem; }
:root[data-theme="heaven"] .home__jp { color: #f0476f; text-shadow: 0 0 1.4rem rgba(255, 255, 255, .9); }
:root[data-theme="hell"] .home__jp { color: #ff7a9b; text-shadow: 0 0 1.2rem rgba(255, 111, 145, .55); }
/* знаки проявляются по очереди сверху вниз, потом едва заметно «дышат» */
.home__jp span {
    display: inline-block;
    opacity: 0;
    animation: jpIn 1s var(--ease-out) forwards, jpGlow 6s ease-in-out infinite;
    animation-delay: calc(.5s + var(--i) * .12s), calc(1.6s + var(--i) * .5s);
}
@keyframes jpIn { from { opacity: 0; transform: translateY(-.6em) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes jpGlow { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
:root:not(.is-loaded) .home__jp span { animation-play-state: paused; }
.is-back .home__jp span { animation-delay: calc(var(--i) * .06s), calc(1s + var(--i) * .5s); }

/* ---------- 3. Слева: профиль, следующий стрим, таймер, кнопки ---------- */
.lead {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: .6rem;
    opacity: 0;
    animation: riseIn 1s var(--ease-out) .35s forwards;
}
:root:not(.is-loaded) .lead { animation-play-state: paused; }
.is-back .lead { animation-duration: .5s; animation-delay: 0s; }

.profile { display: flex; align-items: center; gap: .9rem; }
.profile__ava {
    position: relative;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: .19rem solid #fff;
    border-radius: 50%;
    background: var(--chip-bg);
    cursor: pointer;
    box-shadow: 0 .5rem 1.4rem -.6rem rgba(120, 40, 70, .6);
    transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
:root[data-theme="hell"] .profile__ava { border-color: rgba(255, 220, 232, .9); }
.profile__ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile__ava:hover { transform: scale(1.06); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 35%, transparent); }
.profile__dot {
    position: absolute;
    right: -.1rem;
    bottom: -.1rem;
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    border: .16rem solid #fff;
    background: #a59aa6;
}
.profile__dot.is-live { background: #ff2e4d; }
.profile__dot.is-live::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff2e4d; animation: livePing 1.8s ease-out infinite; }
.profile__name { font: 700 1.125rem/1.2 var(--display); color: var(--text); }
.profile__role { margin-top: .15rem; font-size: .8125rem; line-height: 1.3; color: var(--text-soft); }
.profile__role a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: .2em; }
.profile__role a:hover { color: var(--accent); }

.stage { width: 100%; }
.stage__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.4rem;
    height: 1.75rem;
    padding: 0 .8rem;
    border-radius: 999px;
    font: 800 .8125rem/1 var(--ui);
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
}
:root[data-theme="heaven"] .stage__pill { color: #e8365f; background: rgba(255, 120, 150, .14); }
:root[data-theme="hell"] .stage__pill { color: #ff8fab; background: rgba(255, 111, 145, .16); }
.stage__pill--live { letter-spacing: .12em; }
.stage__pill--live .live-dot, .stage__pill--live .live-dot::before { background: #ff2e4d; }

.stage__headline {
    max-width: 30rem;
    margin-top: .9rem;
    font: 800 4.5rem/1 var(--display);
    letter-spacing: -.01em;
    color: var(--text);
    overflow-wrap: anywhere;
    hyphens: auto;
}
.stage__headline span { color: #f43f6b; }
:root[data-theme="hell"] .stage__headline span { color: #ff6f91; text-shadow: 0 0 2rem rgba(255, 111, 145, .45); }
:root[data-theme="hell"] .stage__headline { text-shadow: 0 .2rem 1.5rem rgba(10, 6, 24, .5); }
.stage__headline.is-long { font-size: 3.4rem; max-width: 34rem; }
.stage__headline--live { font-size: 2.6rem; line-height: 1.08; max-width: 36rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stage__text { max-width: 26rem; margin-top: .9rem; font-size: 1.0625rem; line-height: 1.45; color: var(--text-soft); }
:root[data-theme="heaven"] .stage__text { color: #4d3a4b; }

.stage__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1rem; font-size: .95rem; color: var(--text-soft); }
.stage__meta > span { display: inline-flex; align-items: center; gap: .4rem; }
.stage__meta .ico { color: var(--accent); }
.stage__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.stage__peak[hidden] { display: none !important; }
.stage__peak.is-record { color: var(--accent); font-weight: 700; }

/* таймер: четыре карточки */
.countdown { display: flex; gap: .75rem; margin-top: 1.4rem; }
.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.875rem;
    height: 5.125rem;
    border-radius: 1rem;
}
:root[data-theme="heaven"] .countdown__unit { background: rgba(255, 255, 255, .92); box-shadow: 0 .9rem 2rem -1.2rem rgba(140, 50, 85, .45); }
:root[data-theme="hell"] .countdown__unit { background: rgba(28, 22, 54, .82); border: 1px solid rgba(255, 160, 195, .14); box-shadow: 0 .9rem 2rem -1rem rgba(0, 0, 0, .7); }
.countdown__unit b { display: block; font: 800 2rem/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.countdown__unit small { margin-top: .5rem; font-size: .8125rem; color: var(--text-faint); }
.countdown__unit b.tick { animation: tick .4s var(--ease-out); }

.lead__acts { display: flex; gap: .75rem; margin-top: 1.5rem; }
.lead__acts .btn { height: 3.25rem; padding: 0 1.75rem; border-radius: 1rem; font-size: 1rem; font-weight: 800; gap: .6rem; }
.lead__acts .btn .ico { font-size: .8rem; }
:root[data-theme="heaven"] .lead__acts .btn--ghost { background: #fff; border-color: #fff; color: var(--text); box-shadow: 0 .8rem 1.8rem -1.2rem rgba(140, 50, 85, .45); }
:root[data-theme="hell"] .lead__acts .btn--ghost { background: rgba(28, 22, 54, .82); border-color: rgba(255, 160, 195, .18); }

/* ---------- 4. Внизу: цифры канала и последние стримы ---------- */
.home__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 1.375rem; padding-right: 3.25rem; }
.statbar {
    display: block;
    width: 49.25rem;
    max-width: 100%;
    padding: 1rem 1.4rem !important;
    color: inherit;
    --d: .7s;
}
.statbar__title { display: none; }
.profile__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.profile__stats > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.profile__stats dd { font: 800 1.75rem/1.1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.profile__stats dt { font-size: .8125rem; color: var(--text-faint); white-space: nowrap; }
.statbar:hover .profile__stats dd { color: var(--accent); }
.profile__stats dd { transition: color .25s ease; }

.recent { width: 100%; padding: .75rem !important; --d: .8s; }
.recent__title { display: none; }
.recent__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rstream {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    border-radius: 1rem;
    transition: background-color .25s ease;
}
.rstream:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rstream__thumb {
    position: relative;
    height: 6.25rem;
    border-radius: .875rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--chip-bg);
    isolation: isolate;
}
.rstream__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.rstream__thumb--c img { object-position: 50% 0; }
.rstream__bg { filter: blur(10px) brightness(.8); transform: scale(1.2); }
.rstream__thumb .rstream__poster { object-fit: contain; }
.rstream:hover .rstream__thumb img:not(.rstream__bg) { transform: scale(1.06); }
.rstream__ph { font-size: 1.8rem; color: var(--accent); opacity: .6; }
.rstream__kind {
    position: absolute;
    left: .45rem;
    top: .45rem;
    z-index: 2;
    padding: .2rem .45rem;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .92);
    color: #2b1d2a;
    font: 700 .6875rem/1 var(--ui);
}
:root[data-theme="hell"] .rstream__kind { background: rgba(20, 15, 40, .85); color: #fff; }
.rstream__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.6rem;
    background: rgba(20, 10, 25, .35);
    opacity: 0;
    transition: opacity .25s ease;
}
.rstream:hover .rstream__play, .rstream:focus-visible .rstream__play { opacity: 1; }
.rstream__body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.rstream__title { font-size: .9375rem; font-weight: 700; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rstream__meta { font-size: .75rem; color: var(--text-faint); }
.rstream__k { display: none; }
.recent__empty { grid-column: 1 / -1; padding: 1.5rem; color: var(--text-faint); text-align: center; }

/* ---------- 5. Справа: неделя ---------- */
.col--right { display: flex; flex-direction: column; gap: .875rem; min-height: 0; }
.col--right .panel:nth-child(1) { --d: .55s; --from: 40px; }
.col--right .panel:nth-child(2) { --d: .7s; --from: 40px; }
.home .panel__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.home .panel__title { margin: 0; font: 700 1.125rem/1.2 var(--display); }
.home .panel__title a { color: inherit; }
.home .panel__title a:hover { color: var(--accent); }
.home .panel__note { font: 700 .8125rem/1 var(--ui); color: var(--accent); white-space: nowrap; }
.home .panel__note[hidden] { display: none; }

.week-panel { padding: 1.4rem 1.4rem 1.4rem !important; }
.week-panel__range {
    padding: .3rem .5rem;
    margin: -.3rem -.5rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    font: 700 .8125rem/1 var(--ui);
    color: var(--accent);
    cursor: pointer;
    transition: background-color .2s ease;
}
.week-panel__range:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.week-panel__range[aria-pressed="true"]::before { content: "← "; }
.week-panel__range[aria-pressed="false"]::after { content: " →"; opacity: 0; transition: opacity .2s ease; }
.week-panel__range:hover::after { opacity: 1; }
.schedule__list[hidden] { display: none; }
.schedule__row {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    height: 3.375rem;
    padding: 0 .75rem 0 .65rem;
    border-radius: .875rem;
    transition: background-color .25s ease;
}
.schedule__day { display: flex; flex-direction: column; font: 700 .95rem/1.1 var(--display); color: var(--text); }
.schedule__date { margin-top: .1rem; font: 500 .6875rem/1 var(--ui); color: var(--text-faint); }
.schedule__name { min-width: 0; font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.schedule__name:hover { color: var(--accent); }
.schedule__time { font-size: .875rem; font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.schedule__row.is-off .schedule__name { color: var(--text-faint); }
.schedule__row.is-past { opacity: .5; }
.schedule__row.is-past:hover { opacity: .85; }
.schedule__row.is-today { background: rgba(255, 120, 150, .13); }
:root[data-theme="hell"] .schedule__row.is-today { background: rgba(255, 140, 180, .1); }
.schedule__row.is-today .schedule__date { color: var(--text-soft); }
/* следующий стрим — тёмная (днём) / розовая (ночью) строка */
.schedule__row.is-next { opacity: 1; box-shadow: 0 .7rem 1.6rem -1rem rgba(60, 20, 40, .7); }
:root[data-theme="heaven"] .schedule__row.is-next { background: #2b1d2a; }
:root[data-theme="hell"] .schedule__row.is-next { background: linear-gradient(90deg, #ff6f91, #ff5c86); box-shadow: 0 .7rem 1.6rem -.9rem rgba(255, 90, 140, .8); }
.schedule__row.is-next :is(.schedule__day, .schedule__name, .schedule__time, .schedule__date) { color: #fff; }
.schedule__row.is-next .schedule__name { font-weight: 700; }
.schedule__row.is-next .schedule__date { opacity: .8; }
.schedule__row.is-next::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: rowShine 5s ease-in-out 2s infinite;
    pointer-events: none;
}
@keyframes rowShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.schedule__row.is-next { overflow: hidden; }

.sched__more { display: none; }
.schedule__sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 2.75rem;
    margin-top: .85rem;
    border-radius: 1rem;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    color: var(--accent);
    font-size: .875rem;
    font-weight: 700;
    transition: background-color .25s ease, border-color .25s ease;
}
.schedule__sub .ico { font-size: .95rem; }
.schedule__sub:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-style: solid; }

/* ---------- 6. Справа: топ чата ---------- */
.cauldron { flex: 1; min-height: 0; padding: 1.4rem 1.4rem 1rem !important; overflow: hidden; }
.cauldron__tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--chip-bg); }
.cauldron__tabs[hidden] { display: none; }
.cauldron__tabs button { height: 1.6rem; padding: 0 .7rem; border: 0; border-radius: 999px; background: none; color: var(--text-soft); font: 700 .75rem/1 var(--ui); cursor: pointer; }
.cauldron__tabs button[aria-pressed="true"] { color: var(--btn-text); background: var(--btn-bg); }
.mini-top { margin: 0; padding: 0; list-style: none; }
.mini-top[hidden] { display: none; }
.mini-top__row {
    display: grid;
    grid-template-columns: 1.4rem 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    height: 2.375rem;
}
.mini-top .medal { font: 700 .95rem/1 var(--display); color: var(--accent); }
.mini-top .ava { --ava: 1.75rem; border-radius: .5rem; box-shadow: none; background: rgba(255, 120, 150, .14); color: var(--accent); font-size: .8rem; }
.mini-top__name { font-size: .95rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-top__xp { font-size: .8125rem; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-top__row.is-me .mini-top__name, .mini-top__row.is-you .mini-top__name { color: var(--accent); }
.mini-top__find { display: block; height: auto; padding: .35rem 0; font-size: .8125rem; }
.mini-top__find a { color: var(--accent); font-weight: 700; }
.mini-top__sum { margin-top: .3rem; font-size: .75rem; color: var(--text-faint); }
.mini-top__empty { padding: .6rem 0; font-size: .875rem; color: var(--text-faint); }

/* ---------- 7. Окно «О себе»: слева Фасолька-демонесса (с 30.10.2026 — картинки вместо видео) ---------- */
.modal--about .modal__dialog {
    width: min(1120px, 100%);
    height: min(88vh, 860px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}
/* картинка закрывает левую половину окна; .about__zoom — коробка в пропорциях картинки (1080 × 2002), по верхнему краю
   (лицо и рога всегда видны), поэтому свечение и глаз стоят в процентах картинки точно на своих местах */
.about__art {
    position: absolute; left: 0; top: 0; bottom: 0; width: 52%; z-index: -2; overflow: hidden; container-type: size;
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
            mask-image: linear-gradient(90deg, #000 72%, transparent);
}
.about__zoom {
    position: absolute;
    left: 50%; top: 0;
    width: max(100cqw, 100cqh * 1080 / 2002);
    aspect-ratio: 1080 / 2002;
    translate: -50% 0;
    transform-origin: 50% 28%;
    animation: aboutDrift 18s ease-in-out infinite alternate;
}
.about__img, .about__glow { position: absolute; inset: 0; width: 100%; height: 100%; }
/* светящиеся места картинки (рога, глаз, магия в груди, неоновые пряди) «дышат» поверх неё */
.about__glow { mix-blend-mode: screen; opacity: .3; animation: aboutPulse 3.6s ease-in-out infinite; }
:root[data-theme="heaven"] .about__glow { filter: saturate(1.4); animation-duration: 4.4s; }
/* горящий глаз: вспышка и лучик-крестик */
.about__eye {
    position: absolute;
    left: 61.2%; top: 41.6%;
    width: 9%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .95) 0 6%, rgba(255, 90, 190, .7) 14%, rgba(255, 40, 160, .2) 34%, transparent 62%),
        linear-gradient(90deg, transparent 0 8%, rgba(255, 170, 225, .7) 50%, transparent 92%) 50% 50% / 100% 3% no-repeat;
    mix-blend-mode: screen;
    animation: aboutEye 3.6s ease-in-out infinite;
}
:root[data-theme="heaven"] .about__eye { left: 60.6%; }
/* лепестки (день) и искры (ночь): двенадцать штук, у каждой своё место, скорость и размер (--x, --d, --t, --s в разметке) */
.about__fx { position: absolute; inset: 0; pointer-events: none; }
.about__fx i {
    position: absolute;
    left: var(--x);
    width: calc(14px * var(--s));
    aspect-ratio: 1.5;
    opacity: 0;
    animation: aboutFall var(--t) linear var(--d) infinite;
}
:root[data-theme="heaven"] .about__fx i {
    top: -4%;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, #ffe2ec, #ff9fbf);
    box-shadow: inset -2px -2px 3px rgba(214, 70, 120, .25);
}
:root[data-theme="hell"] .about__fx i {
    top: auto; bottom: -3%;
    width: calc(6px * var(--s));
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, #ff5fb4 40%, rgba(255, 40, 150, 0) 72%);
    animation-name: aboutRise;
}
@keyframes aboutDrift { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
@keyframes aboutPulse { 0%, 100% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .75; } }
@keyframes aboutEye {
    0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); }
    45% { opacity: 1; transform: scale(1.15) rotate(8deg); }
    60% { opacity: .8; transform: scale(1) rotate(4deg); }
}
@keyframes aboutFall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    10% { opacity: .9; }
    50% { transform: translate(40px, 55cqh) rotate(200deg); }
    90% { opacity: .9; }
    100% { opacity: 0; transform: translate(-10px, 108cqh) rotate(420deg); }
}
@keyframes aboutRise {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    15% { opacity: 1; }
    50% { transform: translate(-18px, -50cqh) scale(.9); }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translate(14px, -95cqh) scale(.4); }
}
.is-lite .about__fx, .is-lite .about__glow { display: none; }
.about__shade { position: absolute; inset: 0; z-index: -1; }
:root[data-theme="hell"] .about__shade { background: linear-gradient(90deg, rgba(10, 6, 24, .05) 0%, rgba(10, 6, 24, .35) 30%, rgba(16, 12, 34, .9) 52%, rgba(16, 12, 34, .96) 100%); }
:root[data-theme="heaven"] .about__shade { background: linear-gradient(90deg, rgba(255, 250, 252, 0) 0%, rgba(255, 250, 252, .3) 30%, rgba(255, 250, 252, .9) 52%, rgba(255, 250, 252, .97) 100%); }
.about__content {
    position: relative;
    height: 100%;
    margin-left: 42%;
    padding: clamp(24px, 4vh, 44px) clamp(18px, 3vw, 40px) clamp(24px, 4vh, 40px) clamp(10px, 1vw, 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.about__name { font: 800 clamp(34px, 5vh, 52px)/1 var(--display); color: var(--text); }
.about__motto { font-weight: 700; font-size: 18px; margin: 10px 0 12px; color: var(--accent); }
.about__text { color: var(--text-soft); max-width: 60ch; }
.about__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.about__facts > div { display: flex; flex-direction: column-reverse; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--ghost-bg); }
.about__facts dt { font-size: 12px; color: var(--text-faint); }
.about__facts dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.links--socials { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.about__biz { margin-top: 14px; }
.about__biz .ico { font-size: 18px; }

/* ---------- 8. Окна «Донат» и «Стрим» ---------- */
.donate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.donate__card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--ghost-bg); transition: border-color .25s ease, box-shadow .3s ease; }
.donate__card:hover { border-color: var(--brand); box-shadow: 0 14px 40px -18px var(--brand); }
.donate__head { display: flex; align-items: center; gap: 12px; }
.donate__name { font: 700 20px/1.1 var(--display); }
.donate__note { font-size: 13px; color: var(--text-faint); }
.donate__prices { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.donate__prices > div { display: flex; flex-direction: column; padding-left: 10px; border-left: 2px solid var(--brand); }
.donate__prices dt { font-size: 12px; color: var(--text-faint); }
.donate__prices dd { font-weight: 600; font-size: 14px; }
.donate__go { width: 100%; }
.modal--stream .modal__dialog { width: min(980px, 100%); }
.player { position: relative; aspect-ratio: 16 / 9; margin-bottom: 16px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.links--streams { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* ---------- 9. Узкое или низкое окно, планшет, телефон: всё друг под другом (как в 5_телефон.png) ---------- */
@media (max-width: 1100px), (max-height: 560px) {
    .page-home body { overflow: auto; }
    .page-home .app { height: auto; min-height: 100vh; }
    .home {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 14px clamp(16px, 4vw, 40px) 28px;
    }
    .home__jp { display: none; }
    .col--right, .home__bottom { display: contents; }
    .lead { order: 1; padding-top: 4px; }
    .sched { order: 2; }
    .recent { order: 3; }
    .statbar { order: 4; }
    .cauldron { order: 5; flex: none; }
    .home .panel { border-radius: 26px; }
    .lead__acts .btn--ghost { display: none; }
    .stage__headline { max-width: none; font-size: clamp(40px, 13vw, 68px); }
    .stage__headline.is-long { font-size: clamp(30px, 9vw, 54px); }
    /* как в макете телефона: верх — картинка, ниже текст и панели на светлой (ночью — тёмной) подложке */
    .page-home .app::before { position: absolute; background: linear-gradient(180deg, transparent 0, transparent 24vh, color-mix(in srgb, var(--bg) 82%, transparent) 46vh, var(--bg) 64vh, var(--bg) 100%) !important; }
    .stage__pill { height: auto; min-height: 28px; padding: 6px 12px; white-space: normal; line-height: 1.35; }
    .countdown { gap: 10px; }
    .countdown__unit { width: auto; flex: 1; max-width: 140px; height: 88px; border-radius: 18px; }
    .countdown__unit b { font-size: 34px; }
    .lead__acts { width: 100%; }
    .lead__acts .btn--primary { flex: 1; max-width: 560px; height: 54px; border-radius: 18px; }
    .statbar { width: 100%; padding: 22px 20px !important; }
    .statbar__title { display: block; margin-bottom: 14px; font: 700 20px/1.2 var(--display); color: var(--text); }
    .profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .profile__stats > div { padding: 16px; border-radius: 18px; background: rgba(255, 120, 150, .13); }
    :root[data-theme="hell"] .profile__stats > div { background: rgba(255, 140, 180, .1); }
    .profile__stats dd { font-size: clamp(24px, 6vw, 30px); }
    .recent { padding: 22px 20px !important; }
    .recent__title { display: block; margin-bottom: 14px; font: 700 20px/1.2 var(--display); color: var(--text); }
    .recent__list { grid-template-columns: 1fr; gap: 14px; }
    .rstream { grid-template-columns: 136px minmax(0, 1fr); gap: 16px; }
    .rstream__thumb { height: 80px; border-radius: 14px; }
    .rstream__thumb .rstream__kind { display: none; }
    .rstream__title { font-size: 17px; }
    .rstream__meta { font-size: 14px; }
    .rstream__k { display: inline; }
    .week-panel { padding: 22px 20px !important; }
    .home .panel__title { font-size: 20px; }
    .schedule__row { height: 56px; border-radius: 14px; grid-template-columns: 50px minmax(0, 1fr) auto; }
    .schedule__day { font-size: 17px; }
    .schedule__date { font-size: 12px; }
    .schedule__name { font-size: 17px; }
    .schedule__time { font-size: 17px; }
    .schedule__row.is-today:not(.is-next) { background: rgba(255, 120, 150, .16); }
    /* видны сегодня и два следующих дня; кнопка — вся неделя и следующая */
    .sched:not(.is-more) .schedule__row:not(.is-today, .is-today + *, .is-today + * + *) { display: none; }
    .sched:not(.is-more) .schedule__row.is-past { opacity: 1; }
    .sched:not(.is-more) .week-panel__range { pointer-events: none; }
    .sched:not(.is-more) .week-panel__range::before { content: "эта неделя"; }
    .sched:not(.is-more) .week-panel__range span { display: none; }
    .sched__more {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 0;
        background: none;
        color: var(--accent);
        font: 700 16px/1.2 var(--ui);
        cursor: pointer;
    }
    .schedule__sub { height: 48px; font-size: 15px; }
    .cauldron { padding: 22px 20px 16px !important; }
    .mini-top__row { height: 42px; grid-template-columns: 26px 30px minmax(0, 1fr) auto; }
    .mini-top .ava { --ava: 30px; }
    .mini-top__name { font-size: 16px; }
    .mini-top__xp { font-size: 14px; }
    .modal--about .modal__dialog { height: auto; max-height: 100%; overflow: auto; }
    .about__content { margin-left: 0; padding-top: 108vw; }
    /* телефон: картинка сверху во всю ширину (рога и лицо), текст — ниже, под затемнением сверху вниз */
    .about__art { width: 100%; bottom: auto; height: 130vw;
        -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
    :root[data-theme="hell"] .about__shade { background: linear-gradient(180deg, transparent 0, transparent 78vw, rgba(16, 12, 34, .94) 112vw, rgba(16, 12, 34, .97) 100%); }
    :root[data-theme="heaven"] .about__shade { background: linear-gradient(180deg, transparent 0, transparent 78vw, rgba(255, 250, 252, .94) 112vw, rgba(255, 250, 252, .97) 100%); }
}
@media (max-width: 760px) {
    .profile { display: none; }
    .stage__pill { margin-top: 30vh; font-size: 12px; letter-spacing: .14em; }
    .stage__live .stage__pill { margin-top: 30vh; }
    .stage__text { font-size: 17px; }
    .countdown__unit b { font-size: 30px; }
    .countdown__unit small { font-size: 13px; }
}
@media (max-width: 420px) {
    .rstream { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
    .rstream__title { font-size: 15.5px; }
    .rstream__meta { font-size: 13px; }
}