/* ============================================
   THE SEVEN REALMS v2 — Empire Stylesheet
   Full-bleed backgrounds, breathing colors, no scroll
   ============================================ */

/* === CSS VARIABLES — Empire Default === */
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: rgba(20, 20, 30, 0.85);
    --text-primary: #e8e6e3;
    --text-secondary: #a09b96;
    --text-muted: #6b6560;
    --accent-gold: #c9a227;
    --accent-warm: #b8860b;
    --border-subtle: rgba(255,255,255,0.08);
    --border-glow: rgba(201, 162, 39, 0.3);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(201, 162, 39, 0.15);
    --font-display: 'Cinzel', serif;
    --font-body: 'Crimson Text', serif;
    --font-ui: 'Inter', sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === 7 TRADITION THEMES WITH BREATHING COLORS === */

/* Tibetan — Gold & Red */
.theme-tibetan {
    --accent-gold: #c9a227;
    --accent-warm: #8b0000;
    --border-glow: rgba(201, 162, 39, 0.3);
    --shadow-glow: 0 0 20px rgba(201, 162, 39, 0.15);
}

/* Celtic — Forest Green */
.theme-celtic {
    --accent-gold: #2d8a4e;
    --accent-warm: #1a5c32;
    --border-glow: rgba(45, 138, 78, 0.3);
    --shadow-glow: 0 0 20px rgba(45, 138, 78, 0.15);
}

/* Mayan — Fire Orange */
.theme-mayan {
    --accent-gold: #e85d04;
    --accent-warm: #9d0208;
    --border-glow: rgba(232, 93, 4, 0.3);
    --shadow-glow: 0 0 20px rgba(232, 93, 4, 0.15);
}

/* Native American — Earth Bronze */
.theme-native-american {
    --accent-gold: #b07d62;
    --accent-warm: #8b4513;
    --border-glow: rgba(176, 125, 98, 0.3);
    --shadow-glow: 0 0 20px rgba(176, 125, 98, 0.15);
}

/* African — Gold & Earth */
.theme-african {
    --accent-gold: #e9c46a;
    --accent-warm: #b08968;
    --border-glow: rgba(233, 196, 106, 0.3);
    --shadow-glow: 0 0 20px rgba(233, 196, 106, 0.15);
}

/* Baltic — Ice Blue */
.theme-baltic {
    --accent-gold: #4a90e2;
    --accent-warm: #2c5282;
    --border-glow: rgba(74, 144, 226, 0.3);
    --shadow-glow: 0 0 20px rgba(74, 144, 226, 0.15);
}

/* Egyptian — Gold & Lapis */
.theme-egyptian {
    --accent-gold: #d4af37;
    --accent-warm: #1e3a5f;
    --border-glow: rgba(212, 175, 55, 0.3);
    --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.15);
}

/* === BREATHING COLOR ANIMATIONS === */

@keyframes breathe-gold {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(201,162,39,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(184,134,11,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(139,0,0,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(201,162,39,0.07) 0%, transparent 60%); }
}

@keyframes breathe-green {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(45,138,78,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(34,102,58,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(26,92,50,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(45,138,78,0.07) 0%, transparent 60%); }
}

@keyframes breathe-orange {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(232,93,4,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(200,70,3,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(157,2,8,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(232,93,4,0.07) 0%, transparent 60%); }
}

@keyframes breathe-bronze {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(176,125,98,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(139,90,43,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(107,70,30,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(176,125,98,0.07) 0%, transparent 60%); }
}

@keyframes breathe-earth {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(233,196,106,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(200,170,90,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(176,137,104,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(233,196,106,0.07) 0%, transparent 60%); }
}

@keyframes breathe-blue {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(74,144,226,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(60,120,200,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(44,82,130,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(74,144,226,0.07) 0%, transparent 60%); }
}

@keyframes breathe-lapis {
    0%, 100% { background: radial-gradient(ellipse at 30% 70%, rgba(212,175,55,0.08) 0%, transparent 60%); }
    25% { background: radial-gradient(ellipse at 50% 50%, rgba(180,150,40,0.06) 0%, transparent 60%); }
    50% { background: radial-gradient(ellipse at 70% 30%, rgba(30,58,95,0.05) 0%, transparent 60%); }
    75% { background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.07) 0%, transparent 60%); }
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden; /* NO SCROLL */
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* === BACKGROUND LAYERS === */
.bg-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.bg-image {
    background-size: cover;
    background-position: center;
    transition: background-image 3s ease-in-out, opacity 3s ease-in-out;
    opacity: 0.15;
}

.bg-veil {
    background: linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.7) 50%, rgba(10,10,15,0.95) 100%);
    z-index: 1;
}

.bg-color-wash {
    z-index: 2;
    animation: breathe-gold 15s ease-in-out infinite;
    transition: animation 2s ease-in-out;
}

.theme-tibetan .bg-color-wash { animation-name: breathe-gold; }
.theme-celtic .bg-color-wash { animation-name: breathe-green; }
.theme-mayan .bg-color-wash { animation-name: breathe-orange; }
.theme-native-american .bg-color-wash { animation-name: breathe-bronze; }
.theme-african .bg-color-wash { animation-name: breathe-earth; }
.theme-baltic .bg-color-wash { animation-name: breathe-blue; }
.theme-egyptian .bg-color-wash { animation-name: breathe-lapis; }

.bg-particles {
    z-index: 3;
}

/* === NAVIGATION === */
.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    transition: var(--transition-smooth);
    height: 50px;
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-decoration: none;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-links a {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--accent-gold);
    transition: var(--transition-smooth);
}

.nav-links a:hover { color: var(--accent-gold); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.3rem;
    cursor: pointer;
}

/* === CULTURAL BANNER === */
.cultural-banner {
    position: fixed;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(45, 138, 78, 0.15);
    border: 1px solid rgba(45, 138, 78, 0.3);
    border-radius: 8px;
    padding: 12px 20px;
    max-width: 700px;
    width: 90%;
}

.cultural-banner p {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #7dd3a0;
    text-align: center;
    font-style: italic;
}

/* === CORNER MEDALLIONS === */
.medallion-cluster {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.medallion-cluster.top-left { top: 60px; left: 16px; }
.medallion-cluster.top-right { top: 60px; right: 16px; }

.medallion {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.medallion:hover {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-glow);
    transform: scale(1.1);
}

/* === RETURN BAR === */
.return-bar {
    position: fixed;
    top: 50px; left: 60px; right: 60px;
    z-index: 90;
    display: flex;
    gap: 16px;
    padding: 8px 0;
}

.return-link {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.return-link:hover { color: var(--accent-gold); }

/* === AD SLOTS === */
.ad-slot {
    position: fixed;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-top {
    top: 50px; left: 50%;
    transform: translateX(-50%);
    width: 728px; height: 90px;
    max-width: 90vw;
}

.ad-sidebar {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px; height: 250px;
}

.ad-bottom {
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    width: 728px; height: 90px;
    max-width: 90vw;
}

.ad-placeholder {
    width: 100%; height: 100%;
    background: var(--bg-card);
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === MAIN STAGE === */
.main-stage {
    position: fixed;
    top: 90px; left: 0; right: 0; bottom: 40px;
    z-index: 10;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
}

/* === GATEWAY (LANDING) === */
.gateway-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gateway-inner {
    position: relative;
    width: 100%; max-width: 1000px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Center Seal */
.gateway-seal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 120px; height: 120px;
}

.seal-ring {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 4s ease-in-out infinite;
}

.seal-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seal-symbol { font-size: 2rem; }
.seal-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-gold);
}

@keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

/* Realm Ring */
.realm-ring {
    position: relative;
    width: 420px; height: 420px;
}

.realm-card-gateway {
    position: absolute;
    top: 50%; left: 50%;
    width: 100px; height: 130px;
    margin-top: -65px; margin-left: -50px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.realm-card-gateway-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.realm-card-gateway:hover .realm-card-gateway-inner {
    border-color: var(--border-glow);
    box-shadow: var(--shadow-glow);
    transform: scale(1.08);
}

.realm-gateway-icon { font-size: 2rem; margin-bottom: 6px; }
.realm-gateway-name {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Position cards in circle using CSS transform */
.realm-card-gateway:nth-child(1) { transform: rotate(0deg) translateY(-220px) rotate(0deg); }
.realm-card-gateway:nth-child(2) { transform: rotate(51.4deg) translateY(-220px) rotate(-51.4deg); }
.realm-card-gateway:nth-child(3) { transform: rotate(102.8deg) translateY(-220px) rotate(-102.8deg); }
.realm-card-gateway:nth-child(4) { transform: rotate(154.2deg) translateY(-220px) rotate(-154.2deg); }
.realm-card-gateway:nth-child(5) { transform: rotate(205.6deg) translateY(-220px) rotate(-205.6deg); }
.realm-card-gateway:nth-child(6) { transform: rotate(257deg) translateY(-220px) rotate(-257deg); }
.realm-card-gateway:nth-child(7) { transform: rotate(308.4deg) translateY(-220px) rotate(-308.4deg); }

/* Title Block */
.gateway-title-block {
    position: absolute;
    bottom: 80px;
    text-align: center;
}

.gateway-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-shadow: 0 0 30px rgba(201, 162, 39, 0.3);
}

.gateway-tagline {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Bottom Actions */
.gateway-actions {
    position: absolute;
    bottom: 20px;
    display: flex;
    gap: 12px;
}

/* === SISTER SITES === */
.sisters-stage {
    position: fixed;
    top: 50px;
    left: 0; right: 0;
    z-index: 900;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 24px;
    display: flex;
    justify-content: center;
}

.sisters-inner { text-align: center; }
.sisters-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sisters-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1100px;
}

.sister-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.sister-card:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.25);
    transform: translateY(-4px);
}

.sister-status {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

.status-live { background: rgba(45, 138, 78, 0.2); color: #7dd3a0; }

.sister-name {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* === PORTAL (TRADITION HUB) === */
.portal-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.portal-header { text-align: center; }

.portal-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--accent-gold);
    margin-bottom: 8px;
}

.portal-tagline {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 6 Doors */
.portal-doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 600px;
}

.portal-door {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px 16px;
    text-decoration: none;
    text-align: center;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.portal-door:hover {
    border-color: var(--border-glow);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}

.door-icon { font-size: 2rem; }
.door-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.door-count {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Featured Story */
.featured-story {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    max-width: 500px;
    text-align: center;
}

.story-badge {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
}

.story-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.story-summary {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* === SACRED SIGNS STAGE === */
.signs-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signs-inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.signs-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 4px;
}

.signs-count {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.signs-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

.coin-card-stage {
    text-decoration: none;
    display: block;
    aspect-ratio: 3/4;
}

.coin-card-stage-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: var(--transition-smooth);
}

.coin-card-stage:hover .coin-card-stage-inner {
    border-color: var(--border-glow);
    box-shadow: var(--shadow-glow);
    transform: scale(1.05);
}

.coin-symbol-big { font-size: 2.5rem; margin-bottom: 8px; }
.coin-name-stage {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}
.coin-meta-stage {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pagination Dots */
.pagination-dots {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pagination-dots .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-subtle);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.pagination-dots .dot.active,
.pagination-dots .dot:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

/* === COIN/SECTION/STORY STAGE === */
.stage-coin, .stage-section, .stage-story {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 16px 0;
}

.stage-coin-inner, .stage-section-inner, .stage-story-inner {
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.stage-symbol {
    font-size: 5rem;
    line-height: 1;
}

.stage-name {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
}

.stage-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.stage-badge {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    padding: 4px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stage-reading {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
}

.stage-teaching {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    margin-top: 8px;
    text-align: left;
}

.stage-teaching h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 8px;
}

.stage-teaching p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Related Stories */
.stage-related {
    width: 100%;
    max-width: 600px;
}

.stage-related h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
    text-align: left;
}

.related-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 16px;
    text-decoration: none;
    margin-bottom: 8px;
    transition: var(--transition-smooth);
}

.related-card:hover {
    border-color: var(--border-glow);
    transform: translateX(4px);
}

.related-badge {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

.related-badge.hidden-truth {
    background: rgba(139, 0, 0, 0.2);
    color: #e8a0a0;
}

.related-title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Museum Preview */
.museum-preview {
    width: 100%;
    max-width: 600px;
    text-align: left;
}

.museum-preview h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 12px;
}

.museum-card {
    display: flex;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
}

.museum-thumb {
    width: 80px; height: 80px;
    background: var(--bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.museum-info h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.museum-info p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Stage Navigation */
.stage-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.nav-btn {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.nav-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.stage-counter {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.stage-counter span:first-child { color: var(--accent-gold); font-size: 1.1rem; }

/* Section Number Big */
.section-number-big {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: var(--accent-gold);
    opacity: 0.3;
    line-height: 1;
}

/* === STORIES ARCHIVE === */
.stories-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.stories-inner {
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.stories-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.stories-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.story-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.cat-btn {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.cat-btn:hover, .cat-btn.active {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-color: var(--accent-gold);
}

.stories-list-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.story-card-stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    transition: var(--transition-smooth);
    text-align: left;
}

.story-card-stage:hover {
    border-color: var(--border-glow);
    transform: translateX(4px);
}

.story-card-badge {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
    width: fit-content;
}

.story-card-badge.hidden-truth {
    background: rgba(139, 0, 0, 0.2);
    color: #e8a0a0;
}

.story-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.story-card-teaching {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Hidden Truth Banner */
.hidden-truth-banner {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 6px 16px;
    background: rgba(139, 0, 0, 0.2);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 20px;
    color: #e8a0a0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Story Teaching Box */
.story-teaching-box {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 12px 12px 0;
    padding: 20px;
    text-align: left;
    max-width: 600px;
    width: 100%;
}

.story-teaching-box h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 8px;
}

.story-teaching-box p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Story Tale */
.story-tale {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 600px;
    text-align: left;
}

.story-tale p { margin-bottom: 12px; }

/* === SECTIONS LIST === */
.sections-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sections-inner {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sections-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.sections-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.sections-list-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-card-stage {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.section-card-stage:hover {
    border-color: var(--border-glow);
    transform: translateX(4px);
}

.section-number-stage {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--accent-gold);
    opacity: 0.5;
    min-width: 30px;
    text-align: center;
}

.section-info-stage { flex: 1; text-align: left; }
.section-info-stage h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.section-info-stage p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.section-arrow-stage {
    font-size: 1.3rem;
    color: var(--accent-gold);
    opacity: 0;
    transition: var(--transition-smooth);
}

.section-card-stage:hover .section-arrow-stage { opacity: 1; }

/* === GALLERY === */
.gallery-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.gallery-inner {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.gallery-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.gallery-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.gallery-filters-stage {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-framed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
}

.gallery-framed-item {
    position: relative;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.gallery-framed-item:hover { transform: scale(1.03); }

.frame-border {
    border: 2px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px;
    background: var(--bg-card);
    transition: var(--transition-smooth);
}

.gallery-framed-item:hover .frame-border {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-glow);
}

.frame-border img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.frame-overlay {
    position: absolute;
    bottom: 8px; left: 8px; right: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.7);
    border-radius: 4px;
    opacity: 0;
    transition: var(--transition-smooth);
    text-align: center;
}

.gallery-framed-item:hover .frame-overlay { opacity: 1; }

.frame-overlay span {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gallery-empty-stage {
    text-align: center;
    padding: 40px;
}

.gallery-empty-icon { font-size: 3rem; margin-bottom: 16px; }

/* === ORACLE === */
.oracle-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oracle-inner {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.oracle-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.oracle-date {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.engine-context {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.engine-badge {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--accent-gold);
}

.oracle-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.oracle-card-stage {
    position: relative;
    width: 200px; height: 280px;
    perspective: 1000px;
}

.oracle-card-back, .oracle-card-front {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.oracle-card-back {
    background: var(--bg-card);
    border: 2px solid var(--accent-gold);
    font-size: 3rem;
    color: var(--accent-gold);
}

.oracle-card-front {
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    transform: rotateY(180deg);
    padding: 20px;
}

.oracle-card-stage:hover .oracle-card-back { transform: rotateY(180deg); }
.oracle-card-stage:hover .oracle-card-front { transform: rotateY(360deg); }
.oracle-card-stage.flipped .oracle-card-back { transform: rotateY(180deg); }
.oracle-card-stage.flipped .oracle-card-front { transform: rotateY(360deg); }

.oracle-card-symbol { font-size: 3rem; margin-bottom: 8px; }
.oracle-card-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.oracle-card-tradition {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.oracle-card-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.oracle-note {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* === THEATER === */
.theater-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theater-inner {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.theater-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent-gold);
}

.theater-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.theater-warning-stage {
    background: rgba(139, 0, 0, 0.15);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    max-width: 500px;
}

.theater-warning-stage p {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #e8a0a0;
    line-height: 1.5;
}

.theater-controls-stage { margin: 8px 0; }

.theater-info-stage {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    max-width: 500px;
}

.theater-info-stage h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.theater-info-stage p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Theater Container (fullscreen overlay) */
.theater-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    display: none;
    background: #000;
}

.theater-container.active { display: block; }

.theater-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.1s;
}

.theater-light-warm, .theater-light-cool, .theater-grain {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.theater-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.theater-exit {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 10px 24px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-smooth);
    z-index: 10001;
}

.theater-exit:hover {
    background: rgba(255,255,255,0.2);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* === SEARCH === */
.search-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.search-inner {
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.search-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
}

.search-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.search-form-stage {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}

.search-input-stage {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition-smooth);
}

.search-input-stage:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
}

.search-input-stage::placeholder { color: var(--text-muted); }

.search-results-stage { width: 100%; }

.search-count {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-align: center;
}

.results-list-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-item-stage {
    display: flex;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px;
    transition: var(--transition-smooth);
}

.result-item-stage:hover {
    border-color: var(--border-glow);
    transform: translateX(4px);
}

.result-type-badge {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-radius: 4px;
    height: fit-content;
    white-space: nowrap;
}

.result-type-badge.type-story { background: #8b0000; }
.result-type-badge.type-section { background: #2c5282; }

.result-info-stage { flex: 1; text-align: left; }
.result-info-stage h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: 4px;
}
.result-info-stage h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}
.result-info-stage h3 a:hover { color: var(--accent-gold); }

.result-tradition {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.result-info-stage p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.popular-searches-stage { margin-top: 16px; text-align: center; }
.popular-searches-stage h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.search-tags-stage {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.search-tag {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.search-tag:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-color: var(--accent-gold);
}

/* === ABOUT === */
.about-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.about-inner {
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.about-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 8px;
}

.about-content-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-block-stage {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}

.about-block-stage h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.about-block-stage p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
}

.about-traditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.about-tradition-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
}

.about-tradition-card h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin-bottom: 4px;
}

.about-tradition-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* === LEGAL === */
.legal-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.legal-inner { max-width: 700px; width: 100%; padding: 16px 0; }
.legal-inner h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 6px;
}
.legal-date {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.legal-content-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-content-stage h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.legal-content-stage p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.legal-content-stage ul {
    list-style: none;
    padding: 0;
    margin-bottom: 8px;
}

.legal-content-stage ul li {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.legal-content-stage ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    opacity: 0.5;
}

/* === ERROR === */
.error-stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-inner {
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.error-code {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 900;
    color: var(--accent-gold);
    opacity: 0.2;
    line-height: 1;
}

.error-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-primary);
}

.error-message {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.error-actions-stage {
    display: flex;
    gap: 12px;
}

/* === BUTTONS === */
.btn {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: var(--transition-smooth);
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    text-align: center;
}

.btn-primary {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-color: var(--accent-gold);
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

.btn-secondary:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
    transform: translateY(-2px);
}

.btn-gateway {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    font-size: 0.75rem;
    padding: 8px 16px;
}

.btn-gateway:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.btn-story {
    background: transparent;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
    font-size: 0.8rem;
    padding: 8px 16px;
}

.btn-story:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.btn-theater {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-color: var(--accent-gold);
    font-size: 1rem;
    padding: 14px 32px;
}

.btn-theater:hover {
    background: transparent;
    color: var(--accent-gold);
    box-shadow: var(--shadow-glow);
}

.btn-search {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-color: var(--accent-gold);
}

.btn-search:hover {
    background: transparent;
    color: var(--accent-gold);
}

.btn-museum {
    background: transparent;
    color: var(--accent-gold);
    border-color: var(--accent-gold);
    font-size: 0.75rem;
    padding: 6px 12px;
}

.btn-museum:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

/* === MODAL === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

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

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-close {
    position: absolute;
    top: -40px; right: 0;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.modal-close:hover { color: var(--accent-gold); }

.modal-caption {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 12px;
}

/* === FOOTER === */
.empire-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    border-top: 1px solid var(--border-subtle);
    background: rgba(10, 10, 15, 0.9);
    padding: 8px 24px;
    height: 40px;
    display: flex;
    align-items: center;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-left p {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.footer-small {
    font-size: 0.65rem !important;
    color: var(--text-muted);
    opacity: 0.7;
}

.footer-right {
    display: flex;
    gap: 16px;
}

.footer-right a {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-right a:hover { color: var(--accent-gold); }

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* === SELECTION === */
::selection {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .ad-sidebar { display: none; }
    .main-stage { padding: 16px 60px; }
    .realm-ring { width: 400px; height: 400px; }
    .realm-card-gateway { width: 80px; height: 110px; margin-top: -55px; margin-left: -40px; }
    .realm-card-gateway:nth-child(1) { transform: rotate(0deg) translateY(-170px) rotate(0deg); }
    .realm-card-gateway:nth-child(2) { transform: rotate(51.4deg) translateY(-170px) rotate(-51.4deg); }
    .realm-card-gateway:nth-child(3) { transform: rotate(102.8deg) translateY(-170px) rotate(-102.8deg); }
    .realm-card-gateway:nth-child(4) { transform: rotate(154.2deg) translateY(-170px) rotate(-154.2deg); }
    .realm-card-gateway:nth-child(5) { transform: rotate(205.6deg) translateY(-170px) rotate(-205.6deg); }
    .realm-card-gateway:nth-child(6) { transform: rotate(257deg) translateY(-170px) rotate(-257deg); }
    .realm-card-gateway:nth-child(7) { transform: rotate(308.4deg) translateY(-170px) rotate(-308.4deg); }
    .signs-grid { grid-template-columns: repeat(4, 1fr); }
    .portal-doors { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .nav-links { display: none; position: absolute; top: 50px; left: 0; right: 0; background: rgba(10,10,15,0.95); flex-direction: column; padding: 20px; gap: 12px; border-bottom: 1px solid var(--border-subtle); }
    .nav-links.active { display: flex; }
    .nav-toggle { display: block; }
    .main-stage { padding: 16px 20px; top: 50px; }
    .medallion-cluster { display: none; }
    .return-bar { left: 16px; right: 16px; }
    .realm-ring { width: 300px; height: 300px; }
    .realm-card-gateway { width: 70px; height: 90px; margin-top: -45px; margin-left: -35px; }
    .realm-card-gateway:nth-child(1) { transform: rotate(0deg) translateY(-130px) rotate(0deg); }
    .realm-card-gateway:nth-child(2) { transform: rotate(51.4deg) translateY(-130px) rotate(-51.4deg); }
    .realm-card-gateway:nth-child(3) { transform: rotate(102.8deg) translateY(-130px) rotate(-102.8deg); }
    .realm-card-gateway:nth-child(4) { transform: rotate(154.2deg) translateY(-130px) rotate(-154.2deg); }
    .realm-card-gateway:nth-child(5) { transform: rotate(205.6deg) translateY(-130px) rotate(-205.6deg); }
    .realm-card-gateway:nth-child(6) { transform: rotate(257deg) translateY(-130px) rotate(-257deg); }
    .realm-card-gateway:nth-child(7) { transform: rotate(308.4deg) translateY(-130px) rotate(-308.4deg); }
    .gateway-title { font-size: 1.5rem; }
    .gateway-tagline { font-size: 0.75rem; }
    .signs-grid { grid-template-columns: repeat(3, 1fr); }
    .portal-doors { grid-template-columns: 1fr; }
    .portal-title { font-size: 1.8rem; }
    .stage-name { font-size: 1.5rem; }
    .stage-symbol { font-size: 3rem; }
    .error-code { font-size: 4rem; }
    .gallery-framed-grid { grid-template-columns: repeat(2, 1fr); }
    .museum-card { flex-direction: column; }
    .about-traditions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .signs-grid { grid-template-columns: repeat(2, 1fr); }
    .realm-gateway-name { font-size: 0.6rem; }
    .realm-gateway-icon { font-size: 1.5rem; }
    .gateway-actions { flex-direction: column; gap: 8px; }
    .btn-gateway { width: 100%; }
    .stage-nav { flex-direction: column; gap: 8px; }
    .nav-btn { width: 100%; text-align: center; }
    .gallery-framed-grid { grid-template-columns: 1fr; }
}
/* ============================================
/* ============================================
/* ============================================
   GATEWAY v4 — Match Reference Image
   Big circles, full background, center seal
   ============================================ */

/* Full cosmic background */
.gateway-stage {
    min-height: calc(100vh - 90px);
    padding-bottom: 60px;
    background: 
        radial-gradient(ellipse at center, rgba(10,6,20,0.3) 0%, rgba(6,6,10,0.85) 100%),
        url('/static/img/gateway-bg.jpg') center/cover no-repeat;
    position: relative;
    overflow: visible;
}

/* Shrink ad */
.ad-slot-top { min-height: 26px; padding: 2px 0; font-size: 0.6rem; }

/* Expand ring */
.realm-ring {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 400px;
    position: relative;
}

/* BIG CIRCLES — 165px diameter */
.realm-card-gateway {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 165px;
    height: 165px;
    margin-top: -82px;
    margin-left: -82px;
    text-decoration: none;
    z-index: 10;
}

.realm-card-gateway-inner {
    width: 100%;
    height: 100%;
    background: rgba(20, 16, 32, 0.85);
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.2);
}

.realm-card-gateway:hover .realm-card-gateway-inner {
    transform: scale(1.12);
    box-shadow: 0 0 40px rgba(201, 162, 39, 0.5);
    border-color: #fff;
}

.realm-gateway-icon { font-size: 2.8rem; filter: drop-shadow(0 0 8px rgba(201,162,39,0.4)); }
.realm-gateway-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 4px;
    text-shadow: 0 0 10px rgba(201,162,39,0.3);
}

/* OVAL POSITIONS — 2 top, 2 bottom, 1 left, 1 right, 1 center */
.realm-card-gateway:nth-child(1) { transform: translate(0, 0); }                    /* Center */
.realm-card-gateway:nth-child(2) { transform: translate(-260px, -200px); }          /* Top-Left */
.realm-card-gateway:nth-child(3) { transform: translate(260px, -200px); }            /* Top-Right */
.realm-card-gateway:nth-child(4) { transform: translate(-420px, 0); }                 /* Left */
.realm-card-gateway:nth-child(5) { transform: translate(420px, 0); }                  /* Right */
.realm-card-gateway:nth-child(6) { transform: translate(-260px, 200px); }             /* Bottom-Left */
.realm-card-gateway:nth-child(7) { transform: translate(260px, 200px); }             /* Bottom-Right */

/* Center seal — keep it, make it glow */
.gateway-seal {
    width: 220px;
    height: 220px;
    margin-top: -110px;
    margin-left: -110px;
}
.seal-ring {
    border: 3px solid var(--accent-gold);
    box-shadow: 0 0 60px rgba(201, 162, 39, 0.3), inset 0 0 60px rgba(201, 162, 39, 0.1);
}
.seal-core {
    background: radial-gradient(circle, rgba(20,12,40,0.95) 0%, rgba(10,6,20,0.9) 100%);
    border: 2px solid var(--accent-gold);
}
.seal-text {
    font-size: 3.5rem;
    color: var(--accent-gold);
    text-shadow: 0 0 30px rgba(201, 162, 39, 0.6);
}

/* Title below */
.gateway-title-block {
    position: absolute;
    bottom: 10px;
    text-align: center;
    z-index: 5;
}
.gateway-title { font-size: 1.4rem; }
.gateway-tagline { font-size: 0.7rem; }

/* Compact footer */
.footer { padding: 4px 0; font-size: 0.65rem; }
.sister-sites { padding: 4px 0; }

/* === TABLET === */
@media (max-width: 1024px) {
    .realm-card-gateway { width: 135px; height: 135px; margin-top: -67px; margin-left: -67px; }
    .realm-card-gateway:nth-child(1) { transform: translate(0, 0); }
    .realm-card-gateway:nth-child(2) { transform: translate(-210px, -160px); }
    .realm-card-gateway:nth-child(3) { transform: translate(210px, -160px); }
    .realm-card-gateway:nth-child(4) { transform: translate(-340px, 0); }
    .realm-card-gateway:nth-child(5) { transform: translate(340px, 0); }
    .realm-card-gateway:nth-child(6) { transform: translate(-210px, 160px); }
    .realm-card-gateway:nth-child(7) { transform: translate(210px, 160px); }
    .realm-gateway-icon { font-size: 2.2rem; }
    .realm-gateway-name { font-size: 0.75rem; }
    .gateway-seal { width: 180px; height: 180px; margin-top: -90px; margin-left: -90px; }
}

/* === MOBILE === */
@media (max-width: 768px) {
    .realm-card-gateway { width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
    .realm-card-gateway:nth-child(1) { transform: translate(0, 0); }
    .realm-card-gateway:nth-child(2) { transform: translate(-140px, -110px); }
    .realm-card-gateway:nth-child(3) { transform: translate(140px, -110px); }
    .realm-card-gateway:nth-child(4) { transform: translate(-220px, 0); }
    .realm-card-gateway:nth-child(5) { transform: translate(220px, 0); }
    .realm-card-gateway:nth-child(6) { transform: translate(-140px, 110px); }
    .realm-card-gateway:nth-child(7) { transform: translate(140px, 110px); }
    .realm-gateway-icon { font-size: 1.6rem; }
    .realm-gateway-name { font-size: 0.65rem; }
    .gateway-seal { width: 130px; height: 130px; margin-top: -65px; margin-left: -65px; }
    .seal-text { font-size: 2.5rem; }
}

/* === SMALL MOBILE === */
@media (max-width: 480px) {
    .realm-card-gateway { width: 72px; height: 72px; margin-top: -36px; margin-left: -36px; }
    .realm-card-gateway:nth-child(1) { transform: translate(0, 0); }
    .realm-card-gateway:nth-child(2) { transform: translate(-90px, -70px); }
    .realm-card-gateway:nth-child(3) { transform: translate(90px, -70px); }
    .realm-card-gateway:nth-child(4) { transform: translate(-140px, 0); }
    .realm-card-gateway:nth-child(5) { transform: translate(140px, 0); }
    .realm-card-gateway:nth-child(6) { transform: translate(-90px, 70px); }
    .realm-card-gateway:nth-child(7) { transform: translate(90px, 70px); }
    .realm-gateway-icon { font-size: 1.2rem; }
    .realm-gateway-name { font-size: 0.55rem; }
}

/* === Side Ad Slots (left/right skyscraper) === */
.ad-slot.ad-left,
.ad-slot.ad-right {
    position: fixed;
    top: 100px;
    bottom: 60px;
    width: 160px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-subtle);
    background: rgba(255, 255, 255, 0.03);
}
.ad-slot.ad-left { left: 20px; }
.ad-slot.ad-right { right: 20px; }
.ad-slot .ad-placeholder {
    writing-mode: vertical-rl;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 1px;
    white-space: nowrap;
}


/* Landing-page-only clearance for fixed sisters bar (does not affect other pages) */
.gateway-stage.has-sisters-bar {
    padding-top: 40px;
}


/* Portal pages: make room for the cultural banner so it never overlaps the title */
.portal-stage.has-cultural-banner {
    padding-top: 200px;
}

/* Story detail pages: same cultural banner clearance as tradition hub */
.stage-story.has-cultural-banner {
    padding-top: 200px;
}

/* === Realm gateway showcase art (replaces emoji icon when available) === */
.realm-gateway-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .realm-gateway-img { width: 115px; height: 115px; }
}
@media (max-width: 768px) {
    .realm-gateway-img { width: 85px; height: 85px; }
}
@media (max-width: 480px) {
    .realm-gateway-img { width: 62px; height: 62px; }
}


/* === Name label now sits below the circle, not inside it === */
.realm-card-gateway {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.realm-gateway-name {
    margin-top: 10px;
    text-align: center;
    white-space: nowrap;
}

/* === Oracle live-sky indicator === */
.engine-badge-live {
    color: #7dd3a0;
    border-color: rgba(45, 138, 78, 0.4);
}
.engine-badge-fallback {
    opacity: 0.6;
}