:root {
    --bg: #050505;
    --gold: #d4af37;
    --wood: #2c1e14;
    --ember: #ff4500;
    --purple: #a366ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Android Splash Screen - Card Back Full Screen */
.android-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    overflow: hidden;
}

.android-splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-card-back {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic viewport height for mobile */
    /* Ensure image is crisp on high-DPI displays */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Prevent image from being selectable or causing layout shifts */
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    /* Smooth scaling */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body {
    background: var(--bg);
    color: #e0e0e0;
    font-family: 'Cinzel', serif;
    text-align: center;
    min-height: 100vh;
    overflow-x: hidden;
}

.scene {
    display: none;
    padding: 20px;
    min-height: 100vh;
    background: var(--bg);
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scene.active {
    display: block;
    opacity: 1;
}

/* Altar Scene - Card Back Background */
#scene-altar {
    background-image: url('../assets/card_back.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

/* Add subtle overlay to ensure text readability */
#scene-altar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 5, 5, 0.3);
    z-index: 0;
    pointer-events: none;
}

/* Ensure content is above overlay */
#scene-altar > * {
    position: relative;
    z-index: 1;
}

/* Style the shop name in the heading */
#scene-altar h1 strong {
    display: block;
    font-size: 1.2em;
    letter-spacing: 10px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

/* Welcome Scroll Banner */
.welcome-scroll {
    max-width: 800px;
    margin: 30px auto;
    position: relative;
    padding: 0 20px;
}

.scroll-content {
    background: linear-gradient(135deg,
        rgba(44, 30, 20, 0.95) 0%,
        rgba(60, 45, 30, 0.95) 50%,
        rgba(44, 30, 20, 0.95) 100%);
    border: 3px solid var(--gold);
    border-radius: 15px;
    padding: 30px 40px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(212, 175, 55, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Scroll decorative edges */
.scroll-content::before,
.scroll-content::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right,
        rgba(44, 30, 20, 0.95) 0%,
        rgba(44, 30, 20, 0.7) 50%,
        transparent 100%);
    z-index: 1;
}

.scroll-content::before {
    left: 0;
    border-radius: 15px 0 0 15px;
}

.scroll-content::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(44, 30, 20, 0.95) 0%,
        rgba(44, 30, 20, 0.7) 50%,
        transparent 100%);
    border-radius: 0 15px 15px 0;
}

/* Parchment texture effect */
.scroll-content {
    background-image: 
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px),
        linear-gradient(135deg,
            rgba(44, 30, 20, 0.95) 0%,
            rgba(60, 45, 30, 0.95) 50%,
            rgba(44, 30, 20, 0.95) 100%);
}

.welcome-message {
    color: var(--gold);
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 3px;
    margin: 0 0 15px 0;
    text-shadow: 
        0 0 10px rgba(212, 175, 55, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
}

.altar-instruction {
    color: rgba(212, 175, 55, 0.9);
    font-size: 1rem;
    font-style: italic;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 
        0 0 8px rgba(212, 175, 55, 0.4),
        1px 1px 3px rgba(0, 0, 0, 0.7);
    position: relative;
    z-index: 2;
}

/* Transition States */
.scene.transitioning-out {
    opacity: 0;
    transform: scale(0.95);
}

.scene.transitioning-in {
    opacity: 0;
    transform: scale(1.05);
}

.scene.transitioning-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Mystical Transition Overlay */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.transition-overlay.active {
    opacity: 1;
}

/* Cosmic Starfield Transition */
.transition-cosmic {
    background: radial-gradient(ellipse at center,
        rgba(163, 102, 255, 0.3) 0%,
        rgba(138, 43, 226, 0.2) 30%,
        rgba(75, 0, 130, 0.1) 60%,
        transparent 100%);
}

.transition-cosmic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 90% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 33% 60%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 66% 20%, rgba(255, 255, 255, 0.6), transparent);
    background-size: 200% 200%;
    animation: starfieldMove 3s linear infinite;
}

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

/* Mystical Portal Transition */
.transition-portal {
    background: radial-gradient(circle at center,
        rgba(212, 175, 55, 0.4) 0%,
        rgba(163, 102, 255, 0.3) 30%,
        rgba(138, 43, 226, 0.2) 50%,
        transparent 70%);
}

.transition-portal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.6) 0%,
        rgba(163, 102, 255, 0.4) 50%,
        transparent 100%);
    animation: portalExpand 0.8s ease-out forwards;
}

@keyframes portalExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    50% {
        width: 200vw;
        height: 200vh;
        opacity: 0.8;
    }
    100% {
        width: 300vw;
        height: 300vh;
        opacity: 0;
    }
}

/* Ember Fade Transition */
.transition-ember {
    background: radial-gradient(ellipse at center,
        rgba(255, 69, 0, 0.3) 0%,
        rgba(255, 140, 0, 0.2) 30%,
        rgba(212, 175, 55, 0.1) 60%,
        transparent 100%);
}

.transition-ember::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(3px 3px at 25% 25%, rgba(255, 69, 0, 0.6), transparent),
        radial-gradient(2px 2px at 75% 75%, rgba(255, 140, 0, 0.5), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(212, 175, 55, 0.4), transparent);
    background-size: 150% 150%;
    animation: emberDrift 2s ease-in-out infinite;
}

@keyframes emberDrift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* Special Altar Entrance - Most Spectacular */
.transition-altar-entrance {
    background: radial-gradient(ellipse at center,
        rgba(212, 175, 55, 0.5) 0%,
        rgba(163, 102, 255, 0.4) 20%,
        rgba(138, 43, 226, 0.3) 40%,
        rgba(75, 0, 130, 0.2) 60%,
        transparent 80%);
    animation: altarEntranceGlow 1.5s ease-out;
}

.transition-altar-entrance::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(212, 175, 55, 0.8) 20%,
        rgba(163, 102, 255, 0.6) 40%,
        rgba(138, 43, 226, 0.4) 60%,
        transparent 100%);
    animation: altarPortalExpand 1.2s ease-out forwards;
    box-shadow: 
        0 0 100px rgba(212, 175, 55, 0.8),
        0 0 200px rgba(163, 102, 255, 0.6),
        0 0 300px rgba(138, 43, 226, 0.4);
}

.transition-altar-entrance::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(3px 3px at 20% 30%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(212, 175, 55, 0.9), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(163, 102, 255, 0.8), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 90% 50%, rgba(212, 175, 55, 0.7), transparent),
        radial-gradient(1px 1px at 33% 60%, rgba(163, 102, 255, 0.8), transparent),
        radial-gradient(2px 2px at 66% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(212, 175, 55, 0.8), transparent),
        radial-gradient(2px 2px at 40% 90%, rgba(163, 102, 255, 0.7), transparent);
    background-size: 200% 200%;
    animation: altarStarfield 2s linear infinite;
    opacity: 0.8;
}

@keyframes altarEntranceGlow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes altarPortalExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    30% {
        width: 150vw;
        height: 150vh;
        opacity: 0.9;
    }
    60% {
        width: 250vw;
        height: 250vh;
        opacity: 0.6;
    }
    100% {
        width: 400vw;
        height: 400vh;
        opacity: 0;
    }
}

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

/* Mystical Veil Transition */
.transition-veil {
    background: linear-gradient(135deg,
        rgba(163, 102, 255, 0.2) 0%,
        rgba(138, 43, 226, 0.15) 50%,
        rgba(75, 0, 130, 0.1) 100%);
}

.transition-veil::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 50%,
        transparent 100%);
    animation: veilSweep 0.8s ease-out forwards;
}

@keyframes veilSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Prismatic Transition (for Prismatic Self) */
.transition-prismatic {
    background: linear-gradient(135deg,
        rgba(255, 0, 0, 0.15) 0%,
        rgba(255, 165, 0, 0.15) 16.66%,
        rgba(255, 255, 0, 0.15) 33.33%,
        rgba(0, 255, 0, 0.15) 50%,
        rgba(0, 0, 255, 0.15) 66.66%,
        rgba(75, 0, 130, 0.15) 83.33%,
        rgba(148, 0, 211, 0.15) 100%);
    animation: prismaticShift 1s ease-out;
}

@keyframes prismaticShift {
    0% {
        opacity: 0;
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 1;
        filter: hue-rotate(180deg);
    }
    100% {
        opacity: 0;
        filter: hue-rotate(360deg);
    }
}

/* Journal and Settings - Dark backgrounds */
#scene-journal,
#scene-settings {
    background: linear-gradient(to bottom,
        #050505 0%,
        #0a0a0a 30%,
        #050505 60%,
        #000000 100%);
    position: relative;
    overflow: hidden;
}

/* Journal - Notebook/Scroll Background */
#scene-journal {
    background: 
        /* Parchment texture overlay */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(139, 120, 98, 0.03) 2px,
            rgba(139, 120, 98, 0.03) 4px),
        /* Paper texture */
        repeating-linear-gradient(90deg,
            transparent,
            transparent 98px,
            rgba(139, 120, 98, 0.05) 98px,
            rgba(139, 120, 98, 0.05) 100px),
        /* Aged paper base */
        linear-gradient(135deg,
            #1a1815 0%,
            #2a2520 25%,
            #1f1c18 50%,
            #2a2520 75%,
            #1a1815 100%);
    background-attachment: fixed;
    position: relative;
}

/* Notebook binding effect on left side */
#scene-journal::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right,
        rgba(44, 30, 20, 0.8) 0%,
        rgba(60, 45, 30, 0.6) 50%,
        rgba(44, 30, 20, 0.4) 100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    z-index: 0;
    pointer-events: none;
}

/* Notebook binding holes */
#scene-journal::after {
    content: '';
    position: fixed;
    left: 30px;
    top: 20%;
    width: 8px;
    height: 200px;
    background: 
        radial-gradient(circle, rgba(0, 0, 0, 0.6) 2px, transparent 2px),
        radial-gradient(circle, rgba(0, 0, 0, 0.6) 2px, transparent 2px),
        radial-gradient(circle, rgba(0, 0, 0, 0.6) 2px, transparent 2px);
    background-size: 8px 60px;
    background-position: 0 0, 0 70px, 0 140px;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
}

/* Ensure content is above background effects */
#scene-journal > * {
    position: relative;
    z-index: 2;
}

/* Emporium Shop - Carnival Bazaar */
#scene-shop {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #1a0d05 0%,
        #2d1810 20%,
        #3d2418 40%,
        #2d1810 60%,
        #1a0d05 80%,
        #0f0805 100%);
}

.bazaar-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bazaar-content {
    position: relative;
    z-index: 1;
}

/* Colorful Tents/Banners */
.bazaar-tent {
    position: absolute;
    width: 300px;
    height: 250px;
    z-index: 1;
}

.tent-left {
    top: 10%;
    left: 5%;
}

.tent-right {
    top: 15%;
    right: 5%;
}

.tent-center {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.tent-stripes {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        #ff4500 0%,
        #ff6347 12.5%,
        #ffa500 25%,
        #ffd700 37.5%,
        #ff4500 50%,
        #8b008b 62.5%,
        #a366ff 75%,
        #ff6347 87.5%,
        #ff4500 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: tentSway 4s ease-in-out infinite;
}

.tent-left .tent-stripes {
    background: linear-gradient(135deg,
        #ff6347 0%,
        #ffa500 20%,
        #ffd700 40%,
        #ff4500 60%,
        #8b008b 80%,
        #ff6347 100%);
}

.tent-right .tent-stripes {
    background: linear-gradient(135deg,
        #a366ff 0%,
        #8b008b 20%,
        #ff4500 40%,
        #ffd700 60%,
        #ffa500 80%,
        #a366ff 100%);
}

.tent-center .tent-stripes {
    background: linear-gradient(135deg,
        #ffd700 0%,
        #ff4500 25%,
        #ff6347 50%,
        #8b008b 75%,
        #ffd700 100%);
}

@keyframes tentSway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-5px) rotate(-1deg); }
    75% { transform: translateX(5px) rotate(1deg); }
}

.tent-pole {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 40px;
    background: linear-gradient(to bottom, #654321, #3d2817);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.tent-flag {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    background: linear-gradient(135deg, #ff4500, #ffd700, #a366ff);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    animation: flagWave 3s ease-in-out infinite;
}

.flag-1 {
    background: linear-gradient(135deg, #ff6347, #ffd700);
}

.flag-2 {
    background: linear-gradient(135deg, #a366ff, #ff4500);
}

.flag-3 {
    background: linear-gradient(135deg, #ffd700, #8b008b);
}

@keyframes flagWave {
    0%, 100% { transform: translateX(-50%) rotate(-2deg); }
    50% { transform: translateX(-50%) rotate(2deg); }
}

/* String Lights */
.string-lights {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 2px;
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    z-index: 2;
}

.light-bulb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 200, 1) 0%,
        rgba(255, 215, 0, 0.8) 50%,
        rgba(255, 140, 0, 0.6) 100%);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                0 0 25px rgba(255, 140, 0, 0.6);
    animation: bulbFlicker 2s ease-in-out infinite;
}

.light-bulb:nth-child(odd) {
    background: radial-gradient(circle,
        rgba(255, 200, 255, 1) 0%,
        rgba(163, 102, 255, 0.8) 50%,
        rgba(138, 43, 226, 0.6) 100%);
    box-shadow: 0 0 15px rgba(163, 102, 255, 0.8),
                0 0 25px rgba(138, 43, 226, 0.6);
}

.light-bulb:nth-child(3n) {
    background: radial-gradient(circle,
        rgba(255, 200, 150, 1) 0%,
        rgba(255, 69, 0, 0.8) 50%,
        rgba(255, 20, 0, 0.6) 100%);
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.8),
                0 0 25px rgba(255, 20, 0, 0.6);
}

@keyframes bulbFlicker {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.2); }
    50% { opacity: 0.9; transform: scale(0.9); }
    75% { opacity: 1; transform: scale(1.1); }
}

/* Paper Lanterns */
.lantern {
    position: absolute;
    width: 50px;
    height: 70px;
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.9) 0%,
        rgba(255, 140, 0, 0.7) 50%,
        rgba(255, 69, 0, 0.5) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                inset 0 0 20px rgba(255, 69, 0, 0.4);
    animation: lanternSway 3s ease-in-out infinite;
}

.lantern::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    background: #654321;
    border-radius: 2px;
}

.lantern::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 69, 0, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
    animation: emberPulse 1.5s ease-in-out infinite;
}

.lantern-1 {
    top: 30%;
    left: 15%;
    animation-delay: 0s;
}

.lantern-2 {
    top: 25%;
    left: 40%;
    background: radial-gradient(ellipse at center,
        rgba(163, 102, 255, 0.9) 0%,
        rgba(138, 43, 226, 0.7) 50%,
        rgba(75, 0, 130, 0.5) 100%);
    box-shadow: 0 0 20px rgba(163, 102, 255, 0.6),
                inset 0 0 20px rgba(138, 43, 226, 0.4);
    animation-delay: 0.5s;
}

.lantern-3 {
    top: 28%;
    right: 35%;
    background: radial-gradient(ellipse at center,
        rgba(255, 140, 0, 0.9) 0%,
        rgba(255, 69, 0, 0.7) 50%,
        rgba(255, 20, 0, 0.5) 100%);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.6),
                inset 0 0 20px rgba(255, 69, 0, 0.4);
    animation-delay: 1s;
}

.lantern-4 {
    top: 32%;
    right: 18%;
    animation-delay: 1.5s;
}

.lantern-5 {
    top: 27%;
    right: 5%;
    background: radial-gradient(ellipse at center,
        rgba(255, 200, 150, 0.9) 0%,
        rgba(255, 140, 0, 0.7) 50%,
        rgba(255, 69, 0, 0.5) 100%);
    box-shadow: 0 0 20px rgba(255, 200, 150, 0.6),
                inset 0 0 20px rgba(255, 140, 0, 0.4);
    animation-delay: 2s;
}

@keyframes lanternSway {
    0%, 100% { transform: translateX(0) rotate(-2deg); }
    50% { transform: translateX(8px) rotate(2deg); }
}

@keyframes emberPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.3); }
}

/* Market Stalls */
.market-stall {
    position: absolute;
    bottom: 15%;
    width: 250px;
    height: 180px;
    z-index: 1;
}

.stall-left {
    left: 10%;
}

.stall-right {
    right: 10%;
}

.stall-awning {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg,
        #ff4500 0%,
        #ff6347 25%,
        #ffd700 50%,
        #ff6347 75%,
        #ff4500 100%);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.stall-right .stall-awning {
    background: linear-gradient(135deg,
        #a366ff 0%,
        #8b008b 25%,
        #ff6347 50%,
        #8b008b 75%,
        #a366ff 100%);
}

.stall-counter {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, #3d2817, #654321);
    border-top: 3px solid #2c1e14;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
}

.stall-post {
    position: absolute;
    bottom: 0;
    width: 12px;
    height: 80px;
    background: linear-gradient(to top, #654321, #3d2817);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.stall-left .post-1 {
    left: 10%;
}

.stall-left .post-2 {
    right: 10%;
}

.stall-right .post-1 {
    left: 10%;
}

.stall-right .post-2 {
    right: 10%;
}

/* Bazaar Banners */
.bazaar-banner {
    position: absolute;
    width: 150px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    animation: bannerFlutter 4s ease-in-out infinite;
}

.banner-1 {
    top: 40%;
    left: 25%;
    background: linear-gradient(135deg,
        #ff4500,
        #ffd700,
        #ff6347);
    animation-delay: 0s;
}

.banner-2 {
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg,
        #a366ff,
        #8b008b,
        #ff6347);
    animation-delay: 1s;
}

.banner-3 {
    top: 42%;
    right: 25%;
    background: linear-gradient(135deg,
        #ffd700,
        #ff4500,
        #ffa500);
    animation-delay: 2s;
}

@keyframes bannerFlutter {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

/* Decorative Streamers */
.streamer {
    position: absolute;
    width: 200px;
    height: 30px;
    background: linear-gradient(90deg,
        #ff4500 0%,
        #ffd700 25%,
        #a366ff 50%,
        #ff6347 75%,
        #ff4500 100%);
    border-radius: 0 15px 15px 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    animation: streamerWave 3s ease-in-out infinite;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 50%);
}

.streamer-1 {
    top: 50%;
    left: 0;
    background: linear-gradient(90deg, #ff4500, #ffd700, #ff6347);
    animation-delay: 0s;
}

.streamer-2 {
    top: 55%;
    left: 0;
    background: linear-gradient(90deg, #a366ff, #8b008b, #ff6347);
    animation-delay: 0.5s;
}

.streamer-3 {
    top: 52%;
    right: 0;
    transform: scaleX(-1);
    background: linear-gradient(90deg, #ffd700, #ff4500, #ffa500);
    animation-delay: 1s;
}

.streamer-4 {
    top: 57%;
    right: 0;
    transform: scaleX(-1);
    background: linear-gradient(90deg, #ff6347, #a366ff, #ff4500);
    animation-delay: 1.5s;
}

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

.streamer-3,
.streamer-4 {
    animation-name: streamerWaveReverse;
}

@keyframes streamerWaveReverse {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-8px); }
}

/* Bazaar Ground */
.bazaar-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top,
        rgba(101, 67, 33, 0.8) 0%,
        rgba(61, 40, 23, 0.6) 40%,
        rgba(44, 30, 20, 0.4) 70%,
        transparent 100%);
    pointer-events: none;
}

/* Atmospheric Glow */
.bazaar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 140, 0, 0.08) 30%,
        rgba(163, 102, 255, 0.06) 50%,
        rgba(255, 69, 0, 0.04) 70%,
        transparent 100%);
    filter: blur(60px);
    animation: glowPulse 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* Ensure Shop content is above background */
#scene-shop h1,
#scene-shop .page-title,
#scene-shop .page-subtitle,
#scene-shop .shop-status,
#scene-shop .shop-section,
#scene-shop .nav-back-btn {
    position: relative;
    z-index: 2;
}

/* Prismatic Self - Sunny Mountaintop Background */
#scene-prismatic {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #87CEEB 0%,
        #B0E0E6 30%,
        #E0F6FF 50%,
        #B0E0E6 70%,
        #87CEEB 100%);
}

.mountaintop-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.mountaintop-content {
    position: relative;
    z-index: 1;
}

/* Sky Gradient */
.mountain-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        #4A90E2 0%,
        #87CEEB 20%,
        #B0E0E6 40%,
        #E0F6FF 60%,
        #B0E0E6 80%,
        #87CEEB 100%);
}

/* Sun */
.mountain-sun {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle,
        rgba(255, 255, 200, 1) 0%,
        rgba(255, 215, 0, 0.95) 30%,
        rgba(255, 165, 0, 0.8) 60%,
        rgba(255, 140, 0, 0.6) 100%);
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.8),
                0 0 100px rgba(255, 165, 0, 0.6),
                0 0 150px rgba(255, 140, 0, 0.4);
    animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Sun Rays */
.sun-rays {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 150px;
    height: 150px;
    transform: translate(50%, -50%);
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 200px;
    background: linear-gradient(to bottom,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(255, 165, 0, 0.4) 50%,
        transparent 100%);
    transform-origin: top center;
    border-radius: 2px;
    animation: rayRotate 20s linear infinite;
}

.ray-1 { transform: translate(-50%, -50%) rotate(0deg); }
.ray-2 { transform: translate(-50%, -50%) rotate(60deg); }
.ray-3 { transform: translate(-50%, -50%) rotate(120deg); }
.ray-4 { transform: translate(-50%, -50%) rotate(180deg); }
.ray-5 { transform: translate(-50%, -50%) rotate(240deg); }
.ray-6 { transform: translate(-50%, -50%) rotate(300deg); }

@keyframes rayRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Clouds */
.mountain-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    filter: blur(2px);
    animation: cloudDrift 30s ease-in-out infinite;
}

.cloud-1 {
    top: 15%;
    left: 10%;
    width: 120px;
    height: 60px;
    animation-delay: 0s;
}

.cloud-1::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 20px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-1::after {
    content: '';
    position: absolute;
    top: -15px;
    right: 15px;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-2 {
    top: 25%;
    right: 20%;
    width: 100px;
    height: 50px;
    animation-delay: 5s;
}

.cloud-2::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 15px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-2::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 10px;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-3 {
    top: 8%;
    left: 50%;
    width: 90px;
    height: 45px;
    animation-delay: 10s;
}

.cloud-3::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 12px;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-4 {
    top: 20%;
    left: 70%;
    width: 110px;
    height: 55px;
    animation-delay: 15s;
}

.cloud-4::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 18px;
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

.cloud-5 {
    top: 12%;
    right: 5%;
    width: 95px;
    height: 48px;
    animation-delay: 20s;
}

.cloud-5::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 14px;
    width: 58px;
    height: 58px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
}

@keyframes cloudDrift {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(30px);
        opacity: 0.9;
    }
}

/* Mountains */
.mountain-range {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

.mountain {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 400px solid;
    filter: blur(1px);
}

/* Far Mountains (darker, smaller) */
.mountain-far-1 {
    left: -5%;
    border-bottom-color: rgba(100, 120, 140, 0.6);
    border-bottom-width: 300px;
    border-left-width: 150px;
    border-right-width: 150px;
    animation: mountainShift 25s ease-in-out infinite;
}

.mountain-far-2 {
    left: 15%;
    border-bottom-color: rgba(90, 110, 130, 0.6);
    border-bottom-width: 320px;
    border-left-width: 160px;
    border-right-width: 160px;
    animation: mountainShift 28s ease-in-out infinite 3s;
}

.mountain-far-3 {
    right: 10%;
    border-bottom-color: rgba(95, 115, 135, 0.6);
    border-bottom-width: 280px;
    border-left-width: 140px;
    border-right-width: 140px;
    animation: mountainShift 30s ease-in-out infinite 6s;
}

/* Mid Mountains */
.mountain-mid-1 {
    left: 25%;
    border-bottom-color: rgba(80, 100, 120, 0.7);
    border-bottom-width: 380px;
    border-left-width: 180px;
    border-right-width: 180px;
    animation: mountainShift 22s ease-in-out infinite 2s;
}

.mountain-mid-2 {
    right: 20%;
    border-bottom-color: rgba(85, 105, 125, 0.7);
    border-bottom-width: 360px;
    border-left-width: 170px;
    border-right-width: 170px;
    animation: mountainShift 24s ease-in-out infinite 5s;
}

/* Near Mountains (lighter, larger) */
.mountain-near-1 {
    left: 5%;
    border-bottom-color: rgba(70, 90, 110, 0.8);
    border-bottom-width: 450px;
    border-left-width: 220px;
    border-right-width: 220px;
    animation: mountainShift 20s ease-in-out infinite 1s;
}

.mountain-near-2 {
    right: 5%;
    border-bottom-color: rgba(75, 95, 115, 0.8);
    border-bottom-width: 420px;
    border-left-width: 210px;
    border-right-width: 210px;
    animation: mountainShift 23s ease-in-out infinite 4s;
}

@keyframes mountainShift {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-5px);
        opacity: 0.9;
    }
}

/* Atmospheric Glow */
.mountain-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 85% 10%,
        rgba(255, 215, 0, 0.15) 0%,
        rgba(255, 165, 0, 0.1) 30%,
        rgba(135, 206, 235, 0.05) 50%,
        transparent 80%);
    pointer-events: none;
    animation: glowShift 8s ease-in-out infinite;
}

@keyframes glowShift {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* Ensure Prismatic content is above background */
#scene-prismatic h1,
#scene-prismatic .page-title,
#scene-prismatic .page-subtitle,
#scene-prismatic .page-description,
#scene-prismatic .prismatic-nav-tabs,
#scene-prismatic .prismatic-tab-content {
    position: relative;
    z-index: 2;
    scroll-margin-top: 100px; /* Space for fixed header when scrolling */
}

#scene-prismatic .nav-back-btn {
    position: relative;
    z-index: 2;
}

#scene-tarot .tarot-tab-content {
    scroll-margin-top: 100px; /* Space for fixed header when scrolling */
}

/* Chakra Cards Grid */
.chakras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

.chakra-card {
    background: rgba(20, 20, 25, 0.9);
    border: 2px solid rgba(163, 102, 255, 0.4);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.chakra-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(163, 102, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chakra-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(163, 102, 255, 0.8);
    box-shadow: 0 15px 40px rgba(163, 102, 255, 0.4);
    background: rgba(20, 20, 25, 0.95);
}

.chakra-card:hover::before {
    opacity: 1;
}

.chakra-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px currentColor;
    transition: all 0.3s ease;
}

.chakra-card:hover .chakra-icon {
    transform: scale(1.1);
    box-shadow: 0 0 30px currentColor;
}

.chakra-symbol {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.chakra-card h3 {
    color: var(--gold);
    font-size: 1.2rem;
    margin: 10px 0 5px;
    letter-spacing: 2px;
}

.chakra-sanskrit-name {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 15px;
}

.chakra-progress {
    margin-top: 15px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(100, 100, 100, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--gold));
    transition: width 0.5s ease;
    border-radius: 3px;
}

.progress-text {
    color: #999;
    font-size: 0.8rem;
}

.chakra-hint {
    color: var(--gold);
    font-size: 0.9rem;
    margin-top: 15px;
    font-style: italic;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    font-style: italic;
}

/* Chakra Detail Modal */
.chakra-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.chakra-detail-content {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(30, 30, 35, 0.95));
    border: 2px solid var(--gold);
    border-radius: 20px;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.5);
}

.chakra-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.chakra-icon-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px currentColor;
}

.chakra-symbol-large {
    font-size: 4rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

.chakra-detail-title h2 {
    color: var(--gold);
    font-size: 2rem;
    margin: 0 0 5px;
    letter-spacing: 3px;
}

.chakra-sanskrit {
    color: #999;
    font-size: 1.1rem;
    font-style: italic;
}

.chakra-info-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(10, 10, 15, 0.5);
    border-left: 4px solid var(--purple);
    border-radius: 8px;
}

.chakra-info-section h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.chakra-info-section p {
    color: #e0e0e0;
    line-height: 1.8;
    font-size: 1rem;
}

.play-frequency-btn {
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    color: var(--bg);
    padding: 12px 25px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.play-frequency-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(163, 102, 255, 0.4);
}

/* Sound Frequencies */
.sound-frequencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px auto;
    max-width: 1200px;
}

.sound-frequency-card {
    background: rgba(20, 20, 25, 0.8);
    border: 2px solid rgba(163, 102, 255, 0.3);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.sound-frequency-card.unlocked {
    border-color: rgba(163, 102, 255, 0.6);
}

.sound-frequency-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.frequency-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 20px currentColor;
}

.frequency-value {
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
}

.play-frequency-btn-small {
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    color: var(--bg);
    padding: 10px 20px;
    font-family: 'Cinzel', serif;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.play-frequency-btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(163, 102, 255, 0.4);
}

.locked-hint {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 10px;
}

/* Light Therapy */
.light-therapy-intro {
    text-align: center;
    margin: 30px auto;
    max-width: 800px;
    padding: 20px;
    background: rgba(20, 20, 25, 0.5);
    border-radius: 15px;
    border: 1px solid rgba(163, 102, 255, 0.3);
}

.light-therapy-intro p {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.light-therapy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px auto;
    max-width: 1200px;
}

.light-therapy-card {
    background: rgba(20, 20, 25, 0.8);
    border: 2px solid;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.light-therapy-card.unlocked {
    box-shadow: 0 0 30px currentColor;
}

.light-therapy-card.locked {
    opacity: 0.5;
}

.light-color-display {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.light-therapy-card:hover .light-color-display {
    transform: scale(1.1);
}

.light-color-name {
    color: var(--gold);
    font-size: 1rem;
    font-weight: bold;
    margin: 10px 0;
}

.light-info {
    color: #e0e0e0;
    line-height: 1.6;
    margin-top: 15px;
}

/* Meditation Practices */
/* Under Construction Banner */
.under-construction-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 30px;
    margin-bottom: 30px;
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(163, 102, 255, 0.1) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
}

.under-construction-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.1) 0%,
        transparent 70%);
    animation: constructionGlow 3s ease-in-out infinite;
}

@keyframes constructionGlow {
    0%, 100% { opacity: 0.5; transform: rotate(0deg); }
    50% { opacity: 0.8; transform: rotate(180deg); }
}

.construction-icon {
    font-size: 2.5rem;
    animation: constructionPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes constructionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.construction-text {
    z-index: 1;
}

.construction-text h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.construction-text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
}

.meditation-practices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    margin: 40px auto;
    max-width: 1200px;
    opacity: 0.6;
    pointer-events: none;
}

.meditation-practice-card {
    background: rgba(20, 20, 25, 0.8);
    border: 2px solid rgba(163, 102, 255, 0.3);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
}

.meditation-practice-card.unlocked {
    border-color: rgba(163, 102, 255, 0.6);
}

.meditation-practice-card.locked {
    opacity: 0.5;
}

.meditation-practice-card h3 {
    color: var(--gold);
    font-size: 1.4rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.meditation-practice-card p {
    color: #e0e0e0;
    line-height: 1.8;
    margin-bottom: 15px;
}

.practice-duration {
    display: inline-block;
    color: var(--purple);
    font-size: 0.9rem;
    padding: 5px 15px;
    background: rgba(163, 102, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 15px;
}

.start-practice-btn {
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    color: var(--bg);
    padding: 12px 30px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.start-practice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(163, 102, 255, 0.4);
}

.scene.active {
    display: block;
}

/* Altar - Mystical Magician Table */
.altar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 60px;
    perspective: 1000px;
}

.magician-table {
    position: relative;
    width: 900px;
    height: 500px;
    background: linear-gradient(135deg, 
        #3d2817 0%, 
        #2c1e14 25%, 
        #1a110a 50%, 
        #2c1e14 75%, 
        #3d2817 100%);
    border: 4px solid var(--wood);
    border-radius: 15px;
    box-shadow: 
        0 0 60px rgba(212, 175, 55, 0.3),
        inset 0 0 40px rgba(0, 0, 0, 0.5),
        0 20px 80px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    padding: 40px;
    position: relative;
    overflow: visible;
}

.magician-table::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--gold), 
        var(--ember), 
        var(--purple), 
        var(--gold));
    border-radius: 15px;
    z-index: -1;
    opacity: 0.3;
    animation: tableGlow 3s ease-in-out infinite;
}

@keyframes tableGlow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

/* Elemental Tools - Positioned in open space around table */
.elemental-tool {
    position: absolute;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 3;
}

.elemental-tool:hover {
    transform: scale(1.2) rotate(10deg);
    background: rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.light-tool:hover {
    border-color: #ffed4e;
    background: rgba(255, 237, 78, 0.3);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    transform: translateX(-50%) scale(1.2) rotate(10deg);
}

.dark-tool:hover {
    border-color: #666;
    background: rgba(50, 50, 50, 0.5);
    box-shadow: 0 0 20px rgba(150, 150, 150, 0.4);
    transform: translateX(-50%) scale(1.2) rotate(10deg);
}

.soil-tool:hover {
    border-color: #a0522d;
    background: rgba(160, 82, 45, 0.3);
    box-shadow: 0 0 20px rgba(139, 69, 19, 0.6);
}

.fire-tool:hover {
    border-color: #ff6347;
    background: rgba(255, 99, 71, 0.3);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
}

.wind-tool:hover {
    border-color: #b0e0e6;
    background: rgba(176, 224, 230, 0.3);
    box-shadow: 0 0 20px rgba(135, 206, 235, 0.6);
}

.water-tool:hover {
    border-color: #5ba3f5;
    background: rgba(91, 163, 245, 0.3);
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.8);
}

/* Dark Triangle: Dark (top), Soil (bottom-left), Fire (bottom-right) */
.dark-tool {
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    border-color: #4a4a4a;
    background: rgba(30, 30, 30, 0.4);
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.3);
    z-index: 2;
}

.soil-tool {
    bottom: -40px;
    left: 15%;
    border-color: #8b4513;
    background: rgba(139, 69, 19, 0.1);
}

.fire-tool {
    bottom: -40px;
    right: 15%;
    border-color: var(--ember);
    background: rgba(255, 69, 0, 0.1);
}

/* Light Triangle: Light (bottom), Wind (top-left), Water (top-right) */
.light-tool {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    z-index: 2;
}

.wind-tool {
    top: -40px;
    left: 15%;
    border-color: #87ceeb;
    background: rgba(135, 206, 235, 0.1);
}

.water-tool {
    top: -40px;
    right: 15%;
    border-color: #4a90e2;
    background: rgba(74, 144, 226, 0.1);
}

/* Sacred Geometry Trim - Connecting the Two Triangles */
.sacred-geometry-trim {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: calc(100% + 80px);
    z-index: 0;
    pointer-events: none;
}

/* Triangle connecting lines - Light Triangle */
.geometry-line {
    position: absolute;
    width: 2px;
    opacity: 0.5;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Line connecting Light (bottom) to Wind (top-left) */
.line-1 {
    bottom: -40px;
    left: 15%;
    height: calc(50% + 40px);
    transform: rotate(-30deg);
    transform-origin: bottom left;
    background: linear-gradient(to top,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(135, 206, 235, 0.4) 100%);
    animation: geometryPulse 4s ease-in-out infinite;
}

/* Line connecting Light (bottom) to Water (top-right) */
.line-2 {
    bottom: -40px;
    right: 15%;
    height: calc(50% + 40px);
    transform: rotate(30deg);
    transform-origin: bottom right;
    background: linear-gradient(to top,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(74, 144, 226, 0.4) 100%);
    animation: geometryPulse 4s ease-in-out infinite 1s;
}

/* Line connecting Wind (top-left) to Water (top-right) */
.line-3 {
    top: -40px;
    left: 15%;
    width: calc(70%);
    height: 2px;
    background: linear-gradient(to right,
        rgba(135, 206, 235, 0.6) 0%,
        rgba(74, 144, 226, 0.6) 100%);
    animation: geometryPulse 4s ease-in-out infinite 2s;
}

/* Dark Triangle Lines */
/* Line connecting Dark (top) to Soil (bottom-left) */
.line-4 {
    top: -40px;
    left: 15%;
    height: calc(50% + 40px);
    transform: rotate(30deg);
    transform-origin: top left;
    background: linear-gradient(to bottom,
        rgba(100, 100, 100, 0.6) 0%,
        rgba(139, 69, 19, 0.4) 100%);
    animation: geometryPulse 4s ease-in-out infinite 0.5s;
}

/* Line connecting Dark (top) to Fire (bottom-right) */
.line-5 {
    top: -40px;
    right: 15%;
    height: calc(50% + 40px);
    transform: rotate(-30deg);
    transform-origin: top right;
    background: linear-gradient(to bottom,
        rgba(100, 100, 100, 0.6) 0%,
        rgba(255, 69, 0, 0.4) 100%);
    animation: geometryPulse 4s ease-in-out infinite 1.5s;
}

/* Line connecting Soil (bottom-left) to Fire (bottom-right) */
.line-6 {
    bottom: -40px;
    left: 15%;
    width: calc(70%);
    height: 2px;
    background: linear-gradient(to right,
        rgba(139, 69, 19, 0.6) 0%,
        rgba(255, 69, 0, 0.6) 100%);
    animation: geometryPulse 4s ease-in-out infinite 2.5s;
}

@keyframes geometryPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Sacred Geometry Patterns - At triangle vertices */
.geometry-pattern {
    position: absolute;
    border: 1px solid;
    opacity: 0.6;
}

/* Pattern at Light (bottom center) */
.pattern-1 {
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border-color: rgba(255, 215, 0, 0.5);
    animation: patternRotate 8s linear infinite;
}

/* Pattern at Wind (top-left) */
.pattern-2 {
    top: -50px;
    left: 15%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border-color: rgba(135, 206, 235, 0.5);
    animation: patternRotate 6s linear infinite reverse;
}

/* Pattern at Water (top-right) */
.pattern-3 {
    top: -50px;
    right: 15%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border-color: rgba(74, 144, 226, 0.5);
    animation: patternRotate 6s linear infinite;
}

/* Dark Triangle Patterns */
/* Pattern at Dark (top center) */
.pattern-4 {
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border-color: rgba(100, 100, 100, 0.5);
    animation: patternRotate 8s linear infinite;
}

/* Pattern at Soil (bottom-left) */
.pattern-5 {
    bottom: -50px;
    left: 15%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border-color: rgba(139, 69, 19, 0.5);
    animation: patternRotate45 6s linear infinite reverse;
}

/* Pattern at Fire (bottom-right) */
.pattern-6 {
    bottom: -50px;
    right: 15%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border-color: rgba(255, 69, 0, 0.5);
    animation: patternRotate45 6s linear infinite;
}

@keyframes patternRotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes patternRotate45 {
    0% { transform: rotate(45deg); }
    100% { transform: rotate(405deg); }
}

.pattern-2 {
    animation: patternRotate45 6s linear infinite reverse;
}

.pattern-3 {
    animation: patternRotate45 6s linear infinite;
}

.pattern-5 {
    animation: patternRotate45 6s linear infinite reverse;
}

.pattern-6 {
    animation: patternRotate45 6s linear infinite;
}

/* Sacred Geometry Circles - At triangle centers and midpoints */
.geometry-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    opacity: 0.5;
}

/* Circle at center of Light triangle (between Light, Wind, Water) */
.circle-1 {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-color: rgba(255, 215, 0, 0.6);
    animation: circlePulse 3s ease-in-out infinite;
}

/* Circle at midpoint between Wind and Water (top) */
.circle-2 {
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-color: rgba(135, 206, 235, 0.6);
    animation: circlePulse 3s ease-in-out infinite 1s;
}

/* Circle at center of Dark triangle (between Dark, Soil, Fire) */
.circle-3 {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-color: rgba(100, 100, 100, 0.6);
    animation: circlePulse 3s ease-in-out infinite 2s;
}

@keyframes circlePulse {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: translateX(-50%) scale(1.3);
        opacity: 0.8;
    }
}

/* Additional Dark Triangle styling */
.dark-tool .tool-label {
    color: #bbb;
}

.dark-tool .tool-label {
    color: #bbb;
}

.dark-tool:hover {
    border-color: #666;
    background: rgba(50, 50, 50, 0.5);
    box-shadow: 0 0 20px rgba(150, 150, 150, 0.4);
}

.tool-icon {
    font-size: 1.8rem;
    margin-bottom: 3px;
}


.tool-label {
    font-size: 0.65rem;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Altar Items - Center Layout */
.altar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.altar-item:hover {
    transform: translateY(-5px);
}

/* Bell with Frequency */
.bell-item {
    min-width: 200px;
}

.frequency-selector {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.frequency-selector label {
    color: var(--gold);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.frequency-selector select {
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 8px 15px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.frequency-selector select:hover,
.frequency-selector select:focus {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    outline: none;
}

.frequency-info {
    color: #666;
    font-size: 0.75rem;
    margin-top: 5px;
    min-height: 20px;
}

.bell {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
    border: 3px solid var(--gold);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.bell:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    animation: bellRing 0.5s ease-in-out;
}

@keyframes bellRing {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-5deg); }
    75% { transform: scale(1.15) rotate(5deg); }
}

.bell-icon {
    font-size: 3.5rem;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.bell-sound-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
}

.bell.ringing .bell-sound-wave {
    animation: soundWave 1s ease-out;
}

@keyframes soundWave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Rune Inscription */
.rune-item {
    min-width: 150px;
}

.rune-inscription-block {
    width: 110px;
    height: 110px;
    position: relative;
    margin-bottom: 15px;
}

.inscription-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(163, 102, 255, 0.3), 
        rgba(163, 102, 255, 0.1));
    border: 3px solid var(--purple);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
}

.rune-inscription-block:hover .inscription-surface {
    background: linear-gradient(135deg, 
        rgba(163, 102, 255, 0.4), 
        rgba(163, 102, 255, 0.2));
    box-shadow: 0 0 40px rgba(163, 102, 255, 0.6);
    transform: scale(1.05);
}

.inscription-surface.burning {
    background: linear-gradient(135deg, 
        rgba(255, 69, 0, 0.4), 
        rgba(255, 140, 0, 0.3),
        rgba(255, 215, 0, 0.2));
    border-color: var(--ember);
    box-shadow: 
        0 0 30px rgba(255, 69, 0, 0.8),
        0 0 60px rgba(255, 140, 0, 0.6),
        inset 0 0 20px rgba(255, 69, 0, 0.3);
    animation: burnSurface 2s ease-in-out infinite;
}

@keyframes burnSurface {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(255, 69, 0, 0.8),
            0 0 60px rgba(255, 140, 0, 0.6),
            inset 0 0 20px rgba(255, 69, 0, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(255, 69, 0, 1),
            0 0 100px rgba(255, 140, 0, 0.8),
            inset 0 0 30px rgba(255, 69, 0, 0.5);
    }
}

.inscription-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: radial-gradient(circle, 
        rgba(163, 102, 255, 0.4) 0%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.rune-inscription-block:hover .inscription-glow {
    opacity: 1;
    animation: pulseGlow 2s ease-in-out infinite;
}

.inscription-glow.flame {
    background: radial-gradient(ellipse at center, 
        rgba(255, 69, 0, 0.8) 0%,
        rgba(255, 140, 0, 0.6) 30%,
        rgba(255, 215, 0, 0.4) 50%,
        transparent 80%);
    opacity: 1;
    animation: flameGlow 1.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes flameGlow {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1) translateY(0);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2) translateY(-5px);
    }
}

.rune-inscription {
    font-size: 3rem;
    color: var(--gold);
    font-weight: bold;
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.rune-inscription.inscribing {
    animation: inscribe 1s ease-in-out;
}

.rune-inscription.burning {
    color: var(--ember);
    filter: 
        drop-shadow(0 0 10px rgba(255, 69, 0, 1))
        drop-shadow(0 0 20px rgba(255, 140, 0, 0.8))
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    animation: burningRune 1.5s ease-in-out infinite;
}

@keyframes inscribe {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.7; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes burningRune {
    0%, 100% { 
        transform: scale(1);
        filter: 
            drop-shadow(0 0 10px rgba(255, 69, 0, 1))
            drop-shadow(0 0 20px rgba(255, 140, 0, 0.8))
            drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
    }
    25% { 
        transform: scale(1.05) rotate(-1deg);
        filter: 
            drop-shadow(0 -2px 15px rgba(255, 69, 0, 1))
            drop-shadow(0 -4px 25px rgba(255, 140, 0, 0.9))
            drop-shadow(0 -6px 35px rgba(255, 215, 0, 0.7));
    }
    75% { 
        transform: scale(1.05) rotate(1deg);
        filter: 
            drop-shadow(0 2px 15px rgba(255, 69, 0, 1))
            drop-shadow(0 4px 25px rgba(255, 140, 0, 0.9))
            drop-shadow(0 6px 35px rgba(255, 215, 0, 0.7));
    }
}

/* Flame particles effect */
.flame-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.flame-particle {
    position: absolute;
    width: 4px;
    height: 8px;
    background: linear-gradient(to top, 
        rgba(255, 69, 0, 0.9),
        rgba(255, 140, 0, 0.7),
        rgba(255, 215, 0, 0.5),
        transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: floatFlame 2s ease-out infinite;
    opacity: 0;
}

.flame-particle:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
    animation-duration: 2s;
}

.flame-particle:nth-child(2) {
    left: 40%;
    animation-delay: 0.3s;
    animation-duration: 2.2s;
}

.flame-particle:nth-child(3) {
    left: 60%;
    animation-delay: 0.6s;
    animation-duration: 1.8s;
}

.flame-particle:nth-child(4) {
    left: 80%;
    animation-delay: 0.9s;
    animation-duration: 2.1s;
}

.flame-particle:nth-child(5) {
    left: 30%;
    animation-delay: 0.2s;
    animation-duration: 2.3s;
}

.flame-particle:nth-child(6) {
    left: 70%;
    animation-delay: 0.5s;
    animation-duration: 1.9s;
}

@keyframes floatFlame {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.5);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) translateX(var(--flame-offset, 0)) scale(1.2);
    }
}

.rune-meaning-altar {
    color: #ccc;
    font-size: 0.8rem;
    margin-top: 12px;
    min-height: 35px;
    line-height: 1.5;
    padding: 12px;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 8px;
    border: 2px solid rgba(163, 102, 255, 0.3);
    transition: all 0.5s ease;
    max-width: 200px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.rune-meaning-altar:not(:empty) {
    border-color: rgba(255, 69, 0, 0.5);
    background: rgba(20, 10, 5, 0.9);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 69, 0, 0.2),
        inset 0 0 10px rgba(255, 69, 0, 0.1);
    animation: meaningGlow 2s ease-in-out infinite;
}

@keyframes meaningGlow {
    0%, 100% { 
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(255, 69, 0, 0.2),
            inset 0 0 10px rgba(255, 69, 0, 0.1);
    }
    50% { 
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 69, 0, 0.3),
            inset 0 0 15px rgba(255, 69, 0, 0.15);
    }
}

/* Card Flip */
.card-item {
    min-width: 200px;
}

.card-flip-container {
    width: 150px;
    height: 260px;
    perspective: 1000px;
    margin: 0 auto 15px;
}

.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
}

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

.card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-side.card-front {
    background: linear-gradient(135deg, var(--wood), var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-side.card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--wood), var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--gold);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(135deg, var(--wood), var(--bg));
}

.card-meaning-altar {
    color: #ccc;
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 60px;
    line-height: 1.4;
    padding: 10px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hint {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-top: 10px;
    letter-spacing: 1px;
}

.altar-instruction {
    color: #e0d5f0;
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 15px;
    transition: opacity 0.5s ease;
}

/* Mystical Invitation with Smoky Transition */
.altar-invitation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 5, 5, 0.75);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

/* Smoke overlay effect */
.altar-invitation .smoke-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(100, 100, 100, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(80, 80, 80, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%, rgba(120, 120, 120, 0.2) 0%, transparent 50%);
    animation: smokeDrift 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes smokeDrift {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-10px) translateX(-15px);
        opacity: 0.35;
    }
    75% {
        transform: translateY(-30px) translateX(5px);
        opacity: 0.4;
    }
}

.invitation-content {
    max-width: 600px;
    background: linear-gradient(135deg,
        rgba(44, 30, 20, 0.98) 0%,
        rgba(60, 45, 30, 0.98) 50%,
        rgba(44, 30, 20, 0.98) 100%);
    border: 3px solid var(--gold);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(212, 175, 55, 0.4),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    position: relative;
    text-align: center;
    z-index: 2;
    animation: invitationGlow 3s ease-in-out infinite, smokeFadeIn 2s ease-in;
}

@keyframes smokeFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

@keyframes invitationGlow {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.9),
            0 0 40px rgba(212, 175, 55, 0.4),
            inset 0 0 30px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.9),
            0 0 60px rgba(212, 175, 55, 0.6),
            inset 0 0 40px rgba(212, 175, 55, 0.2);
    }
}

.invitation-stars {
    font-size: 2rem;
    color: var(--gold);
    margin: 15px 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.invitation-title {
    font-size: 2.5rem;
    color: var(--gold);
    margin: 20px 0;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
    font-family: 'Great Vibes', cursive;
    letter-spacing: 3px;
}

.invitation-text {
    color: #e0d5f0;
    font-size: 1.15rem;
    line-height: 2;
    margin: 20px 0;
    font-style: italic;
}

.invitation-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.invitation-btn {
    border-radius: 15px;
    padding: 18px 40px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Cinzel', serif;
    min-width: 180px;
}

.invitation-btn-primary {
    background: linear-gradient(135deg, var(--gold), rgba(212, 175, 55, 0.8));
    color: #1a1a1a;
    border: 3px solid var(--gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    margin-top: 30px;
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
    }
}

.invitation-btn-primary:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), var(--gold));
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.6);
    animation: none;
}

.invitation-btn-primary:active {
    transform: translateY(-1px) scale(1.02);
}

.invitation-btn-secondary {
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.8), rgba(44, 30, 20, 0.8));
    color: var(--gold);
    border: 3px solid rgba(212, 175, 55, 0.6);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.invitation-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(60, 45, 30, 0.95), rgba(44, 30, 20, 0.95));
    border-color: var(--gold);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}

.invitation-btn-secondary:active {
    transform: translateY(-1px) scale(1.02);
}

.enter-btn.invitation-active {
    animation: buttonGlow 2s ease-in-out infinite;
    transform: scale(1.05);
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 12px 35px rgba(212, 175, 55, 0.7);
    }
}

.enter-btn {
    background: none;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.enter-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Grand Hall */
/* Grand Hall - Akashic Records Background */
#scene-atrium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #0a0a1a 0%,
        #1a1a3e 20%,
        #2a2a5e 40%,
        #3a3a7e 60%,
        #2a2a5e 80%,
        #0a0a1a 100%);
}

.akashic-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.akashic-content {
    position: relative;
    z-index: 1;
}

/* Akashic Layers - Heavenly gradient */
.akashic-layers {
    position: absolute;
    width: 100%;
    height: 100%;
}

.akashic-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    filter: blur(60px);
}

.layer-1 {
    background: radial-gradient(circle at 20% 30%,
        rgba(212, 175, 55, 0.4) 0%,
        rgba(163, 102, 255, 0.3) 30%,
        rgba(135, 206, 250, 0.2) 60%,
        transparent 100%);
    animation: akashicDrift1 20s ease-in-out infinite;
}

.layer-2 {
    background: radial-gradient(circle at 80% 70%,
        rgba(138, 43, 226, 0.5) 0%,
        rgba(75, 0, 130, 0.3) 30%,
        rgba(135, 206, 250, 0.25) 50%,
        transparent 100%);
    animation: akashicDrift2 25s ease-in-out infinite;
}

.layer-3 {
    background: radial-gradient(circle at 50% 50%,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(173, 216, 230, 0.25) 40%,
        rgba(147, 112, 219, 0.2) 70%,
        transparent 100%);
    animation: akashicDrift3 30s ease-in-out infinite;
}

@keyframes akashicDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(50px, -30px) scale(1.1); opacity: 0.8; }
}

@keyframes akashicDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-40px, 40px) scale(1.15); opacity: 0.7; }
}

@keyframes akashicDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(30px, 50px) scale(1.2); opacity: 0.6; }
}

/* Akashic Stars - Twinkling heavenly lights */
.akashic-stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 1) 0%,
        rgba(173, 216, 230, 0.8) 50%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8),
                0 0 20px rgba(173, 216, 230, 0.6),
                0 0 30px rgba(147, 112, 219, 0.4);
    animation: twinkle 3s ease-in-out infinite;
}

.star:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.star:nth-child(2) { top: 25%; left: 80%; animation-delay: 0.5s; }
.star:nth-child(3) { top: 40%; left: 45%; animation-delay: 1s; }
.star:nth-child(4) { top: 60%; left: 20%; animation-delay: 1.5s; }
.star:nth-child(5) { top: 75%; left: 70%; animation-delay: 2s; }
.star:nth-child(6) { top: 20%; left: 60%; animation-delay: 0.3s; }
.star:nth-child(7) { top: 50%; left: 85%; animation-delay: 1.2s; }
.star:nth-child(8) { top: 85%; left: 40%; animation-delay: 0.8s; }
.star:nth-child(9) { top: 35%; left: 30%; animation-delay: 1.8s; }
.star:nth-child(10) { top: 65%; left: 55%; animation-delay: 0.7s; }
.star:nth-child(11) { top: 15%; left: 90%; animation-delay: 1.4s; }
.star:nth-child(12) { top: 90%; left: 75%; animation-delay: 2.2s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Akashic Constellations - Divine patterns */
.akashic-constellations {
    position: absolute;
    width: 100%;
    height: 100%;
}

.constellation {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.4;
    filter: blur(2px);
}

.constellation-1 {
    top: 15%;
    left: 10%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(173, 216, 230, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    animation: constellationPulse1 8s ease-in-out infinite;
}

.constellation-2 {
    top: 60%;
    right: 15%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.4) 0%,
        rgba(212, 175, 55, 0.25) 50%,
        transparent 80%);
    border-radius: 50%;
    animation: constellationPulse2 10s ease-in-out infinite;
}

.constellation-3 {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(135, 206, 250, 0.35) 0%,
        rgba(147, 112, 219, 0.25) 45%,
        transparent 75%);
    border-radius: 50%;
    animation: constellationPulse3 12s ease-in-out infinite;
}

@keyframes constellationPulse1 {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.6; }
}

@keyframes constellationPulse2 {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.3) rotate(-180deg); opacity: 0.5; }
}

@keyframes constellationPulse3 {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0.35; }
    50% { transform: translateX(-50%) scale(1.15) rotate(90deg); opacity: 0.55; }
}

/* Akashic Light Rays - Heavenly beams */
.akashic-light-rays {
    position: absolute;
    width: 100%;
    height: 100%;
}

.light-ray {
    position: absolute;
    width: 300px;
    height: 100vh;
    background: linear-gradient(to bottom,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(173, 216, 230, 0.15) 30%,
        rgba(138, 43, 226, 0.1) 60%,
        transparent 100%);
    clip-path: polygon(45% 0%, 55% 0%, 52% 100%, 48% 100%);
    filter: blur(30px);
    animation: raySweep 15s ease-in-out infinite;
}

.ray-1 {
    left: 20%;
    animation-delay: 0s;
    animation-duration: 18s;
}

.ray-2 {
    left: 50%;
    animation-delay: 3s;
    animation-duration: 20s;
}

.ray-3 {
    right: 20%;
    animation-delay: 6s;
    animation-duration: 16s;
}

.ray-4 {
    left: 75%;
    animation-delay: 9s;
    animation-duration: 22s;
}

@keyframes raySweep {
    0%, 100% { 
        opacity: 0.3;
        transform: translateX(0) translateY(-50px);
    }
    50% { 
        opacity: 0.6;
        transform: translateX(30px) translateY(0);
    }
}

/* Akashic Particles - Floating knowledge fragments */
.akashic-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.akashic-particles .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.9) 0%,
        rgba(173, 216, 230, 0.7) 50%,
        rgba(138, 43, 226, 0.5) 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.8),
                0 0 30px rgba(173, 216, 230, 0.6);
    animation: akashicFloat 20s ease-in-out infinite;
}

.akashic-particles .particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 25s;
}

.akashic-particles .particle:nth-child(2) {
    left: 25%;
    animation-delay: 3s;
    animation-duration: 22s;
}

.akashic-particles .particle:nth-child(3) {
    left: 40%;
    animation-delay: 6s;
    animation-duration: 28s;
}

.akashic-particles .particle:nth-child(4) {
    left: 55%;
    animation-delay: 2s;
    animation-duration: 24s;
}

.akashic-particles .particle:nth-child(5) {
    left: 70%;
    animation-delay: 5s;
    animation-duration: 26s;
}

.akashic-particles .particle:nth-child(6) {
    left: 85%;
    animation-delay: 8s;
    animation-duration: 23s;
}

.akashic-particles .particle:nth-child(7) {
    left: 35%;
    animation-delay: 4s;
    animation-duration: 27s;
}

.akashic-particles .particle:nth-child(8) {
    left: 65%;
    animation-delay: 7s;
    animation-duration: 21s;
}

@keyframes akashicFloat {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(40px) scale(1.3);
    }
    90% {
        opacity: 1;
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(-30px) scale(0.8);
    }
}

/* Ensure Grand Hall content is above background */
#scene-atrium h1,
#scene-atrium p,
#scene-atrium .atrium-wings,
#scene-atrium .nav-back-btn {
    position: relative;
    z-index: 2;
}

.atrium-wings {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 60px auto;
    max-width: 600px;
}

.wing {
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid var(--gold);
    padding: 40px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Rainbow Wings - ROYGBIV */
/* Red - Tarot Sanctuary */
.wing-red {
    background: rgba(139, 0, 0, 0.3);
    border-color: #8B0000;
}

.wing-red:hover {
    background: rgba(139, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.6);
    border-color: #C41E3A;
    transform: translateY(-5px);
}

/* Orange - Rune Forest */
.wing-orange {
    background: rgba(255, 107, 53, 0.2);
    border-color: #FF6B35;
}

.wing-orange:hover {
    background: rgba(255, 107, 53, 0.4);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.6);
    border-color: #FF8C00;
    transform: translateY(-5px);
}

/* Yellow - Crystal Atrium */
.wing-yellow {
    background: rgba(255, 210, 63, 0.2);
    border-color: #FFD23F;
}

.wing-yellow:hover {
    background: rgba(255, 210, 63, 0.4);
    box-shadow: 0 0 30px rgba(255, 210, 63, 0.6);
    border-color: #FFD700;
    transform: translateY(-5px);
}

/* Green - Prismatic Self */
.wing-green {
    background: rgba(6, 167, 125, 0.2);
    border-color: #06A77D;
}

.wing-green:hover {
    background: rgba(6, 167, 125, 0.4);
    box-shadow: 0 0 30px rgba(6, 167, 125, 0.6);
    border-color: #32CD32;
    transform: translateY(-5px);
}

/* Blue - Journal */
.wing-blue {
    background: rgba(74, 144, 226, 0.2);
    border-color: #4A90E2;
}

.wing-blue:hover {
    background: rgba(74, 144, 226, 0.4);
    box-shadow: 0 0 30px rgba(74, 144, 226, 0.6);
    border-color: #4169E1;
    transform: translateY(-5px);
}

/* Indigo - Shop */
.wing-indigo {
    background: rgba(107, 70, 193, 0.2);
    border-color: #6B46C1;
}

.wing-indigo:hover {
    background: rgba(107, 70, 193, 0.4);
    box-shadow: 0 0 30px rgba(107, 70, 193, 0.6);
    border-color: #4B0082;
    transform: translateY(-5px);
}

/* Violet - Settings */
.wing-violet {
    background: rgba(155, 89, 182, 0.2);
    border-color: #9B59B6;
}

.wing-violet:hover {
    background: rgba(155, 89, 182, 0.4);
    box-shadow: 0 0 30px rgba(155, 89, 182, 0.6);
    border-color: #8B008B;
    transform: translateY(-5px);
}

/* Default hover for any wing without specific color */
.wing:hover {
    transform: translateY(-5px);
}

.wing.wing-placeholder {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: rgba(163, 102, 255, 0.5);
    border-style: dashed;
}

.wing.wing-placeholder:hover {
    background: rgba(163, 102, 255, 0.05);
    box-shadow: 0 0 20px rgba(163, 102, 255, 0.2);
    transform: translateY(-2px);
}

.wing h2 {
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

/* Rainbow wing title colors on hover */
.wing-red:hover h2 {
    color: #FF6B6B;
}

.wing-orange:hover h2 {
    color: #FFA500;
}

.wing-yellow:hover h2 {
    color: #FFD700;
}

.wing-green:hover h2 {
    color: #32CD32;
}

.wing-blue:hover h2 {
    color: #4A90E2;
}

.wing-indigo:hover h2 {
    color: #6B46C1;
}

.wing-violet:hover h2 {
    color: #9B59B6;
}

.wing.wing-placeholder h2 {
    color: rgba(163, 102, 255, 0.8);
}

.wing p {
    color: #666;
    font-size: 0.9rem;
}

.coming-soon-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(163, 102, 255, 0.2);
    border: 1px solid var(--purple);
    color: var(--purple);
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
}

.prismatic-wing {
    position: relative;
    background: linear-gradient(135deg, rgba(163, 102, 255, 0.1), rgba(255, 215, 0, 0.1));
    border: 2px solid rgba(163, 102, 255, 0.5);
}

.prismatic-glow {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    animation: prismaticPulse 2s ease-in-out infinite;
}

@keyframes prismaticPulse {
    0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(180deg); }
}

.crystal-wing {
    position: relative;
    overflow: hidden;
}

.crystal-shimmer {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    animation: shimmer 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(163, 102, 255, 0.6));
}

@keyframes shimmer {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Crystal Atrium */
.crystal-return-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    z-index: 10;
}

.crystal-return-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Crystal Atrium Background */
#scene-crystals {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #0a0a1a 0%,
        #1a1a2e 20%,
        #16213e 40%,
        #1a1a2e 60%,
        #0a0a1a 80%,
        #050510 100%);
}

.crystal-atrium-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.crystal-atrium-content {
    position: relative;
    z-index: 1;
}

/* Ethereal Sky */
.atrium-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 20%,
        rgba(163, 102, 255, 0.2) 0%,
        rgba(138, 43, 226, 0.15) 30%,
        rgba(75, 0, 130, 0.1) 50%,
        transparent 80%);
    animation: skyShift 15s ease-in-out infinite;
}

@keyframes skyShift {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Floating Crystal Particles */
.atrium-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.8) 0%,
        rgba(163, 102, 255, 0.6) 50%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
    animation: particleFloat 20s ease-in-out infinite;
}

.particle-1 { top: 20%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 40%; left: 25%; animation-delay: 3s; }
.particle-3 { top: 60%; right: 15%; animation-delay: 6s; }
.particle-4 { top: 30%; right: 30%; animation-delay: 9s; }
.particle-5 { top: 70%; left: 50%; animation-delay: 12s; }
.particle-6 { top: 50%; left: 70%; animation-delay: 15s; }
.particle-7 { top: 15%; right: 50%; animation-delay: 18s; }
.particle-8 { top: 80%; right: 40%; animation-delay: 21s; }

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-30px) translateX(20px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) translateX(-15px);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-40px) translateX(10px);
        opacity: 0.7;
    }
}

/* Ambient Glow */
.atrium-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 30%,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(163, 102, 255, 0.08) 40%,
        transparent 70%);
    animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Beautiful Display Shelf */
.crystal-display-shelf {
    position: relative;
    margin: 60px auto;
    max-width: 1400px;
    padding: 40px;
    z-index: 2;
    min-height: 700px;
}

.shelf-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(20, 20, 30, 0.9) 0%,
        rgba(30, 25, 40, 0.85) 50%,
        rgba(20, 20, 30, 0.9) 100%);
    border-radius: 25px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 80px rgba(163, 102, 255, 0.1),
        inset 0 0 40px rgba(212, 175, 55, 0.05);
    border: 2px solid rgba(212, 175, 55, 0.2);
    z-index: 1;
}

.shelf-structure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Shelf Tiers */
.shelf-tier {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 12px;
    background: linear-gradient(to bottom,
        rgba(101, 67, 33, 0.9) 0%,
        rgba(139, 69, 19, 0.95) 50%,
        rgba(101, 67, 33, 0.9) 100%);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.6),
        inset 0 2px 5px rgba(212, 175, 55, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2);
    border-radius: 3px;
    pointer-events: none;
}

.tier-1 {
    top: 20%;
    transform: perspective(500px) rotateX(5deg);
}

.tier-2 {
    top: 50%;
    transform: perspective(500px) rotateX(5deg);
}

.tier-3 {
    top: 80%;
    transform: perspective(500px) rotateX(5deg);
}

/* Shelf Supports */
.shelf-supports {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
}

.shelf-support {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right,
        rgba(101, 67, 33, 0.8) 0%,
        rgba(139, 69, 19, 0.9) 50%,
        rgba(101, 67, 33, 0.8) 100%);
    box-shadow: 
        inset -5px 0 10px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(212, 175, 55, 0.2);
    border-radius: 5px 5px 0 0;
    pointer-events: none;
}

.support-left {
    left: 5%;
}

.support-right {
    right: 5%;
}

.crystal-shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 140px;
    gap: 20px;
    margin: 40px auto;
    padding: 30px 20px;
    z-index: 10;
    min-height: 400px;
    max-width: 1200px;
}

/* Unique Crystal Figurines */

/* Emerald Tower */
.figurine-tower {
    position: relative;
    width: 80px;
    height: 120px;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    z-index: 13;
    /* Ensure centered */
    left: 0;
    right: 0;
}

.tower-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.4),
        0 0 30px var(--gem-color);
}

.tower-middle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.4),
        0 0 30px var(--gem-color);
}

.tower-top {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 35px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.4),
        0 0 30px var(--gem-color);
}

.tower-spire {
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 15px;
    background: linear-gradient(to top,
        var(--gem-dark) 0%,
        var(--gem-mid) 50%,
        var(--gem-light) 100%);
    box-shadow: 0 0 20px var(--gem-color);
}

/* Ruby Cardinal */
.figurine-cardinal {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    z-index: 13;
    /* Ensure centered */
    left: 0;
    right: 0;
}

.cardinal-body {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 0 30px var(--gem-color);
}

.cardinal-head {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background: radial-gradient(ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.3),
        0 0 25px var(--gem-color);
}

.cardinal-beak {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--gem-dark);
    filter: drop-shadow(0 0 5px var(--gem-color));
}

.cardinal-wing {
    position: absolute;
    width: 30px;
    height: 25px;
    background: radial-gradient(ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.3),
        0 0 20px var(--gem-color);
}

.wing-left {
    bottom: 25px;
    left: 15px;
    transform: rotate(-20deg);
}

.wing-right {
    bottom: 25px;
    right: 15px;
    transform: rotate(20deg);
}

.cardinal-tail {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid var(--gem-dark);
    filter: drop-shadow(0 0 10px var(--gem-color));
}

/* Rose Quartz Heart */
.figurine-heart {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    filter: drop-shadow(0 0 25px var(--gem-color)) drop-shadow(0 0 50px var(--gem-color));
    animation: heartPulse 3s ease-in-out infinite;
    z-index: 13;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.heart-left,
.heart-right {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.4),
        0 0 30px var(--gem-color);
}

.heart-left {
    top: 10px;
    left: 10px;
    transform: rotate(-45deg);
}

.heart-right {
    top: 10px;
    right: 10px;
    transform: rotate(45deg);
}

.heart-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle,
        var(--gem-color) 0%,
        transparent 70%);
    opacity: 0.3;
    animation: glowPulse 2s ease-in-out infinite;
}

/* Sapphire Star */
.figurine-star {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    /* Ensure centered */
    left: 0;
    right: 0;
    animation: starRotate 10s linear infinite;
    z-index: 13;
}

@keyframes starRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.star-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px var(--gem-color);
}

.star-point {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 30px solid var(--gem-mid);
    filter: drop-shadow(0 0 10px var(--gem-color));
    transform-origin: 50% 0;
}

.point-1 { transform: translate(-50%, -50%) rotate(0deg) translateY(-40px); }
.point-2 { transform: translate(-50%, -50%) rotate(72deg) translateY(-40px); }
.point-3 { transform: translate(-50%, -50%) rotate(144deg) translateY(-40px); }
.point-4 { transform: translate(-50%, -50%) rotate(216deg) translateY(-40px); }
.point-5 { transform: translate(-50%, -50%) rotate(288deg) translateY(-40px); }

/* Diamond Prism */
.figurine-prism {
    position: relative;
    width: 80px;
    height: 120px;
    margin: 0 auto;
    transform-style: preserve-3d;
    filter: drop-shadow(0 0 30px var(--gem-color)) drop-shadow(0 0 60px var(--gem-color));
    animation: prismRotate 8s linear infinite;
    z-index: 13;
    /* Ensure centered */
    left: 0;
    right: 0;
    transform-origin: center center;
}

@keyframes prismRotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.prism-face {
    position: absolute;
    width: 60px;
    height: 100px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    box-shadow: 
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        0 0 40px var(--gem-color);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.face-1 { transform: rotateY(0deg) translateZ(30px); }
.face-2 { transform: rotateY(90deg) translateZ(30px); }
.face-3 { transform: rotateY(180deg) translateZ(30px); }
.face-4 { transform: rotateY(270deg) translateZ(30px); }

.prism-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(90deg) translateZ(30px);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px var(--gem-color);
}

.prism-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(-90deg) translateZ(30px);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px var(--gem-color);
}

/* Amethyst Crystal Ball */
.figurine-crystal-ball {
    position: relative;
    width: 90px;
    height: 120px;
    margin: 0 auto;
    filter: drop-shadow(0 0 25px var(--gem-color)) drop-shadow(0 0 50px var(--gem-color));
    z-index: 13;
    /* Ensure centered */
    left: 0;
    right: 0;
}

.crystal-ball-sphere {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 40%,
        var(--gem-dark) 100%);
    border-radius: 50%;
    box-shadow: 
        inset -15px -15px 30px var(--gem-dark),
        inset 15px 15px 30px var(--gem-light),
        0 0 50px var(--gem-color),
        inset 0 0 40px rgba(255, 255, 255, 0.3);
    animation: crystalBallGlow 4s ease-in-out infinite;
}

@keyframes crystalBallGlow {
    0%, 100% { box-shadow: 
        inset -15px -15px 30px var(--gem-dark),
        inset 15px 15px 30px var(--gem-light),
        0 0 50px var(--gem-color),
        inset 0 0 40px rgba(255, 255, 255, 0.3);
    }
    50% { box-shadow: 
        inset -15px -15px 30px var(--gem-dark),
        inset 15px 15px 30px var(--gem-light),
        0 0 80px var(--gem-color),
        inset 0 0 60px rgba(255, 255, 255, 0.5);
    }
}

.crystal-ball-stand {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 40px;
    background: linear-gradient(to bottom,
        rgba(101, 67, 33, 0.9) 0%,
        rgba(139, 69, 19, 0.9) 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.crystal-ball-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 15px;
    background: linear-gradient(to bottom,
        rgba(101, 67, 33, 0.9) 0%,
        rgba(139, 69, 19, 0.9) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.crystal-ball-glow {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle,
        var(--gem-color) 0%,
        transparent 70%);
    opacity: 0.4;
    animation: glowPulse 3s ease-in-out infinite;
}

/* Citrine Sun */
.figurine-sun {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    filter: drop-shadow(0 0 30px var(--gem-color)) drop-shadow(0 0 60px var(--gem-color));
    animation: sunRotate 15s linear infinite;
    z-index: 13;
    /* Ensure centered */
    left: 0;
    right: 0;
    transform-origin: center center;
}

@keyframes sunRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sun-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: radial-gradient(circle,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        0 0 50px var(--gem-color),
        inset 0 0 50px var(--gem-light);
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 30px;
    background: linear-gradient(to bottom,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        transparent 100%);
    transform-origin: top center;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--gem-color);
}

.ray-1 { transform: translate(-50%, -50%) rotate(0deg) translateY(-25px); }
.ray-2 { transform: translate(-50%, -50%) rotate(45deg) translateY(-25px); }
.ray-3 { transform: translate(-50%, -50%) rotate(90deg) translateY(-25px); }
.ray-4 { transform: translate(-50%, -50%) rotate(135deg) translateY(-25px); }
.ray-5 { transform: translate(-50%, -50%) rotate(180deg) translateY(-25px); }
.ray-6 { transform: translate(-50%, -50%) rotate(225deg) translateY(-25px); }
.ray-7 { transform: translate(-50%, -50%) rotate(270deg) translateY(-25px); }
.ray-8 { transform: translate(-50%, -50%) rotate(315deg) translateY(-25px); }

.crystal-nook {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(163, 102, 255, 0.15);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 
        inset 0 0 15px rgba(163, 102, 255, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 11;
    /* Ensure perfect centering */
    text-align: center;
}

.crystal-nook > * {
    margin-left: auto;
    margin-right: auto;
}

.crystal-nook::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(163, 102, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.crystal-nook:hover::before {
    opacity: 1;
}

.crystal-nook:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(163, 102, 255, 0.5);
    transform: translateY(-5px);
    box-shadow: 
        inset 0 0 30px rgba(163, 102, 255, 0.2),
        0 10px 40px rgba(163, 102, 255, 0.3),
        0 0 50px rgba(163, 102, 255, 0.2);
}

.crystal-gem-container {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 12;
    margin: 0 auto;
    /* Ensure all children are centered */
}

.crystal-gem-container > * {
    margin: 0 auto;
    display: block;
}

/* Circular Stone Style */
.circular-stone {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        var(--stone-light) 0%,
        var(--stone-mid) 40%,
        var(--stone-dark) 100%);
    box-shadow: 
        inset -8px -8px 20px var(--stone-dark),
        inset 8px 8px 20px var(--stone-light),
        0 0 25px var(--stone-color),
        0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    /* Ensure centered */
    left: 0;
    right: 0;
}

.stone-highlight {
    position: absolute;
    top: 20%;
    left: 25%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    pointer-events: none;
}

.stone-shine {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        transparent 70%);
    pointer-events: none;
    filter: blur(2px);
}

.crystal-nook:hover .circular-stone {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 
        inset -8px -8px 20px var(--stone-dark),
        inset 8px 8px 20px var(--stone-light),
        0 0 40px var(--stone-color),
        0 6px 20px rgba(0, 0, 0, 0.5);
}

.crystal-nook:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(163, 102, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 
        inset 0 0 20px rgba(163, 102, 255, 0.15),
        0 4px 15px rgba(163, 102, 255, 0.2),
        0 0 30px rgba(0, 0, 0, 0.4);
}

.crystal-name {
    margin-top: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Opal Special Iridescent Effect */
.opal-stone {
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(240, 240, 240, 0.8) 40%,
        rgba(220, 220, 220, 0.7) 100%);
    box-shadow: 
        inset -8px -8px 20px rgba(200, 200, 200, 0.5),
        inset 8px 8px 20px rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 255, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4);
    overflow: visible;
}

.opal-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(240, 240, 240, 0.3) 50%,
        rgba(220, 220, 220, 0.2) 100%);
    pointer-events: none;
}

.opal-flash {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
    animation: opalFlash 3s ease-in-out infinite;
    mix-blend-mode: screen;
}

.flash-1 {
    top: 20%;
    left: 30%;
    width: 20px;
    height: 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 100, 150, 0.8) 20%,
        rgba(150, 200, 255, 0.8) 50%,
        rgba(100, 255, 200, 0.8) 80%,
        transparent 100%);
    transform: rotate(45deg);
    animation-delay: 0s;
}

.flash-2 {
    top: 50%;
    left: 20%;
    width: 15px;
    height: 6px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 100, 0.7) 30%,
        rgba(200, 100, 255, 0.7) 70%,
        transparent 100%);
    transform: rotate(-30deg);
    animation-delay: 0.7s;
}

.flash-3 {
    top: 60%;
    left: 60%;
    width: 18px;
    height: 7px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 255, 255, 0.8) 25%,
        rgba(255, 150, 100, 0.8) 75%,
        transparent 100%);
    transform: rotate(60deg);
    animation-delay: 1.4s;
}

.flash-4 {
    top: 30%;
    left: 55%;
    width: 12px;
    height: 5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 150, 0.7) 40%,
        rgba(150, 150, 255, 0.7) 60%,
        transparent 100%);
    transform: rotate(-45deg);
    animation-delay: 2.1s;
}

@keyframes opalFlash {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(var(--flash-rotation, 0deg));
    }
    50% {
        opacity: 0.9;
        transform: scale(1.2) rotate(calc(var(--flash-rotation, 0deg) + 10deg));
    }
}

.crystal-nook:hover .opal-stone {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 
        inset -8px -8px 20px rgba(200, 200, 200, 0.5),
        inset 8px 8px 20px rgba(255, 255, 255, 0.6),
        0 0 50px rgba(255, 255, 255, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.5);
}

.crystal-nook:hover .opal-flash {
    opacity: 1;
    animation-duration: 2s;
}

/* Opal Light Streaks - Rose Quartz and Aquamarine */
.opal-streak {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
    z-index: 2;
    border-radius: 50%;
    animation: opalStreak 4s ease-in-out infinite;
    mix-blend-mode: screen;
}

.streak-rose {
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(255, 182, 193, 0.8) 20%,
        rgba(255, 200, 220, 0.9) 50%,
        rgba(255, 182, 193, 0.8) 80%,
        transparent 100%);
    box-shadow: 
        0 0 8px rgba(255, 182, 193, 0.6),
        inset 0 0 10px rgba(255, 200, 220, 0.4);
}

.streak-aqua {
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(127, 255, 212, 0.8) 20%,
        rgba(150, 255, 230, 0.9) 50%,
        rgba(127, 255, 212, 0.8) 80%,
        transparent 100%);
    box-shadow: 
        0 0 8px rgba(127, 255, 212, 0.6),
        inset 0 0 10px rgba(150, 255, 230, 0.4);
}

/* Position and style opal streaks across the stone */
.opal-stone .streak-1 {
    top: 15%;
    left: 20%;
    width: 25px;
    height: 4px;
    transform: rotate(25deg);
    animation-delay: 0s;
}

.opal-stone .streak-2 {
    top: 40%;
    left: 15%;
    width: 30px;
    height: 5px;
    transform: rotate(-15deg);
    animation-delay: 0.8s;
}

.opal-stone .streak-3 {
    top: 70%;
    left: 45%;
    width: 28px;
    height: 4px;
    transform: rotate(45deg);
    animation-delay: 1.6s;
}

.opal-stone .streak-4 {
    top: 25%;
    left: 55%;
    width: 32px;
    height: 5px;
    transform: rotate(-30deg);
    animation-delay: 0.4s;
}

.opal-stone .streak-5 {
    top: 50%;
    left: 65%;
    width: 26px;
    height: 4px;
    transform: rotate(20deg);
    animation-delay: 1.2s;
}

.opal-stone .streak-6 {
    top: 75%;
    left: 35%;
    width: 30px;
    height: 5px;
    transform: rotate(-40deg);
    animation-delay: 2s;
}

@keyframes opalStreak {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(var(--streak-rotation, 0deg));
    }
    50% {
        opacity: 0.9;
        transform: scale(1.15) rotate(calc(var(--streak-rotation, 0deg) + 5deg));
    }
}

.crystal-nook:hover .opal-streak {
    opacity: 0.9;
    animation-duration: 3s;
    box-shadow: 
        0 0 12px currentColor,
        inset 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Bloodstone Special Effect - Deep Green with Red and Gold Flecks */
.bloodstone-stone {
    background: radial-gradient(circle at 30% 30%,
        rgba(20, 80, 20, 0.95) 0%,
        rgba(13, 77, 13, 0.98) 40%,
        rgba(8, 50, 8, 1) 100%);
    box-shadow: 
        inset -8px -8px 20px rgba(5, 30, 5, 0.8),
        inset 8px 8px 20px rgba(25, 90, 25, 0.4),
        0 0 25px rgba(13, 77, 13, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

.bloodstone-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(20, 80, 20, 0.3) 0%,
        rgba(13, 77, 13, 0.5) 50%,
        rgba(8, 50, 8, 0.7) 100%);
    pointer-events: none;
}

.bloodstone-fleck {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;
}

.fleck-red {
    background: radial-gradient(circle,
        rgba(200, 20, 20, 0.9) 0%,
        rgba(150, 10, 10, 0.8) 50%,
        rgba(120, 5, 5, 0.7) 100%);
    box-shadow: 
        0 0 3px rgba(200, 20, 20, 0.6),
        inset 0 0 2px rgba(255, 50, 50, 0.4);
}

.fleck-gold {
    background: radial-gradient(circle,
        rgba(255, 215, 0, 0.9) 0%,
        rgba(218, 165, 32, 0.8) 50%,
        rgba(184, 134, 11, 0.7) 100%);
    box-shadow: 
        0 0 3px rgba(255, 215, 0, 0.6),
        inset 0 0 2px rgba(255, 255, 150, 0.4);
}

/* Position flecks randomly across the stone */
.fleck-1 {
    top: 25%;
    left: 35%;
    width: 4px;
    height: 4px;
}

.fleck-2 {
    top: 45%;
    left: 20%;
    width: 3px;
    height: 3px;
}

.fleck-3 {
    top: 60%;
    left: 55%;
    width: 5px;
    height: 5px;
}

.fleck-4 {
    top: 30%;
    left: 65%;
    width: 3px;
    height: 3px;
}

.fleck-5 {
    top: 50%;
    left: 70%;
    width: 4px;
    height: 4px;
}

.fleck-6 {
    top: 70%;
    left: 40%;
    width: 3px;
    height: 3px;
}

.fleck-7 {
    top: 15%;
    left: 50%;
    width: 4px;
    height: 4px;
}

.fleck-8 {
    top: 75%;
    left: 25%;
    width: 3px;
    height: 3px;
}

.crystal-nook:hover .bloodstone-stone {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 
        inset -8px -8px 20px rgba(5, 30, 5, 0.8),
        inset 8px 8px 20px rgba(25, 90, 25, 0.4),
        0 0 40px rgba(13, 77, 13, 0.8),
        0 6px 20px rgba(0, 0, 0, 0.5);
}

.crystal-nook:hover .bloodstone-fleck {
    opacity: 1;
    box-shadow: 
        0 0 5px currentColor,
        inset 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Faceted Gemstone (Tower/Tumbled) - Beautiful 2D Design */
.gemstone-faceted {
    width: 60px;
    height: 80px;
    position: relative;
    margin: 0 auto;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    /* Ensure centered */
    left: 0;
    right: 0;
}

.crystal-nook:hover .gemstone-faceted {
    transform: scale(1.15);
    filter: drop-shadow(0 0 30px var(--gem-color)) drop-shadow(0 0 60px var(--gem-color));
}

.gemstone-faceted::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        50% 0%,
        15% 20%,
        10% 50%,
        20% 80%,
        50% 100%,
        80% 80%,
        90% 50%,
        85% 20%
    );
    background: linear-gradient(
        135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 25%,
        var(--gem-color) 50%,
        var(--gem-mid) 75%,
        var(--gem-dark) 100%
    );
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.4),
        inset -10px -10px 20px var(--gem-dark),
        0 0 50px var(--gem-color);
}

.gemstone-faceted::after {
    content: '';
    position: absolute;
    width: 40%;
    height: 40%;
    top: 20%;
    left: 30%;
    background: radial-gradient(
        ellipse at 30% 30%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.5) 30%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

/* Remove old facet classes - not needed for 2D */
.gem-facet,
.gem-top,
.gem-front,
.gem-left,
.gem-right,
.gem-bottom,
.gem-highlight {
    display: none;
}

/* Cluster Gemstone - Beautiful 2D Design */
.gemstone-cluster {
    width: 70px;
    height: 70px;
    position: relative;
    margin: 0 auto;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    /* Ensure centered */
    left: 0;
    right: 0;
}

.crystal-nook:hover .gemstone-cluster {
    transform: scale(1.15);
    filter: drop-shadow(0 0 30px var(--gem-color)) drop-shadow(0 0 60px var(--gem-color));
}

.cluster-crystal {
    position: absolute;
    background: var(--gem-mid);
    box-shadow: 
        inset 0 0 20px var(--gem-light),
        0 0 25px var(--gem-color),
        inset -5px -5px 15px var(--gem-dark);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.cluster-1 {
    width: 32px;
    height: 42px;
    top: 3px;
    left: 19px;
    background: radial-gradient(
        ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 40%,
        var(--gem-dark) 100%
    );
    z-index: 4;
    transform: rotate(-5deg);
}

.cluster-2 {
    width: 26px;
    height: 36px;
    top: 12px;
    left: 3px;
    background: radial-gradient(
        ellipse at 35% 25%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%
    );
    z-index: 2;
    opacity: 0.85;
    transform: rotate(15deg);
}

.cluster-3 {
    width: 28px;
    height: 38px;
    top: 18px;
    right: 5px;
    background: radial-gradient(
        ellipse at 30% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 45%,
        var(--gem-dark) 100%
    );
    z-index: 1;
    opacity: 0.8;
    transform: rotate(-10deg);
}

.cluster-4 {
    width: 24px;
    height: 32px;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    background: radial-gradient(
        ellipse at 35% 30%,
        var(--gem-light) 0%,
        var(--gem-mid) 50%,
        var(--gem-dark) 100%
    );
    z-index: 3;
    opacity: 0.9;
}

/* Cube Gemstone (Pyrite) - Beautiful 2D Design */
.gemstone-cube {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    transition: all 0.4s ease;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 20px var(--gem-color)) drop-shadow(0 0 40px var(--gem-color));
    /* Ensure centered even with rotation */
    left: 0;
    right: 0;
    transform-origin: center center;
}

.crystal-nook:hover .gemstone-cube {
    transform: rotate(45deg) scale(1.15);
    filter: drop-shadow(0 0 30px var(--gem-color)) drop-shadow(0 0 60px var(--gem-color));
}

.gemstone-cube::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--gem-light) 0%,
        var(--gem-mid) 30%,
        var(--gem-color) 50%,
        var(--gem-mid) 70%,
        var(--gem-dark) 100%
    );
    box-shadow: 
        inset 0 0 25px rgba(255, 255, 255, 0.5),
        inset -8px -8px 15px var(--gem-dark),
        0 0 50px var(--gem-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gemstone-cube::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 35%;
    top: 15%;
    left: 15%;
    background: radial-gradient(
        ellipse at 30% 30%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.4) 40%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

/* Enhanced Ruby - Bright, vibrant red */
.gemstone-ruby {
    filter: drop-shadow(0 0 26px rgba(208, 0, 74, 0.9)) drop-shadow(0 0 52px rgba(208, 0, 74, 0.6)) drop-shadow(0 0 80px rgba(208, 0, 74, 0.45));
    margin: 0 auto;
}

.gemstone-ruby::before {
    background: linear-gradient(
        135deg,
        rgba(255, 120, 160, 0.95) 0%,
        rgba(255, 90, 140, 0.95) 18%,
        rgba(208, 0, 74, 1) 45%,
        rgba(150, 0, 42, 0.95) 70%,
        rgba(74, 0, 24, 1) 100%
    );
    box-shadow: 
        inset 0 0 42px rgba(255, 120, 160, 0.65),
        inset -12px -12px 28px rgba(74, 0, 24, 0.95),
        0 0 62px rgba(208, 0, 74, 0.85),
        0 0 110px rgba(208, 0, 74, 0.45);
}

.gemstone-ruby::after {
    background: radial-gradient(
        ellipse at 25% 25%,
        rgba(255, 230, 240, 0.9) 0%,
        rgba(255, 200, 220, 0.5) 35%,
        transparent 70%
    ), linear-gradient(
        60deg,
        rgba(255, 160, 190, 0.35) 0%,
        rgba(255, 140, 180, 0.25) 25%,
        rgba(255, 120, 170, 0.15) 50%,
        transparent 70%
    );
    mix-blend-mode: screen;
}

.crystal-nook:hover .gemstone-ruby {
    filter: drop-shadow(0 0 36px rgba(208, 0, 74, 1)) drop-shadow(0 0 78px rgba(208, 0, 74, 0.85)) drop-shadow(0 0 115px rgba(208, 0, 74, 0.65));
}

/* Enhanced Pyrite Cube - Metallic golden cube */
.gemstone-pyrite {
    filter: drop-shadow(0 0 20px rgba(218, 165, 32, 0.7)) drop-shadow(0 0 40px rgba(218, 165, 32, 0.5));
    margin: 0 auto;
}

.gemstone-pyrite::before {
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 1) 0%,
        rgba(255, 223, 0, 0.95) 15%,
        rgba(218, 165, 32, 1) 50%,
        rgba(184, 134, 11, 0.95) 85%,
        rgba(184, 134, 11, 1) 100%
    );
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.6),
        inset -8px -8px 20px rgba(139, 101, 8, 0.9),
        0 0 50px rgba(218, 165, 32, 0.7),
        0 0 80px rgba(218, 165, 32, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.gemstone-pyrite::after {
    background: radial-gradient(
        ellipse at 30% 30%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 200, 0.8) 20%,
        rgba(255, 255, 255, 0.5) 40%,
        transparent 70%
    );
}

.crystal-nook:hover .gemstone-pyrite {
    filter: drop-shadow(0 0 30px rgba(218, 165, 32, 0.9)) drop-shadow(0 0 60px rgba(218, 165, 32, 0.7));
}

/* Locked Crystal Styling - Greyed out but clickable */
.crystal-locked {
    opacity: 0.4;
    filter: grayscale(0.8) brightness(0.6);
    position: relative;
}

.crystal-locked:hover {
    opacity: 0.6;
    filter: grayscale(0.6) brightness(0.7);
}

.crystal-lock-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.8);
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.crystal-locked .crystal-name {
    color: rgba(200, 200, 200, 0.6);
}

.crystal-locked .gemstone-faceted,
.crystal-locked .gemstone-cube,
.crystal-locked .gemstone-cluster {
    filter: grayscale(0.8) brightness(0.5) !important;
}

/* Remove old cube face classes - not needed for 2D */
.cube-face,
.cube-front,
.cube-top,
.cube-right {
    display: none;
}

.crystal-name {
    color: #e0e0e0;
    font-size: 0.85rem;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.crystal-shape-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(163, 102, 255, 0.3);
    border: 1px solid rgba(163, 102, 255, 0.5);
    color: #fff;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Crystal Detail Modal */
.crystal-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.crystal-detail-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(163, 102, 255, 0.05) 100%);
    border: 2px solid rgba(163, 102, 255, 0.3);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    padding: 50px;
    position: relative;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 50px rgba(163, 102, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.crystal-detail-header {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: center;
}

.crystal-detail-image {
    flex-shrink: 0;
}

.crystal-icon-large {
    width: 200px;
    height: 250px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: crystalPulse 3s ease-in-out infinite;
}

.crystal-icon-large .gemstone-faceted {
    width: 150px;
    height: 200px;
}

.crystal-icon-large .gemstone-cluster {
    width: 180px;
    height: 180px;
}

.crystal-icon-large .gemstone-cube {
    width: 120px;
    height: 120px;
}

.crystal-icon-large .gemstone-faceted {
    filter: drop-shadow(0 0 40px var(--gem-color)) drop-shadow(0 0 80px var(--gem-color));
}

.crystal-icon-large .gemstone-faceted::before {
    box-shadow: 
        inset 0 0 50px rgba(255, 255, 255, 0.5),
        inset -15px -15px 30px var(--gem-dark),
        0 0 100px var(--gem-color);
}

.crystal-icon-large .gemstone-cluster {
    filter: drop-shadow(0 0 40px var(--gem-color)) drop-shadow(0 0 80px var(--gem-color));
}

.crystal-icon-large .cluster-crystal {
    box-shadow: 
        inset 0 0 30px var(--gem-light),
        0 0 50px var(--gem-color),
        inset -8px -8px 20px var(--gem-dark);
}

.crystal-icon-large .gemstone-cube {
    filter: drop-shadow(0 0 40px var(--gem-color)) drop-shadow(0 0 80px var(--gem-color));
}

.crystal-icon-large .gemstone-cube::before {
    box-shadow: 
        inset 0 0 40px rgba(255, 255, 255, 0.6),
        inset -12px -12px 25px var(--gem-dark),
        0 0 100px var(--gem-color);
}

@keyframes crystalPulse {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

@keyframes crystalShimmer {
    0%, 100% { 
        opacity: 0.3;
        transform: rotate(0deg);
    }
    50% { 
        opacity: 0.6;
        transform: rotate(180deg);
    }
}

.crystal-detail-title h2 {
    color: var(--gold);
    font-size: 2.5rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.crystal-shape {
    color: rgba(163, 102, 255, 0.9);
    font-style: italic;
    font-size: 1.1rem;
    text-transform: capitalize;
}

.crystal-info-section {
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid rgba(163, 102, 255, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.crystal-info-section h3 {
    color: var(--gold);
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.crystal-info-section p {
    color: #e0e0e0;
    line-height: 1.8;
    font-size: 1rem;
}

/* Prism Overlay */
.prism-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 1s ease;
    background: radial-gradient(circle at center, 
        rgba(163, 102, 255, 0.15) 0%,
        rgba(163, 102, 255, 0.05) 50%,
        transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: prismShift 3s ease-in-out infinite;
}

.prism-overlay.active {
    opacity: 1;
}

@keyframes prismShift {
    0%, 100% { 
        background: radial-gradient(circle at 30% 50%, 
            rgba(163, 102, 255, 0.15) 0%,
            rgba(163, 102, 255, 0.05) 50%,
            transparent 100%);
    }
    50% { 
        background: radial-gradient(circle at 70% 50%, 
            rgba(163, 102, 255, 0.15) 0%,
            rgba(163, 102, 255, 0.05) 50%,
            transparent 100%);
    }
}

.nav-back-btn {
    background: none;
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.nav-back-btn:hover {
    background: rgba(212, 175, 55, 0.1);
}

/* Tarot Sanctuary - Navigation Tabs */
/* Tarot Sanctuary - Professor's Nighttime Study */
#scene-tarot {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
        #1a0f0a 0%,
        #2a1a14 20%,
        #1a0f0a 40%,
        #0f0805 60%,
        #1a0f0a 80%,
        #0f0805 100%);
}

.study-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.study-content {
    position: relative;
    z-index: 1;
}

/* Study Walls - Dark Wood Paneling */
.study-walls {
    position: absolute;
    width: 100%;
    height: 100%;
}

.study-wall {
    position: absolute;
    background: linear-gradient(to right,
        #2c1e14 0%,
        #3d2817 20%,
        #2c1e14 40%,
        #1a110a 60%,
        #2c1e14 80%,
        #3d2817 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
}

.wall-left {
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right,
        #1a110a 0%,
        #2c1e14 50%,
        #1a110a 100%);
}

.wall-right {
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to left,
        #1a110a 0%,
        #2c1e14 50%,
        #1a110a 100%);
}

.wall-back {
    left: 30%;
    width: 40%;
    height: 100%;
    background: linear-gradient(to bottom,
        #0f0805 0%,
        #1a110a 30%,
        #2c1e14 50%,
        #1a110a 70%,
        #0f0805 100%);
}

/* Bookshelves */
.bookshelf {
    position: absolute;
    width: 25%;
    height: 100%;
    background: linear-gradient(to right,
        #1a110a 0%,
        #2c1e14 30%,
        #3d2817 50%,
        #2c1e14 70%,
        #1a110a 100%);
    box-shadow: inset -10px 0 30px rgba(0, 0, 0, 0.8),
                inset 10px 0 30px rgba(0, 0, 0, 0.8);
}

.bookshelf-left {
    left: 0;
    border-right: 3px solid #1a110a;
}

.bookshelf-right {
    right: 0;
    border-left: 3px solid #1a110a;
}

.shelf {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
        transparent 0%,
        #3d2817 10%,
        #4a2f1f 50%,
        #3d2817 90%,
        transparent 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.bookshelf-left .shelf:nth-child(1) { top: 15%; }
.bookshelf-left .shelf:nth-child(2) { top: 30%; }
.bookshelf-left .shelf:nth-child(3) { top: 45%; }
.bookshelf-left .shelf:nth-child(4) { top: 60%; }
.bookshelf-left .shelf:nth-child(5) { top: 75%; }

.bookshelf-right .shelf:nth-child(1) { top: 15%; }
.bookshelf-right .shelf:nth-child(2) { top: 30%; }
.bookshelf-right .shelf:nth-child(3) { top: 45%; }
.bookshelf-right .shelf:nth-child(4) { top: 60%; }
.bookshelf-right .shelf:nth-child(5) { top: 75%; }

/* Book Spines */
.book-spine {
    position: absolute;
    width: 20px;
    height: 60px;
    border-radius: 2px;
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.5),
                2px 0 3px rgba(0, 0, 0, 0.3);
}

.bookshelf-left .book-spine {
    left: 10%;
}

.bookshelf-right .book-spine {
    right: 10%;
}

/* Book colors - various scholarly tones */
.bookshelf-left .book-1 { top: 16%; background: #8b4513; width: 18px; }
.bookshelf-left .book-2 { top: 16%; left: 12%; background: #654321; width: 22px; }
.bookshelf-left .book-3 { top: 16%; left: 36%; background: #4a2c2a; width: 20px; }
.bookshelf-left .book-4 { top: 16%; left: 58%; background: #5d4037; width: 19px; }
.bookshelf-left .book-5 { top: 31%; background: #6d4c41; width: 21px; }
.bookshelf-left .book-6 { top: 31%; left: 13%; background: #5d4037; width: 20px; }
.bookshelf-left .book-7 { top: 31%; left: 35%; background: #4a2c2a; width: 22px; }
.bookshelf-left .book-8 { top: 46%; background: #8b4513; width: 19px; }
.bookshelf-left .book-9 { top: 46%; left: 11%; background: #654321; width: 21px; }
.bookshelf-left .book-10 { top: 46%; left: 34%; background: #5d4037; width: 20px; }

.bookshelf-right .book-1 { top: 16%; background: #8b4513; width: 18px; }
.bookshelf-right .book-2 { top: 16%; right: 12%; background: #654321; width: 22px; }
.bookshelf-right .book-3 { top: 16%; right: 36%; background: #4a2c2a; width: 20px; }
.bookshelf-right .book-4 { top: 16%; right: 58%; background: #5d4037; width: 19px; }
.bookshelf-right .book-5 { top: 31%; background: #6d4c41; width: 21px; }
.bookshelf-right .book-6 { top: 31%; right: 13%; background: #5d4037; width: 20px; }
.bookshelf-right .book-7 { top: 31%; right: 35%; background: #4a2c2a; width: 22px; }
.bookshelf-right .book-8 { top: 46%; background: #8b4513; width: 19px; }
.bookshelf-right .book-9 { top: 46%; right: 11%; background: #654321; width: 21px; }
.bookshelf-right .book-10 { top: 46%; right: 34%; background: #5d4037; width: 20px; }

/* Fireplace */
.fireplace {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 300px;
    z-index: 2;
}

.fireplace-mantle {
    position: absolute;
    top: -20px;
    left: -30px;
    width: 460px;
    height: 30px;
    background: linear-gradient(to bottom,
        #4a2f1f 0%,
        #3d2817 50%,
        #2c1e14 100%);
    border-radius: 5px 5px 0 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5),
                inset 0 2px 5px rgba(212, 175, 55, 0.1);
}

.fireplace-opening {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse at center bottom,
        #1a0f0a 0%,
        #0f0805 40%,
        #000000 100%);
    border-radius: 0 0 150px 150px;
    box-shadow: inset 0 20px 60px rgba(0, 0, 0, 0.9);
}

.fireplace-hearth {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 50px;
    background: linear-gradient(to bottom,
        #3d2817 0%,
        #2c1e14 50%,
        #1a110a 100%);
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

/* Fire Logs */
.fire-log {
    position: absolute;
    bottom: 20px;
    width: 80px;
    height: 20px;
    background: linear-gradient(to right,
        #3d2817 0%,
        #4a2f1f 50%,
        #3d2817 100%);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.log-1 {
    left: 30%;
    transform: rotate(-15deg);
}

.log-2 {
    right: 30%;
    transform: rotate(15deg);
}

/* Fire Flames */
.fire-flame {
    position: absolute;
    bottom: 40px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 80px solid;
    filter: blur(3px);
    animation: fireFlicker 0.5s ease-in-out infinite;
}

.flame-1 {
    left: 40%;
    border-bottom-color: rgba(255, 140, 0, 0.9);
    animation-delay: 0s;
}

.flame-2 {
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(255, 69, 0, 0.95);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 100px solid;
    animation-delay: 0.15s;
}

.flame-3 {
    right: 40%;
    border-bottom-color: rgba(255, 165, 0, 0.85);
    animation-delay: 0.3s;
}

@keyframes fireFlicker {
    0%, 100% {
        transform: translateX(0) scaleY(1);
        opacity: 0.9;
    }
    25% {
        transform: translateX(-3px) scaleY(1.1);
        opacity: 1;
    }
    50% {
        transform: translateX(3px) scaleY(0.95);
        opacity: 0.85;
    }
    75% {
        transform: translateX(-2px) scaleY(1.05);
        opacity: 0.95;
    }
}

.flame-2 {
    animation-name: fireFlicker2;
}

@keyframes fireFlicker2 {
    0%, 100% {
        transform: translateX(-50%) scaleY(1);
        opacity: 0.95;
    }
    25% {
        transform: translateX(calc(-50% - 4px)) scaleY(1.15);
        opacity: 1;
    }
    50% {
        transform: translateX(calc(-50% + 4px)) scaleY(0.9);
        opacity: 0.9;
    }
    75% {
        transform: translateX(calc(-50% - 2px)) scaleY(1.1);
        opacity: 1;
    }
}

/* Fire Glow */
.fire-glow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 150px;
    background: radial-gradient(ellipse at center,
        rgba(255, 140, 0, 0.4) 0%,
        rgba(255, 69, 0, 0.3) 30%,
        rgba(212, 175, 55, 0.2) 50%,
        transparent 80%);
    border-radius: 50%;
    filter: blur(20px);
    animation: fireGlow 2s ease-in-out infinite;
}

@keyframes fireGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.1);
    }
}

/* Fire Embers */
.fire-embers {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 30px;
}

.ember {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(255, 69, 0, 1) 0%,
        rgba(255, 140, 0, 0.8) 50%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.8);
    animation: emberFloat 3s ease-in-out infinite;
}

.ember:nth-child(1) {
    left: 20%;
    animation-delay: 0s;
}

.ember:nth-child(2) {
    left: 40%;
    animation-delay: 0.5s;
}

.ember:nth-child(3) {
    left: 60%;
    animation-delay: 1s;
}

.ember:nth-child(4) {
    left: 80%;
    animation-delay: 1.5s;
}

@keyframes emberFloat {
    0% {
        bottom: 0;
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(10px) scale(1.2);
    }
    100% {
        bottom: 20px;
        opacity: 0;
        transform: translateX(-5px) scale(0.5);
    }
}

/* Fireplace Light - Warm glow on walls */
.fireplace-light {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center bottom,
        rgba(255, 140, 0, 0.15) 0%,
        rgba(255, 69, 0, 0.1) 30%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 80%);
    filter: blur(40px);
    animation: lightFlicker 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lightFlicker {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.05);
    }
}

/* Study Window with Moonlight */
.study-window {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 200px;
    height: 300px;
    z-index: 1;
}

.window-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 8px solid #2c1e14;
    background: linear-gradient(to bottom,
        rgba(135, 206, 250, 0.1) 0%,
        rgba(173, 216, 230, 0.15) 50%,
        rgba(135, 206, 250, 0.1) 100%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(212, 175, 55, 0.2);
    border-radius: 5px;
}

.window-moon {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(173, 216, 230, 0.6) 50%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(2px);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    animation: moonGlow 4s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.1); }
}

.moonlight-beam {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 100vh;
    background: linear-gradient(to bottom,
        rgba(173, 216, 230, 0.2) 0%,
        rgba(135, 206, 250, 0.15) 30%,
        transparent 70%);
    clip-path: polygon(40% 0%, 60% 0%, 55% 100%, 45% 100%);
    filter: blur(20px);
    animation: beamShift 6s ease-in-out infinite;
}

@keyframes beamShift {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Study Desk Shadow */
.study-desk-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%);
    pointer-events: none;
}

/* Ensure Tarot content is above background */
#scene-tarot h1,
#scene-tarot .page-title,
#scene-tarot .page-subtitle,
#scene-tarot .tarot-nav-tabs,
#scene-tarot .tarot-tab-content,
#scene-tarot .nav-back-btn {
    position: relative;
    z-index: 2;
}

.tarot-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.tab-btn {
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 12px 30px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.tab-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.tab-btn.active {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
}

.tarot-tab-content {
    display: none;
}

.tarot-tab-content.active {
    display: block;
}

/* Encyclopedia */
.encyclopedia-controls {
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 20px;
}

.encyclopedia-controls select {
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
}

.encyclopedia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    margin: 30px auto;
    max-width: 1200px;
    padding: 20px;
}

.encyclopedia-card {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.encyclopedia-card:hover {
    transform: translateY(-5px);
}

.encyclopedia-card.locked {
    opacity: 0.7;
}

.encyclopedia-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--gold);
    transition: all 0.3s ease;
}

.encyclopedia-card img.greyed {
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.5;
}

.encyclopedia-card-name {
    text-align: center;
    color: var(--gold);
    font-size: 0.85rem;
    margin-top: 8px;
    letter-spacing: 1px;
}

.locked-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Detail Modal */
.card-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.card-detail-content {
    background: linear-gradient(135deg, var(--wood), var(--bg));
    border: 3px solid var(--gold);
    border-radius: 15px;
    max-width: 900px;
    width: 100%;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: 2px solid var(--gold);
    color: var(--gold);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(212, 175, 55, 0.2);
    transform: rotate(90deg);
}

.card-detail-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.detail-card-image {
    width: 200px;
    height: 350px;
    object-fit: cover;
    border: 3px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.detail-card-image.greyed {
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.6;
}

.card-detail-title h2 {
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.card-detail-title .keywords {
    color: var(--purple);
    font-style: italic;
    font-size: 1rem;
}

.unlock-progress {
    margin-top: 12px;
    padding: 8px 15px;
    background: rgba(163, 102, 255, 0.15);
    border: 1px solid rgba(163, 102, 255, 0.4);
    border-radius: 8px;
    display: inline-block;
}

.unlock-progress-text {
    color: var(--purple);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(163, 102, 255, 0.5);
}

.card-detail-body {
    margin-top: 30px;
}

.meaning-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(20, 20, 20, 0.6);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
}

.meaning-section h3 {
    color: var(--gold);
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.meaning-section p {
    color: #ccc;
    line-height: 1.8;
}

/* Learning Guide Section */
.learning-guide-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.8), rgba(30, 30, 35, 0.8));
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 15px;
    text-align: center;
}

.learning-guide-header {
    margin-bottom: 30px;
}

.learning-guide-title {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    letter-spacing: 4px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.learning-guide-subtitle {
    color: var(--purple);
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 10px;
}

.learning-guide-description {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.learning-guide-controls {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.learning-guide-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(163, 102, 255, 0.2));
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.learning-guide-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(163, 102, 255, 0.3));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.learning-guide-btn.secondary {
    border-color: var(--purple);
    color: var(--purple);
}

.learning-guide-btn.secondary:hover {
    box-shadow: 0 8px 25px rgba(163, 102, 255, 0.4);
}

.btn-icon {
    font-size: 1.3rem;
}

.btn-text {
    font-weight: 600;
}

/* Fool's Journey Modal */
.fools-journey-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.fools-journey-content {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.98), rgba(30, 30, 35, 0.98));
    border: 3px solid var(--gold);
    border-radius: 20px;
    max-width: 1000px;
    width: 100%;
    max-height: 95vh;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.5);
    overflow-y: auto;
}

.fools-journey-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.fools-journey-header h2 {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.journey-subtitle {
    color: var(--purple);
    font-size: 1.2rem;
    font-style: italic;
}

.journey-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 10px;
}

.journey-nav-btn {
    padding: 12px 25px;
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--gold);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.journey-nav-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.journey-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.journey-progress {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.journey-section-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.section-btn {
    padding: 10px 20px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.section-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.journey-card-display {
    min-height: 400px;
}

.journey-card-header {
    text-align: center;
    margin-bottom: 30px;
}

.journey-card-section {
    color: var(--purple);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.journey-card-name {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.journey-card-keywords {
    color: #999;
    font-style: italic;
    font-size: 1rem;
}

.journey-card-image-container {
    text-align: center;
    margin: 30px 0;
}

.journey-card-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    border: 3px solid var(--gold);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.journey-card-meanings {
    margin-top: 40px;
}

.journey-meaning-section {
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(20, 20, 20, 0.6);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
}

.journey-meaning-section h4 {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.journey-meaning-section p {
    color: #ccc;
    line-height: 1.8;
    font-size: 1rem;
}

/* Bazaar Section */
.bazaar-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.bazaar-tab-btn {
    padding: 12px 25px;
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.bazaar-tab-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.bazaar-tab-btn.active {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.bazaar-tab-content {
    display: none;
    margin-top: 30px;
}

.bazaar-tab-content.active {
    display: block;
}

.bazaar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.bazaar-item {
    background: rgba(10, 10, 15, 0.9);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 15px;
    padding: 30px 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.bazaar-item:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
}

.bazaar-item.featured-item {
    max-width: 600px;
    margin: 0 auto;
    border-color: var(--purple);
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95), rgba(30, 30, 35, 0.95));
}

.bazaar-item-image {
    font-size: 4rem;
    margin-bottom: 20px;
}

.bazaar-item h3 {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.bazaar-item-desc {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.bazaar-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.bazaar-features li {
    color: #ccc;
    padding: 8px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.bazaar-item-price {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: bold;
    margin: 25px 0;
    letter-spacing: 2px;
}

.bazaar-item-btn {
    padding: 12px 30px;
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--gold);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    width: 100%;
    margin-top: 15px;
}

.bazaar-item-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.bazaar-item-btn.purchase-btn {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(163, 102, 255, 0.3));
    border-color: var(--purple);
    color: var(--purple);
}

.bazaar-item-btn.purchase-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(163, 102, 255, 0.4));
    box-shadow: 0 4px 15px rgba(163, 102, 255, 0.4);
}

.locked-message {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
    border: 2px dashed rgba(163, 102, 255, 0.3);
    border-radius: 10px;
}

/* Readings Section */
.readings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin: 40px auto;
    max-width: 1000px;
    padding: 20px;
}

.reading-type {
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid var(--gold);
    padding: 30px;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.reading-type:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

.reading-type h3 {
    color: var(--gold);
    font-size: 1.5rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.reading-type p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.reading-type .card-count {
    display: inline-block;
    background: rgba(163, 102, 255, 0.2);
    border: 1px solid var(--purple);
    color: var(--purple);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: 10px;
}

/* Reading Categories */
.reading-category {
    margin-bottom: 50px;
}

.category-title {
    color: var(--gold);
    font-size: 1.8rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

.category-description {
    color: rgba(212, 175, 55, 0.7);
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 30px;
    font-style: italic;
}

.reading-cost {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-top: 10px;
    font-weight: 600;
}

.reading-cost.free {
    background: rgba(0, 200, 100, 0.2);
    border-color: #00c864;
    color: #00c864;
}

/* Featured Reading - Highlighted Free Reading */
.reading-category.featured-reading {
    margin-bottom: 60px;
}

.reading-type.featured {
    background: linear-gradient(135deg, rgba(0, 200, 100, 0.15), rgba(163, 102, 255, 0.15));
    border: 3px solid #00c864;
    box-shadow: 
        0 0 30px rgba(0, 200, 100, 0.4),
        0 0 60px rgba(0, 200, 100, 0.2),
        inset 0 0 20px rgba(0, 200, 100, 0.1);
    transform: scale(1.05);
    position: relative;
    animation: featuredPulse 3s ease-in-out infinite;
}

.reading-type.featured::before {
    content: '✨';
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 2rem;
    animation: sparkle 2s ease-in-out infinite;
}

.reading-type.featured:hover {
    background: linear-gradient(135deg, rgba(0, 200, 100, 0.25), rgba(163, 102, 255, 0.25));
    box-shadow: 
        0 0 40px rgba(0, 200, 100, 0.6),
        0 0 80px rgba(0, 200, 100, 0.3),
        inset 0 0 30px rgba(0, 200, 100, 0.15);
    transform: scale(1.08) translateY(-5px);
}

@keyframes featuredPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(0, 200, 100, 0.4),
            0 0 60px rgba(0, 200, 100, 0.2),
            inset 0 0 20px rgba(0, 200, 100, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(0, 200, 100, 0.6),
            0 0 80px rgba(0, 200, 100, 0.3),
            inset 0 0 25px rgba(0, 200, 100, 0.15);
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Reading Menu Transitions */
.readings-menu {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.readings-menu.fade-out {
    opacity: 0;
    transform: translateX(-50px);
}

.readings-menu.fade-in {
    opacity: 1;
    transform: translateX(0);
}

/* Reading Table */
.reading-table {
    margin: 40px auto;
    max-width: 1400px;
    padding: 40px 20px;
    min-height: 60vh;
    transition: opacity 0.4s ease, transform 0.4s ease;
    visibility: visible;
    opacity: 1;
}

.reading-table.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.reading-table.fade-out {
    opacity: 0;
    transform: translateX(50px);
}

.reading-title {
    color: var(--gold);
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
}

/* Reading Cards Wrapper (contains arrows + container) */
.reading-cards-wrapper {
    position: relative;
    margin: 40px 0;
}

.reading-cards-container {
    display: flex;
    /* Default: Horizontal scroll for mobile/tablet (touch devices) */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 30px;
    margin: 0;
    padding: 20px;
    visibility: visible;
    opacity: 1;
    min-height: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
}

/* Desktop (mouse/hover devices): Vertical wrap layout */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .reading-cards-container {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        scroll-padding: 0;
    }
    
    /* Hide scroll arrows on desktop (not needed for vertical layout) */
    .scroll-arrow {
        display: none !important;
    }
}

/* Thin golden scroll arrows */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 2rem;
    font-weight: 300;
    opacity: 0.6;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    animation: arrowPulse 2s ease-in-out infinite;
}

.scroll-arrow-left {
    left: 8px;
}

.scroll-arrow-right {
    right: 8px;
}

.scroll-arrow.fade-out {
    opacity: 0;
    animation: none;
}

@keyframes arrowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 0.9;
        transform: translateY(-50%) translateX(var(--arrow-pulse-offset, 4px));
    }
}

.scroll-arrow-left {
    --arrow-pulse-offset: -4px;
}

.scroll-arrow-right {
    --arrow-pulse-offset: 4px;
}

/* Reading Card Wrapper */
.reading-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 200px;
    padding: 20px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* 3D Card Flip */
.reading-card {
    position: relative;
    width: 180px;
    height: 315px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    perspective: 1000px;
}

.reading-card:hover {
    transform: translateY(-5px);
}

.reading-card.flipped {
    transform: rotateY(180deg);
    cursor: pointer;
}

.card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--gold);
}

.card-front {
    transform: rotateY(0deg);
}

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

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

/* Reveal Burst Animation */
.reveal-burst {
    animation: revealBurst 1s ease-out;
}

@keyframes revealBurst {
    0% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 
            0 0 0 0 rgba(212, 175, 55, 0.7),
            0 0 0 20px rgba(212, 175, 55, 0.5),
            0 0 0 40px rgba(212, 175, 55, 0.3),
            0 0 0 60px rgba(212, 175, 55, 0.1),
            0 8px 25px rgba(0, 0, 0, 0.5);
        transform: rotateY(180deg) scale(1.1);
    }
    100% {
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        transform: rotateY(180deg) scale(1);
    }
}

/* Position Label */
.reading-card-wrapper .position-label {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 10px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Meaning */
.reading-card-wrapper .card-meaning {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    max-width: 250px;
    padding: 0 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reveal All Button */
.reveal-all-btn {
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    color: var(--bg);
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 30px auto;
    display: block;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.reveal-all-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5);
}

.reveal-all-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.seal-reading-btn {
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    color: var(--bg);
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 8px;
    margin: 20px auto;
    display: block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(163, 102, 255, 0.4);
    text-transform: uppercase;
}

.seal-reading-btn:hover,
.add-to-journal-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(163, 102, 255, 0.6);
}

.add-to-journal-btn:hover {
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6);
}

.seal-reading-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.reading-area {
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

.reading-loading {
    text-align: center;
    color: var(--gold);
    font-size: 1.2rem;
    padding: 40px;
}

.reading-result {
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 40px;
}

.reading-result h3 {
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 30px;
}

.reading-card-display {
    text-align: center;
    margin: 30px 0;
}

.reading-card-display img {
    width: 200px;
    height: 350px;
    object-fit: cover;
    border: 3px solid var(--gold);
    border-radius: 12px;
    margin-bottom: 20px;
}

.reading-card-display h4 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.reading-card-display p {
    color: #ccc;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

.three-card-spread {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 30px 0;
}

.spread-position {
    text-align: center;
}

.position-label {
    color: var(--purple);
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
}

.spread-position img {
    width: 100%;
    max-width: 200px;
    height: 350px;
    object-fit: cover;
    border: 3px solid var(--gold);
    border-radius: 12px;
    margin-bottom: 15px;
}

.spread-position h4 {
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.spread-position p {
    color: #ccc;
    line-height: 1.6;
    font-size: 0.9rem;
}

.yesno-answer {
    text-align: center;
    padding: 20px;
    border: 3px solid;
    border-radius: 15px;
    margin-bottom: 20px;
}

/* Five Card Spreads */
.five-card-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

/* Love Reading - Centered text */
.five-card-spread.love-reading .spread-position {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.five-card-spread.love-reading .spread-position h4,
.five-card-spread.love-reading .spread-position p {
    text-align: center;
}

.five-card-spread .spread-position img {
    height: 300px;
}

/* Weekly Spread */
.weekly-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.weekly-spread .spread-position {
    background: rgba(20, 20, 20, 0.6);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid rgba(163, 102, 255, 0.3);
}

.weekly-spread .spread-position img {
    height: 250px;
}

/* Hopes & Fears Spread */
.hopes-fears-spread {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 30px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hopes-fears-spread .spread-position {
    background: rgba(20, 20, 20, 0.6);
    padding: 30px;
    border-radius: 15px;
}

.hopes-fears-spread .spread-position:first-child {
    border: 3px solid var(--gold);
}

.hopes-fears-spread .spread-position:last-child {
    border: 3px solid var(--ember);
}

.hopes-fears-spread .spread-position img {
    height: 320px;
}

/* Horseshoe Spread */
.horseshoe-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.horseshoe-spread .spread-position img {
    height: 280px;
}

/* Balance Spread */
.balance-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.balance-spread .spread-position img {
    height: 300px;
}

/* Mind/Body/Spirit Spread */
.mindbody-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.mindbody-spread .spread-position img {
    height: 320px;
}

/* Celtic Cross Spread */
.celtic-cross-spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.celtic-cross-spread .spread-position img {
    height: 280px;
}

/* Tarot Grid (for backwards compatibility) */
.tarot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

.tarot-card {
    position: relative;
    width: 150px;
    height: 260px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--gold);
}

.tarot-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
    border-color: var(--ember);
}

.tarot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarot-card-front,
.tarot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.tarot-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--wood), var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.tarot-card.flipped .tarot-card-front {
    transform: rotateY(180deg);
}

.tarot-card.flipped .tarot-card-back {
    transform: rotateY(0deg);
}

.tarot-spread {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 60px 0;
    flex-wrap: wrap;
}

.spread-card {
    width: 180px;
    height: 315px;
}

.card-info {
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin: 40px auto;
    max-width: 600px;
    text-align: left;
}

.card-info h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.card-info .meaning {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 15px;
}

.card-info .interpretation {
    color: var(--purple);
    font-style: italic;
    border-left: 3px solid var(--purple);
    padding-left: 15px;
}

/* Rune Forest - Mystical Forest Background */
#scene-runes {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, 
        #0a0a0f 0%,
        #1a1a2e 30%,
        #0f0f1a 60%,
        #050508 100%);
}

.forest-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.forest-content {
    position: relative;
    z-index: 1;
}

/* Forest Trees - Silhouettes */
.forest-trees {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.tree {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 300px solid rgba(10, 20, 15, 0.8);
    filter: blur(2px);
}

.tree::before {
    content: '';
    position: absolute;
    bottom: -300px;
    left: -30px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 250px solid rgba(15, 25, 20, 0.7);
}

.tree::after {
    content: '';
    position: absolute;
    bottom: -300px;
    left: -20px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 200px solid rgba(20, 30, 25, 0.6);
}

.tree-1 { left: 5%; animation: treeSway 8s ease-in-out infinite; }
.tree-2 { left: 15%; animation: treeSway 10s ease-in-out infinite 0.5s; }
.tree-3 { left: 25%; animation: treeSway 9s ease-in-out infinite 1s; }
.tree-4 { left: 35%; animation: treeSway 11s ease-in-out infinite 1.5s; }
.tree-5 { left: 50%; animation: treeSway 9s ease-in-out infinite 2s; }
.tree-6 { left: 65%; animation: treeSway 10s ease-in-out infinite 2.5s; }
.tree-7 { left: 75%; animation: treeSway 8s ease-in-out infinite 3s; }
.tree-8 { left: 85%; animation: treeSway 12s ease-in-out infinite 3.5s; }

@keyframes treeSway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-0.5deg); }
    75% { transform: translateX(3px) rotate(0.5deg); }
}

/* Mystical Moon */
.forest-moon {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, 
        rgba(212, 175, 55, 0.4) 0%,
        rgba(163, 102, 255, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: moonGlow 4s ease-in-out infinite;
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3),
                0 0 120px rgba(163, 102, 255, 0.2);
}

.forest-moon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, 
        rgba(212, 175, 55, 0.6) 0%,
        rgba(212, 175, 55, 0.3) 50%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(10px);
}

@keyframes moonGlow {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Moonlight Beams */
.forest-moon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100vh;
    background: linear-gradient(to bottom,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(163, 102, 255, 0.1) 30%,
        transparent 70%);
    clip-path: polygon(40% 0%, 60% 0%, 55% 100%, 45% 100%);
    animation: beamShift 6s ease-in-out infinite;
}

@keyframes beamShift {
    0%, 100% { 
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
    50% { 
        opacity: 0.5;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* Forest Torch Lights */
.forest-torch {
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 60%;
    z-index: 1;
}

.torch-left {
    left: 3%;
}

.torch-right {
    right: 3%;
}

/* Torch Pole */
.forest-torch::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 100%;
    background: linear-gradient(to top,
        #3a2818 0%,
        #4a3828 30%,
        #3a2818 60%,
        #2a1818 100%);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.torch-left::before {
    box-shadow: -10px 0 30px rgba(255, 150, 0, 0.3),
                -5px 0 15px rgba(255, 100, 0, 0.4),
                0 0 10px rgba(0, 0, 0, 0.5);
}

.torch-right::before {
    box-shadow: 10px 0 30px rgba(255, 150, 0, 0.3),
                5px 0 15px rgba(255, 100, 0, 0.4),
                0 0 10px rgba(0, 0, 0, 0.5);
}

/* Torch Flame */
.forest-torch::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    background: radial-gradient(ellipse at center bottom,
        rgba(255, 100, 0, 0.9) 0%,
        rgba(255, 150, 0, 0.8) 30%,
        rgba(255, 200, 50, 0.6) 60%,
        transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: torchFlame 1.5s ease-in-out infinite;
    filter: blur(2px);
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.8),
                0 0 40px rgba(255, 150, 0, 0.6),
                0 0 60px rgba(255, 200, 50, 0.4);
}

@keyframes torchFlame {
    0%, 100% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 0.9;
    }
    25% {
        transform: translateX(-50%) scaleY(1.1) scaleX(0.9);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
        opacity: 0.95;
    }
    75% {
        transform: translateX(-50%) scaleY(1.05) scaleX(0.95);
        opacity: 1;
    }
}

/* Mystical Fog/Mist */
.forest-fog {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top,
        rgba(163, 102, 255, 0.15) 0%,
        rgba(100, 50, 150, 0.1) 50%,
        transparent 100%);
    filter: blur(40px);
    animation: fogDrift 20s ease-in-out infinite;
}

.fog-1 {
    left: -10%;
    animation-duration: 25s;
    animation-delay: 0s;
}

.fog-2 {
    left: 30%;
    animation-duration: 30s;
    animation-delay: 5s;
    height: 30%;
}

.fog-3 {
    left: 70%;
    animation-duration: 35s;
    animation-delay: 10s;
    height: 35%;
}

@keyframes fogDrift {
    0%, 100% { 
        transform: translateX(0) translateY(0);
        opacity: 0.4;
    }
    50% { 
        transform: translateX(50px) translateY(-20px);
        opacity: 0.6;
    }
}

/* Mystical Particles (Floating Energy) */
.forest-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, 
        rgba(212, 175, 55, 0.8) 0%,
        rgba(163, 102, 255, 0.6) 50%,
        transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6),
                0 0 20px rgba(163, 102, 255, 0.4);
    animation: floatParticle 15s ease-in-out infinite;
}

.particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.particle:nth-child(2) {
    left: 25%;
    animation-delay: 2s;
    animation-duration: 18s;
}

.particle:nth-child(3) {
    left: 40%;
    animation-delay: 4s;
    animation-duration: 14s;
}

.particle:nth-child(4) {
    left: 55%;
    animation-delay: 1s;
    animation-duration: 16s;
}

.particle:nth-child(5) {
    left: 70%;
    animation-delay: 3s;
    animation-duration: 20s;
}

.particle:nth-child(6) {
    left: 85%;
    animation-delay: 5s;
    animation-duration: 13s;
}

.particle:nth-child(7) {
    left: 20%;
    animation-delay: 6s;
    animation-duration: 17s;
}

.particle:nth-child(8) {
    left: 60%;
    animation-delay: 7s;
    animation-duration: 19s;
}

@keyframes floatParticle {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(30px) scale(1.2);
    }
    90% {
        opacity: 1;
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
}

/* Ensure content is above background */
#scene-runes .page-title,
#scene-runes .page-subtitle,
#scene-runes .page-description,
#scene-runes .rune-grid,
#scene-runes .rune-cast-btn,
#scene-runes .nav-back-btn,
#scene-runes .rune-reading {
    position: relative;
    z-index: 2;
}

.rune-casting-loading {
    text-align: center;
    padding: 40px;
    color: var(--gold);
    font-size: 1.2rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.rune-error {
    text-align: center;
    padding: 20px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 2px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    margin: 20px 0;
}

/* Rune Forest */
.rune-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 25px;
    margin: 40px auto;
    max-width: 1000px;
    padding: 20px;
}

.rune-stone {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
    border: 3px solid var(--gold);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.rune-stone:hover {
    transform: rotate(5deg) scale(1.1);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15));
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
}

.rune-stone.selected {
    border-color: var(--ember);
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.3), rgba(255, 69, 0, 0.15));
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.7);
}

.rune-casting-area {
    background: rgba(20, 20, 20, 0.6);
    border: 2px dashed var(--gold);
    border-radius: 20px;
    min-height: 400px;
    margin: 40px auto;
    max-width: 900px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rune-cast-btn {
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    color: var(--bg);
    padding: 15px 50px;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 30px 0;
    text-transform: uppercase;
}

.rune-cast-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 25px rgba(212, 175, 55, 0.5);
}

.rune-cast-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.rune-reading {
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin: 40px auto;
    max-width: 700px;
    text-align: left;
}

.rune-reading h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 3px;
    text-align: center;
}

.rune-result {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(212, 175, 55, 0.05);
    border-radius: 10px;
    border-left: 4px solid var(--gold);
}

.rune-result .rune-symbol {
    font-size: 3rem;
    min-width: 80px;
    text-align: center;
}

.rune-result .rune-details h4 {
    color: var(--gold);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.rune-result .rune-details p {
    color: #ccc;
    line-height: 1.6;
}

/* Common elements */
.page-title {
    color: var(--gold);
    letter-spacing: 8px;
    margin-top: 60px;
    font-size: 2.5rem;
    text-transform: uppercase;
}

.page-subtitle {
    font-style: italic;
    color: var(--gold);
    margin: 30px 0;
    font-size: 1.1rem;
}

.page-description {
    color: #666;
    margin: 20px 0;
    font-size: 0.95rem;
}

/* Touch-friendly styles for mobile/tablet */
.bell, .rune-inscription-block, .card-flip-container {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Responsive design */
@media (max-width: 768px) {
    /* Hide decorative elements on mobile - focus on main altar items */
    .elemental-tool,
    .sacred-geometry-trim,
    .geometry-line,
    .geometry-pattern,
    .geometry-circle {
        display: none !important;
    }
    
    /* Reduce altar container margins */
    .altar-container {
        margin: 20px 0 30px;
    }
    
    /* Smaller, more compact table */
    .magician-table {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        flex-direction: row;
        gap: 20px;
        padding: 20px 15px;
        justify-content: space-around;
    }
    
    /* Make altar items larger and more prominent */
    .altar-item {
        min-width: auto;
        flex: 1;
        max-width: 30%;
    }
    
    /* Larger bell on mobile */
    .bell {
        width: 140px;
        height: 140px;
    }
    
    .bell-icon {
        font-size: 4rem;
    }
    
    /* Larger rune on mobile */
    .rune-inscription-block {
        width: 140px;
        height: 140px;
    }
    
    .rune-inscription {
        font-size: 4rem;
    }
    
    .rune-meaning-altar {
        max-width: 200px;
        padding: 12px;
        font-size: 0.8rem;
    }
    
    /* Larger card on mobile - ensure it's touchable */
    .card-flip-container {
        width: 140px;
        height: 240px;
        min-width: 140px;
        min-height: 240px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    }
    
    /* Compact frequency selector */
    .frequency-selector {
        margin-bottom: 10px;
        gap: 8px;
    }
    
    .frequency-selector label {
        font-size: 0.7rem;
    }
    
    .frequency-selector select {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    
    .frequency-info {
        font-size: 0.65rem;
    }
    
    /* Reduce hint text size */
    .altar-item .hint {
        font-size: 0.75rem;
        margin-top: 8px;
    }
    
    /* Reduce meaning text sizes */
    .card-meaning-altar {
        font-size: 0.8rem;
        padding: 10px;
        max-width: 200px;
    }
    
    /* Reduce top margin for altar heading */
    #scene-altar h1 {
        margin-top: 20px;
        font-size: 1.8rem;
        letter-spacing: 4px;
    }
    
    /* Welcome scroll mobile adjustments */
    .welcome-scroll {
        max-width: 95%;
        margin: 20px auto;
        padding: 0 10px;
    }
    
    .scroll-content {
        padding: 20px 25px;
    }
    
    .welcome-message {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
    
    .altar-instruction {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    
    /* Compact enter button */
    .enter-btn {
        padding: 14px 28px;
        font-size: 1.1rem;
        margin: 25px 0;
    }
    
    /* Tarot Sanctuary - Extra small screens */
    .readings-grid {
        padding: 10px 5px;
        gap: 15px;
    }
    
    .reading-type {
        padding: 20px 15px;
    }
    
    .reading-type h3 {
        font-size: 1.2rem;
    }
    
    .reading-type p {
        font-size: 0.85rem;
    }
}

/* Extra small screens - stack items vertically */
@media (max-width: 480px) {
    .magician-table {
        flex-direction: column;
        gap: 30px;
        padding: 25px 15px;
    }
    
    .altar-item {
        max-width: 100%;
        width: 100%;
    }
    
    /* Even larger items on very small screens for better touch targets */
    .bell {
        width: 160px;
        height: 160px;
    }
    
    .bell-icon {
        font-size: 4.5rem;
    }
    
    .rune-inscription-block {
        width: 160px;
        height: 160px;
    }
    
    .rune-inscription {
        font-size: 4.5rem;
    }
    
    .card-flip-container {
        width: 160px;
        height: 280px;
    }
    
    /* Reduce scene padding */
    .scene {
        padding: 15px;
    }
    
    /* Smaller heading on mobile */
    #scene-altar h1 {
        font-size: 1.5rem;
        margin-top: 20px;
    }
    
    /* Welcome scroll extra small screens */
    .welcome-scroll {
        max-width: 100%;
        margin: 15px auto;
        padding: 0 5px;
    }
    
    .scroll-content {
        padding: 15px 20px;
        border-width: 2px;
    }
    
    .scroll-content::before,
    .scroll-content::after {
        width: 25px;
    }
    
    .welcome-message {
        font-size: 1rem;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }
    
    .altar-instruction {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    
    /* Compact enter button */
    .enter-btn {
        padding: 12px 24px;
        font-size: 1rem;
        margin: 20px 0;
    }
    
    .encyclopedia-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
    }
    
    .encyclopedia-card img {
        height: 150px;
    }
    
    .card-detail-content {
        padding: 20px;
    }
    
    .card-detail-header {
        flex-direction: column;
        align-items: center;
    }
    
    .detail-card-image {
        width: 150px;
        height: 262px;
    }
    
    /* Tarot Sanctuary - Mobile centering fixes */
    .study-content {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .readings-menu {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    
    .readings-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 15px 10px;
        margin: 30px auto;
        justify-items: center;
        width: 100%;
        box-sizing: border-box;
        gap: 20px;
    }
    
    .reading-type {
        width: 100%;
        max-width: 100%;
        padding: 25px 20px;
        box-sizing: border-box;
        margin: 0;
    }
    
    .reading-cards-container {
        gap: 18px;
        padding: 10px 12px 18px;
    }
    
    .reading-card-wrapper {
        min-width: 150px;
        padding: 15px;
    }
    
    .reading-card {
        width: 150px;
        height: 262px;
    }
    
    .reading-card-wrapper .card-meaning {
        max-width: 200px;
        font-size: 0.85rem;
    }
    
    .reading-title {
        font-size: 1.8rem;
    }
    
    .three-card-spread {
        grid-template-columns: 1fr;
    }
    
    .five-card-spread {
        grid-template-columns: 1fr;
    }
    
    .weekly-spread {
        grid-template-columns: 1fr;
    }
    
    .hopes-fears-spread {
        grid-template-columns: 1fr;
    }
    
    .horseshoe-spread {
        grid-template-columns: 1fr;
    }
    
    .balance-spread {
        grid-template-columns: 1fr;
    }
    
    /* Ensure Tarot Sanctuary content is properly centered on mobile */
    #scene-tarot {
        overflow-x: hidden;
        width: 100%;
    }
    
    #scene-tarot .page-title,
    #scene-tarot .page-subtitle,
    #scene-tarot .page-description {
        text-align: center;
        padding: 0 15px;
    }
    
    .tarot-nav-tabs {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 10px;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 140px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .mindbody-spread {
        grid-template-columns: 1fr;
    }
    
    .celtic-cross-spread {
        grid-template-columns: 1fr;
    }
    
    .tarot-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .tarot-card {
        width: 120px;
        height: 210px;
    }
    
    .rune-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    
    .rune-stone {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }
    
    .page-title {
        font-size: 1.8rem;
        letter-spacing: 4px;
    }
    
    .crystal-shelf {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-auto-rows: 120px;
        gap: 10px;
        padding: 20px;
    }
    
    .crystal-nook {
        padding: 10px;
    }
    
    .crystal-gem-container {
        height: 70px;
    }
    
    .gemstone-faceted {
        width: 40px;
        height: 55px;
    }
    
    .gemstone-cluster {
        width: 50px;
        height: 50px;
    }
    
    .gemstone-cube {
        width: 35px;
        height: 35px;
    }
    
    .crystal-name {
        font-size: 0.75rem;
    }
    
    .crystal-detail-content {
        padding: 30px 20px;
    }
    
    .crystal-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .crystal-icon-large {
        width: 120px;
        height: 150px;
    }
    
    .crystal-icon-large .gemstone-faceted {
        width: 100px;
        height: 130px;
    }
    
    .crystal-icon-large .gemstone-cluster {
        width: 120px;
        height: 120px;
    }
    
    .crystal-icon-large .gemstone-cube {
        width: 80px;
        height: 80px;
    }
    
    .crystal-detail-title h2 {
        font-size: 2rem;
    }
}

/* Journal of the Sovereign */
.journal-wing {
    position: relative;
    background: linear-gradient(135deg, rgba(163, 102, 255, 0.1), rgba(212, 175, 55, 0.1));
    border: 2px solid rgba(163, 102, 255, 0.5);
}

.journal-glow {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    animation: journalPulse 2s ease-in-out infinite;
}

@keyframes journalPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.journal-entry-form {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px 40px;
    background: rgba(255, 252, 245, 0.3);
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.page-title {
    color: #5a4a3a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(139, 120, 98, 0.3);
    position: relative;
    z-index: 2;
}

.page-subtitle {
    color: #8b7865;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

.entry-section {
    background: linear-gradient(135deg,
        rgba(250, 245, 235, 0.95) 0%,
        rgba(240, 235, 225, 0.95) 50%,
        rgba(250, 245, 235, 0.95) 100%);
    border: 2px solid rgba(139, 120, 98, 0.4);
    border-left: 4px solid rgba(139, 120, 98, 0.6);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
}

/* Paper texture on entry sections */
.entry-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(139, 120, 98, 0.05) 2px,
            rgba(139, 120, 98, 0.05) 4px);
    pointer-events: none;
    z-index: 0;
}

.entry-section > * {
    position: relative;
    z-index: 1;
}

.entry-section:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    user-select: none;
    background: rgba(20, 20, 25, 0.5);
    transition: background 0.3s ease;
}

.section-header:hover {
    background: rgba(20, 20, 25, 0.8);
}

.section-header h3 {
    color: #5a4a3a;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

/* Deep indigo for Moon & Magical Notation section */
.entry-section[data-section="astrology"] .section-header h3 {
    color: #4B0082;
}

.entry-section[data-section="astrology"] .section-content {
    color: #4B0082;
}

.toggle-icon {
    color: var(--gold);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.section-content {
    padding: 25px;
    display: none;
}

.section-content.active {
    display: block;
}

/* Tarot & Rune Log */
.today-cards,
.today-altar {
    min-height: 60px;
}

/* Altar Session Display */
.altar-session-display {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(163, 102, 255, 0.1));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.altar-session-display:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.altar-session-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.altar-session-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

.altar-session-title {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.altar-session-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.altar-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.altar-label {
    color: var(--gold);
    font-weight: 600;
    min-width: 100px;
}

.section-hint {
    color: rgba(75, 0, 130, 0.7);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.today-section {
    margin-bottom: 15px;
}

.today-section h4 {
    color: var(--purple);
    font-size: 1rem;
    margin-bottom: 10px;
}

.today-cards-list,
.today-runes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-badge,
.rune-badge {
    display: inline-block;
    padding: 8px 15px;
    background: rgba(163, 102, 255, 0.2);
    border: 1px solid var(--purple);
    border-radius: 20px;
    color: var(--purple);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.rune-badge {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

/* Affirmation Chamber */
.affirmation-input {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    background: rgba(255, 252, 245, 0.9);
    border: 1px solid rgba(139, 120, 98, 0.4);
    border-left: 3px solid rgba(139, 120, 98, 0.6);
    border-radius: 4px;
    color: #4B0082;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.affirmation-input:focus {
    outline: none;
    border-color: rgba(139, 120, 98, 0.7);
    background: rgba(255, 252, 245, 1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(139, 120, 98, 0.3);
}

.affirmation-input::placeholder {
    color: rgba(139, 120, 98, 0.6);
    font-style: italic;
}

/* Astrology Pulse */
.astrology-inputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.astrology-inputs label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.astrology-inputs span {
    color: #4B0082;
    font-size: 0.95rem;
    letter-spacing: 1px;
    font-weight: 600;
}

.astrology-select,
.transit-input {
    padding: 10px 15px;
    background: rgba(255, 252, 245, 0.9);
    border: 1px solid rgba(139, 120, 98, 0.4);
    border-left: 3px solid rgba(139, 120, 98, 0.6);
    border-radius: 4px;
    color: #4B0082;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.astrology-select {
    padding-right: 80px;
}

.transit-input {
    padding-right: 80px;
}

.auto-fill-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--gold);
    padding: 6px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.auto-fill-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.astrology-notation {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    background: rgba(20, 20, 25, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
}

.astrology-notation:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.astrology-select:focus,
.transit-input:focus {
    outline: none;
    border-color: rgba(139, 120, 98, 0.7);
    background: rgba(255, 252, 245, 1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(139, 120, 98, 0.3);
}

/* Dream Weaver */
.dream-input {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    background: rgba(255, 252, 245, 0.9);
    border: 1px solid rgba(139, 120, 98, 0.4);
    border-left: 3px solid rgba(139, 120, 98, 0.6);
    border-radius: 4px;
    color: #4B0082;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dream-input:focus {
    outline: none;
    border-color: rgba(139, 120, 98, 0.7);
    background: rgba(255, 252, 245, 1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(139, 120, 98, 0.3);
}

.dream-input::placeholder {
    color: rgba(139, 120, 98, 0.6);
    font-style: italic;
}

/* Alchemy Lab */
.alchemy-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.alchemy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 200, 100, 0.1);
    border: 1px solid rgba(0, 200, 100, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.alchemy-item:hover {
    background: rgba(0, 200, 100, 0.2);
    border-color: rgba(0, 200, 100, 0.6);
    transform: translateX(5px);
}

.alchemy-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #00c864;
}

.alchemy-item span {
    color: #00c864;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Magical Notation */
.magic-input {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    background: rgba(255, 252, 245, 0.9);
    border: 1px solid rgba(139, 120, 98, 0.4);
    border-left: 3px solid rgba(139, 120, 98, 0.6);
    border-radius: 4px;
    color: #4B0082;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.magic-input:focus {
    outline: none;
    border-color: rgba(139, 120, 98, 0.7);
    background: rgba(255, 252, 245, 1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 8px rgba(139, 120, 98, 0.3);
}

.magic-input::placeholder {
    color: rgba(139, 120, 98, 0.6);
    font-style: italic;
}

.magic-hint {
    color: rgba(75, 0, 130, 0.7);
    font-size: 0.85rem;
    margin-top: 10px;
    font-style: italic;
}

/* Seal the Day Button */
.seal-day-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 12px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 30px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.seal-day-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.5);
}

.seal-day-btn:active {
    transform: translateY(-1px);
}

/* Journal History */
.journal-history {
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.journal-history-header {
    margin-bottom: 40px;
}

.history-title {
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Journal Controls - Search and Filters */
.journal-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(10, 10, 15, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.journal-search-container {
    position: relative;
    width: 100%;
}

.journal-search {
    width: 100%;
    padding: 12px 40px 12px 20px;
    background: rgba(20, 20, 25, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.journal-search:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--gold);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.clear-search-btn:hover {
    background: rgba(212, 175, 55, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.journal-filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.journal-filter {
    flex: 1;
    min-width: 150px;
    padding: 10px 15px;
    background: rgba(20, 20, 25, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.journal-filter:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.journal-sort-btn {
    padding: 10px 20px;
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.journal-sort-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--gold);
    transform: translateY(-2px);
}

#sort-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Journal Statistics */
.journal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(163, 102, 255, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: rgba(20, 20, 25, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: #ccc;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Journal Loading States */
.journal-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--gold);
}

.journal-loading .loading-spinner {
    margin: 0 auto 20px;
}

.journal-loading p {
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #ccc;
}

.journal-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.journal-empty-state h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.journal-empty-state p {
    color: #999;
    font-size: 1rem;
}

.entry-feed {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-height: 800px;
    overflow-y: auto;
    padding: 20px;
}

.entry-feed::-webkit-scrollbar {
    width: 8px;
}

.entry-feed::-webkit-scrollbar-track {
    background: rgba(20, 20, 25, 0.5);
    border-radius: 10px;
}

.entry-feed::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.5);
    border-radius: 10px;
}

.entry-feed::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.7);
}

.entry-card {
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.entry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.entry-card:hover::before {
    left: 100%;
}

.entry-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

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

.entry-date {
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.entry-section-display {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
}

.entry-section-display h4 {
    color: var(--gold);
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.tarot-rune-display {
    background: rgba(163, 102, 255, 0.1);
    border-left: 3px solid var(--purple);
}

.affirmation-display {
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--gold);
}

.astrology-display {
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--gold);
}

.dream-display {
    background: rgba(75, 0, 130, 0.2);
    border-left: 3px solid #9370db;
}

.alchemy-display {
    background: rgba(0, 200, 100, 0.1);
    border-left: 3px solid #00c864;
}

.magic-display {
    background: rgba(212, 175, 55, 0.15);
    border-left: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.astra-guidance-display {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.15));
    border-left: 3px solid var(--purple);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
    position: relative;
}

.astra-guidance-display::before {
    content: '✨';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    opacity: 0.5;
}

.astra-guidance-text {
    color: #e0d5f0;
    font-size: 1.05rem;
    line-height: 1.9;
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.5px;
    font-style: italic;
}

.affirmation-text {
    color: #ffd700;
    font-size: 1.1rem;
    line-height: 1.8;
    font-style: italic;
}

.dream-text {
    color: #e0d5ff;
    font-size: 1rem;
    line-height: 1.8;
}

.magic-text {
    color: #ffd700;
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 500;
}

/* Reading Groups */
.reading-group {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(163, 102, 255, 0.2);
}

.reading-group-title {
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.entry-cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-list-item {
    padding: 8px 12px;
    background: rgba(20, 20, 30, 0.5);
    border: 1px solid rgba(163, 102, 255, 0.2);
    border-radius: 6px;
    color: #ddd;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.card-list-item:hover {
    background: rgba(163, 102, 255, 0.15);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateX(5px);
}

.card-list-item strong {
    color: var(--gold);
    font-weight: 600;
}

/* Legacy support - hide card thumbnails if they still exist */
.entry-cards-thumbnails {
    display: none;
}

.card-thumbnail {
    display: none;
}

/* Entry Header with Delete Button */
.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 15px 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
}

.entry-header:hover {
    background: rgba(212, 175, 55, 0.05);
    border-bottom-color: rgba(212, 175, 55, 0.4);
}

.entry-summary {
    color: #999;
    font-size: 0.9rem;
    flex: 1;
    margin-left: 20px;
    font-style: italic;
}

.entry-expand-icon {
    color: var(--gold);
    font-size: 0.8rem;
    margin-left: 15px;
    transition: transform 0.3s ease;
    min-width: 20px;
    text-align: center;
}

.entry-card[data-expanded="true"] .entry-expand-icon {
    transform: rotate(180deg);
}

.entry-content {
    padding: 20px;
    animation: slideDown 0.3s ease-out;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.entry-content::-webkit-scrollbar {
    width: 6px;
}

.entry-content::-webkit-scrollbar-track {
    background: rgba(20, 20, 25, 0.3);
    border-radius: 10px;
}

.entry-content::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.4);
    border-radius: 10px;
}

.entry-content::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 5000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.entry-card.expanded {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

.delete-entry-btn {
    background: rgba(255, 69, 0, 0.2);
    border: 1px solid rgba(255, 69, 0, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: rgba(255, 69, 0, 0.8);
    transition: all 0.3s ease;
    padding: 0;
    line-height: 1;
}

.delete-entry-btn:hover {
    background: rgba(255, 69, 0, 0.4);
    border-color: rgba(255, 69, 0, 0.8);
    color: #ff4500;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 69, 0, 0.3);
}

.delete-entry-btn:active {
    transform: scale(0.95);
}

/* Altar Lock UI */
.altar-locked {
    position: relative;
}

.altar-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 10;
    pointer-events: none;
    animation: fadeInBlur 0.5s ease-in;
}

@keyframes fadeInBlur {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(2px);
    }
}

/* Keep card clickable even when altar is locked */
.altar-locked .card-flip-container {
    pointer-events: auto;
    position: relative;
    z-index: 11;
}

.altar-locked .flip-card.flipped {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.altar-locked .flip-card.flipped:hover {
    transform: scale(1.05);
}

.altar-lock-indicator {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.15));
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(138, 43, 226, 0.2);
}

.altar-lock-indicator p {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.altar-lock-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.altar-action-btn {
    background: linear-gradient(135deg, var(--gold), rgba(212, 175, 55, 0.8));
    color: #1a1a1a;
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.altar-action-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), var(--gold));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.altar-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.altar-refresh-btn {
    background: linear-gradient(135deg, var(--purple), rgba(138, 43, 226, 0.8));
    color: white;
    border: 2px solid rgba(138, 43, 226, 0.6);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.altar-refresh-btn:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), var(--purple));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.altar-refresh-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(138, 43, 226, 0.3);
}

/* Altar Log Subsection in Journal */
.altar-log-subsection {
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1));
    border-left: 3px solid rgba(138, 43, 226, 0.6);
    border-radius: 8px;
    position: relative;
}

.altar-log-title {
    color: var(--gold);
    font-size: 1rem;
    margin-bottom: 12px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.altar-log-entry {
    color: #e0d5f0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 12px;
    font-style: italic;
}

.altar-log-cards,
.altar-log-runes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.altar-log-card,
.altar-log-rune {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0d5f0;
    font-size: 0.9rem;
}

.altar-log-label {
    color: var(--purple);
    font-weight: 600;
    opacity: 0.8;
}

.altar-log-card strong,
.altar-log-rune strong {
    color: var(--gold);
    font-weight: 600;
}

.altar-log-rune .rune-symbol {
    font-size: 1.2rem;
    margin-left: 5px;
    filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.6));
}

.entry-cards,
.entry-runes,
.entry-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.tool-badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0, 200, 100, 0.2);
    border: 1px solid #00c864;
    border-radius: 15px;
    color: #00c864;
    font-size: 0.85rem;
}

.no-entries {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 40px;
}

/* Star Dust Particle Effect */
.star-dust-container {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
}

.star-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ffd700, transparent);
    border-radius: 50%;
    animation: starDust var(--duration, 1.5s) ease-out forwards;
    box-shadow: 0 0 10px #ffd700;
}

@keyframes starDust {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(
            calc(cos(var(--angle, 0)) * var(--distance, 100px)),
            calc(sin(var(--angle, 0)) * var(--distance, 100px))
        ) scale(0);
    }
}

/* Ember Display */
.ember-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 69, 0, 0.1);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 10px;
}

.ember-icon {
    font-size: 1.5rem;
    animation: emberGlow 2s ease-in-out infinite;
}

@keyframes emberGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.ember-count {
    color: var(--ember);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.ember-label {
    color: #999;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Journal Actions */
.journal-actions {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.journal-actions .seal-day-btn,
.journal-actions .consult-astra-btn,
.journal-actions .export-journal-btn {
    flex: 1;
    min-width: 150px;
}

.export-journal-btn {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(163, 102, 255, 0.3));
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.export-journal-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.5), rgba(163, 102, 255, 0.5));
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* Auto-save indicator */
.journal-autosave-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(20, 20, 25, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    padding: 10px 15px;
    color: var(--gold);
    font-size: 0.9rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.autosave-icon {
    font-size: 1rem;
    animation: pulse 2s infinite;
}

.autosave-text {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.consult-astra-btn {
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    border-radius: 12px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(163, 102, 255, 0.3);
    position: relative;
}

.consult-astra-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 30px rgba(163, 102, 255, 0.5);
}

.ember-cost {
    display: block;
    font-size: 0.8rem;
    margin-top: 5px;
    opacity: 0.9;
}

/* Astra AI Modal */
.astra-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.astra-modal-content {
    background: rgba(10, 10, 15, 0.95);
    border: 2px solid var(--purple);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(163, 102, 255, 0.3);
    padding: 40px;
}

.astra-modal-content .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.astra-modal-content .modal-close:hover {
    background: var(--purple);
    color: var(--bg);
    transform: rotate(90deg);
}

.astra-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(163, 102, 255, 0.3);
}

.astra-header h2 {
    color: var(--purple);
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(163, 102, 255, 0.5);
}

.astra-subtitle {
    color: #999;
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 1px;
}

/* Thinking State with Soft Indigo Pulse */
.astra-thinking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.thinking-pulse {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 0, 130, 0.8), rgba(75, 0, 130, 0.2));
    border: 3px solid rgba(75, 0, 130, 0.6);
    position: relative;
    margin-bottom: 30px;
    animation: indigoPulse 2s ease-in-out infinite;
}

.thinking-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.6), transparent);
    animation: indigoPulseInner 2s ease-in-out infinite;
}

.thinking-pulse::after {
    content: '✨';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    z-index: 1;
}

@keyframes indigoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(75, 0, 130, 0.4);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 40px rgba(138, 43, 226, 0.6);
    }
}

@keyframes indigoPulseInner {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

.astra-thinking p {
    color: rgba(138, 43, 226, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-align: center;
    animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Astra's Insight Box */
.astra-response {
    min-height: 200px;
}

/* Mystical Scroll Container */
.astra-scroll-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    perspective: 1000px;
}

.astra-scroll {
    position: relative;
    background: linear-gradient(180deg, 
        rgba(30, 15, 45, 0.95) 0%,
        rgba(45, 25, 65, 0.95) 20%,
        rgba(35, 20, 55, 0.95) 80%,
        rgba(30, 15, 45, 0.95) 100%);
    border: 3px solid rgba(138, 43, 226, 0.6);
    border-radius: 8px;
    padding: 0;
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.4),
        inset 0 0 40px rgba(75, 0, 130, 0.2),
        0 10px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Scroll Top Decoration */
.scroll-top-decoration {
    height: 40px;
    background: linear-gradient(180deg, 
        rgba(138, 43, 226, 0.3) 0%,
        rgba(75, 0, 130, 0.2) 50%,
        transparent 100%);
    border-bottom: 2px solid rgba(138, 43, 226, 0.4);
    position: relative;
    overflow: hidden;
}

.scroll-top-decoration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
    border-radius: 50%;
}

.scroll-top-decoration::after {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: rgba(138, 43, 226, 0.5);
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
    animation: scrollGlow 3s ease-in-out infinite;
}

@keyframes scrollGlow {
    0%, 100% { 
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Scroll Bottom Decoration */
.scroll-bottom-decoration {
    height: 40px;
    background: linear-gradient(0deg, 
        rgba(138, 43, 226, 0.3) 0%,
        rgba(75, 0, 130, 0.2) 50%,
        transparent 100%);
    border-top: 2px solid rgba(138, 43, 226, 0.4);
    position: relative;
}

.scroll-bottom-decoration::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
    border-radius: 50%;
}

/* Scroll Content Wrapper */
.scroll-content-wrapper {
    padding: 40px 35px;
    max-height: 500px;
    overflow-y: auto;
    position: relative;
}

.scroll-content-wrapper::-webkit-scrollbar {
    width: 8px;
}

.scroll-content-wrapper::-webkit-scrollbar-track {
    background: rgba(75, 0, 130, 0.1);
    border-radius: 10px;
}

.scroll-content-wrapper::-webkit-scrollbar-thumb {
    background: rgba(138, 43, 226, 0.5);
    border-radius: 10px;
}

.scroll-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 43, 226, 0.7);
}

/* Mystical Text Content */
.astra-insight-content {
    color: #e8dff5;
    font-family: 'Crimson Text', serif;
    font-size: 1.15rem;
    line-height: 2;
    letter-spacing: 0.8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.astra-insight-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(138, 43, 226, 0.3) 20%,
        rgba(138, 43, 226, 0.5) 50%,
        rgba(138, 43, 226, 0.3) 80%,
        transparent 100%);
    opacity: 0.6;
    animation: scrollLineGlow 4s ease-in-out infinite;
}

@keyframes scrollLineGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.astra-insight-content p {
    margin-bottom: 24px;
    color: #e8dff5;
    position: relative;
    padding-left: 25px;
}

.astra-insight-content strong {
    color: #d4a5ff;
    font-weight: 600;
    text-shadow: 
        0 0 10px rgba(138, 43, 226, 0.6),
        0 0 20px rgba(138, 43, 226, 0.3);
    font-size: 1.2em;
    letter-spacing: 1px;
}

.astra-insight-content.complete {
    animation: textReveal 0.6s ease-out;
}

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

/* Magical scroll appearance animation */
.astra-scroll-container {
    animation: scrollAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scrollAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px) rotateX(10deg);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
        filter: blur(0px);
    }
}

/* Subtle scroll shimmer effect */
.astra-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%);
    animation: scrollShimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scrollShimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* Astra Action Buttons */
.astra-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.astra-action-btn {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.8));
    border: 2px solid rgba(138, 43, 226, 0.6);
    border-radius: 10px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px 24px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    position: relative;
    overflow: hidden;
}

.astra-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s ease;
}

.astra-action-btn:hover::before {
    left: 100%;
}

.astra-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(138, 43, 226, 0.5);
    border-color: var(--gold);
}

.astra-action-btn:active {
    transform: translateY(0);
}

.astra-action-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Astra Error State */
.astra-error {
    text-align: center;
    padding: 40px 20px;
    color: rgba(138, 43, 226, 0.9);
    font-family: 'Cinzel', serif;
}

.astra-error p {
    margin: 15px 0;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Astra Message (legacy, keeping for compatibility) */
.astra-message {
    color: #e0d5f0;
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 20px;
}

.astra-message p {
    margin-bottom: 15px;
}

.journal-paywall {
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
    text-align: center;
}

.journal-paywall p {
    color: var(--gold);
    font-size: 1.1rem;
    margin: 10px 0;
}

.upgrade-btn {
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 12px 30px;
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* Shop Styles */
.shop-wing {
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 69, 0, 0.1));
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.shop-glow {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    animation: shopPulse 2s ease-in-out infinite;
}

@keyframes shopPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Settings Styles */
.settings-wing {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), rgba(163, 102, 255, 0.1));
    border: 2px solid rgba(255, 69, 0, 0.5);
}

.settings-glow {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    animation: settingsPulse 2s ease-in-out infinite;
}

@keyframes settingsPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.settings-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

.settings-section {
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
}

.settings-section-title {
    color: var(--gold);
    font-size: 1.8rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.settings-section-desc {
    color: #999;
    font-size: 1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.reset-journey-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 20px 40px;
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid var(--ember);
    border-radius: 12px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(255, 69, 0, 0.3),
        0 0 40px rgba(255, 69, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.1);
}

.reset-journey-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 69, 0, 0.4) 0%, transparent 70%);
    animation: emberFade 3s ease-in-out infinite;
    pointer-events: none;
}

.reset-journey-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 69, 0, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 69, 0, 0.1) 100%);
    animation: emberShimmer 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes emberFade {
    0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes emberShimmer {
    0%, 100% { 
        opacity: 0.2;
        transform: translateX(-100%);
    }
    50% { 
        opacity: 0.4;
        transform: translateX(100%);
    }
}

.reset-journey-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 0 30px rgba(255, 69, 0, 0.5),
        0 0 60px rgba(255, 69, 0, 0.3),
        0 5px 20px rgba(255, 69, 0, 0.4),
        inset 0 0 30px rgba(255, 69, 0, 0.15);
    border-color: rgba(255, 69, 0, 0.8);
}

.reset-journey-btn:active {
    transform: translateY(-1px);
    box-shadow: 
        0 0 20px rgba(255, 69, 0, 0.4),
        0 0 40px rgba(255, 69, 0, 0.2),
        inset 0 0 20px rgba(255, 69, 0, 0.1);
}

.reset-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.8));
    animation: emberGlow 2s ease-in-out infinite;
    z-index: 1;
    position: relative;
}

@keyframes emberGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.8));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(255, 69, 0, 1));
        transform: scale(1.1);
    }
}

.reset-text {
    z-index: 1;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

/* App Install Section */
.app-install-section {
    border-color: rgba(212, 175, 55, 0.5);
}

.app-install-instructions {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

.install-method {
    background: rgba(20, 20, 30, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 25px;
}

.install-method-title {
    color: var(--gold);
    font-size: 1.3rem;
    font-family: 'Cinzel', serif;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.install-steps {
    color: #ccc;
    line-height: 2;
    padding-left: 25px;
    margin: 0;
}

.install-steps li {
    margin-bottom: 10px;
}

.install-steps strong {
    color: var(--gold);
    font-weight: 600;
}

.install-benefits {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.benefits-title {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.benefits-list {
    color: #ccc;
    line-height: 2;
    padding-left: 25px;
    margin: 0;
    list-style: none;
}

.benefits-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

.benefits-list li::before {
    content: '✨';
    position: absolute;
    left: 0;
    color: var(--gold);
}

.reset-warning {
    color: #999;
    font-size: 0.9rem;
    margin-top: 20px;
    font-style: italic;
    line-height: 1.6;
}

/* Profile Section Styles */
.profile-container {
    margin-top: 30px;
}

.profile-field {
    margin-bottom: 30px;
}

.profile-label {
    display: block;
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.profile-input,
.profile-select {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.profile-input:focus,
.profile-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    background: rgba(30, 30, 30, 0.9);
}

.profile-input[readonly] {
    background: rgba(15, 15, 15, 0.6);
    cursor: not-allowed;
    opacity: 0.7;
}

.field-hint {
    color: #999;
    font-size: 0.85rem;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
}

/* Avatar Selection */
.avatar-selection {
    margin-top: 15px;
}

.avatar-current {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.avatar-preview {
    font-size: 3rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    transition: all 0.3s ease;
}

.avatar-preview:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
}

.avatar-label {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 600;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 12px;
    max-width: 500px;
    padding: 15px;
    background: rgba(10, 10, 15, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.avatar-option {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.avatar-option:hover {
    transform: scale(1.15) rotate(5deg);
    border-color: var(--gold);
    background: rgba(30, 30, 30, 0.9);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.avatar-option.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 
        0 0 25px rgba(212, 175, 55, 0.5),
        inset 0 0 15px rgba(212, 175, 55, 0.2);
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.7));
}

.avatar-option:active {
    transform: scale(1.05) rotate(-2deg);
}

/* Save Buttons */
.save-profile-btn,
.save-preferences-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(163, 102, 255, 0.2));
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    overflow: hidden;
}

.save-profile-btn::before,
.save-preferences-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
    animation: goldenGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goldenGlow {
    0%, 100% { 
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.5;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg);
        opacity: 0.8;
    }
}

.save-profile-btn:hover,
.save-preferences-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.4),
        0 0 60px rgba(212, 175, 55, 0.2),
        0 5px 20px rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.8);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(163, 102, 255, 0.3));
}

.save-profile-btn:active,
.save-preferences-btn:active {
    transform: translateY(0);
}

.save-profile-btn:disabled,
.save-preferences-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.save-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
    z-index: 1;
    position: relative;
}

.save-text {
    z-index: 1;
    position: relative;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.profile-message,
.preferences-message {
    margin-top: 15px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    display: none;
    animation: fadeIn 0.3s ease;
}

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

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

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.profile-message.success,
.preferences-message.success {
    background: rgba(46, 125, 50, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #81c784;
}

.profile-message.error,
.preferences-message.error {
    background: rgba(211, 47, 47, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);
    color: #e57373;
}

.profile-message.info,
.preferences-message.info {
    background: rgba(25, 118, 210, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.5);
    color: #64b5f6;
}

/* Preferences Section */
.preferences-container {
    margin-top: 30px;
}

.preference-field {
    margin-bottom: 25px;
}

.preference-label {
    display: block;
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.preference-select {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.preference-select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    background: rgba(30, 30, 30, 0.9);
}

.preference-toggles {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.toggle-field {
    margin-bottom: 25px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 15px;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
}

.toggle-label:hover {
    background: rgba(30, 30, 30, 0.7);
    border-color: rgba(212, 175, 55, 0.4);
}

.toggle-checkbox {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background: rgba(60, 60, 60, 0.8);
    border-radius: 13px;
    transition: all 0.3s ease;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(150, 150, 150, 0.9);
    top: 1px;
    left: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-checkbox:checked + .toggle-slider {
    background: rgba(212, 175, 55, 0.4);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.toggle-checkbox:checked + .toggle-slider::before {
    transform: translateX(24px);
    background: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.toggle-text {
    color: #e0e0e0;
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
}

.toggle-hint {
    color: #999;
    font-size: 0.85rem;
    margin-top: 8px;
    margin-left: 70px;
    font-style: italic;
    line-height: 1.5;
}

/* Admin Panel Styles */
.admin-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 30px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.admin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.admin-stats {
    margin-bottom: 40px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-stat-item {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.stat-value {
    color: var(--gold);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.stat-label {
    color: #999;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-customers,
.admin-purchases {
    margin-bottom: 40px;
}

.admin-customers h3,
.admin-purchases h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.admin-table-container {
    overflow-x: auto;
    background: rgba(10, 10, 15, 0.8);
    border-radius: 8px;
    padding: 20px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.admin-table thead {
    background: rgba(212, 175, 55, 0.2);
}

.admin-table th {
    padding: 12px;
    text-align: left;
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.1);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Admin Controls */
.admin-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.admin-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 0.9rem;
}

.admin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Gift Embers Section */
.admin-gift-section {
    background: rgba(20, 20, 25, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.admin-subtitle {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.admin-desc {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-style: italic;
}

.gift-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gift-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gift-label {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.gift-input {
    padding: 12px 15px;
    background: rgba(10, 10, 15, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.gift-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    background: rgba(10, 10, 15, 0.95);
}

.gift-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--purple), var(--gold));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.gift-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(163, 102, 255, 0.5);
}

.gift-btn:active {
    transform: translateY(0);
}

.gift-icon {
    font-size: 1.2rem;
}

.gift-message {
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-top: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.gift-message.success {
    background: rgba(76, 175, 80, 0.2);
    border: 2px solid rgba(76, 175, 80, 0.5);
    color: #4caf50;
}

.gift-message.error {
    background: rgba(244, 67, 54, 0.2);
    border: 2px solid rgba(244, 67, 54, 0.5);
    color: #f44336;
}

.gift-message.info {
    background: rgba(33, 150, 243, 0.2);
    border: 2px solid rgba(33, 150, 243, 0.5);
    color: #2196f3;
}

/* Admin Loading */
.admin-loading {
    text-align: center;
    padding: 40px;
    color: var(--gold);
}

.loading-spinner {
    border: 4px solid rgba(212, 175, 55, 0.3);
    border-top: 4px solid var(--gold);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

.rune-inscription.loading {
    animation: pulse 1.5s ease-in-out infinite;
    color: var(--gold);
}

/* Admin Search & Filter */
.admin-search-section {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.admin-search {
    flex: 1;
    min-width: 250px;
    padding: 12px 20px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.admin-search:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.admin-filter {
    padding: 12px 20px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.3s;
}

.admin-filter:focus {
    outline: none;
    border-color: var(--gold);
}

/* Admin Actions */
.admin-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.admin-action-btn {
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-action-btn:hover {
    background: rgba(212, 175, 55, 0.4);
    border-color: var(--gold);
    transform: scale(1.1);
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-completed,
.status-active {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.status-failed,
.status-cancelled,
.status-expired {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

/* Admin Subscriptions Section */
.admin-subscriptions {
    margin-bottom: 40px;
}

.admin-subscriptions h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* Analytics Dashboard Styles */
.admin-time-filter {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-time-filter label {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}

.admin-time-select {
    padding: 10px 20px;
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.admin-time-select:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(30, 30, 30, 0.9);
}

.admin-analytics {
    margin-bottom: 40px;
}

.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.kpi-card {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(30, 30, 30, 0.95));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.kpi-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.kpi-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.kpi-content {
    flex: 1;
}

.kpi-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    margin-bottom: 5px;
}

.kpi-label {
    font-size: 0.9rem;
    color: #ccc;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.analytics-section {
    margin-bottom: 40px;
    background: rgba(20, 20, 20, 0.5);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.analytics-section-title {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.analytics-card {
    background: rgba(10, 10, 10, 0.6);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.analytics-card h5 {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.analytics-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.analytics-item:last-child {
    border-bottom: none;
}

.analytics-item span {
    color: #ccc;
    font-size: 0.95rem;
}

.analytics-item strong {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: bold;
}

/* Auth Button - Discreet */
/* Ember Balance Display (Top Left Corner) */
.ember-balance-display {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(30, 30, 30, 0.95));
    border: 2px solid rgba(255, 69, 0, 0.4);
    border-radius: 20px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.3), 0 0 15px rgba(255, 69, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    animation: emberGlow 2s ease-in-out infinite;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
}

.ember-balance-display.scrolling {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.ember-balance-display:hover {
    border-color: rgba(255, 69, 0, 0.7);
    box-shadow: 0 6px 25px rgba(255, 69, 0, 0.5), 0 0 20px rgba(255, 69, 0, 0.3);
    transform: translateY(-2px);
}

.ember-addition-animation {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    color: #4CAF50;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
    pointer-events: none;
    z-index: 1000;
    animation: emberAdditionFloat 1.5s ease-out forwards;
    white-space: nowrap;
}

@keyframes emberAdditionFloat {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
        scale: 0.5;
    }
    20% {
        opacity: 1;
        scale: 1.2;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px);
        scale: 0.8;
    }
}

.ember-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.8));
}

.ember-count {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--ember);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.6);
    min-width: 25px;
    text-align: center;
}

@keyframes emberGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 69, 0, 0.3), 0 0 15px rgba(255, 69, 0, 0.2); }
    50% { box-shadow: 0 4px 25px rgba(255, 69, 0, 0.5), 0 0 20px rgba(255, 69, 0, 0.4); }
}

/* User Menu Container (Top Right, aligned with ember balance) */
.user-menu-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.user-menu-container.scrolling {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.user-menu-container.scrolling .user-menu-dropdown {
    display: none !important;
}

@media (max-width: 768px) {
    .ember-balance-display {
        top: 15px;
        left: 15px;
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    
    .ember-icon {
        font-size: 0.9rem;
    }
    
    .ember-count {
        font-size: 0.8rem;
        min-width: 20px;
    }
    
    .user-menu-container {
        top: 15px;
        right: 15px;
    }
    
    .user-menu-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    
    .user-menu-text {
        font-size: 0.65rem;
    }
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.user-menu-btn:hover {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.user-menu-text {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.user-menu-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: 4px;
}

.user-menu-btn:hover .user-menu-arrow {
    transform: translateY(2px);
}

/* User Menu Dropdown */
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.98), rgba(20, 20, 30, 0.98));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: slideDown 0.3s ease;
    z-index: 1001;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-item:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #fff;
}

.user-menu-item span:first-child {
    font-size: 1.1rem;
}

.user-menu-header {
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 12px;
    margin-bottom: 8px;
    cursor: default;
}

.user-menu-header:hover {
    background: transparent;
}

.user-menu-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.2);
    margin: 8px 0;
}

/* Legacy auth button styles (for backwards compatibility) */
.auth-button-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: none; /* Hidden, using user menu instead */
}

.auth-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.auth-btn:hover {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.auth-text {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Auth Modal */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.auth-modal-content {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.95), rgba(20, 20, 30, 0.95));
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.auth-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.auth-modal-close:hover {
    transform: rotate(90deg);
}

.auth-modal-title {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 3px;
}

.auth-tab {
    display: none;
}

.auth-tab.active {
    display: block;
}

.auth-form-group {
    margin-bottom: 20px;
}

.auth-form-group label {
    display: block;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.auth-form-group input {
    width: 100%;
    padding: 12px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-switch-text {
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    margin-top: 20px;
}

.auth-switch-text a {
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.auth-switch-text a:hover {
    color: var(--ember);
}

.auth-message {
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    min-height: 20px;
}

.auth-message.success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #4caf50;
}

.auth-message.error {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);
    color: #f44336;
}

.shop-status {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px auto;
    padding: 20px;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    max-width: 800px;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.status-label {
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-value {
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.shop-section {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
}

.shop-section-title {
    color: var(--gold);
    font-size: 2rem;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.shop-section-desc {
    text-align: center;
    color: #999;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Ember Packages */
.ember-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.ember-package {
    background: rgba(10, 10, 15, 0.9);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.ember-package::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.ember-package:hover::before {
    left: 100%;
}

.ember-package:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
    background: rgba(10, 10, 15, 0.95);
}

.ember-package.featured {
    border-color: rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(163, 102, 255, 0.1));
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
}

.ember-package.featured:hover {
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.5);
}

.package-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    color: var(--gold);
}

.package-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.package-loading p {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.package-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    color: var(--bg);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.package-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.ember-package h3 {
    color: var(--gold);
    font-size: 1.5rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.package-amount {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.package-price {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.package-desc {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
}

/* Subscription CSS removed - subscriptions no longer supported */

/* Auto-save Notification */
.autosave-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: rgba(212, 175, 55, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.autosave-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Anchored Notification */
.anchored-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: rgba(212, 175, 55, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.anchored-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-icon {
    font-size: 1.5rem;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
}

.notification-text {
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 500;
}

/* Anchor Journey Nudge */
.anchor-nudge {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    animation: nudgeAppear 0.3s ease-out;
}

@keyframes nudgeAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.nudge-content {
    padding: 40px;
    text-align: center;
    max-width: 400px;
}

.nudge-content h3 {
    color: var(--gold);
    font-size: 1.8rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.nudge-content p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.nudge-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--gold), var(--ember));
    border: none;
    border-radius: 8px;
    color: var(--bg);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.nudge-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.nudge-close {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nudge-close:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
}

/* Responsive Journal */
@media (max-width: 768px) {
    .journal-entry-form {
        padding: 10px;
    }
    
    .section-header h3 {
        font-size: 1.1rem;
    }
    
    .alchemy-checklist {
        grid-template-columns: 1fr;
    }
    
    .entry-card {
        padding: 20px;
    }
    
    .seal-day-btn {
        font-size: 1.1rem;
        padding: 15px;
    }
    
    .journal-actions {
        flex-direction: column;
    }
    
    .shop-status {
        flex-direction: column;
        gap: 20px;
    }
    
    .ember-packages {
        grid-template-columns: 1fr;
    }
}

/* Bottom Navigation Trim */
.bottom-nav-trim {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to top,
        rgba(5, 5, 5, 0.98) 0%,
        rgba(10, 10, 15, 0.95) 50%,
        rgba(5, 5, 5, 0.98) 100%);
    backdrop-filter: blur(15px);
    border-top: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    padding: 12px 10px 8px;
    z-index: 9999;
    min-height: 70px;
}

.nav-trim-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 100px;
    position: relative;
}

.nav-trim-item:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-3px);
}

.nav-trim-item.active {
    background: rgba(163, 102, 255, 0.2);
    border: 1px solid rgba(163, 102, 255, 0.4);
}

.nav-trim-item.active .nav-trim-icon {
    color: var(--purple);
    text-shadow: 0 0 10px rgba(163, 102, 255, 0.6);
    transform: scale(1.15);
}

.nav-trim-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
    color: rgba(212, 175, 55, 0.7);
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.nav-trim-item:hover .nav-trim-icon {
    color: var(--gold);
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.nav-trim-label {
    font-size: 0.75rem;
    color: rgba(212, 175, 55, 0.8);
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.nav-trim-item:hover .nav-trim-label {
    color: var(--gold);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

.nav-trim-item.active .nav-trim-label {
    color: var(--purple);
    font-weight: 600;
}

/* Add padding to scenes to account for bottom nav */
.scene {
    padding-bottom: 90px;
}

/* Responsive bottom nav */
@media (max-width: 768px) {
    .bottom-nav-trim {
        padding: 10px 5px 6px;
        min-height: 65px;
    }
    
    .nav-trim-icon {
        font-size: 1.5rem;
        margin-bottom: 3px;
    }
    
    .nav-trim-label {
        font-size: 0.65rem;
    }
    
    .nav-trim-item {
        padding: 6px 8px;
        max-width: none;
    }
    
    .scene {
        padding-bottom: 85px;
    }
}

@media (max-width: 480px) {
    .bottom-nav-trim {
        padding: 8px 3px 5px;
        min-height: 60px;
    }
    
    .nav-trim-icon {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }
    
    .nav-trim-label {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
    
    .scene {
        padding-bottom: 80px;
    }
}