/* ------------------------------ */
/* AGENCY OF GIFTS — SPLASH THEME */
/* ------------------------------ */

body.aog-splash {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", sans-serif;
    color: inherit;  /* driven by --unity-text-color */
    overflow-x: hidden;
}

/* ------------------------------ */
/* BACKGROUND                     */
/* ------------------------------ */

/* UNITY-controlled background (white ↔ black) */
.splash-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: rgb(255,255,255); /* default until JS loads */
    transition: background-color 1.5s ease;
}

/* Unity-driven text color */
:root {
    --unity-text-color: #000;   /* default black */
}

body.aog-splash,
.title-block h1,
.subtitle,
.unity-status,
.tagline {
    color: var(--unity-text-color) !important;
    transition: color 1.0s ease;
}

/* ------------------------------ */
/* COSMIC BANNER (Top planetary strip) */
/* ------------------------------ */

.splash-content {
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.cosmic-banner-bg {
    width: 100%;
    height: 200px;
    background: url('/img/asteroid_belt_top.webp') center / cover no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.6;
    pointer-events: none;
}

.cosmic-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.planet-left,
.planet-right {
    width: 180px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.4));
}

.planet-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 3D Wrapped Globe --- */

.aog-globe {
    width: 235px;
    height: 235px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 18px rgba(97, 203, 255, 0.85),
        0 0 40px rgba(20, 80, 160, 0.8);
    background: radial-gradient(circle at 30% 30%,
                rgba(255,255,255,0.25) 0%,
                rgba(0,0,0,0.45) 55%,
                rgba(0,0,0,0.85) 100%);
}

.aog-globe-texture {
    position: absolute;
    inset: 0;
    background-size: 200% auto;
    background-repeat: repeat-x;
    background-position: 0% 0%;
    animation: globeScroll 18s linear infinite;
    opacity: 1;
    transition: opacity 1.5s ease;
}

@keyframes globeScroll {
    0%   { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}

/* ------------------------------ */
/* SOUL WAVE — HORIZONTAL BEAM    */
/* ------------------------------ */

.soul-wave-layer {
    width: 100%;
    height: 120px;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    position: relative;
    pointer-events: none;
    z-index: 0;
}

.soul-wave-layer canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ------------------------------ */
/* HEART                          */
/* ------------------------------ */

.heart-zone {
    text-align: center;
    margin-top: 0.2rem;
    margin-bottom: 1.4rem;
}

.heart-orb {
    width: 420px;
    filter: drop-shadow(0 0 15px rgba(255,0,80,0.8));
    animation: pulseHeart 2.5s infinite ease-in-out;
}

@keyframes pulseHeart {
    0% { transform: scale(1);   filter: drop-shadow(0 0 10px rgba(255,0,60,0.7)); }
    50%{ transform: scale(1.1); filter: drop-shadow(0 0 22px rgba(255,0,90,1)); }
    100%{ transform: scale(1);  }
}

/* ------------------------------ */
/* UNITY STATUS & TAGLINE         */
/* ------------------------------ */

.unity-status {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    opacity: 0.9;
    text-shadow: 0 0 8px rgba(0,200,255,0.7);
}

.tagline {
    margin-top: 0.5rem;
    font-size: 1.0rem;
    opacity: 0.85;
    font-style: italic;
}

/* ------------------------------ */
/* SOUL STORY                     */
/* ------------------------------ */

.universal-soul-story-slot {
    margin-top: 1.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    opacity: 0.9;
}

.universal-soul-story-slot h3 {
    margin-bottom: 0.4rem;
}

/* ------------------------------ */
/* MANUAL SELECTION               */
/* ------------------------------ */

.manual-section-label {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.manual-section-label h3 {
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.manual-section-label p {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.manual-section-label small {
    display: block;
    margin-top: 0.35rem;
    opacity: 0.85;
}

.manual-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1.5rem;
}

.manual-card {
    width: 200px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0,180,255,0.5);
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
}

.manual-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(0,240,255,0.8);
}

.manual-img {
    width: 50%;
    height: auto;
    border-radius: 12px;
}

.manual-title {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* ------------------------------ */
/* ENTER BUTTON                   */
/* ------------------------------ */

.enter-row {
    margin-top: 3rem;
}

.enter-btn {
    background: linear-gradient(135deg, #00eaff, #0088ff);
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0,180,255,0.7);
    transition: 0.25s;
}

.enter-btn:hover {
    box-shadow: 0 0 30px rgba(0,220,255,1);
    transform: translateY(-3px);
}

/* ------------------------------ */
/* FOOTER                         */
/* ------------------------------ */

.aog-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.85;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(5px);
    z-index: 10;
}

.aog-footer a {
    color: #9de6ff;
    text-decoration: none;
}

.aog-footer a:hover {
    text-decoration: underline;
}

/* ------------------------------ */
/* MODALS (shared)                */
/* ------------------------------ */

.aog-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    z-index: 999;
}
.aog-modal.open {
    display: flex;
}
.aog-modal-inner {
    max-width: 640px;
    width: 90%;
    max-height: 85vh;           /* <— keeps modal inside viewport */
    overflow-y: auto;           /* <— enables vertical scroll     */
    background: rgba(10,15,30,0.95);
    border-radius: 18px;
    padding: 1.5rem 2rem;
    box-shadow: 0 0 30px rgba(0,220,255,0.8);

    /* optional, but helps when content is long */
    box-sizing: border-box;
}

.aog-modal-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    float: right;
    cursor: pointer;
}
.soul-story-body p {
    margin-bottom: 0.75rem;
}

/* ------------------------------ */
/* ANIMATION HELPERS              */
/* ------------------------------ */

.fadein       { animation: fadeIn 1.2s ease forwards; opacity: 0; }
.fadein-delay { animation: fadeIn 2s ease forwards; opacity: 0; }
.fadein-slow  { animation: fadeIn 2.6s ease forwards; opacity: 0; }
.fadein-slower{ animation: fadeIn 3.4s ease forwards; opacity: 0; }

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

/* ------------------------------ */
/* LOGO (currently unused here)   */
/* ------------------------------ */

.aog-logo {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background-image: url('/img/aog_sm.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter:
        drop-shadow(0 0 10px rgba(160, 210, 255, 0.85))
        drop-shadow(0 0 20px rgba(120, 180, 255, 0.45));
    animation: aogLogoPulse 5s ease-in-out infinite;
}

@keyframes aogLogoPulse {
    0% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px rgba(160, 210, 255, 0.8))
            drop-shadow(0 0 16px rgba(120, 180, 255, 0.35));
    }
    50% {
        transform: scale(1.03);
        filter:
            drop-shadow(0 0 16px rgba(200, 235, 255, 1))
            drop-shadow(0 0 28px rgba(140, 200, 255, 0.75));
    }
    100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px rgba(160, 210, 255, 0.8))
            drop-shadow(0 0 16px rgba(120, 180, 255, 0.35));
    }
}



/* ---------------------------------------------- */
/* REGISTRATION INTRO TEXT                        */
/* ---------------------------------------------- */

.registration-intro {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.registration-intro h3,
.registration-intro p,
.registration-intro small {
    color: var(--unity-text-color) !important;
    text-shadow: none;
    transition: color 1.0s ease;
}

.registration-intro h3.reg-intro-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.registration-intro .reg-intro-sub {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.registration-intro .reg-intro-small {
    font-size: 0.9rem;
    opacity: 0.8;
}


/* ---------------------------------------------- */
/* MANUAL SELECTION CARDS                         */
/* ---------------------------------------------- */

.manual-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2.5rem;
}

.manual-card {
    width: 200px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0,180,255,0.5);
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;
    color: var(--unity-text-color);
}

.manual-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(0,240,255,0.8);
}

.manual-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.manual-title {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* ---------------------------------------------- */
/* ENTER BUTTON                                   */
/* ---------------------------------------------- */

.enter-row {
    margin-top: 4rem;
}

.enter-btn {
    background: linear-gradient(135deg, #00eaff, #0088ff);
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0,180,255,0.7);
    transition: 0.25s;
}

.enter-btn:hover {
    box-shadow: 0 0 30px rgba(0,220,255,1);
    transform: translateY(-3px);
}


/* ---------------------------------------------- */
/* MODALS (LIGHT / DARK / REGISTER)               */
/* ---------------------------------------------- */

.aog-modal {
    position: fixed;
    inset: 0;
    display: none;                    /* hidden by default */
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    z-index: 999;
}

.aog-modal.open {
    display: flex;                    /* shown when .open class added */
}

.aog-modal-inner {
    max-width: 640px;
    width: 90%;
    background: rgba(10,15,30,0.95);
    border-radius: 18px;
    padding: 1.5rem 2rem;
    box-shadow: 0 0 30px rgba(0,220,255,0.8);
    color: #fff;
}

.aog-modal-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    float: right;
    cursor: pointer;
}

/* Soul story text (if used) */
.soul-story-body p {
    margin-bottom: 0.75rem;
}

.universal-soul-story-slot {
    margin-top: 2rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    opacity: 0.9;
}

.universal-soul-story-slot h3 {
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------- */
/* ANIMATION HELPERS                              */
/* ---------------------------------------------- */

.fadein       { animation: fadeIn 1.2s ease forwards; opacity: 0; }
.fadein-delay { animation: fadeIn 2s ease forwards; opacity: 0; }
.fadein-slow  { animation: fadeIn 2.6s ease forwards; opacity: 0; }
.fadein-slower{ animation: fadeIn 3.4s ease forwards; opacity: 0; }

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


/* MODAL WRAPPER */
.manual-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.manual-modal.open {
    display: flex;
}

/* INNER PANEL */
.manual-inner {
    width: 90%;
    max-width: 580px;
    padding: 2rem 2.4rem;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.4),
                0 0 60px rgba(255,255,255,0.15) inset;
    position: relative;
    animation: modalFade 0.4s ease-out;
}

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

/* BACKGROUNDS */
.manual-light {
    background: url('/img/light_landscape.webp') center / cover no-repeat;
}

.manual-dark {
    background: url('/img/dark_landscape.webp') center / cover no-repeat;
}

.manual-register {
    background: radial-gradient(circle at 40% 30%,
        rgba(255,255,255,0.05), rgba(0,0,0,0.8));
}

/* BOOK IMAGE */
.manual-top-image img {
    width: 200px;
    max-width: 70%;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.75));
}

/* TEXT */
.manual-title {
    margin: 0;
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.manual-tagline {
    margin: 0.8rem 0 1.4rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.manual-body {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.95;
    margin-bottom: 1.6rem;
}

/* REGISTRATION FIELDS */
.reg-fields {
    text-align: left;
    margin-top: 1rem;
}

.reg-fields label {
    display: block;
    margin: 0.8rem 0 0.3rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.reg-fields input,
.reg-fields select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    backdrop-filter: blur(4px);
}

.gender-choices label {
    margin-right: 1.2rem;
}

.form-error {
    margin-top: 0.8rem;
    color: #ff8080;
    font-weight: bold;
    display: none;
}

/* CTA BUTTON */
.manual-cta {
    margin-top: 1.8rem;
}

.btn-primary {
    padding: 12px 28px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #fff;
    transition: 0.25s;
}

.btn-primary:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-2px);
}

.dark-btn {
    border-color: rgba(255,40,40,0.6);
    box-shadow: 0 0 20px rgba(255,40,40,0.6);
}

/* ---------------------------------
   Registration Success Ritual Veil
----------------------------------*/
.init-success-veil {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0.9));
    z-index: 1200;
}

.init-success-veil.open {
    display: flex;
    animation: veilFadeIn 0.6s ease-out forwards;
}

@keyframes veilFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

.init-success-inner {
    text-align: center;
    color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 18px;
    background: rgba(5,10,20,0.9);
    box-shadow:
        0 0 30px rgba(0,220,255,0.7),
        0 0 70px rgba(0,120,255,0.5);
}

.init-success-inner h2 {
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

.init-success-inner p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* glowing ring */
.init-success-ring {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 2px solid rgba(0,230,255,0.9);
    box-shadow:
        0 0 20px rgba(0,230,255,1),
        0 0 40px rgba(0,160,255,0.9);
    animation: successRingPulse 2s ease-in-out infinite;
}

@keyframes successRingPulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}


/* =========================================
   MANUAL / FOOTER MODALS — GLOBAL UPGRADES
   ========================================= */

/* Give ALL manual-style modals a max-height + scrolling */
.manual-modal .manual-inner {
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

/* Default scrollbar for manual modals */
.manual-modal .manual-inner::-webkit-scrollbar {
    width: 10px;
}
.manual-modal .manual-inner::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}
.manual-modal .manual-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(#00eaff, #0088ff);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
}

/* =========================
   THEMED INNER VARIANTS
   ========================= */
.agency-inner {
    background: url('/img/agency_chamber.webp') center/cover no-repeat;
    color: #e9f4ff;
    position: relative;
}

.agency-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 10%, rgba(180, 210, 255, 0.25), transparent 55%),
        linear-gradient(to bottom, rgba(0,0,20,0.7), rgba(0,0,0,0.9));
    z-index: -1;
}

.agency-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(#7ecaff, #2f6cff);
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(120,200,255,0.9);
}

/* ============================================
   AGENCY INNER — CINEMATIC BRIEFING CHAMBER
   ============================================ */

.agency-inner {
    background:
        /* Subtle cosmic shimmer */
        radial-gradient(circle at 50% 10%, rgba(120, 200, 255, 0.25), transparent 65%),
        /* Soft nebula wash */
        linear-gradient(180deg, rgba(10, 30, 60, 0.65), rgba(0, 0, 0, 0.95)),
        /* Chamber art */
        url('/img/agency_chamber.webp') center top / cover no-repeat;

    border: 1px solid rgba(0, 200, 255, 0.22);
    box-shadow:
        0 0 16px rgba(0, 200, 255, 0.25),
        inset 0 0 40px rgba(0, 120, 255, 0.15),
        inset 0 0 80px rgba(0, 50, 120, 0.25);

    padding: 40px 45px;
    color: #eaf6ff;
    position: relative;
    border-radius: 14px;
}

/* TOP FOCUSED LIGHT GLOW (angelic tone) */
.agency-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    
    background:
        radial-gradient(circle at 50% 0%, rgba(200, 230, 255, 0.22), transparent 55%),
        linear-gradient(to bottom, rgba(0, 40, 80, 0.65), transparent 60%);

    z-index: -1;
}

/* ============================================
   AGENCY TYPOGRAPHY
   ============================================ */

/* Title — authoritative, archival */
.agency-inner .manual-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    color: #cdeaff;
    text-align: center;
    letter-spacing: 1px;

    text-shadow:
        0 0 8px rgba(180, 230, 255, 0.9),
        0 0 16px rgba(80, 150, 255, 0.5);
}

/* Tagline (“The game that is not a game…”) */
.agency-inner .manual-tagline {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 25px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #d5eaffcc;
    font-style: italic;

    text-shadow:
        0 0 6px rgba(180, 220, 255, 0.5),
        0 0 12px rgba(150, 200, 255, 0.25);
}

/* Body text — manuscript-like, soft glowing */
.agency-inner .manual-body {
    font-family: 'Libre Baskerville', serif;
    font-size: 17px;
    line-height: 1.65;
    color: #e3f2ff;
    text-shadow:
        0 0 4px rgba(120, 180, 255, 0.3);
    padding-bottom: 20px;
}

/* Subtle first-line indent for manuscript feel */
.agency-inner .manual-body p {
    text-indent: 1.25em;
    margin-bottom: 1.1em;
}

/* Scrollbar refinement */
.agency-inner::-webkit-scrollbar-thumb {
    background: linear-gradient(#9fd5ff, #4a83ff);
    border-radius: 8px;
    box-shadow: 0 0 14px rgba(150, 200, 255, 0.9);
}



/* Later we can add:
   .lore-inner, .gifts-inner, .journey-inner, .support-inner, etc.
   each with its own background + scrollbar accent color. */


#aog-footer-hud {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(0,255,255,0.25);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    color: #cfefff;
    text-shadow: 0 0 4px #0ff4;
    backdrop-filter: blur(5px);
}

#aog-footer-hud .hud-line {
    display: flex;
    justify-content: space-between;
}

.hud-label {
    opacity: 0.75;
}


.login-inner {
    background: linear-gradient(180deg, rgba(0,20,40,0.9), rgba(0,0,0,0.95)),
                url('/img/agency_chamber.webp') center/cover no-repeat;
    position: relative;
}

.login-inner::before {
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 50%);
    z-index:-1;
}

.modal-label {
    display:block;
    margin-top:12px;
    margin-bottom:5px;
    font-size:14px;
    opacity:0.8;
}

.modal-input {
    width:100%;
    padding:10px;
    background:#0a0a12;
    color:white;
    border:1px solid #0ff3;
    border-radius:6px;
    margin-bottom:10px;
}


/* ===========================
   LORE MODAL THEME
   =========================== */

.lore-inner {
    background:
        linear-gradient(180deg, rgba(20,0,30,0.9), rgba(0,0,0,0.9)),
        url('/img/lore_bg.webp') center/cover no-repeat;
    position: relative;
    color: #f2e9ff;
}

.lore-inner::before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle, rgba(255,200,255,0.15), transparent 70%);
    z-index:-1;
}

/* SEARCH INPUT */
.lore-search input {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #cc99ff;
    background: #140020;
    color: #fff;
}

/* CATEGORY BUTTONS */
.lore-categories {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom: 10px;
}
.lore-categories button {
    background:#260035;
    color:#e8ccff;
    border:1px solid #aa55ff;
    padding:6px 10px;
    border-radius:5px;
    cursor:pointer;
}
.lore-categories button:hover {
    background:#3a0060;
}

/* LORE LIST */
.lore-list {
    border-top:1px solid rgba(255,255,255,0.15);
    margin-top:10px;
    padding-top:10px;
}

.lore-list-item {
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.07);
    cursor:pointer;
}
.lore-list-item:hover {
    color:#dbaaff;
    text-shadow:0 0 5px #d99bff;
}

/* SINGLE ENTRY */
.lore-entry-inner {
    background:
        linear-gradient(180deg, rgba(40,0,50,0.9), rgba(0,0,0,0.95)),
        url('/img/lore_bg_entry.webp') center/cover no-repeat;
    position: relative;
}
.lore-entry-inner::before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle, rgba(180,100,255,0.15), transparent 60%);
    z-index:-1;
}

/* ============================================
   JOURNEY MODAL — PYRAMID ASCENSION CHAMBER
   ============================================ */

.journey-inner {
    background:
        /* Ethereal glow from pyramid apex */
        radial-gradient(circle at 50% 0%, rgba(255,220,140,0.35), transparent 60%),
        /* Golden-orange mystical wash */
        linear-gradient(180deg, rgba(50,20,0,0.75), rgba(0,0,0,0.95)),
        /* Pyramid background */
        url('/img/background_pyramid.webp') center top / cover no-repeat;

    border: 1px solid rgba(255, 200, 120, 0.25);
    box-shadow:
        0 0 18px rgba(255, 190, 100, 0.25),
        inset 0 0 40px rgba(255, 180, 60, 0.15),
        inset 0 0 80px rgba(120, 80, 20, 0.25);

    padding: 38px 45px;
    position: relative;
    color: #ffeedd;
    border-radius: 14px;
}

/* TITLE — sunlit gold */
.journey-inner .manual-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    text-align:center;
    color: #ffe7b3;
    text-shadow:
        0 0 10px rgba(255, 210, 130, 0.8),
        0 0 20px rgba(255, 150, 50, 0.4);
}

/* SUBHEADS — glowing glyphs */
.journey-inner .journey-section {
    margin-top: 30px;
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: #ffdca6;
    text-shadow:
        0 0 10px rgba(255, 200, 150, 0.6),
        0 0 14px rgba(255, 140, 30, 0.4);
}

/* BODY TEXT — papyrus-soft */
.journey-inner .manual-body {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    line-height: 1.7;
    color: #fff7e6;
    text-shadow:
        0 0 5px rgba(255, 200, 150, 0.25);
}

/* LIST STYLING */
.journey-inner ul li {
    margin-bottom: 6px;
    padding-left: 4px;
}

/* SUBHEAD (smaller) */
.journey-inner .sub {
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 20px;
    font-family: 'Cinzel', serif;
    color: #ffe8bd;
}

/* Decorative HR */
.journey-inner hr {
    border:0;
    height:1px;
    background: linear-gradient(to right, transparent, #ffcc88, transparent);
    margin: 22px 0;
}

/* ============================================
   GIFTS CHAMBER — DUAL COSMIC ENERGY SANCTUARY
   ============================================ */

.gifts-inner {
    background:
        /* Cosmic glow center */
        radial-gradient(circle at 50% 25%, rgba(255,240,180,0.25), transparent 60%),
        radial-gradient(circle at 20% 35%, rgba(255,210,90,0.25), transparent 70%),  /* light side */
        radial-gradient(circle at 80% 35%, rgba(140,80,255,0.25), transparent 70%),  /* dark side */
        /* Dark-to-space fade */
        linear-gradient(180deg, rgba(0,0,30,0.8), rgba(0,0,0,0.95)),
        /* Background image */
        url('/img/gifts_background.webp') center top / cover no-repeat;

    padding: 40px 45px;
    border-radius: 14px;
    color: #f8f2ff;

    border: 1px solid rgba(255,200,255,0.25);
    box-shadow:
        0 0 20px rgba(255,240,180,0.2),    /* warm side */
        0 0 30px rgba(160,120,255,0.2),    /* cool side */
        inset 0 0 60px rgba(80,0,120,0.25),
        inset 0 0 80px rgba(255,210,120,0.20);
}

.gifts-inner::before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 50% 0%, rgba(255,240,180,0.18), transparent 70%);
    z-index: -1;
}

/* Title — Radiant Cosmo-Temple Glyph */
.gifts-inner .manual-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    text-align:center;
    color: #ffefc8;
    text-shadow:
        0 0 10px rgba(255,230,180,0.9),
        0 0 20px rgba(255,180,90,0.5);
}

/* Tagline */
.gifts-inner .manual-tagline {
    text-align:center;
    font-size:18px;
    font-family:'Cormorant Garamond', serif;
    margin-top:-10px;
    margin-bottom:25px;
    color:#ffeeddcc;
    font-style:italic;
    text-shadow:0 0 6px rgba(255,230,200,0.4);
}

/* Section Headers */
.gifts-inner .gifts-section {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: #ffe2bf;
    text-shadow:
        0 0 10px rgba(255,210,160,0.7),
        0 0 14px rgba(255,140,60,0.4);
    margin-top: 28px;
}

/* Body text */
.gifts-inner .manual-body {
    font-family:'Cormorant Garamond', serif;
    font-size:17px;
    line-height:1.7;
    color:#f6edff;
    text-shadow:0 0 4px rgba(200,160,255,0.25);
}

/* Light header (gold) */
.gifts-inner .light-header {
    color:#ffe9a4;
    text-shadow:
        0 0 10px rgba(255,220,150,0.8),
        0 0 20px rgba(255,170,50,0.3);
}

/* Dark header (violet) */
.gifts-inner .dark-header {
    color:#d0a7ff;
    text-shadow:
        0 0 10px rgba(150,80,255,0.8),
        0 0 20px rgba(90,40,200,0.35);
}

/* Final axiom center highlight */
.gifts-axiom {
    font-size:20px;
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
    color:#fff2dd;
}

/* QUIZ MODAL STYLES */
.quiz-inner {
    max-width: 600px;
    width: 90%;
    background: rgba(10, 15, 25, 0.95);
    border-radius: 18px;
    padding: 1.5rem 2rem;
    box-shadow: 0 0 30px rgba(0,220,255,0.6);
    color: #fff;
}

/* question */
.quiz-question {
    font-size: 1.25rem;
    margin: 1rem 0 1.5rem;
    text-align: center;
}

/* answers wrapper */
.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* answer button */
.answer-btn {
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: 0.25s;
}

.answer-btn:hover {
    background: rgba(0,200,255,0.25);
    border-color: rgba(0,200,255,0.5);
}

/* progress bar text */
.quiz-progress {
    opacity: 0.8;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0.8rem;
}