/* ============================================================
   СИСТЕМА ПРОГНОЗИРОВАНИЯ БУДУЩЕГО
   Полностью авторские стили. Без сторонних фреймворков.
   Палитра:
     --teal   #6BAFAF  приглушённый бирюзовый
     --white  #FFFFFF  белый
     --violet #A78BCF  мягкий фиолетовый
     --gold   #E9C46A  тёплый жёлтый акцент
   ============================================================ */

:root {
    --teal: #6BAFAF;
    --teal-deep: #3d7878;
    --white: #FFFFFF;
    --violet: #A78BCF;
    --gold: #E9C46A;

    --ink: #eaf5f4;
    --ink-soft: rgba(234, 245, 244, 0.72);
    --ink-faint: rgba(234, 245, 244, 0.5);

    --bg-0: #0a1a1e;
    --bg-1: #0e2329;
    --bg-2: #15303a;

    --glass-bg: rgba(255, 255, 255, 0.035);
    --glass-brd: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);

    --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', 'Manrope', 'Segoe UI', system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg-0);
    overflow: hidden;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ===================== Фоновые слои ===================== */

.bg-layers {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-gradient {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(120% 90% at 20% 10%, var(--bg-2) 0%, transparent 55%),
        radial-gradient(120% 100% at 85% 90%, #1a2b46 0%, transparent 55%),
        linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%);
    transition: transform 0.6s var(--ease-soft);
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.14;
    mix-blend-mode: screen;
    transition: transform 0.8s var(--ease-soft), opacity 3s var(--ease-soft);
}

.glow-a { width: 50vmax; height: 50vmax; left: -14vmax; top: -12vmax; background: radial-gradient(circle, var(--teal), transparent 65%); animation: drift1 34s var(--ease-soft) infinite alternate; }
.glow-b { width: 44vmax; height: 44vmax; right: -12vmax; bottom: -10vmax; background: radial-gradient(circle, var(--violet), transparent 65%); animation: drift2 40s var(--ease-soft) infinite alternate; }
.glow-c { width: 26vmax; height: 26vmax; left: 42%; top: 52%; background: radial-gradient(circle, var(--gold), transparent 65%); opacity: 0.05; animation: drift3 46s var(--ease-soft) infinite alternate; }

@keyframes drift1 { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-7vmax, -5vmax) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-10vmax, -8vmax) scale(1.2); } }

#particles-canvas, #petals-canvas, #stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#petals-canvas { z-index: 2; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
#petals-canvas.active { opacity: 1; }
#stars-canvas { z-index: 1; opacity: 0; transition: opacity 2.5s var(--ease-soft); }
#stars-canvas.active { opacity: 1; }

/* ===================== HUD ===================== */

.hud {
    position: fixed;
    top: clamp(14px, 3vw, 26px);
    right: clamp(14px, 3vw, 26px);
    z-index: 50;
    display: flex;
    gap: 10px;
}

.hud-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--glass-brd);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink-soft);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.3s var(--ease), color 0.3s, border-color 0.3s, background 0.3s;
}
.hud-btn:hover { transform: translateY(-2px) scale(1.05); color: var(--gold); border-color: rgba(233, 196, 106, 0.5); }
.hud-btn .ic-svg { width: 18px; height: 18px; }

/* ===================== Сцена и экраны ===================== */

/* Сцена сама является контейнером прокрутки: контент центрируется,
   но при нехватке высоты viewport аккуратно прокручивается — кнопки
   никогда не уходят за пределы экрана. */
.stage {
    position: relative;
    z-index: 10;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.stage::-webkit-scrollbar { display: none; }

.screen {
    margin: auto;                 /* центрирование + безопасная прокрутка при переполнении */
    width: 100%;
    max-width: min(880px, 92vw);
    padding: clamp(44px, 7vh, 84px) clamp(18px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 3vh, 28px);
}

/* Переходы между экранами (Page Transition) — медленнее и плавнее,
   чтобы атмосферу каждой сцены можно было прожить. */
.screen.enter { animation: screenIn 1.4s var(--ease) both; }
.screen.leave { animation: screenOut 1.05s var(--ease-soft) both; }

@keyframes screenIn {
    from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes screenOut {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-14px); filter: blur(5px); }
}

/* ===================== Типографика ===================== */

.eyebrow {
    font-size: clamp(0.62rem, 1.5vw, 0.74rem);
    letter-spacing: 0.46em;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 500;
    opacity: 0.85;
    padding-left: 0.46em; /* компенсация трекинга справа для оптического центрирования */
}

.title-serif {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.06;
    font-size: clamp(2rem, min(7vw, 7.5vh), 4.2rem);
    letter-spacing: -0.015em;
}
.title-serif em { color: var(--gold); font-style: italic; }

.lead {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 3.4vw, 1.9rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 30ch;
}

.muted-line {
    color: var(--ink-soft);
    font-size: clamp(0.95rem, 2.4vw, 1.12rem);
    line-height: 1.7;
    max-width: 46ch;
    font-weight: 300;
}

.system-line {
    font-family: var(--sans);
    letter-spacing: 0.04em;
    color: var(--teal);
    font-size: clamp(0.9rem, 2.3vw, 1.05rem);
}

/* Анимация печати текста */
.typed::after {
    content: "▌";
    color: var(--gold);
    margin-left: 2px;
    animation: caret 1s steps(1) infinite;
}
.typed.done::after { opacity: 0; animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* Плавное появление строк */
.fade-line { opacity: 0; transform: translateY(12px); animation: fadeUp 1.6s var(--ease) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ===================== Стеклянная панель ===================== */

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
    padding: clamp(22px, 4vw, 40px);
    position: relative;
    overflow: hidden;
}

/* ===================== Кнопки ===================== */

.btn {
    font-family: var(--sans);
    font-size: clamp(0.92rem, 2.4vw, 1.02rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    padding: 0.9em 2em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease-soft), color 0.4s, background 0.4s;
    opacity: 0;
    animation: fadeUp 1.3s var(--ease) 0.3s forwards;
}
.btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
}
.btn:active { transform: translateY(0) scale(0.99); }

/* Тёплый жёлтый — редкий акцент только на ключевых кнопках */
.btn-gold {
    border-color: rgba(233, 196, 106, 0.32);
    color: var(--white);
}
.btn-gold:hover { border-color: rgba(233, 196, 106, 0.6); background: rgba(233, 196, 106, 0.08); }

.btn-lg { padding: 1.05em 2.6em; font-size: clamp(0.98rem, 2.8vw, 1.15rem); }

.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ===================== Экран загрузки ===================== */

.boot { gap: clamp(30px, 6vh, 46px); }

.boot-ring {
    width: clamp(116px, 24vw, 168px);
    height: clamp(116px, 24vw, 168px);
    position: relative;
}
.boot-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.boot-ring .track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1.25; }
.boot-ring .prog { fill: none; stroke: url(#bootgrad); stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset 0.4s var(--ease-soft); }
.boot-ring .pct {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    letter-spacing: -0.01em;
    color: var(--ink);
}
/* Минималистичный лоудер: одно тонкое кольцо прогресса, без лишних элементов */
.boot-spinner { display: none; }

.boot-msg {
    min-height: 1.5em;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    font-weight: 300;
    font-size: clamp(0.82rem, 2vw, 0.94rem);
}

/* ===================== Анализ личности ===================== */

.facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    text-align: left;
}
.fact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateX(-18px);
}
.fact.show { animation: factIn 1.1s var(--ease) forwards; }
@keyframes factIn { to { opacity: 1; transform: translateX(0); } }
.fact .glyph {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(107,175,175,0.16);
    color: var(--teal);
}
.fact .glyph .ic-svg { width: 17px; height: 17px; }
.fact .txt { flex: 1; color: var(--ink); font-weight: 300; }
.fact .check {
    color: var(--gold);
    display: inline-flex;
    opacity: 0;
    transform: scale(0.4);
}
.fact .check .ic-svg { width: 18px; height: 18px; }
.fact.checked .check { animation: pop 0.5s var(--ease) forwards; }
@keyframes pop { to { opacity: 1; transform: scale(1); } }

/* ===================== Совместимость ===================== */

.compat { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.compat-number {
    font-family: var(--serif);
    font-size: clamp(2.6rem, min(12vw, 11vh), 5.5rem);
    line-height: 1;
    color: var(--white);
    letter-spacing: 0.01em;
}
.compat-number .sym { color: var(--teal); font-size: 0.5em; vertical-align: super; }
.compat-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.compat-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--violet), var(--gold));
    box-shadow: 0 0 16px rgba(233,196,106,0.4);
    transition: width 0.9s var(--ease-soft);
}
.compat.halt .compat-number { animation: glitch 0.5s steps(2) 3; color: var(--gold); }
@keyframes glitch {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px) skewX(-2deg); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* ===================== Глава ===================== */

.chapter-head { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.chapter-num {
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold);
    font-size: clamp(1rem, 3vw, 1.3rem);
    letter-spacing: 0.1em;
}

.scenery {
    width: 100%;
    max-width: 460px;
    display: grid;
    place-items: center;
    margin: 2px 0;
    opacity: 0.92;
}
.scenery svg { width: 100%; height: auto; max-height: clamp(150px, 30vh, 290px); overflow: visible; }

/* Карточки сцен.
   Каждая карточка имеет ФИКСИРОВАННУЮ ширину и выкладывается во flex с
   переносом — поэтому добавление карточек не пересчитывает их размеры
   (никакого layout shift). Появление — через анимацию opacity + translate
   + лёгкое размытие, со stagger-задержкой (задаётся из JS на каждую карточку). */
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 760px;
}
.card {
    flex: 0 0 auto;
    width: min(230px, 100%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    padding: 15px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: transform 0.4s var(--ease), border-color 0.45s, background 0.45s;
}
/* Анимируем individual-property `translate` (а не `transform`), чтобы hover
   c transform не конфликтовал с заполнением (fill) анимации появления. */
.card.show { animation: cardIn 0.95s var(--ease) both; }
@keyframes cardIn {
    from { opacity: 0; translate: 0 20px; filter: blur(6px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
}
.card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }
.card .ic { flex: 0 0 auto; color: var(--teal); display: inline-flex; }
.card .ic .ic-svg { width: 22px; height: 22px; transition: transform 0.4s var(--ease), color 0.4s; }
.card:hover .ic { color: var(--gold); }
.card:hover .ic .ic-svg { transform: scale(1.12); }
.card .label { font-weight: 300; color: var(--ink-soft); line-height: 1.4; }

/* Карточки с Пушином (глава «Кот») — крупная иллюстрация сверху */
.card-pushin { flex-direction: column; text-align: center; gap: 12px; padding: 18px 16px 16px; }
.card-pushin .ic .pushin { width: 92px; height: auto; }
.card-pushin .label { color: var(--ink); }

/* Параграфы-строки (главы без карточек) */
.verses { display: flex; flex-direction: column; gap: 14px; }
.verse {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 3.4vw, 1.75rem);
    line-height: 1.5;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 1.8s var(--ease) forwards;
}

/* ===================== Главный вопрос ===================== */

.question-screen { gap: clamp(22px, 4vw, 40px); }
.question-text {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.8rem, min(7vw, 8vh), 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--white);
    text-shadow: 0 4px 30px rgba(167, 139, 207, 0.18);
}
.question-text .heart { color: #e69bb4; }

.q-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; }
.btn-yes {
    border-color: rgba(233, 196, 106, 0.3);
    background: rgba(233, 196, 106, 0.05);
    color: var(--white);
}
.btn-yes:hover { border-color: rgba(233, 196, 106, 0.55); background: rgba(233, 196, 106, 0.1); }
/* «Конечно да» мягко увеличивается, чтобы было мило */
.btn-of-course { transition: transform 0.5s var(--ease); }

.heart-burst {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    animation: floatHeart 1.6s var(--ease-soft) forwards;
}
.heart-burst .ic-svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.heart-pink { color: #e69bb4; }
.heart-gold { color: var(--gold); }
.heart-white { color: #ffffff; }
.heart-violet { color: var(--violet); }
@keyframes floatHeart {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-160px) scale(1.3); }
}

/* Сердечко на кнопках согласия */
.btn-heart { display: inline-flex; vertical-align: middle; margin-left: 0.5em; color: #e69bb4; }
.btn-heart .ic-svg { width: 1.05em; height: 1.05em; fill: currentColor; stroke: currentColor; }

/* ===================== Финал ===================== */

.finale-line {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3.8vw, 2.05rem);
    line-height: 1.55;
    color: var(--ink);
    opacity: 0;
    animation: fadeUp 2.1s var(--ease) forwards;
}
.finale-last {
    color: var(--gold);
    font-style: italic;
}
.end-word {
    font-family: var(--serif);
    font-size: clamp(2.2rem, min(10vw, 10vh), 5rem);
    color: var(--white);
    letter-spacing: 0.02em;
    transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-soft);
}

/* ===================== Котик (глава 8) ===================== */
.cat-prob {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    color: var(--gold);
}

/* Иллюстрации Пушина и их лёгкие анимации */
.pushin { width: 100%; height: auto; overflow: visible; transform-origin: 50% 92%; }
.pushin-soft { animation: pushinBreath 4.5s var(--ease-soft) infinite; }
@keyframes pushinBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.012); }
}
.pushin-sleeping { animation: pushinSleep 5.5s var(--ease-soft) infinite; }
@keyframes pushinSleep {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1.5px) scale(1.02); }
}
.pushin-heart-float { transform-box: fill-box; transform-origin: center; animation: pushinHeart 2.8s var(--ease-soft) infinite; }
@keyframes pushinHeart {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(-4px); opacity: 1; }
}
.pushin-zzz { animation: pushinZzz 3s var(--ease-soft) infinite; }
@keyframes pushinZzz {
    0% { opacity: 0.2; transform: translateY(2px); }
    50% { opacity: 0.9; transform: translateY(-2px); }
    100% { opacity: 0.2; transform: translateY(2px); }
}

/* ===================== Утилиты ===================== */
.stack { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 1.1s; }
.delay-5 { animation-delay: 1.4s; }

.tap-hint {
    color: var(--ink-faint);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 8px;
    animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } }

/* ===================== Финальная сцена: ночь и луна ===================== */
/* Экран постепенно затемняется, остаётся ночное небо и лепестки. */
body.night .bg-gradient { filter: brightness(0.45); transition: filter 5s var(--ease-soft); }
body.night .bg-glow { opacity: 0 !important; }
body.night #particles-canvas { opacity: 0.25; transition: opacity 5s var(--ease-soft); }
body.night .hud { opacity: 0.25; transition: opacity 3s var(--ease-soft); }
body.night .hud:hover { opacity: 1; }

.moon-screen { gap: clamp(20px, 5vh, 50px); }
.moon-art { max-width: 360px; opacity: 0; animation: moonRise 6s var(--ease-soft) forwards; }
@keyframes moonRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.95; transform: translateY(0); } }

.moon-line {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, min(5vw, 6vh), 2.6rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: 24ch;
    text-shadow: 0 4px 40px rgba(255, 255, 255, 0.12);
}

/* ===================== Адаптив ===================== */

/* Узкие экраны / телефоны */
@media (max-width: 560px) {
    .card { width: 100%; }
    .actions, .q-actions { flex-direction: column; width: 100%; }
    .btn { width: 100%; }
}

/* Низкая высота viewport (ноутбуки, горизонтальный телефон) —
   ужимаем по вертикали, чтобы кнопки оставались в зоне видимости. */
@media (max-height: 720px) {
    .screen { gap: clamp(12px, 2vh, 20px); padding-block: clamp(28px, 5vh, 56px); }
    .scenery svg { max-height: clamp(110px, 22vh, 200px); }
    .facts { gap: 8px; }
    .fact { padding: 10px 16px; }
    .cards { gap: 10px; }
    .card { padding: 12px 15px; }
}

@media (max-height: 560px) {
    .scenery { display: none; }            /* в крайне низких окнах убираем иллюстрацию */
    .title-serif { font-size: clamp(1.6rem, 6vh, 2.4rem); }
    .lead { font-size: clamp(1.05rem, 4.4vh, 1.4rem); }
}

/* Ультраширокие экраны — не даём контенту расплываться. */
@media (min-width: 1800px) {
    .screen { max-width: 920px; }
    .cards { max-width: 820px; }
}

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

/* ===================== Пиксельная мини-игра ===================== */
#game-layer {
    position: fixed;
    inset: 0;
    z-index: 20;                 /* над сценой (10), под HUD (50) */
    background: #0e2329;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.1s var(--ease-soft);
}
#game-layer.show { opacity: 1; }
#game-layer canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.game-hint {
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.55em 1.2em;
    border-radius: 999px;
    background: rgba(14, 35, 41, 0.66);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(0.85rem, 2vw, 0.98rem);
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.3s var(--ease-soft);
    pointer-events: none;
}
.game-hint.show { opacity: 1; }
.game-hint b { color: var(--gold); font-weight: 600; }
.game-help {
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--ink-faint);
    font-family: var(--sans);
    font-size: clamp(0.7rem, 1.6vw, 0.82rem);
    letter-spacing: 0.04em;
    pointer-events: none;
}
.game-banner {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8vw;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, min(6vw, 7vh), 3rem);
    letter-spacing: -0.01em;
    color: var(--white);
    text-shadow: 0 4px 34px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 1s var(--ease-soft);
    pointer-events: none;
}
.game-banner.show { opacity: 1; }

/* Реплика питомца во второй локации */
.game-bubble {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    padding: 0.35em 0.8em;
    border-radius: 999px;
    background: rgba(14, 35, 41, 0.78);
    border: 1px solid var(--glass-brd);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    white-space: nowrap;
    pointer-events: none;
    animation: bubbleFloat 1.3s var(--ease-soft) forwards;
}
@keyframes bubbleFloat {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
    20% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

/* Незаметная подсказка о клике в финале */
.end-hint {
    position: fixed;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    z-index: 40;
    text-transform: none;
    transition: opacity 0.6s var(--ease-soft);
}

/* ===================== Преамбула ===================== */
.preamble { gap: clamp(22px, 5vh, 40px); }
.preamble-text { gap: 0.9em; max-width: 48ch; }
.preamble-text .lead { max-width: none; }

/* ===================== Интерактивный чек-лист ===================== */
.fact.clickable { cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.fact.clickable:hover { border-color: rgba(233, 196, 106, 0.4); background: rgba(255, 255, 255, 0.06); transform: translateX(2px); }
.fact.checked.clickable { cursor: default; }

/* Пушины-котики, разлетающиеся у курсора */
.pushin-pop {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    animation: pushinPop 1.5s var(--ease-soft) forwards;
}
.pushin-pop .pushin { width: 100%; height: auto; display: block; }
@keyframes pushinPop {
    0% { opacity: 0; transform: translateY(0) scale(0.4) rotate(var(--rot, 0deg)); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-95px) scale(1) rotate(var(--rot, 0deg)); }
}