@font-face{font-family:'SpatiumFont';src:url('fonts/spatium.woff2') format('woff2'),url('fonts/spatium.woff') format('woff'),url('fonts/spatium.ttf') format('truetype'),url('fonts/spatium.otf') format('opentype');font-display:swap}
/* ==================== ПЕРЕМЕННЫЕ И ТЕМЫ ==================== */
:root[data-theme="dark"] {
    --bg-base: #14161b;
    --bg-surface: rgba(30, 33, 41, 0.84);
    --bg-surface-hover: rgba(46, 50, 62, 0.92);
    --bg-sidebar: rgba(18, 20, 25, 0.8);
    --border-color: rgba(255, 255, 255, 0.13);
    --border-focus: #f2b441;
    --text-primary: #eceae4;
    --text-secondary: #a9abb6;
    --text-muted: #747987;
    --accent: #f2b441;
    --accent-gradient: linear-gradient(90deg, #f2b441, #e8833a);
    --accent-glow: rgba(242, 180, 65, 0.18);
    --mc-green: #55ff55; --mc-gold: #ffaa00; --mc-aqua: #55ffff;
    --code-bg: #0c0d10;
    --bevel-hi: rgba(255,255,255,0.07); --bevel-lo: rgba(0,0,0,0.45);
    --pixel-shadow: rgba(0,0,0,0.55);
    --shadow: 0 6px 0 rgba(0,0,0,0.25);
    --glow-color-1: rgba(242, 180, 65, 0.45);
    --glow-color-2: rgba(242, 180, 65, 0.35);
    --glow-color-3: rgba(242, 180, 65, 0.25);
}
:root[data-theme="light"] {
    --bg-base: #e8e9ec;
    --bg-surface: rgba(250, 250, 247, 0.88);
    --bg-surface-hover: rgba(226, 228, 232, 0.96);
    --bg-sidebar: rgba(238, 239, 241, 0.85);
    --border-color: rgba(20, 22, 27, 0.2);
    --border-focus: #8f4f00;
    --text-primary: #191b20;
    --text-secondary: #444955;
    --text-muted: #6c7180;
    --accent: #8f4f00;
    --accent-gradient: linear-gradient(90deg, #b26b00, #d9822b);
    --accent-glow: rgba(143, 79, 0, 0.14);
    --mc-green: #2e7d32; --mc-gold: #e65100; --mc-aqua: #00838f;
    --code-bg: #dcdde2;
    --bevel-hi: rgba(255,255,255,0.8); --bevel-lo: rgba(0,0,0,0.14);
    --pixel-shadow: rgba(20,22,27,0.22);
    --shadow: 0 6px 0 rgba(0,0,0,0.08);
    --glow-color-1: rgba(242, 180, 65, 0.45);
    --glow-color-2: rgba(242, 180, 65, 0.35);
    --glow-color-3: rgba(242, 180, 65, 0.25);
}

/* ==================== СБРОС И БАЗОВЫЕ СТИЛИ ==================== */
html { scroll-behavior: smooth; }
* {
    box-sizing: border-box; margin: 0; padding: 0;
}
/* плавные переходы только там, где они нужны (а не у каждого элемента) */
body, header, aside.sidebar, a, button, input,
.category-card, .article-card, .info-block, .article-list-item,
.wiki-callout, .wiki-table th, .wiki-table td, .wiki-body code, .wiki-body pre {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body {
    font-family: 'Onest', system-ui, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex; flex-direction: column;
    overflow-x: hidden; position: relative;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font-family: inherit; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==================== АНИМИРОВАННАЯ ВОЛНА СВЕЧЕНИЯ ==================== */
@property --amp {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

body {
    --amp: 1;
    transition: --amp 1.5s ease, background-color 0.2s ease, color 0.2s ease;
}

.glow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
    opacity: 1;
    visibility: visible;
}

.glow-container.glow-disabled {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.2s;
}

.glow-blob {
    position: absolute;
    will-change: transform;
    contain: layout paint;
    border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
    filter: blur(70px);
    opacity: 0.9;
    mix-blend-mode: screen;
    transition: left 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                top 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 1.5s ease,
                opacity 1.5s ease,
                background 0.5s ease,
                border-radius 0.5s ease,
                clip-path 0.5s ease;
}

.glow-blob-1 {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle at 35% 35%, var(--glow-color-1) 0%, transparent 70%);
    animation: waveMorph1 14s ease-in-out infinite alternate, waveShape1 9s ease-in-out infinite;
}

.glow-blob-2 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at 60% 40%, var(--glow-color-2) 0%, transparent 70%);
    animation: waveMorph2 17s ease-in-out infinite alternate, waveShape2 11s ease-in-out infinite;
}

.glow-blob-3 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at 45% 60%, var(--glow-color-3) 0%, transparent 70%);
    animation: waveMorph3 12s ease-in-out infinite alternate, waveShape3 8s ease-in-out infinite;
}

/* на светлой теме screen не работает - переключаем на обычное смешивание */
:root[data-theme="light"] .glow-blob { mix-blend-mode: normal; opacity: 0.6; }

body.glow-left .glow-blob-1 { top: 20%; left: -100px; }
body.glow-left .glow-blob-2 { top: 40%; left: 100px; }
body.glow-left .glow-blob-3 { top: 15%; left: 250px; }

body.glow-center .glow-blob-1 { top: 25%; left: calc(50% - 275px); }
body.glow-center .glow-blob-2 { top: 15%; left: calc(50% - 150px); }
body.glow-center .glow-blob-3 { top: 45%; left: calc(50% - 200px); }

body.glow-right .glow-blob-1 { top: 20%; left: calc(100% - 450px); }
body.glow-right .glow-blob-2 { top: 45%; left: calc(100% - 550px); }
body.glow-right .glow-blob-3 { top: 15%; left: calc(100% - 300px); }

@keyframes waveMorph1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(calc(60px * var(--amp)), calc(-50px * var(--amp))) scale(calc(1 + 0.12 * var(--amp))) rotate(calc(100deg * var(--amp))); }
    66%  { transform: translate(calc(-40px * var(--amp)), calc(50px * var(--amp))) scale(calc(1 - 0.08 * var(--amp))) rotate(calc(220deg * var(--amp))); }
    100% { transform: translate(calc(30px * var(--amp)), calc(-30px * var(--amp))) scale(calc(1 + 0.08 * var(--amp))) rotate(calc(360deg * var(--amp))); }
}

@keyframes waveMorph2 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(calc(-70px * var(--amp)), calc(40px * var(--amp))) scale(calc(1 + 0.2 * var(--amp))) rotate(calc(-180deg * var(--amp))); }
    100% { transform: translate(calc(50px * var(--amp)), calc(-40px * var(--amp))) scale(calc(1 - 0.05 * var(--amp))) rotate(calc(-360deg * var(--amp))); }
}

@keyframes waveMorph3 {
    0%   { transform: translate(0, 0) scale(calc(1 - 0.08 * var(--amp))) rotate(0deg); }
    50%  { transform: translate(calc(40px * var(--amp)), calc(-45px * var(--amp))) scale(calc(1 + 0.2 * var(--amp))) rotate(calc(140deg * var(--amp))); }
    100% { transform: translate(calc(-30px * var(--amp)), calc(30px * var(--amp))) scale(calc(1 + 0.05 * var(--amp))) rotate(calc(280deg * var(--amp))); }
}

@keyframes waveShape1 {
    0%, 100% { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
    25%      { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; }
    50%      { border-radius: 35% 65% 55% 45% / 60% 35% 65% 40%; }
    75%      { border-radius: 55% 45% 40% 60% / 38% 58% 42% 62%; }
}

@keyframes waveShape2 {
    0%, 100% { border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%; }
    33%      { border-radius: 40% 60% 60% 40% / 62% 38% 62% 38%; }
    66%      { border-radius: 52% 48% 33% 67% / 40% 55% 45% 60%; }
}

@keyframes waveShape3 {
    0%, 100% { border-radius: 50% 50% 38% 62% / 58% 42% 58% 42%; }
    50%      { border-radius: 38% 62% 55% 45% / 42% 60% 40% 58%; }
}

/* ==================== ГРУППА УПРАВЛЕНИЯ СВЕЧЕНИЕМ ==================== */
.glow-control-group {
    display: flex;
    align-items: center;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
}

.glow-toggle-btn, .glow-config-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.glow-toggle-btn .glow-icon {
    font-size: 0.95rem;
    color: var(--accent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.glow-config-btn i {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.glow-toggle-btn:hover, .glow-config-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.glow-config-btn:hover i {
    color: var(--accent);
    transform: rotate(45deg);
}

.glow-toggle-btn:active, .glow-config-btn:active {
    transform: scale(0.92);
}

body.glow-off .glow-toggle-btn .glow-icon {
    opacity: 0.35;
}

body.glow-left #glowIcon { transform: rotate(-90deg); }
body.glow-center #glowIcon { transform: rotate(0deg); }
body.glow-right #glowIcon { transform: rotate(90deg); }

/* ==================== МОДАЛЬНОЕ ОКНО ПАЛИТРЫ И ФОРМ ==================== */
.color-picker-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.color-picker-overlay.active {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.color-picker-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.color-picker-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.color-picker-overlay.active .color-picker-modal {
    transform: scale(1);
}

.color-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.color-picker-header h3 {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.close-picker-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.close-picker-btn:hover {
    color: var(--text-primary);
}

.color-picker-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.color-picker-body {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.wheel-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

#colorWheel {
    border-radius: 50%;
    cursor: crosshair;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    touch-action: none;
}

.wheel-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px rgba(0,0,0,0.8), inset 0 0 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.color-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.slider-group label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.slider-group input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-base);
    outline: none;
    cursor: pointer;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.slider-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#hueSlider {
    background: linear-gradient(to right, 
        #ff0000 0%, #ffff00 17%, #00ff00 33%, 
        #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.hex-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    background: var(--bg-base);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.hex-input-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.hex-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: #f2b441;
}

#hexInput {
    width: 80px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    outline: none;
    text-transform: uppercase;
}

.reset-color-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.glow-power-btn {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.glow-power-btn:hover {
    transform: translateY(-1px);
}

.glow-power-btn.is-off {
    border-color: var(--border-color);
    background: var(--bg-base);
    color: var(--text-secondary);
}

.reset-color-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .color-picker-body {
        flex-direction: column;
    }
    .wheel-wrapper {
        width: 160px;
        height: 160px;
    }
    #colorWheel {
        width: 160px;
        height: 160px;
    }
}


/* ==================== ЭФФЕКТ ГЛИЧА И БЕЗОПАСНЫЙ ПЕРЕХОД ==================== */
.glitch-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    background: #000;
}

body.fade-active .glitch-overlay {
    opacity: 1;
    transition: opacity 0.5s ease;
    background: #000;
}

/* ---- переход в консоль: разрыв страницы → ТВ-линия → загрузка терминала ---- */
body.cg-active { overflow: hidden !important; }
body.cg-warp > header,
body.cg-warp > .layout { filter: url(#spGlitch); }

.cg-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.45s ease;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
.cg-overlay.cg-out { opacity: 0; }

.cg-shutter {
    position: absolute;
    left: 0; right: 0;
    height: 50.5%;
    background: #000;
    transition: transform 0.28s cubic-bezier(0.7, 0, 0.9, 0.4);
}
.cg-top { top: 0;    transform: translateY(-101%); }
.cg-bot { bottom: 0; transform: translateY(101%); }
.cg-close .cg-top,
.cg-close .cg-bot { transform: none; }

.cg-beam {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 3px;
    margin-top: -1.5px;
    background: #d6ffe6;
    box-shadow: 0 0 14px 4px rgba(51, 255, 122, 0.75), 0 0 40px 10px rgba(51, 255, 122, 0.35);
    transform: scaleX(0);
    opacity: 0;
}
.cg-beam-on .cg-beam { opacity: 1; transform: scaleX(1); transition: transform 0.16s ease-out; }
.cg-beam-off .cg-beam { transform: scaleX(0.004); opacity: 0; transition: transform 0.18s ease-in, opacity 0.18s ease-in 0.06s; }

.cg-term {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: clamp(1.2rem, 6vw, 4.5rem);
    color: #33ff7a;
    font-size: clamp(0.85rem, 2.4vw, 1.15rem);
    line-height: 1.8;
    text-shadow: 0 0 8px rgba(51, 255, 122, 0.55);
    white-space: pre-wrap;
    opacity: 0;
}
.cg-term b { color: #d6ffe6; font-weight: 700; text-shadow: 0 0 12px rgba(51, 255, 122, 0.95); }
.cg-term::after {
    content: '\2588';
    margin-left: 0.3ch;
    animation: cgCaret 0.5s steps(1) infinite;
}
.cg-term-on .cg-term { opacity: 1; }
.cg-overlay.cg-term-on {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, #04140a 0%, #000 78%);
}
@keyframes cgCaret { 50% { opacity: 0; } }


/* полоса «трекинга» (VHS) — проходит сверху вниз в начале перехода */
.cg-track {
    position: absolute;
    left: 0; right: 0;
    top: -16%;
    height: 16%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07) 35%, rgba(51, 255, 122, 0.13) 60%, transparent);
    animation: cgTrack 0.42s linear forwards;
}
@keyframes cgTrack { to { top: 112%; } }

@media (prefers-reduced-motion: reduce) {
    .cg-term::after { animation: none; }
}

/* ==================== КНОПКА «В КОНСОЛЬ» ==================== */
.console-btn {
    position: relative;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #33ff33;
    background-color: #030a03;
    border: 1px solid #33ff33;
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 8px rgba(51, 255, 51, 0.3), inset 0 0 4px rgba(51, 255, 51, 0.2);
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.8);
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-left: 0.5rem;
    overflow: hidden;
}

.console-btn i {
    font-size: 0.75rem;
    color: #33ff33;
    position: relative;
    z-index: 2;
}

body:not(.safe-consolefx) .console-btn::before,
body:not(.safe-consolefx) .console-btn::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    padding: 0.55rem 0.85rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #030a03;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    opacity: 0;
    pointer-events: none;
}

body:not(.safe-consolefx) .console-btn::before {
    color: #ff0055;
    z-index: 1;
    animation: glitch-anim-1 3.5s infinite linear alternate-reverse;
}

body:not(.safe-consolefx) .console-btn::after {
    color: #00ffff;
    z-index: 1;
    animation: glitch-anim-2 3.5s infinite linear alternate-reverse;
}

body:not(.safe-consolefx) .console-btn:hover {
    background-color: #33ff33;
    color: #000000;
    box-shadow: 0 0 15px rgba(51, 255, 51, 0.9), inset 0 0 10px rgba(0, 0, 0, 0.5);
    text-shadow: none;
    animation: glitch-shake 0.2s infinite;
}

body:not(.safe-consolefx) .console-btn:hover i {
    color: #000000;
}

body:not(.safe-consolefx) .console-btn:hover::before {
    opacity: 0.8;
    background: transparent;
    animation: glitch-hover 0.15s infinite;
}

body:not(.safe-consolefx) .console-btn:hover::after {
    opacity: 0.8;
    background: transparent;
    animation: glitch-hover-2 0.15s infinite;
}

.console-btn:active {
    transform: scale(0.95);
}

@keyframes glitch-anim-1 {
    0%, 85%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
    86% { opacity: 0.9; transform: translate(-3px, -1px); clip-path: inset(10% 0 60% 0); }
    88% { opacity: 0.9; transform: translate(3px, 1px); clip-path: inset(40% 0 20% 0); }
    90% { opacity: 0; transform: translate(0); }
}

@keyframes glitch-anim-2 {
    0%, 88%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0 0 0 0); }
    89% { opacity: 0.9; transform: translate(3px, 1px); clip-path: inset(50% 0 10% 0); }
    91% { opacity: 0.9; transform: translate(-2px, -2px); clip-path: inset(15% 0 65% 0); }
    93% { opacity: 0; transform: translate(0); }
}

@keyframes glitch-hover {
    0% { transform: translate(-2px, 1px); clip-path: inset(20% 0 40% 0); }
    50% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
    100% { transform: translate(-1px, 2px); clip-path: inset(10% 0 70% 0); }
}

@keyframes glitch-hover-2 {
    0% { transform: translate(2px, -1px); clip-path: inset(50% 0 20% 0); }
    50% { transform: translate(-2px, 1px); clip-path: inset(10% 0 60% 0); }
    100% { transform: translate(1px, -2px); clip-path: inset(70% 0 5% 0); }
}

@keyframes glitch-shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
    100% { transform: translate(0, 0); }
}

/* ==================== ШАПКА ==================== */
header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border-color);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    height: 64px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; gap: 1rem;
}
.header-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 0.6rem; }
.logo { display: flex; align-items: center; cursor: pointer; }
.logo-img { height: 36px; width: auto; object-fit: contain; display: block; image-rendering: pixelated; }
.logo-img.broken { display: none; }
.logo-text { display: none; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.05rem; }
.logo-img.broken + .logo-text { display: block; }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.25rem; cursor: pointer; }
.nav-links { display: flex; align-items: center; gap: 0.5rem; }
.nav-btn {
    background: transparent; border: none; color: var(--text-secondary);
    font-weight: 500; padding: 0.5rem 0.8rem; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; position: relative;
}
.nav-btn:hover, .nav-btn.active { color: var(--text-primary); background: var(--bg-surface-hover); }
.nav-btn.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px;
    background: var(--accent-gradient); animation: fadeIn 0.3s ease;
}
.search-box-header { position: relative; width: 220px; }
.search-box-header input {
    width: 100%; padding: 0.45rem 0.8rem 0.45rem 2.2rem;
    border: 2px solid var(--border-color); background: var(--bg-base);
    color: var(--text-primary); font: inherit; font-size: 0.875rem; outline: none;
    box-shadow: inset 2px 2px 0 var(--bevel-lo);
}
.search-box-header input:focus { border-color: var(--border-focus); }
.search-box-header i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; pointer-events: none; }
.search-box-header input:focus + i { color: var(--accent); }
.theme-toggle { border-radius: 0; border: 2px solid var(--border-color); background: var(--bg-base); color: var(--text-secondary); width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.theme-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ==================== ВЕРСТКА ==================== */
.layout { display: flex; flex: 1; max-width: 1440px; margin: 0 auto; width: 100%; }
aside.sidebar {
    width: 260px; background: var(--bg-sidebar); border-right: 2px solid var(--border-color);
    padding: 1.5rem 1rem; flex-shrink: 0; height: calc(100vh - 64px);
    position: sticky; top: 64px; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-title { font-family: 'Unbounded', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.75rem; padding-left: 0.75rem; }
.sidebar-menu { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar-item a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; color: var(--text-secondary); font-size: 0.92rem; font-weight: 500; border-left: 3px solid transparent; }
.sidebar-item a i { width: 1.1rem; text-align: center; color: var(--text-muted); }
.sidebar-item a:hover { background: var(--bg-surface-hover); color: var(--text-primary); text-decoration: none; }
.sidebar-item.active a { background: var(--accent-glow); color: var(--text-primary); font-weight: 600; border-left-color: var(--accent); }
.sidebar-item.active a i { color: var(--accent); }
.sidebar-version { font-family: 'SpatiumFont', 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--text-muted); padding-top: 1rem; margin-top: auto; border-top: 2px solid var(--border-color); }
main.content { flex: 1; padding: 2.25rem 2rem 3rem; min-width: 0; }
.page-animated { animation: pageFadeIn 0.3s ease-out both; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.container-narrow { max-width: 920px; margin: 0 auto; }

/* ==================== ГЛАВНАЯ ==================== */
.hero { padding: 0.5rem 0 2.25rem; margin-bottom: 2rem; border-bottom: 2px solid var(--border-color); }
.hero h1 { font-family: 'Unbounded', sans-serif; font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; letter-spacing: -0.02em; }
.hero p { color: var(--text-secondary); font-size: 1.1rem; max-width: 56ch; margin-bottom: 1.75rem; }
.hero-search { max-width: 560px; position: relative; }
.hero-search input {
    width: 100%; padding: 0.9rem 1rem 0.9rem 3rem; font: inherit; font-size: 1rem;
    border: 2px solid var(--text-muted); background: rgba(0,0,0,0.55); color: #fff; outline: none;
}
html[data-theme="light"] .hero-search input { background: rgba(20,22,27,0.82); }
.hero-search input::placeholder { color: #9a9ca6; }
.hero-search input:focus { border-color: #fff; }
.hero-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: #9a9ca6; pointer-events: none; }

.section-title { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 500; margin: 2rem 0 1rem; display: flex; align-items: center; gap: 0.6rem; }
.section-title i { color: var(--accent); font-size: 0.95rem; }

.categories-grid, .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.categories-grid { margin-bottom: 2.5rem; }
.articles-grid { margin-top: 1rem; }

.category-card, .article-card, .info-block {
    background: var(--bg-surface); border: 2px solid var(--border-color); border-radius: 0;
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
}
.category-card, .article-card { padding: 1.1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.category-card:hover, .article-card:hover { border-color: var(--border-focus); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 5px 5px 0 var(--pixel-shadow); transform: translate(-2px, -2px); transition: transform 0.12s steps(2), box-shadow 0.12s steps(2), border-color 0.2s; }
.category-card { padding-bottom: 2.4rem; }
.category-card, .article-card, .info-block { background: var(--bg-surface-hover); }
.info-block { background: var(--bg-surface); }
.category-header, .article-card-header { display: flex; align-items: center; gap: 0.8rem; }
.category-icon, .article-card-media {
    width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); border: 2px solid var(--bevel-lo); border-right-color: var(--bevel-hi); border-bottom-color: var(--bevel-hi);
    color: var(--accent); font-size: 1.2rem;
}
html[data-theme="light"] .category-icon, html[data-theme="light"] .article-card-media { background: rgba(0,0,0,0.08); }
.article-card-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.article-card-media i { font-size: 1.2rem; color: var(--accent); }
.category-title, .article-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.category-desc, .article-card-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.45; flex: 1; }
.category-count { position: absolute; right: 0.9rem; bottom: 0.7rem; font-family: 'SpatiumFont', 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--text-primary); text-shadow: 2px 2px 0 var(--pixel-shadow); }
.article-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); border-top: 2px solid var(--border-color); padding-top: 0.6rem; }

.grid-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.info-block { padding: 1.25rem; }
.article-list-simple { display: flex; flex-direction: column; gap: 2px; }
.article-list-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.5rem; cursor: pointer; border-left: 3px solid transparent; }
.article-list-item:hover { background: var(--bg-surface-hover); border-left-color: var(--accent); }
.article-list-item .title-group { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.article-list-item i { color: var(--text-muted); font-size: 0.9rem; }
.article-list-item:hover i { color: var(--accent); }
.article-list-item span { font-weight: 500; font-size: 0.95rem; }
.article-list-item .date { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* ==================== СТРАНИЦА СТАТЬИ ==================== */
.article-container { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2.5rem; }
.article-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; }
.article-breadcrumb a { color: var(--text-secondary); }
.article-header { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); }
.article-header h1 { font-family: 'Unbounded', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem; }
.article-subtitle { font-size: 1.05rem; color: var(--text-secondary); }
.article-meta { margin-top: 1rem; display: flex; gap: 1.5rem; font-size: 0.85rem; color: var(--text-muted); }
.wiki-body { max-width: 72ch; line-height: 1.75; }
.wiki-body h2 { font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 500; margin: 2rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border-color); scroll-margin-top: 80px; }
.wiki-body h3 { font-size: 1.1rem; margin: 1.4rem 0 0.6rem; }
.wiki-body p { margin-bottom: 1rem; }
.wiki-body ul, .wiki-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.wiki-body li { margin-bottom: 0.35rem; }
.wiki-img { max-width: 100%; height: auto; border: 2px solid var(--border-color); margin: 1rem 0; display: block; image-rendering: pixelated; }
.wiki-body code { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.88em; background: var(--code-bg); border: 1px solid var(--border-color); padding: 0.1em 0.4em; color: var(--accent); }
.wiki-body pre { background: var(--code-bg); border: 2px solid var(--border-color); border-left: 4px solid var(--accent); padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; overflow-x: auto; }
.wiki-body pre code { background: none; border: none; padding: 0; font-size: 0.95rem; color: var(--text-primary); }
.wiki-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; display: block; overflow-x: auto; }
.wiki-table th, .wiki-table td { border: 2px solid var(--border-color); padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; font-size: 0.93rem; }
.wiki-table th { background: var(--bg-surface-hover); font-weight: 600; }
.wiki-table tbody tr:hover { background: var(--accent-glow); }
.wiki-callout { background: var(--bg-surface); border: 2px solid var(--border-color); border-left: 5px solid var(--accent); padding: 1rem 1.25rem; margin: 1.2rem 0; display: flex; gap: 0.85rem; }
.wiki-callout.info { border-left-color: #3182ce; background: rgba(49, 130, 206, 0.1); }
.wiki-callout.warning { border-left-color: var(--mc-gold); background: rgba(255, 170, 0, 0.1); }
.wiki-callout.success { border-left-color: var(--mc-green); background: rgba(85, 255, 85, 0.08); }
.wiki-callout i { font-size: 1.15rem; margin-top: 0.2rem; }
.toc-sidebar { position: sticky; top: 88px; align-self: start; border-left: 2px solid var(--border-color); padding-left: 1rem; }
.toc-title { font-family: 'Unbounded', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 0.6rem; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.toc-list a { font-size: 0.88rem; color: var(--text-secondary); }
.toc-list a:hover { color: var(--accent); }

/* ==================== ДИЗАЙН МОДАЛОК ==================== */
.color-picker-modal { border-radius: 0; border-width: 2px; box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 8px 8px 0 var(--pixel-shadow); background: var(--bg-base); }
.reset-color-btn, .glow-power-btn, .hex-input-group, .glow-control-group, .glow-toggle-btn, .glow-config-btn, .preview-box { border-radius: 0; }
.color-picker-header h3 { font-family: 'Unbounded', sans-serif; font-weight: 500; }
.console-btn { text-decoration: none; }
.console-btn:hover { text-decoration: none; }

/* ==================== АДАПТИВ ==================== */
@media (max-width: 1000px) {
    .article-container { grid-template-columns: 1fr; }
    .toc-sidebar { position: static; border-left: none; border-bottom: 2px solid var(--border-color); padding: 0 0 1rem; order: -1; }
    .grid-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .mobile-menu-btn { display: block; }
    aside.sidebar { position: fixed; top: 64px; left: 0; z-index: 90; transform: translateX(-100%); width: min(280px, 85vw); background: var(--bg-base); }
    aside.sidebar.open { transform: translateX(0); box-shadow: 8px 0 0 var(--pixel-shadow); }
    main.content { padding: 1.5rem 1rem 2.5rem; }
    .search-box-header { width: 140px; }
}
@media (max-width: 640px) {
    header { padding: 0 0.75rem; }
    .nav-btn { font-size: 0; gap: 0; }
    .nav-btn i { font-size: 1rem; }
    .search-box-header { display: none; }
}
body.tab-hidden .glow-blob, body.tab-hidden .console-btn, body.tab-hidden .console-btn::before, body.tab-hidden .console-btn::after { animation-play-state: paused !important; }
@media (max-width: 700px) {
    .glow-blob { filter: blur(60px); }
    .glow-blob-1 { width: 340px; height: 340px; }
    .glow-blob-2 { width: 280px; height: 280px; }
    .glow-blob-3 { width: 240px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==================== ФЕЙК-ЗАГРУЗКА: ПОЛОСА И СКЕЛЕТОНЫ ==================== */
.page-loader {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 10000; pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
}
.page-loader.active { opacity: 1; }
.page-loader.done { opacity: 0; }
.page-loader-fill {
    height: 100%; width: 100%;
    background: var(--accent-gradient);
    transform-origin: left center; transform: scaleX(0);
    box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent);
}

/* ==================== ЗАГРУЗКА СО СПАТИ ==================== */
.spati-loader {
    min-height: 60vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.1rem;
}
.sl-text {
    font-family: 'SpatiumFont', 'Press Start 2P', monospace;
    font-size: 0.65rem; line-height: 1.6;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 0.3rem;
}

/* облачко с диалогом над Спати */
.sl-bubble {
    position: relative;
    box-sizing: content-box;
    width: calc(var(--n) * 1ch + 1.3rem);
    padding: 0.6rem 0.65rem;
    font-family: 'SpatiumFont', 'Press Start 2P', monospace;
    font-size: 0.65rem; line-height: 1;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 2px solid var(--accent);
    box-shadow: 3px 3px 0 var(--accent-glow);
    margin-bottom: 0.45rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.sl-bubble::after {
    content: '';
    position: absolute; left: 50%; bottom: -8px;
    width: 10px; height: 10px;
    background: var(--bg-surface);
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translateX(-50%) rotate(45deg);
}
.sl-bubble-text {
    display: block;
    overflow: hidden; white-space: nowrap;
    width: 0;
    animation: slType 2.2s steps(var(--n)) infinite;
}
.spati-loader.is-finish .sl-bubble { opacity: 0; transform: scale(0.8); }
.spati-loader.is-calm .sl-bubble { visibility: hidden; }

@keyframes slType {
    0%   { width: 0; }
    60%  { width: calc(var(--n) * 1ch); }
    100% { width: calc(var(--n) * 1ch); }
}

/* сам Спати */
.sl-stage { position: relative; width: 72px; height: 80px; }
.sl-glow {
    position: absolute; inset: -22px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.35; transition: opacity 0.3s ease;
}
.sl-mascot { position: absolute; inset: 0; transform-origin: 50% 100%; }
.sl-lie { position: absolute; inset: 0; transform-origin: 50% 50%; }
.sl-lie svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sl-body { fill: var(--accent); }
.sl-eye, .sl-mouth { fill: var(--bg-base); transform-box: fill-box; transform-origin: 50% 50%; }
.sl-eyes { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- сон: на боку, глаза-чёрточки ---- */
.sl-stage[data-var="sleep"][data-state="idle"] .sl-lie { transform: translateY(3px) rotate(72deg); animation: slBreathe 2.8s ease-in-out infinite; }
.sl-stage[data-var="sleep"][data-state="idle"] .sl-eye { transform: scaleY(0.12); }
.sl-stage[data-var="sleep"][data-state="idle"] .sl-mouth { transform: scale(0.8, 0.4); }

/* ---- осматривается ---- */
.sl-stage[data-var="look"][data-state="idle"] .sl-mascot { animation: slFloat 3s ease-in-out infinite; }
.sl-stage[data-var="look"][data-state="idle"] .sl-eyes { animation: slGaze 2.2s steps(1) infinite; }
.sl-stage[data-var="look"][data-state="idle"] .sl-mouth { transform: scale(0.9, 0.5); }

/* ---- танцует ---- */
.sl-stage[data-var="dance"][data-state="idle"] .sl-mascot { animation: slDance 0.9s ease-in-out infinite; }
.sl-stage[data-var="dance"][data-state="idle"] .sl-eye { transform: scaleY(0.45); }
.sl-stage[data-var="dance"][data-state="idle"] .sl-mouth { transform: scale(3, 0.9); }

/* ---- кружится ---- */
.sl-stage[data-var="dizzy"][data-state="idle"] .sl-lie { animation: slSpin 1.6s linear infinite; }
.sl-stage[data-var="dizzy"][data-state="idle"] .sl-eye { animation: slEyeSpin 0.5s linear infinite; }
.sl-stage[data-var="dizzy"][data-state="idle"] .sl-mouth { transform: scale(1.4, 0.9); }

/* ---- задумался ---- */
.sl-stage[data-var="think"][data-state="idle"] .sl-mascot { animation: slTilt 2.6s ease-in-out infinite; }
.sl-stage[data-var="think"][data-state="idle"] .sl-eyes { transform: translateY(-0.3px); animation: slGazeUp 2.6s ease-in-out infinite; }
.sl-stage[data-var="think"][data-state="idle"] .sl-mouth { transform: scale(0.7, 0.4); }

/* ---- зевает ---- */
.sl-stage[data-var="yawn"][data-state="idle"] .sl-mascot { animation: slYawn 3s ease-in-out infinite; }
.sl-stage[data-var="yawn"][data-state="idle"] .sl-eye { transform: scaleY(0.15); }
.sl-stage[data-var="yawn"][data-state="idle"] .sl-mouth { animation: slYawnMouth 3s ease-in-out infinite; }

/* ---- икает ---- */
.sl-stage[data-var="hiccup"][data-state="idle"] .sl-mascot { animation: slHiccup 1.5s ease-out infinite; }
.sl-stage[data-var="hiccup"][data-state="idle"] .sl-mouth { transform: scale(1, 0.7); }

/* ---- дрожит ---- */
.sl-stage[data-var="shiver"][data-state="idle"] .sl-mascot { animation: slShiver 0.16s steps(1) infinite; }
.sl-stage[data-var="shiver"][data-state="idle"] .sl-eye { transform: scaleY(0.6); }
.sl-stage[data-var="shiver"][data-state="idle"] .sl-mouth { transform: scale(1.5, 0.35); }

/* ---- прячется и выглядывает ---- */
.sl-stage[data-var="peek"] { clip-path: inset(-60px -60px 0 -60px); }
.sl-stage[data-var="peek"][data-state="idle"] .sl-mascot { animation: slPeek 2.6s ease-in-out infinite; }
.sl-stage[data-var="peek"][data-state="idle"] .sl-eyes { animation: slGaze 2.6s steps(1) infinite; }

/* ---- чихает ---- */
.sl-stage[data-var="sneeze"][data-state="idle"] .sl-mascot { animation: slSneeze 2.2s ease-in-out infinite; }
.sl-stage[data-var="sneeze"][data-state="idle"] .sl-eyes { animation: slSneezeEyes 2.2s steps(1) infinite; }
.sl-stage[data-var="sneeze"][data-state="idle"] .sl-mouth { animation: slSneezeMouth 2.2s ease-in-out infinite; }

/* ---- подмигивает ---- */
.sl-stage[data-var="wink"][data-state="idle"] .sl-mascot { animation: slFloat 3s ease-in-out infinite; }
.sl-stage[data-var="wink"][data-state="idle"] .sl-eye:last-child { animation: slWink 2.4s steps(1) infinite; }
.sl-stage[data-var="wink"][data-state="idle"] .sl-mouth { transform: scale(3, 0.9); }

/* ---- финал: удивлённый (сон, головокружение, раздумья) ---- */
.sl-stage[data-state="finish"] .sl-mascot { animation: slWake 0.7s cubic-bezier(0.3, 0.8, 0.4, 1) both; }
.sl-stage[data-state="finish"] .sl-eye { transform: scale(1.6); }
.sl-stage[data-state="finish"] .sl-mouth { transform: scale(1.9, 1.3); }
.sl-stage[data-state="finish"] .sl-glow { opacity: 1; }
.sl-stage[data-state="finish"] .sl-lie svg { filter: drop-shadow(0 0 12px var(--accent)); }

/* ---- финал: радостный прыжок ---- */
.sl-stage[data-end="happy"][data-state="finish"] .sl-mascot { animation: slHop 0.6s ease-out both; }
.sl-stage[data-end="happy"][data-state="finish"] .sl-eye { transform: scaleY(0.45); }
.sl-stage[data-end="happy"][data-state="finish"] .sl-mouth { transform: scale(3, 0.9); }

/* ---- спокойный режим (reduced-motion): пустой силуэт заполняется снизу вверх ---- */
.sl-ghost, .sl-fillclip { position: absolute; inset: 0; }
.sl-ghost .sl-body { fill: var(--text-muted); opacity: 0.22; }
.sl-ghost .sl-eyes, .sl-ghost .sl-mouth { display: none; }
.sl-fillclip {
    clip-path: inset(100% 0 0 0);
    animation: slFill var(--fill-ms, 800ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slFill { to { clip-path: inset(0 0 0 0); } }

.sl-stage[data-state="calm"] .sl-mascot,
.sl-stage[data-state="calm"] .sl-lie,
.sl-stage[data-state="calm"] .sl-eyes { animation: none; }

@keyframes slFloat { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes slBreathe {
    0%, 100% { transform: translateY(3px) rotate(72deg) scale(1, 1); }
    50%      { transform: translateY(3px) rotate(72deg) scale(1.03, 1.05); }
}
@keyframes slGaze {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-0.55px, 0); }
    45% { transform: translate(0.55px, 0); }
    70% { transform: translate(-0.4px, 0.25px); }
}
@keyframes slGazeUp {
    0%, 100% { transform: translate(-0.3px, -0.3px); }
    50%      { transform: translate(0.3px, -0.3px); }
}
@keyframes slDance {
    0%, 100% { transform: translate(-6px, 0) rotate(-9deg); }
    25%      { transform: translate(0, -10px) rotate(0deg); }
    50%      { transform: translate(6px, 0) rotate(9deg); }
    75%      { transform: translate(0, -10px) rotate(0deg); }
}
@keyframes slSpin { to { transform: rotate(360deg); } }
@keyframes slEyeSpin { to { transform: rotate(360deg); } }
@keyframes slTilt {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
@keyframes slYawn {
    0%, 100% { transform: scale(1, 1); }
    35%, 65% { transform: scale(0.94, 1.14); }
}
@keyframes slYawnMouth {
    0%, 15%, 85%, 100% { transform: scale(0.8, 0.4); }
    35%, 65% { transform: scale(2, 2.4); }
}
@keyframes slHiccup {
    0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
    62% { transform: translateY(-10px) scale(0.95, 1.08); }
    70% { transform: translateY(0) scale(1.1, 0.9); }
    78% { transform: translateY(-4px) scale(1, 1.03); }
    86% { transform: translateY(0) scale(1.04, 0.96); }
}
@keyframes slShiver {
    0% { transform: translateX(-1.5px); }
    50% { transform: translateX(1.5px); }
}
@keyframes slPeek {
    0%, 100% { transform: translateY(105%); }
    25%, 50% { transform: translateY(42%); }
    62%, 80% { transform: translateY(105%); }
}
@keyframes slSneeze {
    0%, 30% { transform: rotate(0) scale(1, 1); }
    58% { transform: rotate(-6deg) scale(1.03, 1.07); }
    68% { transform: rotate(-8deg) scale(1.05, 1.1); }
    74% { transform: rotate(7deg) translate(2px, 3px) scale(1.14, 0.84); }
    86% { transform: rotate(0) scale(0.97, 1.03); }
    100% { transform: rotate(0) scale(1, 1); }
}
@keyframes slSneezeEyes {
    0%, 55% { transform: scaleY(1); }
    62%, 90% { transform: scaleY(0.15); }
    100% { transform: scaleY(1); }
}
@keyframes slSneezeMouth {
    0%, 30% { transform: scale(0.9, 0.5); }
    68% { transform: scale(1.7, 1.9); }
    74% { transform: scale(2.6, 1.2); }
    90%, 100% { transform: scale(0.9, 0.5); }
}
@keyframes slWink {
    0%, 40% { transform: scaleY(1); }
    45%, 75% { transform: scaleY(0.12); }
    80%, 100% { transform: scaleY(1); }
}

@keyframes slWake {
    0%   { transform: translateY(0) scale(1, 1); }
    18%  { transform: translateY(5px) scale(1.14, 0.84); }
    48%  { transform: translateY(-26px) scale(0.9, 1.14); }
    72%  { transform: translateY(0) scale(1.1, 0.9); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes slHop {
    0%   { transform: translateY(0) scale(1, 1); }
    25%  { transform: translateY(4px) scale(1.12, 0.88); }
    55%  { transform: translateY(-22px) scale(0.92, 1.1); }
    80%  { transform: translateY(0) scale(1.08, 0.92); }
    100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-mascot, .sl-lie, .sl-eyes, .sl-eye, .sl-bubble-text { animation: none !important; }
    .sl-bubble-text { width: auto; }
}


/* ==================== РАСШИРЕНИЯ РЕДАКТОРА (новые блоки статей) ==================== */
.wiki-body { display: flow-root; }
.wiki-body h4 { font-size: 1rem; margin: 1.2rem 0 0.5rem; color: var(--text-secondary); }
.wiki-body mark { background: var(--accent-glow); color: var(--text-primary); padding: 0 0.25em; border-bottom: 2px solid var(--accent); }
.wiki-body kbd { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.82em; background: var(--bg-surface-hover); border: 2px solid var(--border-color); border-bottom-width: 4px; padding: 0.05em 0.45em; }
.wiki-body blockquote { margin: 1.2rem 0; padding: 0.6rem 1.1rem; border-left: 4px solid var(--text-muted); background: var(--bg-surface); color: var(--text-secondary); font-style: italic; }
.wiki-body blockquote p:last-child { margin-bottom: 0; }
.wiki-body hr { border: none; border-top: 2px dashed var(--border-color); margin: 1.8rem 0; }
.wiki-body del { color: var(--text-muted); }
.wiki-body sub, .wiki-body sup { font-size: 0.75em; }
.wiki-body .wiki-checklist { list-style: none; padding-left: 0.3rem; }
.wiki-body .wiki-checklist li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--mc-green); margin-right: 0.6rem; }

.wiki-figure { margin: 1.2rem 0; max-width: 100%; }
.wiki-figure .wiki-img { margin: 0; width: 100%; }
.wiki-figure figcaption { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding-top: 0.4rem; }
.wiki-figure.align-center { margin-left: auto; margin-right: auto; }
.wiki-figure.align-right { margin-left: auto; }
.wiki-figure.align-float-left { float: left; max-width: 50%; margin: 0.3rem 1.4rem 1rem 0; }
.wiki-figure.align-float-right { float: right; max-width: 50%; margin: 0.3rem 0 1rem 1.4rem; }
.wiki-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 1.2rem 0; }
.wiki-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wiki-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.wiki-gallery .wiki-img { margin: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wiki-video { position: relative; aspect-ratio: 16 / 9; margin: 1.2rem 0; border: 2px solid var(--border-color); background: #000; }
.wiki-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wiki-media { display: block; max-width: 100%; margin: 1.2rem 0; }
audio.wiki-media { width: 100%; }

.wiki-details { border: 2px solid var(--border-color); background: var(--bg-surface); margin: 1.2rem 0; }
.wiki-details summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; list-style: none; }
.wiki-details summary::-webkit-details-marker { display: none; }
.wiki-details summary::before { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75rem; margin-right: 0.7rem; color: var(--accent); display: inline-block; transition: transform 0.15s; }
.wiki-details[open] summary::before { transform: rotate(90deg); }
.wiki-details[open] summary { border-bottom: 2px solid var(--border-color); }
.wiki-details > :not(summary) { margin: 0.9rem 1rem; }
.wiki-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.2rem 0; }
.wiki-callout.danger { border-left-color: #e53e3e; background: rgba(229, 62, 62, 0.1); }
.wiki-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; background: var(--accent-gradient); color: #14161b; font-weight: 600; box-shadow: 0 4px 0 var(--pixel-shadow); margin: 0.3rem 0; }
.wiki-btn:hover { text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); }

.wiki-infobox { float: right; width: min(280px, 100%); margin: 0 0 1rem 1.5rem; border: 2px solid var(--border-color); background: var(--bg-surface); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); padding: 0.8rem; }
.wiki-infobox-title { font-family: 'Unbounded', sans-serif; font-weight: 500; text-align: center; margin-bottom: 0.6rem; }
.wiki-infobox .wiki-img { margin: 0.5rem auto; max-height: 180px; }
.wiki-infobox .wiki-table { margin: 0.5rem 0 0; }

.wiki-craft { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0; padding: 1rem; background: var(--bg-surface); border: 2px solid var(--border-color); width: fit-content; max-width: 100%; overflow-x: auto; }
.wiki-craft-grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 3px; }
.wiki-slot { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--code-bg); border: 2px solid var(--bevel-lo); border-right-color: var(--bevel-hi); border-bottom-color: var(--bevel-hi); font-size: 0.6rem; line-height: 1.1; text-align: center; overflow: hidden; color: var(--text-secondary); padding: 2px; }
.wiki-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; margin: 0; border: 0; }
.wiki-slot-result { width: 64px; height: 64px; }
.wiki-count { position: absolute; right: 3px; bottom: 1px; font-family: 'SpatiumFont', 'Press Start 2P', monospace; font-size: 0.55rem; color: var(--text-primary); text-shadow: 2px 2px 0 var(--pixel-shadow); }
.wiki-craft-arrow { color: var(--text-muted); font-size: 1.4rem; }

@media (max-width: 640px) {
    .wiki-infobox, .wiki-figure.align-float-left, .wiki-figure.align-float-right { float: none; max-width: 100%; width: 100%; margin: 0 0 1rem; }
    .wiki-cols { grid-template-columns: 1fr; }
    .wiki-gallery, .wiki-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ==================== ЗАКЛАДКИ, ИСТОРИЯ, ОТЗЫВЫ, ПОХОЖИЕ СТАТЬИ, ПРЕД./СЛЕД. ==================== */

/* счётчик закладок в шапке */
.nav-badge {
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'SpatiumFont', 'Press Start 2P', monospace; font-size: 0.5rem; line-height: 1;
    background: var(--accent); color: #14161b;
}
.nav-badge[hidden] { display: none; }
html[data-theme="light"] .nav-badge { color: #fff; }

/* шапка статьи: мета, теги */
.article-meta { flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; }
.article-meta > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-header > div:last-child { min-width: 0; }
.article-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.tag-chip {
    font: inherit; font-size: 0.78rem; padding: 0.15rem 0.55rem; cursor: pointer;
    border: 2px solid var(--border-color); background: var(--bg-base); color: var(--text-secondary);
}
.tag-chip:hover { border-color: var(--border-focus); color: var(--accent); }

/* кнопка-закладка (на карточке и в шапке статьи) */
.bm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    background: transparent; border: 2px solid transparent; color: var(--text-muted);
    cursor: pointer; padding: 0.15rem 0.35rem; font-size: 0.95rem; line-height: 1;
}
.bm-btn:hover { color: var(--accent); border-color: var(--border-color); }
.bm-btn.is-on { color: var(--accent); }
.bm-btn-full {
    padding: 0.3rem 0.7rem; font-size: 0.85rem; font-weight: 500; font-family: inherit;
    border-color: var(--border-color); background: var(--bg-base); color: var(--text-secondary);
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
}
.bm-btn-full:hover { border-color: var(--border-focus); color: var(--text-primary); }
.bm-btn-full.is-on { border-color: var(--border-focus); background: var(--accent-glow); color: var(--text-primary); }
.bm-btn-full.is-on i { color: var(--accent); }

/* футер карточки: дата, время чтения, закладка */
.article-card-footer { gap: 0.5rem; }
.card-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.card-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.card-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* общие мелочи */
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.link-btn {
    background: none; border: none; color: var(--text-muted); font: inherit; font-size: 0.8rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.3rem;
}
.link-btn:hover { color: var(--accent); }
.history-block { margin: 0 0 1.25rem; }
#bookmarksList + .history-block { margin-top: 2rem; }
.bm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--text-muted); font-size: 0.85rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; border: 2px dashed var(--border-color); color: var(--text-secondary); }
.empty-state > i { display: block; font-size: 2rem; color: var(--accent); margin-bottom: 0.75rem; }
.empty-state p { max-width: 42ch; margin: 0 auto 1rem; }

/* «Была ли статья полезной?» */
.feedback-block {
    margin-top: 2.5rem; padding: 1.1rem 1.25rem; max-width: 72ch;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
    background: var(--bg-surface); border: 2px solid var(--border-color);
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
}
.feedback-q { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 500; }
.feedback-btns { display: flex; gap: 0.5rem; }
.fb-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem;
    font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
    background: var(--bg-base); color: var(--text-secondary); border: 2px solid var(--border-color);
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
}
.fb-btn:hover { border-color: var(--border-focus); color: var(--text-primary); }
.fb-btn[data-vote="up"].is-on { border-color: var(--mc-green); color: var(--mc-green); background: rgba(85, 255, 85, 0.08); }
.fb-btn[data-vote="down"].is-on { border-color: var(--mc-gold); color: var(--mc-gold); background: rgba(255, 170, 0, 0.1); }
.feedback-msg { flex-basis: 100%; font-size: 0.85rem; color: var(--text-muted); }
.feedback-msg:empty { display: none; }

/* «Похожие статьи» */
.related-block { margin-top: 1rem; }
.related-block .section-title { margin-top: 2.5rem; }
.related-block .articles-grid { margin-top: 0; }

/* «Предыдущая / следующая» */
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border-color); }
.pn-card {
    display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.9rem 1.1rem;
    background: var(--bg-surface-hover); color: var(--text-primary); border: 2px solid var(--border-color);
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
}
.pn-card:hover {
    text-decoration: none; border-color: var(--border-focus); transform: translate(-2px, -2px);
    box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 5px 5px 0 var(--pixel-shadow);
    transition: transform 0.12s steps(2), box-shadow 0.12s steps(2), border-color 0.2s;
}
.pn-next { text-align: right; align-items: flex-end; grid-column: 2; }
.pn-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-muted); }
.pn-card:hover .pn-label { color: var(--accent); }
.pn-title { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.pn-cat { font-size: 0.78rem; color: var(--text-secondary); }

@media (max-width: 900px) {
    #navBookmarks, #navMap { font-size: 0; gap: 0; }
    #navBookmarks i, #navMap i { font-size: 1rem; }
    #navBookmarks .nav-badge { margin-left: 0.3rem; }
}
@media (max-width: 640px) {
    .pn-nav { grid-template-columns: 1fr; }
    .pn-next { text-align: left; align-items: flex-start; grid-column: auto; }
    .pn-empty { display: none; }
    .feedback-block { flex-direction: column; align-items: flex-start; }
}
/* ==================== КАРТА НА ВЕСЬ ЭКРАН ==================== */
body.map-mode aside.sidebar, body.map-mode .mobile-menu-btn { display: none; }
body.map-mode .layout { max-width: none; }
body.map-mode main.content { padding: 0; }
.map-page { position: relative; width: 100%; height: calc(100vh - 66px); height: calc(100dvh - 66px); }
#mapHost {
    position: fixed; top: 66px; left: 0; right: 0; bottom: 0; z-index: 50;
    visibility: hidden; pointer-events: none;
}
body.map-ready #mapHost { visibility: visible; pointer-events: auto; }
.map-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--code-bg); }
.map-blocked { display: flex; align-items: center; justify-content: center; padding: 1rem; }
.map-open-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border: 2px solid var(--accent); color: var(--accent); text-decoration: none; font-weight: 500; }
.map-open-btn:hover { background: var(--accent-glow); }

/* ==================== АНИМИРОВАННЫЙ ЗНАЧОК КНОПКИ «КАРТА» (карта + прыгающая метка) ==================== */
.map-ico { position: relative; display: inline-block; width: 1.2rem; height: 1rem; }
#navMap .map-ico .map-base { position: absolute; left: 0; bottom: 0; font-size: 1rem; line-height: 1; }
#navMap .map-ico .map-pin {
    position: absolute; left: 50%; top: -5px; margin-left: -0.2rem; font-size: 0.62rem; line-height: 1;
    color: var(--accent); filter: drop-shadow(0 0 1px var(--bg-base)) drop-shadow(0 0 1px var(--bg-base));
    transform-origin: 50% 100%; animation: mapPinHop 2.4s ease-in-out infinite;
}
.map-ico::after {
    content: ''; position: absolute; left: 50%; top: 45%; width: 9px; height: 5px; margin-left: -4.5px;
    border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0;
    animation: mapPinRing 2.4s ease-out infinite;
}
#navMap:hover .map-pin, #navMap.active .map-pin, #navMap:hover .map-ico::after, #navMap.active .map-ico::after { animation-duration: 1s; }
@keyframes mapPinHop {
    0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
    62% { transform: translateY(1px) scale(1.12, 0.88); }
    78% { transform: translateY(-3px) scale(0.94, 1.08); }
    90% { transform: translateY(0) scale(1.05, 0.95); }
}
@keyframes mapPinRing {
    0%, 86% { opacity: 0; transform: scale(0.3); }
    90% { opacity: 0.85; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.7); }
}
body.tab-hidden .map-pin, body.tab-hidden .map-ico::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    #navMap .map-ico .map-pin, .map-ico::after { animation: none !important; }
}
/* ==================== АНИМИРОВАННЫЕ ЗНАЧКИ ШАПКИ: «ГЛАВНАЯ», «ЗАКЛАДКИ», «КАРТА» (только при наведении) ==================== */
.nav-ico { position: relative; display: inline-block; width: 1.2rem; height: 1rem; text-align: center; line-height: 1; perspective: 60px; }
.nav-ico i { font-size: 1rem; line-height: 1; display: inline-block; }

/* в покое значки неподвижны */
.home-ico i, .bm-ico i,
#navMap .map-ico .map-pin, #navMap .map-ico .map-base, #navMap .map-ico::after { animation: none; }

/* Главная: домик «бьётся» как сердце — быстрые двойные удары-увеличения */
#navHome:hover .home-ico i { animation: homeBeat 1.1s ease-in-out infinite; }
@keyframes homeBeat {
    0%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.28); }
    30% { transform: scale(1.02); }
    45% { transform: scale(1.18); }
}

/* Закладки: ленточка вытягивается вниз с пружинкой, будто её дёрнули за кончик */
#navBookmarks:hover .bm-ico i { animation: bmStretch 1.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes bmStretch {
    0%, 100% { transform: scaleY(1) translateY(0); }
    25% { transform: scaleY(1.3) translateY(0); }
    45% { transform: scaleY(0.86) translateY(0); }
    65% { transform: scaleY(1.1) translateY(0); }
    80% { transform: scaleY(0.97) translateY(0); }
}

/* Карта: метка плавно кружит по карте, как на радаре, под ней пульсирует «пинг» */
.map-ico { perspective: none; }
#navMap:hover .map-ico .map-pin { animation: mapPinOrbit 1.8s linear infinite; transform-origin: 50% 50%; }
#navMap:hover .map-ico::after { animation: mapPinRing 0.9s ease-out infinite; }
@keyframes mapPinOrbit {
    from { transform: rotate(0deg) translateX(3.5px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(3.5px) rotate(-360deg); }
}
@keyframes mapPinRing {
    0% { opacity: 0.8; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(1.8); }
}

body.tab-hidden .home-ico i, body.tab-hidden .bm-ico i, body.tab-hidden .map-pin, body.tab-hidden .map-base, body.tab-hidden .map-ico::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .home-ico i, .bm-ico i, #navMap .map-ico .map-pin, #navMap .map-ico .map-base, .map-ico::after { animation: none !important; }
}
/* ==================== АНИМАЦИИ: ПОЯВЛЕНИЕ, НАВЕДЕНИЕ, ПРОГРЕСС ==================== */

/* появление при прокрутке (классы ставит initReveal в script.js) */
.rv {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.75, 0.3, 1);
    transition-delay: var(--rv-d, 0ms);
}
.rv.rv-in { opacity: 1; transform: none; }

/* полоса прогресса чтения статьи (под шапкой) */
.read-progress {
    position: fixed; top: 64px; left: 0; right: 0; height: 3px; z-index: 99;
    pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.read-progress.active { opacity: 1; }
.read-progress-fill {
    height: 100%; width: 100%; background: var(--accent-gradient);
    transform-origin: left center; transform: scaleX(0);
    box-shadow: 0 0 8px var(--accent);
}

/* «поп» значка закладки при добавлении */
.bm-pop { animation: bmPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bmPop {
    0% { transform: scale(1) rotate(0); }
    40% { transform: scale(1.5) rotate(-12deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- анимации появления и наведения --- */

/* заголовок главной: бегущий блик */
body:not(.safe-reveal) .hero h1 {
    background: linear-gradient(100deg, var(--text-primary) 0%, var(--text-primary) 40%, var(--accent) 50%, var(--text-primary) 60%, var(--text-primary) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: heroShine 5.5s ease-in-out 0.8s infinite;
}
@keyframes heroShine {
    0%, 55% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* поиск на главной: свечение при фокусе */
body:not(.safe-reveal) .hero-search input { transition: border-color 0.2s, box-shadow 0.3s ease, transform 0.25s ease; }
body:not(.safe-reveal) .hero-search input:focus {
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 24px var(--accent-glow);
    transform: scale(1.015);
}

/* иконки карточек: покачивание при наведении */
body:not(.safe-reveal) .category-card:hover .category-icon i,
body:not(.safe-reveal) .article-card:hover .article-card-media i,
body:not(.safe-reveal) .article-card:hover .article-card-media img {
    animation: iconWobble 0.6s ease;
}
@keyframes iconWobble {
    0%, 100% { transform: rotate(0) scale(1); }
    25% { transform: rotate(-10deg) scale(1.15); }
    60% { transform: rotate(8deg) scale(1.1); }
}

/* стрелка на карточке уезжает вправо */
.card-actions > .fa-arrow-right { transition: transform 0.2s ease, color 0.2s ease; }
body:not(.safe-reveal) .article-card:hover .card-actions > .fa-arrow-right { transform: translateX(5px); color: var(--accent); }

/* списки и боковое меню */
body:not(.safe-reveal) .article-list-item { transition: background-color 0.2s, border-color 0.2s, padding-left 0.2s ease; }
body:not(.safe-reveal) .article-list-item:hover { padding-left: 0.9rem; }
body:not(.safe-reveal) .sidebar-item a { transition: background-color 0.2s, color 0.2s, padding-left 0.2s ease; }
body:not(.safe-reveal) .sidebar-item a:hover { padding-left: 1.1rem; }
body:not(.safe-reveal) .sidebar-item.active a i { animation: sidePulse 2.4s ease-in-out infinite; }
@keyframes sidePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* заголовки статьи: линия под ними выезжает */
body:not(.safe-reveal) .wiki-body h2 { position: relative; }
body:not(.safe-reveal) .wiki-body h2::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--accent-gradient); transition: width 0.5s ease;
}
body:not(.safe-reveal) .wiki-body h2:hover::after { width: 100%; }

/* оглавление */
body:not(.safe-reveal) .toc-list a { display: inline-block; transition: color 0.2s, transform 0.2s ease; }
body:not(.safe-reveal) .toc-list a:hover { transform: translateX(4px); }

/* подсказки: пульс иконки */
body:not(.safe-reveal) .wiki-callout > i { animation: calloutPulse 3s ease-in-out infinite; }
@keyframes calloutPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* теги и кнопки отклика */
body:not(.safe-reveal) .tag-chip { transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.15s ease; }
body:not(.safe-reveal) .tag-chip:hover { transform: translateY(-2px); }
body:not(.safe-reveal) .fb-btn { transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.15s ease; }
body:not(.safe-reveal) .fb-btn:hover { transform: translateY(-2px); }
body:not(.safe-reveal) .fb-btn:active { transform: scale(0.94); }

/* счётчик закладок */
body:not(.safe-reveal) .nav-badge:not([hidden]) { animation: badgeIn 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes badgeIn { from { transform: scale(0); } to { transform: scale(1); } }

/* логотип и переключатель темы */
body:not(.safe-reveal) .logo { transition: transform 0.2s ease; }
body:not(.safe-reveal) .logo:hover { transform: scale(1.05) rotate(-1.5deg); }
body:not(.safe-reveal) .theme-toggle i { transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
body:not(.safe-reveal) .theme-toggle:hover i { transform: rotate(35deg) scale(1.15); }

/* изображения и кнопки в статьях */
body:not(.safe-reveal) .wiki-img { transition: transform 0.25s ease, border-color 0.2s; }
body:not(.safe-reveal) .wiki-img:hover { transform: scale(1.02); }
body:not(.safe-reveal) .wiki-btn:active { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero h1 { animation: none !important; }
    .read-progress { display: none; }
}