/* ============================================================
   «Звенья истории» — Модальные окна, ворота, wiki, поиск
   ============================================================ */

/* ---------- Базовые модалки ---------- */
.overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(44, 42, 38, 0.32);
    align-items: center; justify-content: center;
    z-index: 2000; padding: 15px;
}
.overlay.active { display: flex; z-index: 3000; }
.modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px; padding: 24px;
    width: 100%; max-width: 540px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: modalIn 0.28s ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.modal h3 { font-size: 17px; font-weight: 600; margin: 0; }
.modal-close {
    background: none; border: none;
    font-size: 22px; line-height: 1;
    color: var(--text-secondary);
    cursor: pointer; padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.modal-close::before { content: '×'; }
.modal-close:hover { color: var(--text); background: var(--bg-soft); }

.modal textarea, .modal input[type="text"] {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; font-size: 14px; font-family: inherit;
    margin-bottom: 12px; line-height: 1.5;
    background: var(--bg-elevated); color: var(--text);
    transition: border-color 0.2s ease;
}
.modal textarea { min-height: 100px; resize: vertical; }
.modal textarea:focus, .modal input:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}
.modal .modal-buttons { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Помощь ---------- */
.help-body p {
    font-size: 14px; line-height: 1.6;
    padding: 9px 0;
    border-bottom: 1px solid #F0EAE0;
    color: var(--text);
}
.help-body p:last-child { border-bottom: none; }
.help-body b { color: #A0824A; font-weight: 600; }

/* ---------- Поиск ---------- */
.search-input {
    width: 100%;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 14px; font-size: 14px; font-family: inherit;
    background: var(--bg-soft); color: var(--text);
    margin-bottom: 12px;
}
.search-input:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
    background: var(--bg-elevated);
}
.search-results { max-height: 50vh; overflow-y: auto; }
.search-result-item {
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-result-item:hover { background: var(--bg-soft); }
.search-result-item .result-title { font-size: 14px; font-weight: 500; }
.search-result-item .result-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.search-empty {
    text-align: center; color: var(--text-secondary);
    font-size: 13px; padding: 30px 0;
}

/* ============================================================
   Ворота
   ============================================================ */
.gate-modal { max-width: 480px; }
.gate-question {
    font-size: 17px; font-weight: 500; line-height: 1.55;
    margin-bottom: 18px; color: var(--text);
}
.gate-opt {
    display: block; width: 100%;
    text-align: left;
    margin-bottom: 8px;
    padding: 12px 15px;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    background: var(--bg-soft) !important;
    color: var(--text);
    font-size: 14px; line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.gate-opt:hover:not(:disabled) {
    border-color: var(--gold) !important;
    background: #FBF6EA !important;
}
.gate-opt:disabled { opacity: 0.6; cursor: default; }
#gate-answer {
    width: 100%;
    padding: 12px; border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-soft); color: var(--text);
    font-size: 14px; font-family: inherit;
    resize: vertical; margin-bottom: 10px;
}
#gate-answer:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}
.gate-feedback { margin-top: 12px; font-size: 14px; min-height: 20px; }
.gate-ok {
    display: block;
    background: rgba(201, 169, 110, 0.14);
    border: 1px solid rgba(201, 169, 110, 0.45);
    color: #8A6F3D;
    border-radius: 10px; padding: 10px 14px;
    animation: modalIn 0.3s ease-out;
}
.gate-err {
    display: block;
    background: rgba(176, 122, 106, 0.12);
    border: 1px solid rgba(176, 122, 106, 0.4);
    color: #8F5A4C;
    border-radius: 10px; padding: 10px 14px;
    animation: modalIn 0.3s ease-out;
}

/* ============================================================
   Плавающие wiki-окна — тёмная тема «как в Википедии» (светлый
   текст на тёмном), окно чтения вдвое шире (до 1040px)
   ============================================================ */
.wiki-window {
    position: fixed;
    background: #18212C;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
    min-width: 480px;
    max-width: 1040px;
    /* ~2/3 экрана: треть снизу остаётся игровой карте (окончательный
       потолок ставит WindowManager._clampWin по фактической высоте) */
    max-height: 66vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: 15px;
    color: #EAECF0;
    overflow: hidden;
    animation: modalIn 0.28s ease-out;
}
.wiki-header {
    background: #212C3A;
    border-bottom: 1px solid #2A2F36;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    touch-action: none; /* перенос окна пальцем (window-manager, pointer-события) */
}
.wiki-title {
    font-weight: 600;
    font-size: 16px;
    color: #F5F6F7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wiki-meta {
    padding: 7px 16px;
    font-size: 12.5px;
    color: #9AA0A6;
    border-bottom: 1px solid #232830;
}
.wiki-body {
    padding: 20px 28px;
    overflow-y: auto;
    overscroll-behavior: contain; /* прокрутка статьи на телефоне без pull-to-refresh */
    flex: 1;
    font-size: 18px; /* СанПиН 1.2.3685-21: для 8-13 лет минимум 16px, оптимум 18-20px */
    line-height: 1.65; /* WCAG 1.4.12: не менее 1.5, для длинных абзацев — 1.6 */
    text-align: left; /* WCAG 1.4.8: левый край лучше для чтения, не justify */
    hyphens: auto;
    max-width: 95ch; /* широкое окно — длиннее строка, но в пределах читаемости */
    color: #E8EAED;
}
/* Тёмная тема внутренних блоков статьи */
.wiki-body h2 { color: #F5F6F7; border-bottom: 1px solid #2A2F36; padding-bottom: 0.2em; }
.wiki-body h3 { color: #FFFFFF; font-weight: 700; }
.rt-editor h2 { color: #F5F6F7; border-bottom: 1px solid #2A2F36; padding-bottom: 0.2em; }
.rt-editor h3 { color: #FFFFFF; font-weight: 700; }
.wiki-body a.wiki-link { color: #84B5F8; border-bottom: 1px solid rgba(132, 181, 248, 0.4); }
.wiki-body a.wiki-link:hover { border-bottom-color: #A5C8FF; }
.wiki-body a.wiki-link.locked { color: #7C828A; border-bottom-color: transparent; cursor: help; }
.wiki-body .konspekt-add {
    background: #161B21;
    border: 1px solid #2A2F36;
    border-left: 3px solid #4A5568;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0.9em 0;
    color: #C4C8CE;
    font-size: 0.94em;
}
.wiki-portrait {
    border: 2px solid #2A2F36;
    border-radius: 10px;
}
/* Скроллбар статьи под тёмный фон */
.wiki-body::-webkit-scrollbar { width: 10px; }
.wiki-body::-webkit-scrollbar-thumb { background: #3A4048; border-radius: 6px; }
.wiki-body::-webkit-scrollbar-track { background: transparent; }

/* Блочная разметка статей (окно факта и редактор W6) */
.wiki-body h2, .rt-editor h2 { font-size: 1.3em; margin: 1em 0 0.4em; font-weight: 700; }
.wiki-body h3, .rt-editor h3 { font-size: 1.12em; margin: 0.9em 0 0.35em; }
.wiki-body ul, .wiki-body ol,
.rt-editor ul, .rt-editor ol { margin: 0.3em 0 0.8em; padding-left: 1.5em; }
.wiki-body li, .rt-editor li { margin-bottom: 0.25em; }
/* Термины: маркерная подсветка + блок «Термины» внизу статьи */
.wiki-body mark, .rt-editor mark {
    background: #E9D879;
    color: #23272E;
    padding: 0 4px;
    border-radius: 3px;
}
.wiki-body .wiki-terms, .rt-editor .wiki-terms {
    margin: 1.2em 0 0.4em;
    padding: 10px 14px;
    background: rgba(233, 216, 121, 0.07);
    border-left: 3px solid #E9D879;
    border-radius: 0 10px 10px 0;
    color: #C4C8CE;
    font-size: 0.94em;
}
.wiki-body blockquote, .rt-editor blockquote {
    margin: 0.8em 0;
    padding: 8px 14px;
    border-left: 3px solid var(--gold);
    background: rgba(201, 169, 110, 0.10);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #C4C8CE;
}
.wiki-body blockquote { color: #C4C8CE; }
.wb-note {
    margin: 0.8em 0;
    padding: 10px 14px;
    background: rgba(201, 169, 110, 0.12);
    border-radius: 12px;
}
.wb-sline { border: none; height: 3px; border-radius: 2px; width: 42%; margin: 14px auto; opacity: 0.8; }
.wb-ast { text-align: center; letter-spacing: 6px; color: #A39A8A; margin: 10px 0; font-size: 13px; }

/* Абзацы: без красной строки, разделяются вертикальным отступом (современный веб-стиль,
   рекомендуется для чтения с экрана — WCAG 1.4.12) */
.wiki-para {
    margin: 0 0 1em;
}
.wiki-para:last-child {
    margin-bottom: 0;
}
/* Разделитель — античный орнамент с линиями по бокам */
.wiki-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold);
    font-size: 13px;
    margin: 12px 0;
    opacity: 0.85;
}
.wiki-divider::before,
.wiki-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.7), transparent);
}
/* Форматированный текст из редактора W6. Отступ согласован с .wiki-para (~1em) */
.wiki-body p { margin: 0 0 1em; }
.wiki-body p:last-child { margin-bottom: 0; }
/* Портрет факта (загружается в редакторе W6) */
.wiki-portrait {
    float: right;
    max-width: 180px;
    max-height: 220px;
    border-radius: 10px;
    margin: 0 0 10px 14px;
    box-shadow: var(--shadow-card);
}
.wiki-body a[data-node] { cursor: pointer; }
.wiki-gates { padding: 0 14px 8px; }
.wiki-gates .btn { width: 100%; text-align: left; margin-top: 8px; }
.wiki-read-btn {
    margin: 4px 14px 14px;
    align-self: flex-start;
    border-radius: 9px;
}

/* ---------- Плашка мета-процесса в карточке факта ---------- */
.wiki-processes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px;
    margin-bottom: 6px;
}
.wiki-process {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border: 1px solid color-mix(in srgb, var(--proc-color, #8B6914) 45%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--proc-color, #8B6914) 10%, var(--bg-elevated));
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wiki-process:hover {
    background: color-mix(in srgb, var(--proc-color, #8B6914) 18%, var(--bg-elevated));
    border-color: var(--proc-color, #8B6914);
}
.wiki-process.active {
    background: color-mix(in srgb, var(--proc-color, #8B6914) 28%, var(--bg-elevated));
    border-color: var(--proc-color, #8B6914);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--proc-color, #8B6914) 22%, transparent);
}
.wiki-process .wp-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--proc-color, #8B6914);
    color: #FFFEF8;
    font-size: 14px;
}
.wiki-process .wp-text {
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Тонкие скроллбары ---------- */
/* Статья — тёмный скроллбар под фон окна, остальные окна — светлые */
.wiki-body::-webkit-scrollbar { width: 10px; height: 10px; }
.wiki-body::-webkit-scrollbar-thumb { background: #3A4048; border-radius: 5px; }
.wiki-body::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar,
.search-results::-webkit-scrollbar { width: 5px; height: 5px; }
.modal::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
    background: #D8D0C4; border-radius: 3px;
}
.wiki-body::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track { background: transparent; }



/* ---------- «О программе» (W20) ---------- */
.about-modal { max-width: 560px; }
.about-modal .help-body p { font-size: 14px; line-height: 1.55; }
.about-modal .about-copy {
    margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}

/* ---------- Экономика очков (фаза «Экономика») ---------- */
/* Счётчик очков в шапке (B70) */
#score-counter {
    margin-left: 12px; color: #8a6d3b; font-weight: 600;
    white-space: nowrap;
}
/* Подсказки в воротах (B72–B74): покупаются за очки */
.gate-hints {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 0;
}
.gate-hint {
    font-size: 13px; padding: 6px 10px; opacity: 0.85;
}
.gate-hint:disabled { opacity: 0.4; }
/* Вариант, погашенный подсказкой «Убрать неверный» */
.gate-opt.gate-hint-off {
    opacity: 0.35 !important;
    text-decoration: line-through;
}
/* Плашка выданной подсказки (термины/наводка) */
.gate-info {
    display: block; margin-top: 8px;
    color: #4a6b3a; font-size: 14px; line-height: 1.5;
}