/* ==============================================================================
   TAROT DE THOTH — ARQUITETURA CLÁSSICA EM CAMADAS (MOBILE-FIRST & SEM ITÁLICO)
   Estética: Edição de Arquivo / Instituto Warburg / Tipografia Clássica
   Paleta: Obsidiana Balanceada (#100e0d), Marfim Radiante (#f4efe6), Latão Vivo (#c8a86b)
   Tipografia: Cinzel + Cormorant Garamond & Spectral (100% Romana/Vertical, sem itálico)
   ============================================================================== */

:root {
    --bg-obsidian: #0e0d0b;
    --bg-obsidian-soft: #14120f;
    --bg-obsidian-card: #181512;
    --bg-paper: #161411;
    --bg-passepartout: #1b1815;
    --bg-elevated: #221f1a;

    --text-ivory: #f5f0e6;
    --text-parchment: #eae2d3;
    --text-stone: #bab1a2;
    --text-faint: #887e70;

    --brass-leaf: #d4b26f;
    --brass-muted: #c8a86b;
    --brass-soft: #dec38f;

    --line-hair: rgba(222, 195, 143, 0.18);
    --line-brass: rgba(200, 168, 107, 0.48);
    --border-hairline: rgba(222, 195, 143, 0.22);
    --border-brass: rgba(200, 168, 107, 0.52);

    --font-epigraph: 'Cinzel', Georgia, serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Spectral', Georgia, serif;

    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.25rem;

    --ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset Geral & Proibição Global de Itálico */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-style: normal !important;
}

[hidden] {
    display: none !important;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    background-color: var(--bg-obsidian);
}

body.thoth-body {
    background-color: var(--bg-obsidian);
    color: var(--text-ivory);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.8;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: auto;
}

.thoth-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.thoth-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ==============================================================================
   1. PÓRTICO (HOME) — MOBILE-FIRST (SEM BLOQUEIO DE ROLAGEM)
   ============================================================================== */
.sanctuary-home {
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem 1.5rem;
    background: radial-gradient(circle at 50% 46%, #1b1814 0%, var(--bg-obsidian) 72%);
}

.sanctuary-stage {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.sanctuary-epigraph {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sanctuary-wordmark {
    font-family: var(--font-epigraph);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--text-ivory);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Mobile-First: Menu em linha acima e abaixo da carta; Desktop: Nas laterais da carta */
.sanctuary-axis {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.sanctuary-wing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    text-align: center;
}

.wing-divider {
    width: 18px;
    height: 1px;
    background-color: var(--line-hair);
    display: inline-block;
}

.wing-link {
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem 0.2rem;
    transition: opacity 0.4s var(--ease-quiet);
}

.wing-num {
    font-family: var(--font-epigraph);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--brass-soft);
    letter-spacing: 0.16em;
}

.wing-label {
    font-family: var(--font-epigraph);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-ivory);
    position: relative;
    padding-bottom: 0.25rem;
}

.wing-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--brass-muted);
    transition: width 0.4s var(--ease-quiet), left 0.4s var(--ease-quiet);
}

.wing-link:hover .wing-label {
    color: var(--brass-soft);
}

.wing-link:hover .wing-label::after {
    width: 100%;
    left: 0;
}

/* Peça Central: A Lâmina do Dia (Compacta no Mobile para caber antes da dobra) */
.sanctuary-centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(138px, 34vw, 175px);
    position: relative;
}

/* Moldura Passe-Partout de Museu */
.passepartout-frame {
    background-color: var(--bg-passepartout);
    border: 1px solid var(--line-hair);
    padding: 9px;
    position: relative;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.5s var(--ease-quiet);
}

.passepartout-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(179, 151, 100, 0.14);
    pointer-events: none;
    transition: border-color 0.5s var(--ease-quiet);
}

.passepartout-frame:hover {
    border-color: var(--line-brass);
}

.passepartout-frame:hover::before {
    border-color: rgba(179, 151, 100, 0.32);
}

.passepartout-inner {
    position: relative;
    overflow: hidden;
    background-color: #070605;
    border: 1px solid rgba(0, 0, 0, 0.8);
}

.sanctuary-card-img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(0.82) contrast(1.02) brightness(0.88);
    transition: filter 0.8s var(--ease-quiet);
}

.sanctuary-card-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(11, 10, 9, 0.05) 30%, rgba(11, 10, 9, 0.45) 100%);
    pointer-events: none;
    transition: opacity 0.8s var(--ease-quiet);
}

.sanctuary-axis.is-unveiled .sanctuary-card-img,
.passepartout-frame:hover .sanctuary-card-img {
    filter: saturate(0.96) contrast(1.03) brightness(0.98);
}

.sanctuary-axis.is-unveiled .sanctuary-card-veil {
    opacity: 0;
}

/* ==============================================================================
   BALÃO E SETA INDICADORA DE CLIQUE (APÓS INATIVIDADE)
   ============================================================================== */
.idle-click-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-quiet), transform 0.5s var(--ease-quiet), visibility 0.5s;
}

.idle-click-hint.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hint-balloon {
    background-color: rgba(18, 16, 14, 0.96);
    border: 1px solid var(--brass-muted);
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75);
}

.hint-text {
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-ivory);
    display: block;
}

.hint-arrow {
    width: 26px;
    height: 18px;
    color: var(--brass-soft);
    transform: rotate(90deg);
    animation: hintBounceMobile 1.6s ease-in-out infinite;
}

@keyframes hintBounceMobile {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50% { transform: rotate(90deg) translateX(-5px); }
}

@keyframes hintBounceDesktop {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

/* ==============================================================================
   DOCA DE CAMADAS ABAIXO DA CARTA (SUBSTITUIÇÃO NO MESMO ESPAÇO)
   ============================================================================== */
.sanctuary-layers-dock {
    width: 100%;
    max-width: 520px;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    position: relative;
}

.sanctuary-layer-slide {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s var(--ease-quiet), transform 0.45s var(--ease-quiet);
}

.sanctuary-layer-slide.is-active {
    opacity: 1;
    transform: translateY(0);
}

.caption-kicker {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-stone);
}

.btn-veil-step {
    background: transparent;
    color: var(--brass-muted);
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid var(--line-brass);
    padding: 0.25rem 0.15rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: color 0.35s ease, border-color 0.35s ease;
}

.btn-veil-step:hover {
    color: var(--text-ivory);
    border-color: var(--text-ivory);
}

.layer-card-name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-ivory);
    line-height: 1.15;
    margin-top: 0.15rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.layer-card-esoteric {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--brass-soft);
    margin-top: 0.15rem;
}

.layer-step-actions {
    margin-top: 0.45rem;
}

.layer-correspondences {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.layer-correspondences div {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.layer-correspondences dt {
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.layer-correspondences dd {
    font-family: var(--font-body);
    color: var(--text-ivory);
    font-size: 0.82rem;
}

.layer-essence-excerpt {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-stone);
    max-width: 460px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-deep-study {
    display: inline-block;
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-brass);
    padding-bottom: 0.2rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.link-deep-study:hover {
    color: var(--text-ivory);
    border-color: var(--text-ivory);
}

.sanctuary-layer-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.4rem;
}

.sanctuary-layer-dots .dot-sep {
    color: var(--text-faint);
    font-size: 0.65rem;
}

.layer-dot {
    background: transparent;
    border: none;
    font-family: var(--font-epigraph);
    font-size: 0.68rem;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.2rem;
    transition: color 0.3s ease;
}

.layer-dot.active {
    color: var(--brass-muted);
}

.layer-dot:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ==============================================================================
   DESKTOP ENHANCEMENT (MIN-WIDTH: 900PX) — EIXO HORIZONTAL FIXO ANTES DA DOBRA
   ============================================================================== */
@media (min-width: 900px) {
    .thoth-container {
        padding: 0 1.75rem;
    }

    .sanctuary-home {
        height: 100dvh;
        padding: 1.25rem 1.75rem;
    }

    .sanctuary-stage {
        height: 100%;
        max-height: 760px;
        display: grid;
        grid-template-rows: auto 1fr 122px;
        align-items: center;
        justify-items: center;
        gap: 0.75rem;
    }

    .sanctuary-epigraph {
        padding-top: 0.25rem;
    }

    .sanctuary-wordmark {
        font-size: 0.82rem;
        letter-spacing: 0.4em;
    }

    .sanctuary-axis {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        justify-content: center;
        justify-items: center;
        gap: 3.5rem;
        width: 100%;
    }

    .sanctuary-wing {
        gap: 2rem;
        width: 100%;
    }

    .sanctuary-wing.wing-left {
        justify-content: flex-end;
        text-align: right;
    }

    .sanctuary-wing.wing-left .wing-link {
        align-items: flex-end;
    }

    .sanctuary-wing.wing-right {
        justify-content: flex-start;
        text-align: left;
    }

    .sanctuary-wing.wing-right .wing-link {
        align-items: flex-start;
    }

    .wing-divider {
        width: 24px;
    }

    .wing-label {
        font-size: 0.74rem;
        letter-spacing: 0.22em;
    }

    .sanctuary-centerpiece {
        width: clamp(155px, 24.5vh, 220px);
    }

    .passepartout-frame {
        padding: 11px;
    }

    /* No Desktop, o balão e a seta apontam lateralmente para a carta */
    .idle-click-hint {
        top: 50%;
        bottom: auto;
        left: calc(100% + 14px);
        transform: translateY(-50%) translateX(8px);
        flex-direction: row-reverse;
        gap: 0.45rem;
    }

    .idle-click-hint.is-visible {
        transform: translateY(-50%) translateX(0);
    }

    .hint-arrow {
        transform: none;
        animation: hintBounceDesktop 1.6s ease-in-out infinite;
    }

    .sanctuary-layers-dock {
        height: 122px;
    }
}

/* ==============================================================================
   2. CABEÇALHO E COLOFÃO CENTRALIZADOS (PÁGINAS INTERNAS)
   ============================================================================== */
.classical-header {
    border-bottom: 1px solid var(--line-hair);
    padding: 1.75rem 0 1.35rem;
    background-color: var(--bg-obsidian);
}

.classical-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.classical-Wordmark {
    font-family: var(--font-epigraph);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--text-ivory);
    text-decoration: none;
    transition: color 0.3s ease;
}

.classical-Wordmark:hover {
    color: var(--brass-soft);
}

.classical-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.classical-nav-list .nav-sep {
    color: var(--text-faint);
    font-size: 0.75rem;
    user-select: none;
}

.classical-nav-list a {
    font-family: var(--font-epigraph);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-stone);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.classical-nav-list a:hover,
.classical-nav-list a.active {
    color: var(--brass-soft);
    border-bottom-color: var(--brass-muted);
}

/* Colofão / Rodapé Clássico */
.classical-footer {
    border-top: 1px solid var(--line-hair);
    padding: 2.25rem 0;
    margin-top: 3.5rem;
    background-color: var(--bg-obsidian);
}

.classical-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}

.footer-colophon-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.footer-colophon-links a {
    color: var(--text-stone);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-colophon-links a:hover {
    color: var(--brass-soft);
}

.footer-colophon-meta {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==============================================================================
   3. CABEÇALHOS DE PÁGINA INTERNA E SUBNAVEGAÇÃO
   ============================================================================== */
.inner-layer-container {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

.classical-page-header {
    text-align: center;
    margin-bottom: 2.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--line-hair);
}

.page-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 0.5rem;
}

.page-title {
    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-ivory);
    line-height: 1.2;
}

.classical-subnav {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.classical-subnav .sep {
    color: var(--text-faint);
}

.subnav-link {
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-stone);
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.subnav-link:hover,
.subnav-link.active {
    color: var(--text-ivory);
    border-bottom-color: var(--brass-muted);
}

/* ==============================================================================
   4. PORTAIS DOS QUATRO MUNDOS & ORÁCULO (MOBILE-FIRST)
   ============================================================================== */
.suits-portals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.oracle-portals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto 3rem;
}

@media (min-width: 600px) {
    .suits-portals-grid,
    .oracle-portals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .suits-portals-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.suit-portal-card {
    background-color: var(--bg-paper);
    border: 1px solid var(--line-hair);
    padding: 2.25rem 1.5rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: border-color 0.45s var(--ease-quiet), background-color 0.45s var(--ease-quiet);
}

.suit-portal-card::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.45s var(--ease-quiet);
}

.suit-portal-card:hover {
    background-color: var(--bg-passepartout);
    border-color: var(--line-brass);
}

.suit-portal-card:hover::before {
    border-color: rgba(179, 151, 100, 0.16);
}

.portal-roman {
    font-family: var(--font-epigraph);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--brass-muted);
    margin-bottom: 0.65rem;
}

.portal-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--text-ivory);
    margin-bottom: 0.35rem;
}

.portal-element {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 1.15rem;
}

.portal-sub {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-stone);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.portal-enter {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-stone);
    border-bottom: 1px solid var(--line-hair);
    padding-bottom: 0.2rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.suit-portal-card:hover .portal-enter {
    color: var(--text-ivory);
    border-bottom-color: var(--brass-muted);
}

/* ==============================================================================
   5. GALERIA DE LÂMINAS (MOBILE-FIRST: 2 COLUNAS NO CELULAR, AUTO-FILL NO DESKTOP)
   ============================================================================== */
.classical-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem 1rem;
}

@media (min-width: 720px) {
    .classical-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
        gap: 2.25rem 1.75rem;
    }
}

.classical-card-tile {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tile-frame {
    width: 100%;
    background-color: var(--bg-passepartout);
    border: 1px solid var(--line-hair);
    padding: 8px;
    transition: border-color 0.45s var(--ease-quiet);
}

.tile-img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(0.92) brightness(0.96);
    transition: filter 0.5s var(--ease-quiet);
    background-color: #171512;
}

.classical-card-tile:hover .tile-frame {
    border-color: var(--line-brass);
}

.classical-card-tile:hover .tile-img {
    filter: saturate(1) brightness(1);
}

.tile-caption {
    margin-top: 0.75rem;
    text-align: center;
}

.tile-num {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 0.15rem;
}

.tile-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-ivory);
    line-height: 1.25;
}

.tile-sub {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: var(--text-faint);
    margin-top: 0.15rem;
}

/* ==============================================================================
   6. MONOGRAFIA DA LÂMINA & CAMADAS PROGRESSIVAS DE ESTUDO
   ============================================================================== */
.monograph-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-bottom: 1.15rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid var(--line-hair);
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.monograph-breadcrumb {
    color: var(--text-faint);
}

.monograph-breadcrumb a,
.monograph-siblings .sibling-link {
    color: var(--text-stone);
    text-decoration: none;
    transition: color 0.3s ease;
}

.monograph-breadcrumb a:hover,
.monograph-siblings .sibling-link:hover {
    color: var(--brass-soft);
}

.monograph-breadcrumb .sep,
.monograph-siblings .sep {
    margin: 0 0.4rem;
    color: var(--text-faint);
}

.monograph-breadcrumb .current {
    color: var(--text-ivory);
}

.monograph-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: start;
}

.monograph-plate-col {
    max-width: 240px;
    margin: 0 auto;
    text-align: center;
}

@media (min-width: 900px) {
    .monograph-layout {
        grid-template-columns: 300px 1fr;
        gap: 3.75rem;
    }

    .monograph-plate-col {
        position: sticky;
        top: 2.5rem;
        max-width: none;
        margin: 0;
    }
}

.monograph-frame {
    cursor: zoom-in;
}

.monograph-img {
    width: 100%;
    height: auto;
    display: block;
}

.plate-caption {
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 0.75rem;
}

.monograph-header {
    margin-bottom: 2.25rem;
}

.monograph-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 0.45rem;
}

.monograph-title {
    font-family: var(--font-display);
    font-size: 2.35rem;
    font-weight: 400;
    color: var(--text-ivory);
    line-height: 1.15;
}

.monograph-esoteric {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-stone);
    margin-top: 0.3rem;
    margin-bottom: 1.5rem;
}

.classical-correspondences-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    border-top: 1px solid var(--line-hair);
}

.classical-correspondences-table tr {
    border-bottom: 1px solid var(--line-hair);
}

.classical-correspondences-table th {
    text-align: left;
    padding: 0.65rem 1rem 0.65rem 0;
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-stone);
    width: 40%;
}

.classical-correspondences-table td {
    padding: 0.65rem 0;
    font-family: var(--font-body);
    font-size: 0.94rem;
    color: var(--text-ivory);
}

/* Empilhamento de Camadas Progressivas */
.progressive-layers-stack {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-hair);
}

.catalog-notes-layer {
    margin-top: 3.5rem;
}

.treatise-stack {
    max-width: 780px;
    margin: 0 auto;
}

.study-layer-item {
    border-bottom: 1px solid var(--line-hair);
    transition: opacity 0.4s ease;
}

.study-layer-item.is-locked {
    opacity: 0.55;
}

.study-layer-item.is-locked:hover {
    opacity: 0.9;
}

.study-layer-trigger {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.25rem 0;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: baseline;
    text-align: left;
    cursor: pointer;
    color: var(--text-ivory);
    transition: color 0.3s ease;
}

.study-layer-trigger:hover {
    color: var(--brass-soft);
}

.layer-roman {
    font-family: var(--font-epigraph);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--brass-muted);
}

.layer-title {
    font-family: var(--font-epigraph);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.layer-indicator {
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    transition: color 0.3s ease;
}

.study-layer-trigger:hover .layer-indicator {
    color: var(--brass-muted);
}

.study-layer-body {
    padding: 0.25rem 0 1.75rem 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s var(--ease-quiet), transform 0.45s var(--ease-quiet);
}

@media (min-width: 640px) {
    .study-layer-trigger {
        grid-template-columns: 52px 1fr auto;
    }

    .study-layer-body {
        padding-left: 52px;
    }
}

.study-layer-body.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.study-layer-prose p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--text-ivory);
    margin-bottom: 1.1rem;
}

.study-layer-prose p:last-child {
    margin-bottom: 0;
}

.classical-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.classical-list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-ivory);
}

.classical-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--brass-muted);
}

.classical-list li strong {
    color: var(--brass-soft);
    font-weight: 500;
}

.study-layer-next {
    margin-top: 1.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-hair);
}

.btn-next-layer {
    background: transparent;
    border: none;
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-muted);
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.3s ease;
}

.btn-next-layer:hover {
    color: var(--text-ivory);
}

.polarities-classical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .polarities-classical-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.polarity-column h3 {
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line-hair);
}

.polarity-column p {
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--text-ivory);
}

.classical-aphorism {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--text-ivory);
    border-left: 1px solid var(--brass-muted);
    padding-left: 1.2rem;
    margin: 0.5rem 0 1.2rem;
}

.classical-keywords {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-stone);
}

.classical-keywords .keywords-label {
    color: var(--brass-muted);
    margin-right: 0.35rem;
}

/* ==============================================================================
   7. CÂMARA DO ORÁCULO (1 LÂMINA & CRUZ CÉLTICA SEQUENCIAL)
   ============================================================================== */
.oracle-chamber {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 2.5rem;
}

.flip-card-container {
    width: 210px;
    aspect-ratio: 2 / 3.15;
    perspective: 1200px;
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.9s var(--ease-quiet);
    transform-style: preserve-3d;
}

.flip-card-container.revealed .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background-color: var(--bg-passepartout);
    border: 1px solid var(--line-brass);
    padding: 9px;
}

.flip-card-front img,
.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.oracle-chamber-controls {
    text-align: center;
}

.oracle-layered-result {
    width: 100%;
    max-width: 680px;
    margin-top: 2.5rem;
}

.oracle-revealed-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.oracle-revealed-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-ivory);
}

.oracle-revealed-esoteric {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-stone);
    margin-top: 0.2rem;
}

.oracle-revealed-meta {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 0.45rem;
}

/* Cruz Céltica Sequencial */
.celtic-stations-index {
    max-width: 640px;
    margin: 0 auto;
    border-top: 1px solid var(--line-hair);
    border-bottom: 1px solid var(--line-hair);
    padding: 1.75rem 0;
}

.stations-intro {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-stone);
    text-align: center;
    margin-bottom: 1.5rem;
}

.stations-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 2rem;
    font-size: 0.88rem;
    color: var(--text-stone);
}

@media (min-width: 640px) {
    .stations-list {
        grid-template-columns: 1fr 1fr;
    }
}

.stations-list span {
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-muted);
}

.celtic-sequence-guide {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-stone);
    margin-bottom: 1.75rem;
}

.celtic-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 1.5rem;
}

.celtic-station-card {
    background-color: var(--bg-paper);
    border: 1px solid var(--line-hair);
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.45s ease, opacity 0.45s ease;
}

.celtic-station-card.is-veiled {
    opacity: 0.65;
}

.celtic-station-card.is-next-station {
    opacity: 1;
    border-color: var(--line-brass);
}

.station-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px solid var(--line-hair);
    padding-bottom: 0.75rem;
    margin-bottom: 1.15rem;
}

.station-roman {
    font-family: var(--font-epigraph);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    color: var(--brass-muted);
}

.station-name {
    font-family: var(--font-epigraph);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-ivory);
}

.station-desc {
    font-size: 0.8rem;
    color: var(--text-stone);
    margin-top: 0.2rem;
    line-height: 1.5;
}

.station-veil-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0;
    cursor: pointer;
}

.station-back-frame,
.station-front-frame {
    width: 140px;
    background-color: var(--bg-passepartout);
    border: 1px solid var(--line-hair);
    padding: 7px;
    margin: 0 auto 0.85rem;
    transition: border-color 0.35s ease;
}

.station-veil-box:hover .station-back-frame {
    border-color: var(--line-brass);
}

.station-back-img,
.station-front-img {
    width: 100%;
    height: auto;
    display: block;
}

.station-front-img {
    cursor: zoom-in;
}

.station-unveil-label {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-muted);
    border-bottom: 1px solid var(--line-brass);
    padding-bottom: 0.2rem;
}

.station-reading {
    text-align: center;
}

.station-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--text-ivory);
}

.station-card-meta {
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin: 0.2rem 0 0.65rem;
}

.station-card-light {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-stone);
    margin-bottom: 0.9rem;
}

.station-study-link {
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line-hair);
    padding-bottom: 0.15rem;
}

.station-study-link:hover {
    color: var(--text-ivory);
    border-bottom-color: var(--text-ivory);
}

/* ==============================================================================
   8. LIGHTBOX MODAL & UTILITÁRIOS
   ============================================================================== */
.thoth-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.thoth-modal.active {
    display: flex;
}

.modal-backdrop-custom {
    position: absolute;
    inset: 0;
    background: rgba(8, 7, 6, 0.92);
}

.modal-dialog-custom {
    position: relative;
    background: var(--bg-passepartout);
    border: 1px solid var(--line-brass);
    padding: 1.15rem;
    max-width: 440px;
    width: 100%;
    z-index: 2;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-stone);
    font-size: 1rem;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-ivory);
}

.modal-card-display {
    text-align: center;
}

.modal-img {
    max-width: 100%;
    max-height: 75vh;
    display: block;
    margin: 0 auto;
}

.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* ==============================================================================
   9. BARRA DISCRETA DE IDIOMAS, VISITAS E ONLINE POR IDIOMA (MOBILE-FIRST)
   ============================================================================== */
.thoth-lang-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 10;
}

.classical-header .thoth-lang-bar {
    margin-bottom: 0.85rem;
}

.lang-bar-items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.65rem;
    padding: 0.35rem 0.9rem;
    background-color: rgba(22, 20, 17, 0.65);
    border: 1px solid rgba(222, 195, 143, 0.12);
    border-radius: 2px;
}

.lang-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.12rem 0.32rem;
    border: 1px solid transparent;
    transition: border-color 0.3s var(--ease-quiet), opacity 0.3s var(--ease-quiet);
    opacity: 0.78;
}

.lang-unit:hover,
.lang-unit.is-active {
    opacity: 1;
}

.lang-unit.is-active {
    border-bottom-color: var(--brass-muted);
}

.lang-flag-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--text-stone);
}

.lang-unit.is-active .lang-flag-link,
.lang-flag-link:hover {
    color: var(--text-ivory);
}

.flag-svg {
    width: 14px;
    height: 10px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.2);
    filter: saturate(0.8) brightness(0.95);
    transition: filter 0.3s ease;
}

.lang-unit.is-active .flag-svg,
.lang-flag-link:hover .flag-svg {
    filter: saturate(1) brightness(1.05);
}

.lang-code {
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lang-stat-visits {
    font-family: var(--font-body);
    font-size: 0.64rem;
    color: var(--text-stone);
    letter-spacing: 0.02em;
}

.lang-stat-online {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.64rem;
    color: var(--brass-soft);
    padding-left: 0.14rem;
    transition: color 0.25s ease;
}

.lang-stat-online:hover {
    color: var(--text-ivory);
}

.online-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #8bc34a;
    display: inline-block;
    box-shadow: 0 0 4px rgba(139, 195, 74, 0.6);
}

.lang-bar-sep {
    color: var(--text-faint);
    font-size: 0.6rem;
    opacity: 0.6;
}

.lang-total-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-stone);
}

.lang-total-unit .total-num {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: var(--text-ivory);
    letter-spacing: 0.03em;
}

@media (min-width: 768px) {
    .thoth-lang-bar {
        margin-bottom: 1.15rem;
    }
    .lang-bar-items {
        gap: 0.55rem 0.95rem;
        padding: 0.38rem 1.1rem;
    }
    .flag-svg {
        width: 15px;
        height: 11px;
    }
    .lang-code {
        font-size: 0.62rem;
    }
    .lang-stat-visits,
    .lang-stat-online,
    .lang-total-unit .total-num {
        font-size: 0.7rem;
    }
}

/* ==============================================================================
   10. FASE 1: ÁRVORE DA VIDA INTERATIVA (SVG & ÍNDICE DOS 22 CAMINHOS / 10 SEFIROT)
   ============================================================================== */

.otz-chiim-section {
    margin: var(--space-lg) 0 var(--space-xl);
    padding: var(--space-md) 1rem;
    background-color: var(--bg-obsidian-soft);
    border: 1px solid var(--border-hairline);
}

.otz-chiim-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-md);
}

.otz-chiim-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.2vw, 1.9rem);
    font-weight: 500;
    color: var(--text-ivory);
    margin: 0.35rem 0 0.65rem;
}

.otz-chiim-subtitle {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-parchment);
}

/* Workbench: Mobile-first empilhado, 2 colunas em telas >= 960px */
.otz-chiim-workbench {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: var(--space-lg);
}

/* Moldura da Gravura SVG */
.otz-diagram-frame {
    background-color: #0b0a08;
    border: 1px solid var(--border-brass);
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.75);
}

.otz-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    user-select: none;
}

.otz-svg-pillar {
    font-family: var(--font-epigraph);
    font-size: 8.5px;
    font-weight: 500;
    fill: var(--text-stone);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.otz-svg-Note {
    font-family: var(--font-epigraph);
    font-size: 8px;
    fill: var(--brass-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Linhas dos 22 Caminhos no SVG */
.otz-path-line {
    stroke: rgba(200, 168, 107, 0.28);
    stroke-width: 2.2;
    transition: stroke 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
}

.otz-path-line.is-selected {
    stroke: var(--brass-leaf);
    stroke-width: 4.2;
    filter: drop-shadow(0 0 6px rgba(200, 168, 107, 0.65));
}

/* Selos Clicáveis dos 22 Caminhos no SVG (11·א a 32·ת) */
.otz-path-badge {
    cursor: pointer;
    outline: none;
}

.otz-path-rect {
    fill: #15130f;
    stroke: rgba(200, 168, 107, 0.48);
    stroke-width: 1;
    transition: fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}

.otz-path-text {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 600;
    fill: var(--text-parchment);
    pointer-events: none;
}

.otz-path-badge:hover .otz-path-rect,
.otz-path-badge:focus-visible .otz-path-rect {
    fill: #241f17;
    stroke: var(--brass-leaf);
}

.otz-path-badge.is-selected .otz-path-rect {
    fill: var(--brass-leaf);
    stroke: #fff5d6;
    stroke-width: 1.4;
}

.otz-path-badge.is-selected .otz-path-text {
    fill: #0e0d0b;
    font-weight: 700;
}

/* Esferas Clicáveis das 10 Sefirot no SVG */
.otz-sephirah-node {
    cursor: pointer;
    outline: none;
}

.otz-seph-outer {
    fill: url(#sephGlow);
    stroke-width: 1.8;
    transition: stroke-width 0.25s ease, filter 0.25s ease;
}

.otz-seph-inner {
    fill: rgba(14, 13, 11, 0.86);
    stroke: rgba(200, 168, 107, 0.32);
    stroke-width: 0.9;
    transition: fill 0.25s ease, stroke 0.25s ease;
}

.otz-seph-num {
    font-family: var(--font-epigraph);
    font-size: 7.5px;
    font-weight: 500;
    fill: var(--brass-soft);
    letter-spacing: 0.06em;
    pointer-events: none;
}

.otz-seph-name {
    font-family: var(--font-display);
    font-size: 8.8px;
    font-weight: 600;
    fill: var(--text-ivory);
    letter-spacing: 0.04em;
    pointer-events: none;
}

.otz-sephirah-node:hover .otz-seph-inner,
.otz-sephirah-node:focus-visible .otz-seph-inner {
    fill: #211c15;
    stroke: var(--brass-leaf);
}

.otz-sephirah-node.is-selected .otz-seph-outer {
    stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(200, 168, 107, 0.6));
}

.otz-sephirah-node.is-selected .otz-seph-inner {
    fill: url(#sephActiveGlow);
    stroke: var(--brass-leaf);
    stroke-width: 1.6;
}

/* Painel Lateral de Revelação In-Place (#otzInspectorPanel) */
.otz-inspector-panel {
    background-color: var(--bg-obsidian-card);
    border: 1px solid var(--border-brass);
    padding: 1.35rem 1.15rem;
    min-height: 360px;
}

.otz-inspector-head {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-hairline);
}

.otz-inspector-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    margin-bottom: 0.35rem;
}

.otz-inspector-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 500;
    color: var(--text-ivory);
    margin-bottom: 0.25rem;
}

.otz-inspector-esoteric {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-stone);
}

.otz-inspector-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.otz-inspector-plate {
    max-width: 185px;
    margin: 0 auto;
    width: 100%;
}

.otz-inspector-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
}

.otz-meta-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    background-color: rgba(14, 13, 11, 0.65);
    border: 1px solid var(--border-hairline);
}

.otz-meta-dl div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    border-bottom: 1px dotted rgba(200, 168, 107, 0.14);
    padding-bottom: 0.35rem;
}

.otz-meta-dl div:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.otz-meta-dl dt {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-stone);
}

.otz-meta-dl dd {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-ivory);
    text-align: right;
}

.otz-inspector-summary {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--text-parchment);
    margin-bottom: 1.15rem;
}

.otz-inspector-actions {
    text-align: center;
}

/* Detalhes da Séfira no Painel de Revelação */
.otz-seph-meta-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    margin-bottom: 1.15rem;
    background-color: rgba(14, 13, 11, 0.65);
    border: 1px solid var(--border-hairline);
    font-size: 0.9rem;
}

.otz-seph-court-lbl {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    align-self: center;
}

.otz-seph-court-val {
    color: var(--text-ivory);
}

.otz-subgrid-title {
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-stone);
    text-align: center;
    margin-bottom: 0.85rem;
}

.otz-seph-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.otz-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.6rem;
    background-color: #110f0c;
    border: 1px solid var(--border-hairline);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.otz-mini-card:hover {
    border-color: var(--brass-leaf);
    transform: translateY(-2px);
}

.otz-mini-frame {
    width: 100%;
    max-width: 96px;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(200, 168, 107, 0.25);
}

.otz-mini-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.otz-mini-caption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-ivory);
    margin-bottom: 0.15rem;
}

.otz-mini-caption span {
    display: block;
    font-size: 0.74rem;
    color: var(--text-stone);
}

/* Diretório Completo Clicável (Abas + Lista dos 22 Caminhos e 10 Sefirot) */
.otz-directory-wrapper {
    border-top: 1px solid var(--border-hairline);
    padding-top: var(--space-md);
}

.otz-directory-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.35rem;
}

.otz-tab-btn {
    background-color: #12100d;
    border: 1px solid var(--border-hairline);
    color: var(--text-stone);
    font-family: var(--font-epigraph);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.65rem 1.15rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.otz-tab-btn:hover {
    color: var(--text-ivory);
    border-color: var(--border-brass);
}

.otz-tab-btn.is-active {
    background-color: rgba(200, 168, 107, 0.12);
    border-color: var(--brass-leaf);
    color: var(--text-ivory);
}

.otz-pane-heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--brass-soft);
    text-align: center;
    margin-bottom: 1.15rem;
}

.otz-paths-grid,
.otz-sephiroth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.otz-path-row,
.otz-seph-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    background-color: #12100d;
    border: 1px solid var(--border-hairline);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.otz-path-row:hover,
.otz-seph-row:hover {
    background-color: #191612;
    border-color: var(--border-brass);
}

.otz-path-row.is-selected,
.otz-seph-row.is-selected {
    background-color: rgba(200, 168, 107, 0.11);
    border-color: var(--brass-leaf);
}

.path-row-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 44px;
    background-color: #0b0a08;
    border: 1px solid rgba(200, 168, 107, 0.35);
    flex-shrink: 0;
}

.otz-path-row.is-selected .path-row-badge,
.otz-seph-row.is-selected .path-row-badge {
    border-color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.18);
}

.path-row-num {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--brass-leaf);
    line-height: 1.1;
}

.path-row-heb {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-ivory);
    line-height: 1.1;
}

.path-row-main {
    flex: 1;
    min-width: 0;
}

.path-row-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.path-row-atu {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-soft);
}

.path-row-card {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--text-ivory);
}

.path-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-stone);
}

.path-row-sep {
    color: var(--brass-muted);
}

.path-row-link {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--brass-soft);
    padding: 0.25rem 0.45rem;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.path-row-link:hover {
    color: var(--text-ivory);
    transform: translateX(2px);
}

@media (min-width: 640px) {
    .otz-chiim-section {
        padding: var(--space-md) 1.75rem;
    }

    .otz-inspector-body {
        grid-template-columns: 180px 1fr;
    }

    .otz-inspector-actions {
        text-align: left;
    }

    .otz-seph-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .otz-paths-grid,
    .otz-sephiroth-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .otz-chiim-workbench {
        grid-template-columns: minmax(340px, 460px) 1fr;
        gap: 2rem;
    }

    .otz-inspector-panel {
        position: sticky;
        top: 1.5rem;
        padding: 1.75rem 1.65rem;
    }
}

/* ==============================================================================
   11. FASE 2: RODA ZODIACAL DOS 36 DECANATOS E DA CORTE ("O CÉU HOJE")
   ============================================================================== */
.zodiac-ephemeris-section {
    margin-bottom: var(--space-lg);
}

/* Santuário Superior "O Céu Hoje" */
.sky-today-sanctuary {
    background-color: #110f0c;
    border: 1px solid var(--border-brass);
    padding: 1.6rem 1.15rem;
    margin-bottom: 2.25rem;
    box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.65);
}

.sky-today-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.65rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-hairline);
}

.sky-today-title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3.2vw, 2rem);
    font-weight: 500;
    color: var(--text-ivory);
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.sky-today-sub {
    font-family: var(--font-body);
    font-size: 0.96rem;
    color: var(--brass-soft);
}

/* Tríade Regente do Dia (Signo, Decanato e Corte) */
.sky-triad-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.6rem;
}

.sky-triad-card {
    background-color: #0b0a08;
    border: 1px solid var(--border-hairline);
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.25s ease;
}

.sky-triad-card.is-centerpiece {
    border-color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.04);
}

.sky-triad-role {
    font-family: var(--font-epigraph);
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    margin-bottom: 0.85rem;
}

.sky-triad-frame {
    width: 100%;
    max-width: 145px;
    margin-bottom: 0.85rem;
}

.sky-triad-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
}

.sky-triad-name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--text-ivory);
    margin-bottom: 0.2rem;
}

.sky-triad-esoteric {
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--text-stone);
    margin-bottom: 0.45rem;
}

.sky-triad-meta {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass-soft);
    margin-bottom: 0.85rem;
}

.sky-triad-link {
    margin-top: auto;
    font-family: var(--font-epigraph);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-stone);
    border-bottom: 1px solid var(--border-hairline);
    padding-bottom: 0.18rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sky-triad-link:hover {
    color: var(--text-ivory);
    border-bottom-color: var(--brass-leaf);
}

/* Barra dos 2 Anjos do Shem Ha-Mephorash */
.sky-angels-bar {
    background-color: #0d0b09;
    border: 1px solid var(--border-hairline);
    padding: 1rem 1.1rem;
    text-align: center;
}

.sky-angels-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-stone);
    margin-bottom: 0.8rem;
}

.sky-angels-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.sky-angel-box {
    padding: 0.7rem 0.9rem;
    background-color: #13110d;
    border: 1px solid var(--border-hairline);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.sky-angel-box.is-active-quinance {
    border-color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.08);
}

.angel-quinance-lbl {
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-stone);
}

.angel-name-heb {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-ivory);
}

.angel-active-pill {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.15rem 0.55rem;
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0e0d0b;
    background-color: var(--brass-leaf);
    font-weight: 600;
}

/* Bancada da Roda Zodiacal em SVG */
.zodiac-wheel-header {
    margin-top: 0.5rem;
}

.zodiac-reset-bar {
    margin-top: 0.95rem;
}

.btn-zodiac-today {
    background-color: #15120e;
    border: 1px solid var(--border-brass);
    color: var(--brass-soft);
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: all 0.22s ease;
}

.btn-zodiac-today:hover,
.btn-zodiac-today:focus-visible {
    background-color: rgba(200, 168, 107, 0.14);
    color: var(--text-ivory);
    border-color: var(--brass-leaf);
    outline: 2px solid var(--brass-leaf);
    outline-offset: 2px;
}

.zodiac-wide-container {
    max-width: 1380px;
}

.zodiac-diagram-frame {
    padding: 0.3rem;
}

.zodiac-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* Anel 1: 12 Signos */
.zodiac-sign-sector,
.zodiac-decan-node,
.zodiac-court-node {
    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.zodiac-sign-sector:focus,
.zodiac-decan-node:focus,
.zodiac-court-node:focus {
    outline: none !important;
}

.zodiac-sign-arc {
    fill: #13110d;
    stroke: rgba(200, 168, 107, 0.34);
    stroke-width: 1;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.zodiac-sign-sector:hover .zodiac-sign-arc,
.zodiac-sign-sector:focus-visible .zodiac-sign-arc {
    fill: #211c15;
    stroke: var(--brass-leaf);
}

.zodiac-sign-glyph {
    font-family: var(--font-display), 'Segoe UI Symbol', 'Apple Symbols', serif;
    font-variant-emoji: text;
    font-size: 16.5px;
    font-weight: 600;
    fill: var(--brass-soft);
    pointer-events: none;
}

/* Anel 2: 36 Decanatos Caldeus */
.zodiac-decan-node {
    cursor: pointer;
}

.zodiac-decan-arc {
    fill: #171410;
    stroke: rgba(200, 168, 107, 0.3);
    stroke-width: 0.9;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.zodiac-decan-node:nth-child(even) .zodiac-decan-arc {
    fill: #1b1712;
}

.zodiac-decan-node.is-today-sun .zodiac-decan-arc {
    fill: rgba(200, 168, 107, 0.24);
    stroke: #f5d98e;
    stroke-width: 1.5;
}

.zodiac-decan-node:hover .zodiac-decan-arc,
.zodiac-decan-node:focus-visible .zodiac-decan-arc {
    fill: #2b2419;
    stroke: var(--brass-leaf);
}

.zodiac-decan-node.is-selected .zodiac-decan-arc {
    fill: var(--brass-leaf);
    stroke: #fff5d6;
    stroke-width: 1.6;
}

.zodiac-decan-planet {
    font-family: var(--font-body), 'Segoe UI Symbol', serif;
    font-variant-emoji: text;
    font-size: 11.5px;
    fill: var(--text-parchment);
    pointer-events: none;
}

.zodiac-decan-cardnum {
    font-family: var(--font-epigraph);
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--text-ivory);
    pointer-events: none;
}

.zodiac-decan-node.is-selected .zodiac-decan-planet,
.zodiac-decan-node.is-selected .zodiac-decan-cardnum {
    fill: #0e0d0b;
    font-weight: 700;
}

/* Anel 3: 12 Cortes Zodiacais (20° a 20°) */
.zodiac-court-node {
    cursor: pointer;
}

.zodiac-court-arc {
    fill: #110f0c;
    stroke: rgba(200, 168, 107, 0.26);
    stroke-width: 0.9;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.zodiac-court-node.is-today-court .zodiac-court-arc {
    fill: rgba(200, 168, 107, 0.16);
    stroke: var(--brass-leaf);
}

.zodiac-court-node:hover .zodiac-court-arc,
.zodiac-court-node:focus-visible .zodiac-court-arc {
    fill: #241e16;
    stroke: var(--brass-leaf);
}

.zodiac-court-node.is-selected .zodiac-court-arc {
    fill: var(--brass-leaf);
    stroke: #fff5d6;
    stroke-width: 1.5;
}

.zodiac-court-label {
    font-family: var(--font-epigraph);
    font-size: 8.5px;
    font-weight: 500;
    fill: var(--brass-soft);
    pointer-events: none;
}

.zodiac-court-node.is-selected .zodiac-court-label {
    fill: #0e0d0b;
    font-weight: 700;
}

/* Textos do Núcleo Central da Roda */
.zodiac-center-kicker {
    font-family: var(--font-epigraph);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    fill: var(--brass-muted);
}

.zodiac-center-sun {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    fill: var(--text-ivory);
}

.zodiac-center-sub {
    font-family: var(--font-display);
    font-size: 11.5px;
    fill: var(--brass-soft);
}

.zodiac-center-lon {
    font-family: var(--font-epigraph);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    fill: var(--text-stone);
}

/* Mini-cards de Acompanhamento no Inspector (Arcano Maior e Corte do Decanato) */
.zodiac-companion-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-hairline);
}

.zodiac-companion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    background-color: #0e0c0a;
    border: 1px solid var(--border-hairline);
    transition: border-color 0.2s ease;
}

.zodiac-companion-item:hover {
    border-color: var(--brass-leaf);
}

.zodiac-companion-thumb {
    width: 38px;
    height: auto;
    border: 1px solid rgba(200, 168, 107, 0.3);
    flex-shrink: 0;
}

.companion-lbl {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-leaf);
}

.companion-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-ivory);
}

.companion-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--text-stone);
}

/* Badges de Destaque "Sol Hoje" */
.zodiac-today-badge,
.zodiac-inspector-today {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    margin-left: 0.35rem;
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0e0d0b;
    background-color: var(--brass-leaf);
}

.zodiac-decan-row.is-today-row,
.zodiac-court-row.is-today-row {
    border-color: rgba(200, 168, 107, 0.55);
}

.zodiac-princesses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

/* Camada Consultiva Discreta no Oráculo (views/tiragens.php) */
.oracle-sky-triad-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}

.oracle-sky-mini {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    background-color: #110f0c;
    border: 1px solid var(--border-hairline);
    transition: border-color 0.2s ease;
}

.oracle-sky-mini.is-featured {
    border-color: rgba(200, 168, 107, 0.45);
}

.oracle-sky-mini:hover {
    border-color: var(--brass-leaf);
}

.sky-mini-role {
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-leaf);
}

.sky-mini-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-ivory);
}

.sky-mini-meta {
    font-size: 0.8rem;
    color: var(--text-stone);
}

.oracle-sky-angels {
    font-size: 0.9rem;
    color: var(--text-parchment);
}

@media (min-width: 640px) {
    .sky-today-sanctuary {
        padding: 2rem 1.75rem;
    }

    .sky-triad-showcase {
        grid-template-columns: repeat(3, 1fr);
    }

    .sky-angels-pair {
        grid-template-columns: repeat(2, 1fr);
    }

    .zodiac-princesses-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .oracle-sky-triad-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* No celular (< 640px), reduz margens laterais da seção para a Roda ocupar toda a largura útil */
@media (max-width: 639px) {
    .zodiac-ephemeris-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .zodiac-diagram-frame {
        padding: 0.15rem;
    }
}

/* Em telas grandes (Desktop >= 960px), dá protagonismo monumental à Roda Zodiacal */
@media (min-width: 960px) {
    .otz-chiim-workbench.zodiac-workbench {
        grid-template-columns: minmax(520px, 680px) minmax(400px, 1fr);
        gap: 2.25rem;
        align-items: start;
    }

    .zodiac-diagram-frame {
        padding: 0.85rem;
    }

    .zodiac-svg {
        max-width: 660px;
    }
}

@media (min-width: 1240px) {
    .otz-chiim-workbench.zodiac-workbench {
        grid-template-columns: minmax(620px, 720px) 1fr;
        gap: 2.5rem;
    }

    .zodiac-svg {
        max-width: 700px;
    }
}

/* ==============================================================================
   12. FASE 3: LENTE DE INSPEÇÃO SIMBÓLICA ("DETALHES DA GRAVURA")
   ============================================================================== */

.symbolic-lens-viewport {
    position: relative;
    overflow: hidden;
    background-color: #080706;
}

.symbolic-lens-viewport .monograph-img {
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform-origin 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.symbolic-lens-viewport.is-lens-active .monograph-img {
    cursor: default;
}

.symbolic-lens-viewport.is-lens-active.is-zoomed .monograph-img {
    cursor: zoom-out;
}

.symbolic-hotspots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.symbolic-hotspots-layer[hidden] {
    display: none !important;
}

.symbolic-hotspot-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(10, 9, 8, 0.88);
    border: 1.5px solid var(--brass-leaf, #c8a86b);
    color: var(--text-ivory, #ede5d5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.78), 0 0 0 3px rgba(200, 168, 107, 0.16);
    transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.symbolic-hotspot-pin:hover,
.symbolic-hotspot-pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.14);
    background-color: #17140f;
    border-color: #e5c888;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.85), 0 0 0 5px rgba(200, 168, 107, 0.28);
}

.symbolic-hotspot-pin.is-active {
    background-color: var(--brass-leaf, #c8a86b);
    color: #0b0a08;
    border-color: #f3dfb1;
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(200, 168, 107, 0.34);
    z-index: 6;
}

/* Quando aproximado num símbolo, atenua discretamente os demais pinos para não poluir a pintura */
.symbolic-lens-viewport.is-zoomed .symbolic-hotspot-pin:not(.is-active) {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.88);
}

.symbolic-lens-viewport.is-zoomed .symbolic-hotspot-pin:not(.is-active):hover {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.06);
}

.pin-roman {
    font-family: var(--font-epigraph);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    font-style: normal;
}

.plate-lens-controls {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
}

.btn-toggle-symbolic-lens {
    width: 100%;
    background-color: #0f0e0b;
    border: 1px solid rgba(200, 168, 107, 0.42);
    color: var(--brass-leaf, #c8a86b);
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.68rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    font-style: normal;
}

.btn-toggle-symbolic-lens:hover,
.btn-toggle-symbolic-lens:focus-visible {
    background-color: rgba(200, 168, 107, 0.1);
    border-color: var(--brass-leaf, #c8a86b);
    color: var(--text-ivory, #ede5d5);
    outline: none;
}

.btn-toggle-symbolic-lens.is-active {
    background-color: rgba(200, 168, 107, 0.14);
    border-color: var(--brass-leaf, #c8a86b);
    color: var(--text-ivory, #ede5d5);
}

.symbolic-lens-console {
    margin-top: 0.75rem;
    background-color: #0c0b09;
    border: 1px solid rgba(200, 168, 107, 0.35);
    padding: 0.95rem 1rem;
    text-align: left;
}

.symbolic-lens-console[hidden] {
    display: none !important;
}

.lens-console-header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--line-hair, rgba(200, 168, 107, 0.16));
}

.lens-console-kicker {
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-muted, #9e8454);
    font-style: normal;
}

.lens-console-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.lens-tab-btn {
    background-color: #12100d;
    border: 1px solid rgba(200, 168, 107, 0.26);
    color: var(--text-stone, #bfb5a2);
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.36rem 0.62rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-style: normal;
}

.lens-tab-btn:hover,
.lens-tab-btn:focus-visible {
    border-color: var(--brass-leaf, #c8a86b);
    color: var(--text-ivory, #ede5d5);
    outline: none;
}

.lens-tab-btn.is-active {
    background-color: var(--brass-leaf, #c8a86b);
    border-color: var(--brass-leaf, #c8a86b);
    color: #0b0a08;
    font-weight: 600;
}

.lens-note-box {
    min-height: 4.2rem;
}

.lens-note-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.lens-note-heading[hidden] {
    display: none !important;
}

.lens-note-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.35rem;
    background-color: rgba(200, 168, 107, 0.16);
    border: 1px solid var(--brass-leaf, #c8a86b);
    color: var(--brass-leaf, #c8a86b);
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-style: normal;
}

.lens-note-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-ivory, #ede5d5);
    line-height: 1.25;
    margin: 0;
    font-style: normal;
}

.lens-note-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--text-stone, #bfb5a2);
    margin: 0;
    font-style: normal;
}

@media (max-width: 899px) {
    .monograph-plate-col {
        max-width: 310px;
    }
}

@media (min-width: 900px) {
    .monograph-layout {
        grid-template-columns: 330px 1fr;
    }
}





/* ==============================================================================
   13. FASE 4: DIGNIDADES ELEMENTAIS (CRUZ CÉLTICA) E GRAVURA DE ESTUDO
   ============================================================================== */

/* --- Botão de exportação (Monografia, Oráculo e Estações) --- */
.plate-export-row {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
}

.btn-export-plate {
    background-color: transparent;
    border: 1px solid rgba(200, 168, 107, 0.38);
    color: var(--brass-muted);
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-style: normal;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.monograph-plate-col .btn-export-plate {
    width: 100%;
}

.station-reading .btn-export-plate {
    display: block;
    margin: 0.85rem auto 0;
}

.btn-export-plate:hover,
.btn-export-plate:focus-visible {
    background-color: rgba(200, 168, 107, 0.1);
    border-color: var(--brass-leaf);
    color: var(--text-ivory);
    outline: none;
}

/* --- Harmonia Elemental do Jogo --- */
.celtic-harmony-wrap {
    max-width: 780px;
    margin: 3rem auto 0;
    animation: harmonyEnter 0.7s var(--ease-quiet) both;
}

@keyframes harmonyEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.harmony-unlocked-note {
    font-family: var(--font-epigraph);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brass-muted);
    text-align: center;
    margin-bottom: 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-brass);
}

.harmony-body {
    padding: 0.5rem 0 1.75rem;
}

.harmony-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin-bottom: 1.25rem;
}

.harmony-subtitle {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-ivory);
    margin: 1.5rem 0 0.85rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line-hair);
}

.harmony-pairs,
.harmony-bars {
    list-style: none;
    margin: 0;
    padding: 0;
}

.harmony-pair {
    background-color: #0c0b09;
    border: 1px solid var(--line-hair);
    border-left-width: 3px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.7rem;
}

.harmony-pair.is-same,
.harmony-pair.is-friend  { border-left-color: var(--brass-leaf); }
.harmony-pair.is-enemy   { border-left-color: #8c4a3c; }
.harmony-pair.is-neutral { border-left-color: var(--text-faint); }

.harmony-pair-stations {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.harmony-pair-roman {
    font-family: var(--font-epigraph);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: var(--brass-leaf);
}

.harmony-pair-x {
    color: var(--text-faint);
    font-size: 0.8rem;
}

.harmony-pair-names {
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-left: 0.3rem;
}

.harmony-pair-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-ivory);
    margin-bottom: 0.6rem;
}

.harmony-pair-verdict {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.harmony-pair-verdict p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-stone);
}

.harmony-badge {
    flex: 0 0 auto;
    font-family: var(--font-epigraph);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    border: 1px solid var(--line-brass);
    color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.08);
    font-style: normal;
}

.harmony-badge.is-enemy {
    color: #d49a8a;
    border-color: rgba(140, 74, 60, 0.7);
    background-color: rgba(140, 74, 60, 0.12);
}

.harmony-badge.is-neutral {
    color: var(--text-stone);
    border-color: var(--line-hair);
    background-color: transparent;
}

.harmony-summary {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--text-parchment);
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line-brass);
    border-bottom: 1px solid var(--line-brass);
    text-align: center;
}

/* Barras dos quatro elementos */
.harmony-bar-row {
    display: grid;
    grid-template-columns: 7.2rem 1fr 5.4rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.4rem 0;
}

.harmony-bar-label {
    font-family: var(--font-epigraph);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-parchment);
}

.harmony-glyph {
    display: inline-block;
    width: 1.1em;
    color: var(--brass-leaf);
}

.harmony-bar-track {
    display: block;
    height: 6px;
    background-color: #1b1815;
    border: 1px solid var(--line-hair);
}

.harmony-bar-fill {
    display: block;
    height: 100%;
    background-color: var(--brass-muted);
    transition: width 0.8s var(--ease-quiet);
}

.harmony-bar-row.is-leader .harmony-bar-fill { background-color: var(--brass-soft); }
.harmony-bar-row.is-absent .harmony-bar-label { color: var(--text-faint); }

.harmony-bar-count {
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: right;
}

.harmony-notes {
    margin-top: 0.85rem;
}

.harmony-notes p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-stone);
    margin: 0 0 0.55rem;
}

.harmony-rule {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-faint);
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-hair);
}

/* --- Modal da Gravura de Estudo --- */
.share-plate-modal {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.share-plate-modal[hidden] {
    display: none;
}

.share-plate-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(6, 5, 4, 0.92);
}

.share-plate-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    background-color: #0d0c0a;
    border: 1px solid var(--line-brass);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8);
}

.share-plate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line-hair);
}

.share-plate-title {
    font-family: var(--font-epigraph);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass-muted);
    margin: 0;
    font-style: normal;
}

.share-plate-x {
    background: transparent;
    border: 1px solid var(--line-hair);
    color: var(--text-stone);
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.share-plate-x:hover,
.share-plate-x:focus-visible {
    color: var(--text-ivory);
    border-color: var(--brass-leaf);
    outline: none;
}

.share-plate-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-plate-status {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-stone);
    margin: 2.5rem 0;
    text-align: center;
}

.share-plate-status[hidden],
.share-plate-preview[hidden] {
    display: none;
}

.share-plate-preview {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 68vh;
    height: auto;
    border: 1px solid var(--line-hair);
}

.share-plate-actions {
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--line-hair);
}

.btn-share-action {
    flex: 1 1 0;
    background-color: rgba(200, 168, 107, 0.1);
    border: 1px solid var(--line-brass);
    color: var(--brass-soft);
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-style: normal;
    padding: 0.8rem 0.6rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-share-action[hidden] {
    display: none;
}

.btn-share-action:hover:not(:disabled),
.btn-share-action:focus-visible {
    background-color: var(--brass-leaf);
    color: #0b0a08;
    outline: none;
}

.btn-share-action:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 639px) {
    .harmony-bar-row {
        grid-template-columns: 5.6rem 1fr 4.4rem;
        gap: 0.5rem;
    }

    .harmony-bar-label { font-size: 0.6rem; letter-spacing: 0.08em; }
    .harmony-pair-verdict { flex-direction: column; gap: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .celtic-harmony-wrap { animation: none; }
    .harmony-bar-fill { transition: none; }
}


/* ==============================================================================
   14. FASE 5: CANAL DE CONEXÃO & EGRÉGORA VIVA (REDE NEURAL)
   ============================================================================== */
.connection-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    box-sizing: border-box;
}

.connection-header {
    margin-bottom: 1.75rem;
}

.connection-kicker {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    margin-bottom: 0.4rem;
}

.connection-title {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--text-ivory);
    margin-bottom: 0.5rem;
}

.connection-sub {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-stone);
    max-width: 650px;
    margin: 0 auto 1.5rem;
}

.connection-presence-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: #12100d;
    border: 1px solid rgba(200, 168, 107, 0.4);
    padding: 0.45rem 0.95rem;
    border-radius: 20px;
    font-family: var(--font-epigraph);
    font-size: 0.72rem;
    color: var(--text-stone);
}

.presence-pulse {
    width: 8px;
    height: 8px;
    background-color: #55c777;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(85, 199, 119, 0.8);
    animation: presenceBlink 2.2s infinite ease-in-out;
}

@keyframes presenceBlink {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.35); opacity: 0.45; }
}

.presence-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.presence-name {
    color: var(--brass-leaf);
    font-weight: 600;
}

.presence-city {
    color: var(--text-parchment);
}

.presence-sep {
    color: var(--text-faint);
}

.btn-presence-edit {
    background: transparent;
    border: none;
    color: var(--brass-leaf);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 0 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-presence-edit:hover {
    color: #fff;
    transform: scale(1.18);
}

.connection-stats-chips {
    display: inline-flex;
    gap: 0.8rem;
}

.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background-color: rgba(18, 16, 13, 0.8);
    border: 1px solid var(--line-hair);
    padding: 0.45rem 0.85rem;
    border-radius: 20px;
}

.stat-chip-num {
    font-family: var(--font-epigraph);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brass-leaf);
}

.stat-chip-lbl {
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Palco da Rede: Tela Plena e Imersiva */
.connection-stage-wrapper {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.connection-canvas-box {
    position: relative;
    width: 100%;
    background-color: #080706;
    border: 1px solid var(--line-brass);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
    min-height: 680px;
}

.connection-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Botão Flutuante Discreto para Abrir/Recolher o Chat */
.btn-toggle-float-chat {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 25;
    background-color: #12100d;
    border: 1.5px solid var(--brass-leaf);
    color: var(--text-ivory);
    padding: 0.65rem 1.15rem;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.75), 0 0 10px rgba(200, 168, 107, 0.25);
    transition: all 0.25s ease;
}

.btn-toggle-float-chat:hover {
    background-color: #1c1813;
    border-color: #f3dfb1;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.85), 0 0 14px rgba(200, 168, 107, 0.35);
}

.btn-toggle-float-chat.is-active {
    background-color: var(--brass-leaf);
    color: #0b0a08;
}

.float-chat-icon {
    font-size: 1rem;
}

.float-chat-label {
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.float-chat-badge {
    background-color: #d42a2a;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    line-height: 1;
}

/* Painel de Chat Flutuante, Translúcido e Recolhível */
.connection-chat-panel.is-floating {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-width: calc(100% - 48px);
    height: 520px;
    max-height: calc(100% - 48px);
    background-color: rgba(12, 11, 9, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-brass);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.9), 0 0 15px rgba(200, 168, 107, 0.18);
    z-index: 30;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.connection-chat-panel.is-floating.is-collapsed {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-minimize-chat {
    background: transparent;
    border: 1px solid var(--line-hair);
    color: var(--text-stone);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.btn-minimize-chat:hover {
    color: #fff;
    border-color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.15);
}

/* Balão do Crowley */
.crowley-speech-bubble {
    position: absolute;
    transform: translate(-50%, -100%);
    background-color: rgba(18, 16, 13, 0.94);
    border: 1.5px solid var(--brass-leaf);
    padding: 0.65rem 1rem;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 14px rgba(200, 168, 107, 0.25);
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.crowley-speech-bubble.is-changing {
    opacity: 0;
    transform: translate(-50%, -115%);
}

.bubble-tail {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--brass-leaf);
}

.bubble-text {
    font-family: var(--font-epigraph);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-ivory);
    margin: 0;
}

.connection-stage-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(10, 9, 8, 0.82);
    border: 1px solid var(--line-hair);
    padding: 0.35rem 0.85rem;
    font-family: var(--font-epigraph);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    pointer-events: none;
    border-radius: 14px;
    white-space: nowrap;
}

/* Painel de Chat Lateral */
.connection-chat-panel {
    background-color: #0c0b09;
    border: 1px solid var(--line-brass);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    height: 600px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line-hair);
    background-color: rgba(18, 16, 13, 0.8);
}

.chat-target-mode {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    margin-bottom: 0.2rem;
}

.chat-target-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-ivory);
    margin: 0;
}

.btn-close-direct {
    background: transparent;
    border: 1px solid var(--line-hair);
    color: var(--text-stone);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-direct:hover {
    color: #fff;
    border-color: var(--brass-leaf);
    background-color: rgba(200, 168, 107, 0.15);
}

.chat-panel-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-empty-hint {
    font-family: var(--font-epigraph);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--text-faint);
    margin: auto 0;
    text-transform: uppercase;
}

.chat-bubble-row {
    display: flex;
    width: 100%;
}

.chat-bubble-row.is-me {
    justify-content: flex-end;
}

.chat-bubble-row.is-other {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.65rem 0.85rem;
    border-radius: 4px;
    background-color: #161410;
    border: 1px solid var(--line-hair);
}

.chat-bubble-row.is-me .chat-bubble {
    background-color: rgba(200, 168, 107, 0.12);
    border-color: rgba(200, 168, 107, 0.38);
}

.chat-bubble-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-epigraph);
    font-size: 0.54rem;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 0.25rem;
}

.chat-bubble-author {
    color: var(--brass-leaf);
    font-weight: 600;
}

.chat-bubble-city {
    color: var(--text-stone);
}

.chat-direct-tag {
    background-color: var(--brass-leaf);
    color: #0a0907;
    padding: 0.1rem 0.35rem;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

.chat-bubble-time {
    margin-left: auto;
}

.chat-bubble-text {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-parchment);
    margin: 0;
    word-break: break-word;
}

.chat-panel-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line-hair);
    background-color: #0f0e0b;
}

.chat-input {
    width: 100%;
    background-color: #14120e;
    border: 1px solid var(--line-hair);
    color: var(--text-ivory);
    font-family: var(--font-body);
    font-size: 0.92rem;
    padding: 0.65rem 0.8rem;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-input:focus {
    border-color: var(--brass-leaf);
}

.btn-chat-transmit {
    background-color: rgba(200, 168, 107, 0.15);
    border: 1px solid var(--brass-leaf);
    color: var(--text-ivory);
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-chat-transmit:hover {
    background-color: var(--brass-leaf);
    color: #0b0a08;
}

.chat-panel-footer {
    padding: 0.4rem 1rem 0.6rem;
    text-align: center;
    border-top: 1px solid rgba(222, 195, 143, 0.08);
}

.chat-panel-footer p {
    font-family: var(--font-epigraph);
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin: 0;
}

/* Modal de Presença */
.connection-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.connection-modal[hidden] {
    display: none !important;
}

.connection-modal-dialog {
    background-color: #0e0d0b;
    border: 1px solid var(--brass-leaf);
    max-width: 440px;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.9);
}

.connection-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line-hair);
    padding-bottom: 0.6rem;
}

.modal-title-classical {
    font-family: var(--font-epigraph);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-leaf);
    margin: 0;
}

.form-group-classical {
    margin-bottom: 1rem;
}

.form-group-classical label {
    display: block;
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-stone);
    margin-bottom: 0.35rem;
}

.input-classical {
    width: 100%;
    background-color: #14120e;
    border: 1px solid var(--line-hair);
    color: var(--text-ivory);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.55rem 0.75rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-classical:focus {
    border-color: var(--brass-leaf);
}

.select-classical {
    cursor: pointer;
}

.connection-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-hair);
}

.btn-modal-cancel {
    background: transparent;
    border: 1px solid var(--line-hair);
    color: var(--text-stone);
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
}

.btn-modal-save {
    background-color: var(--brass-leaf);
    border: 1px solid var(--brass-leaf);
    color: #0b0a08;
    font-family: var(--font-epigraph);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-modal-save:hover {
    background-color: #f3dfb1;
}

@media (max-width: 640px) {
    .connection-title {
        font-size: 1.85rem;
    }
    .crowley-speech-bubble {
        white-space: normal;
        max-width: 250px;
    }
    .chat-panel-messages {
        max-height: 280px;
    }
}