/* door-quest.css - текстовият блок в героя (ЕТАП 1, вариант B одобрен)
   + "Шинка посреща" и лентата от Студиото (ЕТАП 2). Зарежда се САМО от
   index-new.php. */

/* Едно меко тъмно сияние зад целия текстов блок - radial-gradient,
   размито, без видима форма/ръб. Вариант B (по-силното) - одобрен. */
.door-content-top {
    position: relative;
}
.door-content-top::before {
    content: '';
    position: absolute;
    inset: -3rem -4rem;
    background: radial-gradient(ellipse 70% 75% at 50% 50%, rgba(5, 4, 2, .72), rgba(5, 4, 2, .4) 55%, transparent 82%);
    filter: blur(22px);
    z-index: -1;
    pointer-events: none;
}

.door-whisper {
    background: none;
    border-radius: 0;
    padding: 0;
}
.door-refrain-small {
    color: #e8dcc4;
    font-style: italic;
    font-size: clamp(.58rem, 1.1vw, .7rem);
    text-shadow: none;
}
body.day .door-refrain-small {
    color: #e8dcc4;
    text-shadow: none;
}

.door-quest-sentence {
    font-family: var(--font-body);
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
    color: #e8dcc4;
    text-align: center;
    max-width: 46rem;
    white-space: nowrap;
    margin: var(--space-2) auto 0;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
@media (max-width: 767px) {
    .door-quest-sentence { white-space: normal; font-size: .85rem; max-width: 26rem; }
}

.door-quest-enter-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: var(--space-3) auto 0;
    padding: .6rem 1.4rem;
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: rgba(18, 14, 8, .4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.door-quest-enter-btn:hover, .door-quest-enter-btn:focus-visible {
    border-color: #fff;
    background: rgba(32, 25, 14, .6);
    transform: translateY(2px);
}

/* ──────────────────────── ЕТАП 2 ──────────────────────── */

/* "Под Балкана" вече е top-level секция (беше дете на .hall-machines) -
   собствена ширина/центриране, същата като .hall-machines/.hall-siege/
   .hall-exits (header.php) - само тук, не пипам споделения списък там. */
.hall-fiction {
    max-width: 1100px;
    margin: calc(var(--space-7) / 2) auto;
    padding: var(--space-4);
}

/* Отстоянията между секциите - наполовина (особено след Машинната зала,
   Обсадата и "Под Балкана"). По-висока специфичност от hall.css-овото
   ".hall-siege, .hall-exits { margin-top: var(--space-8); }" (там е клас
   без елемент - тук с "section." печели регистъра, без да пипаме hall.css). */
section.hall-siege,
section.hall-exits {
    margin-top: calc(var(--space-8) / 2);
}

/* "Шинка посреща" - тъмна полупрозрачна плоча (чете се и по време на
   зуума, докато вратата още се вижда зад/около нея през pulled-up margin). */
.shinka-welcome {
    margin-bottom: calc(var(--space-7) / 2);
    background: rgba(19, 21, 26, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-lg, var(--radius-md));
    padding: var(--space-5);
}
.shinka-welcome-main {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.shinka-welcome-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-accent);
    flex-shrink: 0;
}
.shinka-welcome-bubble {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.shinka-welcome-bubble p {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-text);
}
.shinka-welcome-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: var(--color-surface);
}
.shinka-quick-q {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.shinka-quick-q-btn {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: .3rem .7rem;
    border: 1px solid var(--color-accent-dim);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.shinka-quick-q-btn:hover, .shinka-quick-q-btn:focus-visible {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.shinka-welcome-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.shinka-welcome-action {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.shinka-welcome-action:hover, .shinka-welcome-action:focus-visible {
    border-color: var(--color-accent);
    background: rgba(255, 176, 0, .06);
    transform: translateY(-3px);
}
.swa-icon {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    margin-bottom: .15rem;
}
.shinka-welcome-action strong { color: var(--color-accent); font-size: var(--text-base); }
.shinka-welcome-action span { color: #e8dcc4; font-size: var(--text-xs); }
.shinka-welcome-quote {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4);
}
/* .text-link - кехлибарен текстов линк, прилага се ръчно само на конкретни
   линкове (не глобално правило за "a" - точно това счупи менюто/бутоните
   на 14.11, защото те наследяват цвета си от родителя). */
.text-link {
    color: var(--color-accent);
    text-decoration: none;
}
.text-link:visited { color: var(--color-accent); }
.text-link:hover, .text-link:focus-visible { text-decoration: underline; }
.shinka-welcome-council-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--space-2);
}
.shinka-welcome-council-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.swc-strateg {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text);
}
.swc-strateg img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-accent);
}
.swc-stack {
    display: flex;
}
.swc-stack img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-bg);
    opacity: .55;
    margin-left: -8px;
}
.swc-stack img:first-child { margin-left: 0; }
.swc-more {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.swc-more:hover, .swc-more:focus-visible { color: var(--color-accent); }

@media (max-width: 767px) {
    .shinka-welcome-main { flex-direction: column; text-align: center; }
    .shinka-welcome-avatar { width: 110px; height: 110px; }
    .shinka-welcome-bubble::before { display: none; }
    .shinka-welcome-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Лентата от Студиото - хоризонтален свайп на телефон. Положение relative
   + ::after долу - плавен преход към фона на тунела зад Машинната зала
   (без него тук имаше рязка видима граница - плосък фон/скален тунел). */
.studio-ribbon {
    position: relative;
    margin-bottom: calc(var(--space-7) / 2);
    padding-bottom: calc(var(--space-6) / 2);
}
/* Градиентът е ЗАД лентата (z-index -1 в същия stacking context на
   .studio-ribbon, което е position:relative - сетне всяко дете е над
   него по подразбиране), не върху картините. */
.studio-ribbon::after {
    content: '';
    position: absolute;
    left: -4rem;
    right: -4rem;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}
.studio-ribbon-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.studio-ribbon-item {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.studio-ribbon-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-ribbon-label {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    padding: .2rem .6rem;
    background: rgba(8, 7, 6, .72);
    backdrop-filter: blur(3px);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
}
.studio-ribbon-cta { position: relative; z-index: 1; text-decoration: none; }
@media (max-width: 767px) {
    .studio-ribbon-strip {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 70%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
    }
    .studio-ribbon-item { aspect-ratio: 4 / 3; }
}

/* ──────────────────────── ЕТАП 3 ──────────────────────── */

/* Машинна зала - махаме пунктираните свързващи линии (.hall-flow SVG),
   не пипаме hall.js (той продължава тихо да го рисува, просто не се вижда
   тук - на живата страница остава както си е). */
.hall-machines .hall-flow { display: none !important; }

/* Офлайн машина - по-ясно "изгасена": без вътрешното кехлибарено сияние,
   леко обезцветена, не само приглушена по opacity. */
.hall-grid .machine-card.is-offline {
    box-shadow: none;
    filter: grayscale(.5);
}

/* "Ти си процес N" - по-едро, номерът на процеса се откроява повече. */
.hall-presence {
    font-size: var(--text-sm);
}
.hall-presence .hall-presence-pid {
    font-size: var(--text-base);
    font-weight: 700;
}

/* Стрелката ▾ - само на телефона (JS-ът я добавя винаги, тук я крием по
   подразбиране и я връщаме само под 768px). */
.hc-caret { display: none; }

/* Офлайн машина - здравето показва "ОФЛАЙН" (сиво), не какъвто taг е бил
   последно записан. */
.tag.tag-offline {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: transparent;
}

/* Мобилно: всяка машина - един ред (име + статус), разгъва се на тап за
   метриките. Нативен <details>/<summary>, без JS. hall.js продължава да
   пълни hallGrid с обикновени .machine-card div-ове - тук на <768px само
   обвиваме визуално всяка карта в compact/expand режим чрез CSS. */
@media (max-width: 767px) {
    .hall-grid .machine-card {
        cursor: pointer;
    }
    .hall-grid .machine-card.hc-collapsed .mc-meta,
    .hall-grid .machine-card.hc-collapsed .mc-meter-row,
    .hall-grid .machine-card.hc-collapsed .hall-offline-note {
        display: none;
    }
    .hall-grid .machine-card .hc-caret {
        display: inline;
        float: right;
        color: var(--color-text-muted);
        font-family: var(--font-mono);
        transition: transform var(--transition-fast);
    }
    .hall-grid .machine-card:not(.hc-collapsed) .hc-caret {
        transform: rotate(180deg);
    }
}

/* Под Балкана - свито зад <details>, студен зелен терминален вид (reuse
   на var(--color-success), не нов токен), различен от истинските машини. */
.hall-fiction-tunnel summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 40%, var(--color-border));
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    background: color-mix(in srgb, var(--color-success) 6%, var(--color-bg));
}
.hall-fiction-tunnel summary::-webkit-details-marker { display: none; }
.hall-fiction-tunnel summary:hover {
    border-color: var(--color-success);
}
.hall-fiction-tunnel summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.hft-prompt { color: var(--color-success); }
.hft-tag {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 50%, var(--color-border));
    border-radius: var(--radius-pill);
    padding: .1rem .6rem;
}
.hall-fiction-body {
    margin-top: var(--space-4);
}
/* 1 карта (сигналът угасва понякога) - центрирана, не "осиротяла" в ляво
   на широка 3-колонна мрежа. */
.hall-fiction .hall-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    justify-content: center;
}
.hall-fiction .fiction-journal-head { justify-content: center; }
.hall-fiction .machine-card { border-left-color: color-mix(in srgb, var(--color-success) 60%, var(--color-border)); }
.hall-fiction .mc-meter-fill { background: var(--color-success); }

/* Обсадата - тънка червена лента ПОД всеки ред от топ-пътищата,
   пропорционална на броя (виж style="--sp-pct" slagan inline от
   door-siege-tidy.js), и премахваме реда "Глутницата не спи..." (мести
   се във футъра). */
.siege-paths li {
    position: relative;
    overflow: hidden;
}
.siege-paths li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: var(--sp-pct, 0%);
    background: linear-gradient(to right, var(--color-danger), color-mix(in srgb, var(--color-danger) 55%, black));
    z-index: 0;
    pointer-events: none;
}
.siege-paths .siege-path-name,
.siege-paths .siege-path-count {
    position: relative;
    z-index: 1;
}
.siege-refrain { display: none; }
/* повтарящи се еднакви записи в лентата - събрани в едно с "×N" (виж
   door-siege-tidy.js), по-ясни етикети за прозорците на броячите. */
.siege-feed-line .sfl-repeat-badge {
    color: var(--color-text-muted);
    font-size: .85em;
    margin-left: .3rem;
}

/* Изходите - компактни редове в 4 групи, без REAL плочка. */
.hall-exits-group {
    margin-bottom: var(--space-5);
}
.hall-exits-group h3 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 400;
    margin: 0 0 var(--space-2);
}
.exit-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}
.hall-exits-group .exit-row:last-child { border-bottom: none; }
.exit-row:hover .exit-row-name,
.exit-row:focus-visible .exit-row-name { color: var(--color-accent); }
.exit-row-name {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    color: var(--color-text);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.exit-row-meta {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* Последно от DTGaraGe - заглавие-табелка като другите секции. */
.hall-exits-forum h2.hall-section-title { margin-bottom: var(--space-4); }
.exits-forum-row-meta {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-left: .5rem;
}

/* ──────────────────────── ЕТАП 4 ──────────────────────── */

/* Тих 3-редов footer (footer.php, зад $footerQuiet - виж index-new.php). */
.site-footer-quiet {
    display: block;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-5);
}
.footer-quiet-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--color-accent);
    font-style: italic;
    margin: 0 0 var(--space-2);
}
.footer-wolf-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.footer-quiet-status {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
}
.footer-quiet-links {
    margin: 0;
    font-size: var(--text-xs);
}

/* Стрелката "нагоре" - вдигната над тихия footer, щом той се покаже. */
.scroll-top-btn.scroll-top-above-footer {
    bottom: 110px;
}
@media (max-width: 767px) {
    .scroll-top-btn.scroll-top-above-footer { bottom: 150px; }
}

/* ЕТАП 4 - минимална обиколка с Шинка, само на началната, само при
   първо посещение. Без фон/затъмнение на целия екран - само плаваща
   картичка + тънък outline около целта, страницата си остава напълно
   използваема под нея. */
.lair-tour-callout {
    position: fixed;
    z-index: 60;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-accent-dim);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.lair-tour-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.lair-tour-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lair-tour-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.lair-tour-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}
.lair-tour-skip,
.lair-tour-next {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: .3rem .8rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.lair-tour-skip {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.lair-tour-next {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-bg);
    font-weight: 600;
}
.lair-tour-highlight {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}