/* =====================================================================
   🌌 ACTIVE THEORY LANDING SKIN — Ancient Wisdom Guide (July 2026)
   ---------------------------------------------------------------------
   OVERRIDE LAYER: loaded LAST in the CSS cascade (after all other css).
   Re-themes the existing main screen into a minimal, immersive,
   activetheory.net-style experience:
     - Deep-dark base, WebGL particle canvas behind everything
     - Terminal/mono typography, uppercase, wide tracking
     - Discrete glass "pill" buttons (same buttons, same functionality)
     - Central glowing ring emblem around the logo
     - Journey sections float as minimal dark glass panels
   NO HTML structure, IDs, callbacks or translated text are changed.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --at-bg: #030604;
    --at-panel: rgba(7, 12, 9, 0.55);
    --at-panel-strong: rgba(7, 12, 9, 0.82);
    --at-border: rgba(255, 255, 255, 0.13);
    --at-border-soft: rgba(255, 255, 255, 0.07);
    --at-gold: #ffd700;
    --at-gold-dim: rgba(255, 215, 0, 0.55);
    --at-gold-faint: rgba(255, 215, 0, 0.18);
    --at-ember: #ff9a3c;
    --at-moss: #8fae7a;
    --at-text: #e8efe6;
    --at-text-muted: #94a292;
    --at-mono: 'Space Mono', 'Courier New', monospace;
    --at-blur: blur(16px) saturate(120%);
}

/* ============================================================
   1. BASE — deep dark stage, WebGL canvas + vignette layering
   ============================================================ */

body {
    background: var(--at-bg) !important;
}

/* Kill the old CSS star-field — the WebGL scene replaces it */
body::before {
    display: none !important;
}

/* WebGL canvas injected by webgl_landing.js */
#webgl-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* Filmic vignette + faint scanlines above the canvas, below content */
.at-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.014) 0px,
            rgba(255, 255, 255, 0.014) 1px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse at 50% 42%,
            transparent 40%,
            rgba(0, 0, 0, 0.4) 76%,
            rgba(0, 0, 0, 0.72) 100%);
    overflow: hidden;
}

/* Animated film grain (SVG turbulence, jump-cut steps like real grain) */
.at-vignette::after {
    content: '';
    position: absolute;
    inset: -120%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.045;
    animation: at-grain 0.9s steps(6) infinite;
}

@keyframes at-grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-6%, 4%); }
    40% { transform: translate(4%, -7%); }
    60% { transform: translate(-3%, -4%); }
    80% { transform: translate(6%, 5%); }
    100% { transform: translate(0, 0); }
}

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

/* All page content sits above the scene.
   NOTE: .explore-section is intentionally NOT listed here — it is a
   position:fixed full-screen overlay (z-index 999) defined in
   explore_styles.css and must keep its fixed positioning. */
.container,
.gfb-footer {
    position: relative;
    z-index: 1;
}

/* Subtle dark content column — nearly invisible over the hero rows so
   the galaxy & stars blaze through; gently darker further down for
   long-form readability */
.container {
    background: linear-gradient(180deg,
        rgba(5, 9, 7, 0.06) 0%,
        rgba(5, 9, 7, 0.10) 42%,
        rgba(5, 9, 7, 0.24) 100%) !important;
}

/* Kill mystical_enhancements' animated gradient frame behind the container */
.container::before {
    display: none !important;
}

/* Golden header rules — restored at half strength (classic + immersive merge) */
.header::before,
.header::after {
    display: block !important;
    opacity: 0.5 !important;
    height: 2px !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25) !important;
}

/* While the Explore overlay is open, the main screen's floating journey
   buttons must not bleed through — Explore has its own "Back to Hall" nav */
body:has(.explore-section:not(.hidden)) .btn-next-floating,
body:has(.explore-section:not(.hidden)) .btn-home-floating {
    display: none !important;
}

/* ⬇️ Discrete "scroll down" whisper (injected by webgl_landing.js) */
.at-scroll-hint {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
    opacity: 0;
    animation: at-hint-in 1.2s ease 1.6s forwards;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.at-scroll-hint-text {
    font-family: var(--at-mono);
    font-size: 0.6rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--at-text-muted);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.at-scroll-hint-arrow {
    color: var(--at-gold-dim);
    font-size: 0.62rem;
    animation: at-hint-bounce 2.2s ease-in-out infinite;
}

.at-scroll-hint.at-hint-hidden {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(14px);
    animation: none;
}

@keyframes at-hint-in {
    to { opacity: 0.85; }
}

@keyframes at-hint-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .at-scroll-hint { animation: none; opacity: 0.85; }
    .at-scroll-hint-arrow { animation: none; }
}

/* ============================================================
   2. NAV BAR — same buttons & functionality, discrete pills
   ============================================================ */

/* Column-aligned glass band — the nav shares the same 1400px column
   as the golden header lines (the app's alignment grid), with a
   translucent tint so the galaxy & stars glow through the rows */
html, body {
    overflow-x: clip;
}

.nav-bar {
    padding: 0.6rem 0.8rem !important;
    background: rgba(4, 8, 6, 0.40) !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(9px) saturate(112%);
    backdrop-filter: blur(9px) saturate(112%);
    transition: background 0.45s ease, backdrop-filter 0.45s ease !important;
}

/* Once the journey scrolls on, the nav dissolves into the universe */
body.at-scrolled .nav-bar {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* True centering: equal-width flexible side zones keep the middle
   column (Get Mobile App / Menu) mathematically page-centered even
   when Login swaps to a wider Profile pill */
@media (min-width: 769px) {
    .nav-bar .nav-left,
    .nav-bar .nav-right {
        flex: 1 1 0 !important;
        max-width: none !important;
    }

    .nav-bar .nav-left {
        justify-content: flex-start !important;
    }

    .nav-bar .nav-right {
        justify-content: flex-end !important;
    }

    .nav-bar .nav-center {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.45rem !important;
        margin: 0 1rem !important;
    }
}

/* Uniform discrete pill treatment for every existing nav control */
.nav-bar .btn-language,
.nav-bar .btn-search,
.nav-bar .btn-app-fixed,
.nav-bar .btn-menu-fixed,
.nav-bar .btn-explore-fixed,
.nav-bar .btn-auth,
.nav-bar .btn-profile,
.nav-bar #user-menu-toggle {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    text-shadow: none !important;
    animation: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

.nav-bar .btn-language:hover,
.nav-bar .btn-search:hover,
.nav-bar .btn-app-fixed:hover,
.nav-bar .btn-menu-fixed:hover,
.nav-bar .btn-explore-fixed:hover,
.nav-bar .btn-auth:hover,
.nav-bar .btn-profile:hover,
.nav-bar #user-menu-toggle:hover {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 18px var(--at-gold-faint) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Dim the emoji icons so text leads */
.nav-bar .app-icon,
.nav-bar .menu-icon,
.nav-bar .explore-icon,
.nav-bar .auth-icon,
.nav-bar .profile-icon,
.nav-bar .search-icon,
.nav-bar .language-icon-globe,
.nav-bar .language-icon-flag {
    font-size: 0.8rem !important;
    opacity: 0.75;
    filter: saturate(0.65);
}

.nav-bar .dropdown-arrow {
    opacity: 0.5;
    font-size: 0.55rem !important;
}

/* Search wrapper: remove any legacy pill-around-a-pill framing */
.nav-bar .search-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Search input — minimal terminal field */
.nav-bar .search-input {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: none !important;
}

.nav-bar .search-input::placeholder {
    color: var(--at-text-muted);
    letter-spacing: 0.2em;
}

.nav-bar .search-input:focus {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 18px var(--at-gold-faint) !important;
    outline: none !important;
}

/* Language dropdown — dark glass */
.language-dropdown {
    background: var(--at-panel-strong) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 10px !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
    font-family: var(--at-mono) !important;
}

/* Floating menu (dynamically created by toggleMenu with inline styles —
   !important is required here to beat style.cssText) */
.floating-menu-modal {
    background: rgba(4, 8, 6, 0.9) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 14px !important;
    padding: 14px 12px 12px !important;
    min-width: 240px !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.06),
        0 28px 80px rgba(0, 0, 0, 0.75),
        0 0 40px rgba(255, 215, 0, 0.07) !important;
    animation: at-menu-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    overflow: hidden;
}

/* golden hairline crest across the top of the menu */
.floating-menu-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--at-gold-dim), transparent);
}

@keyframes at-menu-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.floating-menu-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid var(--at-border-soft) !important;
    border-radius: 8px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    margin: 2px 0 !important;
    transition: border-color 0.2s ease, background 0.2s ease, padding-left 0.2s ease !important;
}

.floating-menu-item:last-of-type {
    border-bottom-color: transparent !important;
}

.floating-menu-item:hover {
    background: rgba(255, 215, 0, 0.07) !important;
    border-color: var(--at-gold-dim) !important;
    padding-left: 22px !important;
}

/* The dynamically-created Close button (no class) — outlined ember pill */
.floating-menu-modal > button:not(.floating-menu-item) {
    background: transparent !important;
    border: 1px solid rgba(244, 67, 54, 0.45) !important;
    border-radius: 999px !important;
    color: #e8a49e !important;
    font-family: var(--at-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 10px 15px !important;
    margin-top: 12px !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.floating-menu-modal > button:not(.floating-menu-item):hover {
    background: rgba(244, 67, 54, 0.1) !important;
    border-color: rgba(244, 67, 54, 0.8) !important;
    box-shadow: 0 0 18px rgba(244, 67, 54, 0.2) !important;
}

/* ============================================================
   3. HEADER / HERO — central ring emblem + terminal title
   ============================================================ */

.header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Logo becomes the glowing central emblem (like AT's ring logo) --- */
.logo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.2rem 0 2.2rem;
}

/* Faint full ring + soft bloom */
.logo-container::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.22);
    box-shadow:
        0 0 60px rgba(255, 190, 90, 0.14),
        inset 0 0 40px rgba(255, 190, 90, 0.08);
    pointer-events: none;
}

/* Rotating arc segment */
.logo-container::after {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 215, 0, 0.75);
    border-right-color: rgba(255, 215, 0, 0.25);
    animation: at-ring-spin 12s linear infinite;
    pointer-events: none;
}

@keyframes at-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.main-logo {
    width: 132px !important;
    height: 132px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    box-shadow: 0 0 45px rgba(255, 190, 90, 0.25) !important;
    animation: at-emblem-float 7s ease-in-out infinite;
}

@keyframes at-emblem-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Strip the heavy temple card down to pure atmosphere --- */
.wisdom-temple-modernized {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.wisdom-temple-modernized::before {
    display: none !important;
}

/* Hide pure-decoration (empty) elements — the WebGL scene replaces them */
.temple-architecture,
.quantum-effects,
.title-particles,
.core-energy-ring,
.data-pulse-line,
.portal-energy,
.qotd-cosmic-bg {
    display: none !important;
}

/* --- Title: terminal-style, wide tracking, subtle glitch --- */
.quantum-title {
    text-align: center;
}

.quantum-title .title-matrix {
    font-family: var(--at-mono) !important;
    font-weight: 700 !important;
    font-size: clamp(1.3rem, 3.4vw, 2.4rem) !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    /* dark anchor halo under the golden glow — lifts the type off the
       starfield without dimming the universe behind it */
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.92),
        0 0 24px rgba(0, 0, 0, 0.55),
        0 0 26px rgba(255, 215, 0, 0.45);
    animation: at-glitch 9s infinite !important;
}

@keyframes at-glitch {
    0%, 89%, 100% {
        text-shadow:
            0 2px 6px rgba(0, 0, 0, 0.92),
            0 0 24px rgba(0, 0, 0, 0.55),
            0 0 26px rgba(255, 215, 0, 0.45);
        transform: none;
        clip-path: none;
    }
    90% {
        text-shadow: -3px 0 rgba(79, 156, 255, 0.9), 3px 0 rgba(255, 68, 68, 0.9), 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 26px rgba(255, 215, 0, 0.45);
        transform: translateX(2px);
        clip-path: inset(12% 0 34% 0);
    }
    91.5% {
        text-shadow: 3px 0 rgba(79, 156, 255, 0.9), -3px 0 rgba(255, 68, 68, 0.9), 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 26px rgba(255, 215, 0, 0.45);
        transform: translateX(-2px) skewX(3deg);
        clip-path: inset(48% 0 8% 0);
    }
    93% {
        text-shadow: -1px 0 rgba(79, 156, 255, 0.7), 1px 0 rgba(255, 68, 68, 0.7), 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 26px rgba(255, 215, 0, 0.45);
        transform: translateX(1px);
        clip-path: none;
    }
    94.5% {
        text-shadow:
            0 2px 6px rgba(0, 0, 0, 0.92),
            0 0 24px rgba(0, 0, 0, 0.55),
            0 0 26px rgba(255, 215, 0, 0.45);
        transform: none;
        clip-path: none;
    }
}

.quantum-underline {
    background: linear-gradient(90deg, transparent, var(--at-gold-dim), transparent) !important;
    height: 1px !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Golden hero tagline — mirrors the marketing page's subtitle */
.hero-tagline {
    font-family: var(--at-mono);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 219, 148, 1);
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.98),
        0 2px 12px rgba(0, 0, 0, 0.85),
        0 0 22px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(255, 200, 100, 0.4);
    text-align: center;
    margin: 1.1rem 0 0.4rem;
}

/* --- Slogan rows: interactive terminal lines (`// data streams`) --- */
.wisdom-command-center {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0 !important;
    margin: 2.4rem 0 2.6rem !important;
}

/* Tighten the hero's dead space — give it back to the type */
.sanctuary-header {
    margin-bottom: 2.2rem !important;
}

.wisdom-temple-modernized {
    padding: 2.6rem 3rem 3rem !important;
}

.command-interface {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--at-border-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    padding: 1.35rem 0.9rem !important;
    transition: border-color 0.3s ease, background 0.3s ease !important;
    cursor: pointer;
    /* the master's blur(15px) hazed the galaxy — keep the glass OFF so
       the stars behind the rows stay crisp */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.command-interface .interface-core {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

.command-interface:hover {
    background: rgba(255, 215, 0, 0.04) !important;
    border-bottom-color: var(--at-gold-dim) !important;
    transform: none !important;
}

.command-interface .core-icon {
    font-size: 1.2rem !important;
    opacity: 0.85;
    filter: saturate(0.65);
    background: transparent !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    animation: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.command-interface:hover .core-icon {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 14px var(--at-gold-faint);
}

.command-interface .data-prefix {
    font-family: var(--at-mono) !important;
    color: rgba(255, 206, 120, 0.95) !important;
    font-size: 0.88rem !important;
    animation: none !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

.command-interface .data-content {
    font-family: var(--at-mono) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: rgba(244, 247, 240, 0.98) !important;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.98),
        0 2px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.6) !important;
    transition: color 0.3s ease;
}

.command-interface:hover .data-content {
    color: var(--at-text) !important;
}

/* --- Master greeting: minimal terminal block --- */
.master-portal {
    background: transparent !important;
    margin-top: 2.4rem !important;
}

.portal-frame {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    animation: none !important;
    padding: 2.2rem 2.6rem !important;
}

/* Kill the animated rainbow border ring behind the portal */
.portal-frame::before {
    display: none !important;
}

.master-greeting {
    font-family: var(--at-mono) !important;
    font-size: 1rem !important;
    letter-spacing: 0.07em !important;
    line-height: 2.1 !important;
    color: var(--at-text-muted) !important;
    text-shadow: none !important;
}

.constellation-star {
    color: var(--at-gold-dim) !important;
    font-size: 1.4rem !important;
    animation: none !important;
    text-shadow: none !important;
}

/* ============================================================
   4. QUOTE OF THE DAY — dark glass scroll (same content/buttons)
   ============================================================ */

/* The section itself must be pure atmosphere — no slab */
.qotd-section,
#qotdSection {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.qotd-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.qotd-toggle-btn {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    width: fit-content !important;
    margin: 1rem auto 2rem !important;
    padding: 0.9rem 2.6rem !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.qotd-toggle-btn:hover {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 18px var(--at-gold-faint) !important;
    transform: none !important;
}

.qotd-toggle-text {
    font-family: var(--at-mono) !important;
    font-size: 1rem !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--at-text) !important;
    text-shadow: none !important;
}

.qotd-toggle-icon {
    font-size: 1.25rem !important;
    opacity: 0.8;
    filter: saturate(0.65);
}

.qotd-toggle-arrow {
    color: var(--at-gold-dim) !important;
    font-size: 0.8rem !important;
}

.qotd-scroll {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.qotd-parchment {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
}

.qotd-header {
    background: transparent !important;
    border: none !important;
    padding: 1.8rem 0 1.4rem !important;
}

/* Keep the mystic emoji rows but make them whisper-quiet */
.qotd-mystic-bar {
    opacity: 0.32;
}

.qotd-mystic-bar .mystic-icon {
    font-size: 0.85rem !important;
    filter: saturate(0.5);
    animation: none !important;
}

.qotd-icon {
    font-size: 2rem !important;
    opacity: 0.85;
    filter: saturate(0.65);
    animation: none !important;
    text-shadow: none !important;
    margin-bottom: 0.6rem !important;
}

.qotd-title {
    font-family: var(--at-mono) !important;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem) !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: var(--at-gold) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--at-gold) !important;
    text-shadow: 0 0 20px var(--at-gold-faint) !important;
    animation: none !important;
    margin: 1.1rem 0 1rem !important;
}

.qotd-date {
    font-family: var(--at-mono) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: #f0f5ee !important;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.22) !important;
    margin-bottom: 0.7rem !important;
}

/* 🕒 Live 24h local time — injected by webgl_landing.js after the date.
   Slightly smaller than the date, in a distinct gold "instrument" style */
.at-local-time {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.at-clock-digits {
    font-family: var(--at-mono);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.42em;
    color: var(--at-gold);
    text-shadow: 0 0 16px var(--at-gold-faint);
    border: 1px solid rgba(255, 215, 0, 0.28);
    border-radius: 999px;
    padding: 0.32rem 1.3rem 0.32rem 1.6rem;
    background: rgba(255, 215, 0, 0.045);
    font-variant-numeric: tabular-nums;
}

.qotd-text {
    color: var(--at-text) !important;
    text-shadow: none !important;
}

.qotd-author cite,
.qotd-author {
    font-family: var(--at-mono) !important;
    color: var(--at-gold-dim) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
}

.qotd-description,
.qotd-curator-notes {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    color: var(--at-text-muted) !important;
}

.qotd-curator-notes p {
    color: var(--at-text-muted) !important;
}

.qotd-badge {
    background: transparent !important;
    border: 1px solid var(--at-gold-dim) !important;
    border-radius: 999px !important;
    color: var(--at-gold) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.qotd-btn {
    background: transparent !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.qotd-btn:hover {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 16px var(--at-gold-faint) !important;
    background: rgba(255, 215, 0, 0.05) !important;
    transform: none !important;
}

.qotd-loading p {
    font-family: var(--at-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--at-text-muted);
}

/* ============================================================
   5. JOURNEY SECTIONS — floating dark glass panels
   ============================================================ */

.welcome-card,
.path-card,
.wisdom-card {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
    color: var(--at-text);
}

/* Replace the gradient top bars with a single hairline of gold */
.welcome-card::before,
.path-card::before,
.wisdom-card::before {
    background: linear-gradient(90deg, transparent, var(--at-gold-dim), transparent) !important;
    height: 1px !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Section headings: terminal style */
.welcome-card h2,
.path-card h2,
.wisdom-card h2 {
    font-family: var(--at-mono) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--at-text) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--at-text) !important;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.18) !important;
    animation: none !important;
}

.welcome-card p,
.path-card p,
.wisdom-card p {
    color: var(--at-text-muted);
}

/* Name input — terminal field */
.input-group label {
    font-family: var(--at-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

#userName {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 4px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
}

#userName:focus {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 18px var(--at-gold-faint) !important;
    outline: none !important;
}

/* --- Path grid tiles --- */
.path-option {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
}

.path-option:hover {
    border-color: var(--at-gold-dim) !important;
    background: rgba(255, 215, 0, 0.04) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.path-option.selected {
    border-color: var(--at-gold) !important;
    background: rgba(255, 215, 0, 0.07) !important;
    box-shadow: 0 0 24px var(--at-gold-faint) !important;
}

.path-option .path-icon {
    font-size: 1.6rem !important;
    filter: saturate(0.75);
    animation: none !important;
    text-shadow: none !important;
}

.path-option h3 {
    font-family: var(--at-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--at-text) !important;
}

.path-option .path-microtitle {
    color: var(--at-gold-dim) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.05em !important;
}

.path-option p {
    color: var(--at-text-muted) !important;
    font-size: 0.72rem !important;
}

/* --- Mood / goal / continuation radio rows + spec cards (JS-injected) --- */
.mood-option,
.goal-option,
.continue-option {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, background 0.25s ease !important;
}

.mood-option:hover,
.goal-option:hover,
.continue-option:hover {
    border-color: var(--at-gold-dim) !important;
    background: rgba(255, 215, 0, 0.04) !important;
}

.mood-option label,
.goal-option label,
.continue-option label {
    color: var(--at-text) !important;
}

.spec-option {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease !important;
}

.spec-option:hover {
    border-color: var(--at-gold-dim) !important;
    background: rgba(255, 215, 0, 0.04) !important;
    transform: translateY(-3px) !important;
}

.spec-option.selected {
    border-color: var(--at-gold) !important;
    background: rgba(255, 215, 0, 0.07) !important;
    box-shadow: 0 0 24px var(--at-gold-faint) !important;
}

.spec-option .spec-name {
    font-family: var(--at-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--at-text) !important;
}

.spec-option .spec-desc {
    color: var(--at-text-muted) !important;
}

.spec-option .spec-emoji {
    filter: saturate(0.75);
}

/* ============================================================
   6. WISDOM DISPLAY — the quote revelation
   ============================================================ */

.terminal-separator {
    color: rgba(255, 215, 0, 0.22) !important;
    font-family: var(--at-mono) !important;
    text-shadow: none !important;
}

.quote-display {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    animation: none !important;
}

.quote-display::before,
.quote-display::after {
    display: none !important;
}

/* The quote itself stays serif — elegant contrast with the mono UI */
.primary-quote-text {
    color: #f2f6ef !important;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.12) !important;
}

.quote-author-line p,
.quote-author-line strong {
    font-family: var(--at-mono) !important;
    color: var(--at-gold-dim) !important;
    letter-spacing: 0.1em !important;
}

.wisdom-intro p {
    font-family: var(--at-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

.advice-display {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.quote-notes-input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 4px !important;
    color: var(--at-text) !important;
}

.quote-notes-input:focus {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 18px var(--at-gold-faint) !important;
    outline: none !important;
}

/* ============================================================
   7. BUTTONS — journey CTAs become minimal outlined pills
   ============================================================ */

.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-tertiary {
    background: transparent !important;
    border: 1px solid var(--at-gold-dim) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.btn.btn-secondary,
.btn.btn-tertiary {
    border-color: var(--at-border) !important;
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-tertiary:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: var(--at-gold) !important;
    box-shadow: 0 0 22px var(--at-gold-faint) !important;
    transform: none !important;
}

/* ============================================================
   8. FLOATING BUTTONS — discrete glass pills, phase-tinted glow
   ============================================================ */

.btn-next-floating {
    background: var(--at-panel-strong) !important;
    border: 1px solid var(--at-gold-dim) !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    box-shadow: 0 0 26px var(--at-gold-faint), 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    text-shadow: none !important;
    animation: none !important;
}

.btn-next-floating .next-text {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem !important;
}

.btn-next-floating .next-subtitle {
    color: var(--at-text-muted);
    font-size: 0.58rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btn-next-floating:hover {
    transform: scale(1.05) !important;
    border-color: var(--at-gold) !important;
    box-shadow: 0 0 36px rgba(255, 215, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Phase identity now lives in the border + glow (not loud gradients) */
.btn-next-floating.begin-phase {
    background: var(--at-panel-strong) !important;
    border-color: rgba(76, 175, 80, 0.75) !important;
    box-shadow: 0 0 26px rgba(76, 175, 80, 0.3), 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    animation: none !important;
}

.btn-next-floating.continue-phase {
    background: var(--at-panel-strong) !important;
    border-color: var(--at-gold-dim) !important;
    animation: none !important;
}

.btn-next-floating.specialization-phase {
    background: var(--at-panel-strong) !important;
    border-color: rgba(33, 150, 243, 0.75) !important;
    box-shadow: 0 0 26px rgba(33, 150, 243, 0.3), 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    animation: none !important;
}

.btn-next-floating.reveal-phase {
    background: var(--at-panel-strong) !important;
    border-color: rgba(156, 39, 176, 0.75) !important;
    box-shadow: 0 0 26px rgba(156, 39, 176, 0.32), 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    animation: none !important;
}

.btn-next-floating.next-quote-phase {
    background: var(--at-panel-strong) !important;
    border-color: rgba(255, 87, 34, 0.75) !important;
    box-shadow: 0 0 26px rgba(255, 87, 34, 0.3), 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    animation: none !important;
}

.btn-home-floating {
    background: var(--at-panel-strong) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    text-shadow: none !important;
    animation: none !important;
}

.btn-home-floating .home-text {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem !important;
}

.btn-home-floating:hover {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 22px var(--at-gold-faint), 0 12px 34px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   9. FOOTER / LOADING / MODAL BACKDROPS
   ============================================================ */

.gfb-footer {
    background: transparent !important;
    border-top: 1px solid var(--at-border-soft) !important;
    box-shadow: none !important;
}

.gfb-footer::before {
    display: none !important;
}

.gfb-footer p {
    font-family: var(--at-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
    text-shadow: none !important;
}

.gfb-footer .creator-tag {
    color: var(--at-gold-dim) !important;
}

.loading {
    background: rgba(2, 5, 3, 0.85) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.loading p {
    font-family: var(--at-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--at-text-muted);
}

.loading .spinner {
    border-color: rgba(255, 215, 0, 0.15) !important;
    border-top-color: var(--at-gold) !important;
}

/* Modal backdrops get the same deep-dark treatment (interiors untouched) */
.auth-modal,
.modal,
.search-modal,
.quote-detail-modal,
.share-modal {
    background: rgba(2, 5, 3, 0.82) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ============================================================
   10. SCROLLBAR + SELECTION — finishing touches
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050807;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.25);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.45);
}

::selection {
    background: rgba(255, 215, 0, 0.25);
    color: #ffffff;
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .logo-container::before,
    .logo-container::after {
        width: 160px;
        height: 160px;
    }

    .main-logo {
        width: 100px !important;
        height: 100px !important;
    }

    .quantum-title .title-matrix {
        letter-spacing: 0.26em !important;
    }

    .command-interface .data-content {
        font-size: 0.82rem !important;
        letter-spacing: 0.1em !important;
    }

    .master-greeting {
        font-size: 0.85rem !important;
    }

    .qotd-toggle-text {
        font-size: 0.82rem !important;
        letter-spacing: 0.16em !important;
    }

    .qotd-title {
        font-size: 1.15rem !important;
        letter-spacing: 0.18em !important;
    }

    .qotd-date {
        font-size: 0.78rem !important;
        letter-spacing: 0.2em !important;
    }

    .wisdom-temple-modernized {
        padding: 2rem 1.4rem 2.2rem !important;
    }

    .nav-bar .btn-language,
    .nav-bar .btn-search,
    .nav-bar .btn-app-fixed,
    .nav-bar .btn-menu-fixed,
    .nav-bar .btn-explore-fixed,
    .nav-bar .btn-auth,
    .nav-bar .btn-profile {
        font-size: 0.6rem !important;
        letter-spacing: 0.1em !important;
    }

    .btn-next-floating .next-subtitle {
        display: none;
    }
}

@media (max-width: 480px) {
    .quantum-title .title-matrix {
        font-size: 1.05rem !important;
        letter-spacing: 0.2em !important;
    }

    .logo-container {
        padding: 2.2rem 0 1.4rem;
    }
}

/* ============================================================
   12. EXPLORE SECTION — Hall of Wisdom over the living universe
   (overrides explore_styles.css; keeps position:fixed overlay)
   ============================================================ */

/* Translucent deep-dark stage — the WebGL universe keeps glowing
   through the overlay instead of being buried by an opaque slab */
.explore-section {
    background: linear-gradient(180deg,
        rgba(2, 5, 3, 0.86) 0%,
        rgba(3, 7, 5, 0.78) 45%,
        rgba(2, 5, 3, 0.88) 100%) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Kill the marble texture + haze pseudo layers */
.explore-section::before,
.explore-section::after {
    display: none !important;
}

/* --- Temple header → terminal shrine --- */
.explore-temple-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.temple-title {
    font-family: var(--at-mono) !important;
    font-weight: 700 !important;
    font-size: clamp(1.2rem, 3vw, 2rem) !important;
    letter-spacing: 0.34em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 0 22px rgba(255, 215, 0, 0.35) !important;
    animation: none !important;
}

.title-greek-column {
    filter: saturate(0.7);
    opacity: 0.85;
}

.temple-inscription {
    font-family: var(--at-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
    text-shadow: none !important;
}

.pediment-ornament {
    color: var(--at-gold-dim) !important;
    animation: none !important;
    text-shadow: none !important;
    filter: saturate(0.7);
}

.temple-divider .divider-ornament {
    color: var(--at-gold-dim) !important;
}

.temple-divider .divider-line {
    background: linear-gradient(90deg, transparent, var(--at-gold-dim), transparent) !important;
    height: 1px !important;
}

/* --- Back buttons → glass pills --- */
.btn-back-to-main,
.btn-back-explore {
    background: var(--at-panel-strong) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5) !important;
    text-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-back-to-main:hover,
.btn-back-explore:hover {
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 0 22px var(--at-gold-faint), 0 12px 34px rgba(0, 0, 0, 0.6) !important;
    transform: none !important;
    color: #ffffff !important;
}

/* --- Knowledge cards → floating glass tiles --- */
.knowledge-card {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.knowledge-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 26px var(--at-gold-faint) !important;
}

/* Marble + gold-frame decoration layers → gone */
.knowledge-card .card-marble-bg,
.knowledge-card .card-gold-border {
    display: none !important;
}

.knowledge-card .card-icon {
    font-size: 2.2rem !important;
    filter: saturate(0.75);
    animation: none !important;
    text-shadow: none !important;
}

.knowledge-card .card-title {
    font-family: var(--at-mono) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--at-text) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--at-text) !important;
    text-shadow: none !important;
}

.knowledge-card .card-subtitle {
    font-size: 0.7rem !important;
    color: var(--at-text-muted) !important;
    letter-spacing: 0.03em;
}

.knowledge-card .card-quote-count {
    background: transparent !important;
    border: none !important;
}

.knowledge-card .count-number {
    font-family: var(--at-mono) !important;
    font-size: 1.35rem !important;
    color: var(--at-gold) !important;
    text-shadow: 0 0 16px var(--at-gold-faint) !important;
}

.knowledge-card .count-label {
    font-family: var(--at-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

.card-explore-btn {
    background: transparent !important;
    border: 1px solid var(--at-gold-dim) !important;
    border-radius: 999px !important;
    color: var(--at-text) !important;
    font-family: var(--at-mono) !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.card-explore-btn:hover {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: var(--at-gold) !important;
    box-shadow: 0 0 22px var(--at-gold-faint) !important;
    transform: none !important;
}

/* --- Quotes drill-down view --- */
.quotes-header {
    background: transparent !important;
    border: none !important;
}

.quotes-title {
    font-family: var(--at-mono) !important;
    font-size: clamp(0.95rem, 2.2vw, 1.4rem) !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--at-gold) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--at-gold) !important;
    text-shadow: 0 0 18px var(--at-gold-faint) !important;
}

.quotes-count {
    font-family: var(--at-mono) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

.quote-grid-card {
    background: var(--at-panel) !important;
    border: 1px solid var(--at-border-soft) !important;
    border-radius: 6px !important;
    -webkit-backdrop-filter: var(--at-blur);
    backdrop-filter: var(--at-blur);
    box-shadow: none !important;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.quote-grid-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--at-gold-dim) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 20px var(--at-gold-faint) !important;
}

.quote-grid-rank {
    background: transparent !important;
    border-bottom: 1px solid var(--at-border-soft) !important;
}

.rank-number {
    font-family: var(--at-mono) !important;
    color: var(--at-gold) !important;
    text-shadow: 0 0 12px var(--at-gold-faint) !important;
}

.rank-views {
    font-family: var(--at-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

/* Quote text stays serif — the sacred contrast */
.quote-grid-text {
    color: #eef3ea !important;
    text-shadow: none !important;
}

.quote-grid-author {
    font-family: var(--at-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    color: var(--at-gold-dim) !important;
}

.quotes-loading p {
    font-family: var(--at-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--at-text-muted) !important;
}

/* ============================================================
   §13 — IMMERSIVE PLANETARIUM MODE (v1.8.0)
   Click the deep sky → interface parts, the universe takes over
============================================================ */
body.at-immersive {
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.container,
.gfb-footer,
.btn-next-floating,
.btn-home-floating {
    transition: opacity 0.9s ease;
}

body.at-immersive .container,
body.at-immersive .gfb-footer,
body.at-immersive .btn-next-floating,
body.at-immersive .btn-home-floating,
body.at-immersive .at-scroll-hint {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* hover whisper over clickable sky objects */
.at-sky-tip {
    position: fixed;
    z-index: 55;
    pointer-events: none;
    transform: translate(-50%, -170%);
    font-family: var(--at-mono, 'Space Mono', monospace);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffd98a;
    white-space: nowrap;
    background: rgba(4, 8, 5, 0.72);
    border: 1px solid rgba(255, 210, 122, 0.35);
    border-radius: 999px;
    padding: 6px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
    text-shadow: 0 0 12px rgba(255, 200, 100, 0.5);
}

.at-sky-tip.visible {
    opacity: 1;
}

/* immersive chrome — title plaque, exit pill, prev/next hoppers */
.at-immersive-ui {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease 0.35s, visibility 0s linear 1.3s;
    font-family: var(--at-mono, 'Space Mono', monospace);
}

.at-immersive-ui.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease 0.35s, visibility 0s;
}

.at-imm-title {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #ffdf9e;
    text-shadow: 0 0 26px rgba(255, 200, 100, 0.65), 0 0 60px rgba(255, 180, 80, 0.3);
    white-space: nowrap;
}

.at-imm-sub {
    position: absolute;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(235, 226, 205, 0.8);
    white-space: nowrap;
}

.at-imm-exit {
    position: absolute;
    top: 26px;
    right: 30px;
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    color: #ffd98a;
    background: rgba(4, 8, 5, 0.66);
    border: 1px solid rgba(255, 210, 122, 0.4);
    border-radius: 999px;
    padding: 11px 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.at-imm-exit:hover {
    background: rgba(255, 210, 122, 0.16);
    box-shadow: 0 0 24px rgba(255, 200, 100, 0.35);
}

.at-imm-prev,
.at-imm-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0 4px;
    color: #ffd98a;
    background: rgba(4, 8, 5, 0.6);
    border: 1px solid rgba(255, 210, 122, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.at-imm-prev { left: 26px; }
.at-imm-next { right: 26px; }

.at-imm-prev:hover,
.at-imm-next:hover {
    background: rgba(255, 210, 122, 0.16);
    box-shadow: 0 0 22px rgba(255, 200, 100, 0.3);
}

@media (max-width: 768px) {
    .at-imm-title {
        font-size: 0.85rem;
        letter-spacing: 0.26em;
        bottom: 108px;
        max-width: 92vw;
        white-space: normal;
        text-align: center;
    }

    .at-imm-sub {
        bottom: 84px;
        font-size: 0.56rem;
        max-width: 90vw;
        white-space: normal;
        text-align: center;
    }

    .at-imm-prev { left: 12px; }
    .at-imm-next { right: 12px; }

    .at-imm-exit {
        top: 16px;
        right: 14px;
        padding: 9px 16px;
    }
}

/* ============================================================
   §14 — WORLD MAP PORTAL + GALAXY OBJECT LIST (v1.9.0)
============================================================ */
.at-worldmap-btn {
    position: fixed;
    top: 98px;
    left: 38px;
    z-index: 62;
    cursor: pointer;
    font-family: var(--at-mono, 'Space Mono', monospace);
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #ffd98a;
    background: rgba(4, 8, 5, 0.66);
    border: 1px solid rgba(255, 210, 122, 0.4);
    border-radius: 999px;
    padding: 10px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* NEVER transition left/top — the button is JS-anchored to the
       language pill; a positional transition freezes/lags the rail */
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-shadow: 0 0 12px rgba(255, 200, 100, 0.4);
}

.at-worldmap-btn:hover {
    background: rgba(255, 210, 122, 0.16);
    box-shadow: 0 0 24px rgba(255, 200, 100, 0.35);
}

.at-imm-list-btn {
    position: absolute;
    top: 76px;
    right: 30px;
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.64rem;
    letter-spacing: 0.26em;
    color: #ffd98a;
    background: rgba(4, 8, 5, 0.66);
    border: 1px solid rgba(255, 210, 122, 0.4);
    border-radius: 999px;
    padding: 10px 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.at-imm-list-btn:hover {
    background: rgba(255, 210, 122, 0.16);
    box-shadow: 0 0 22px rgba(255, 200, 100, 0.3);
}

.at-imm-list {
    position: absolute;
    top: 126px;
    right: 30px;
    width: 256px;
    max-height: 62vh;
    overflow-y: auto;
    pointer-events: auto;
    display: none;
    background: rgba(4, 8, 5, 0.82);
    border: 1px solid rgba(255, 210, 122, 0.32);
    border-radius: 14px;
    padding: 10px 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 210, 122, 0.4) transparent;
}

.at-imm-list.open {
    display: block;
}

.at-imm-list::-webkit-scrollbar { width: 5px; }
.at-imm-list::-webkit-scrollbar-thumb { background: rgba(255, 210, 122, 0.35); border-radius: 3px; }

.at-imm-list-head {
    font-size: 0.52rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 215, 140, 0.55);
    padding: 10px 12px 4px;
}

.at-imm-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e8e2d2;
    padding: 7px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-imm-list-item:hover {
    background: rgba(255, 210, 122, 0.14);
    color: #ffd98a;
}

@media (max-width: 768px) {
    .at-worldmap-btn {
        top: auto;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        padding: 9px 15px;
        font-size: 0.56rem;
    }

    .at-imm-list-btn {
        top: 64px;
        right: 14px;
        padding: 8px 14px;
    }

    .at-imm-list {
        top: 108px;
        right: 14px;
        width: min(78vw, 256px);
        max-height: 54vh;
    }
}