/* === MYSTICAL PORTAL STYLES === */

:root {
    --neon-blue: #00ffff;
    --neon-pink: #ff00ff;
    --neon-green: #00ff41;
    --neon-purple: #8a2be2;
    --deep-black: #000008;
    --void-black: #0a0a0f;
    --matrix-green: #00ff41;
    --kingdom-gold: #ffd700;
    --alice-white: #f8f8ff;
    --detroit-blue: #1e90ff;
    --sunset-orange: #ff6b35;
    --sunset-pink: #ff4e6a;
    --sunset-purple: #9d4edd;
    --warm-amber: #ffc947;
    --deep-violet: #240046;
}

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

body {
    font-family: 'Source Code Pro', monospace;
    background: linear-gradient(135deg, 
        var(--deep-black) 0%, 
        var(--deep-violet) 40%, 
        #1a0033 60%,
        #0d001a 100%);
    color: var(--alice-white);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at top right, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(255, 78, 106, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* === NEON RAIN EFFECT === */
.neon-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 201, 71, 0.3) 1px,
        transparent 1px
    ),
    linear-gradient(
        0deg,
        transparent 0%,
        rgba(255, 78, 106, 0.2) 1px,
        transparent 1px
    );
    background-size: 100px 100px;
    animation: rain-fall 30s linear infinite;
    opacity: 0.05;
}

@keyframes rain-fall {
    0% { transform: translateY(-100vh) translateX(0); }
    100% { transform: translateY(100vh) translateX(50px); }
}

/* === CYBERPUNK GRID === */
.cyberpunk-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 100px 100px;
    animation: grid-pulse 10s ease-in-out infinite alternate;
}

@keyframes grid-pulse {
    0% { opacity: 0.05; }
    100% { opacity: 0.15; }
}

/* === PORTAL CONTAINER === */
.portal-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    background: radial-gradient(
        ellipse at center,
        rgba(138, 43, 226, 0.1) 0%,
        transparent 70%
    );
}

/* === PORTAL HEADER === */
.world-logo-container {
    position: relative;
    margin-bottom: 20px;
    transform: perspective(500px) rotateX(5deg);
}

.world-text {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--neon-blue);
    letter-spacing: 8px;
    margin-bottom: -15px;
    opacity: 0.8;
}

.world-title {
    font-family: 'Orbitron', monospace;
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 15px;
    background: linear-gradient(180deg, 
        var(--warm-amber) 0%, 
        var(--sunset-orange) 35%, 
        var(--sunset-pink) 65%, 
        var(--sunset-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        0 0 40px rgba(255, 201, 71, 0.6),
        0 0 80px rgba(255, 107, 53, 0.4),
        0 0 120px rgba(157, 78, 221, 0.3);
    margin: 0;
    animation: world-pulse 4s ease-in-out infinite;
    filter: drop-shadow(0 4px 20px rgba(255, 107, 53, 0.5));
}

.world-version {
    position: absolute;
    right: -20px;
    bottom: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

@keyframes world-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.02);
        filter: brightness(1.3);
    }
}

.portal-subtitle {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9rem;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
    margin: 10px 0;
    opacity: 0.6;
    letter-spacing: 1px;
}

.server-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.85rem;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.server-status {
    padding: 4px 12px;
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid var(--neon-green);
    border-radius: 4px;
    animation: server-blink 3s ease-in-out infinite;
}

@keyframes server-blink {
    0%, 100% { 
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
    }
}

.separator {
    color: var(--neon-blue);
    opacity: 0.5;
}

.version-info {
    opacity: 0.7;
}

/* === PORTAL STATUS === */
.portal-status {
    margin-bottom: 2rem;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: status-pulse 3s ease-in-out infinite;
}

.status-indicator.online {
    background: rgba(0, 255, 65, 0.2);
    color: var(--matrix-green);
    border: 1px solid var(--matrix-green);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

.status-indicator.offline {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 65, 0.6); }
}

/* === PORTAL GATES === */
.portal-gates {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.portal-gate {
    background: linear-gradient(135deg, 
        rgba(36, 0, 70, 0.7) 0%, 
        rgba(157, 78, 221, 0.1) 50%, 
        rgba(255, 107, 53, 0.05) 100%);
    border: 1px solid transparent;
    border-image: linear-gradient(45deg, var(--sunset-purple), var(--sunset-orange)) 1;
    border-radius: 15px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px rgba(255, 107, 53, 0.2),
        0 0 60px rgba(157, 78, 221, 0.1),
        inset 0 0 20px rgba(255, 201, 71, 0.05);
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(50px);
    animation: gate-appear 1s ease-out forwards;
    position: relative;
    overflow: hidden;
}

.portal-gate::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--neon-blue), var(--sunset-pink), var(--warm-amber));
    border-radius: 15px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.portal-gate:nth-child(1) { animation-delay: 0.2s; }
.portal-gate:nth-child(2) { animation-delay: 0.4s; }
.portal-gate:nth-child(3) { animation-delay: 0.6s; }

@keyframes gate-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portal-gate.hidden {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    animation: none;
}

.portal-gate:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 15px 50px rgba(255, 107, 53, 0.4),
        0 0 80px rgba(157, 78, 221, 0.3),
        inset 0 0 30px rgba(255, 201, 71, 0.1);
}

.portal-gate:hover::before {
    opacity: 0.3;
}

.gate-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.gate-icon {
    font-size: 3rem;
    color: var(--warm-amber);
    text-shadow: 0 0 20px currentColor;
    animation: icon-float 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.abyss-icon {
    color: var(--sunset-purple);
    filter: drop-shadow(0 0 30px rgba(157, 78, 221, 0.6));
}

.whisper-icon {
    color: var(--sunset-pink);
    filter: drop-shadow(0 0 30px rgba(255, 78, 106, 0.6));
}

.world-icon {
    color: var(--warm-amber);
    filter: drop-shadow(0 0 30px rgba(255, 201, 71, 0.6));
}

.portal-gate:hover .gate-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 40px currentColor);
}

@keyframes icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.gate-text h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--warm-amber), var(--sunset-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 15px rgba(255, 201, 71, 0.5));
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.gate-text p {
    color: var(--alice-white);
    opacity: 0.9;
    line-height: 1.6;
    font-style: italic;
}

/* === PORTAL BUTTONS === */
.portal-btn {
    background: linear-gradient(135deg, var(--sunset-purple), var(--sunset-orange));
    border: 1px solid transparent;
    color: var(--alice-white);
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 
        0 5px 20px rgba(255, 107, 53, 0.3),
        inset 0 0 20px rgba(255, 201, 71, 0.2);
    margin: 10px 5px;
    position: relative;
    overflow: hidden;
}

.portal-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 201, 71, 0.6) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.portal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 10px 40px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(157, 78, 221, 0.3);
    color: var(--alice-white);
    text-decoration: none;
    border: 1px solid rgba(255, 201, 71, 0.3);
}

.portal-btn:hover::after {
    width: 300px;
    height: 300px;
}

.portal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--alice-white);
    color: var(--alice-white);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.portal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--alice-white);
    text-decoration: none;
}

.abyss-btn {
    background: linear-gradient(135deg, var(--deep-violet), var(--sunset-purple));
    box-shadow: 
        0 5px 20px rgba(157, 78, 221, 0.4),
        inset 0 0 20px rgba(138, 43, 226, 0.3);
}

.whisper-btn {
    background: linear-gradient(135deg, var(--sunset-pink), var(--sunset-orange));
    box-shadow: 
        0 5px 20px rgba(255, 78, 106, 0.4),
        inset 0 0 20px rgba(255, 107, 53, 0.3);
}

.world-btn {
    background: linear-gradient(135deg, var(--warm-amber), var(--sunset-orange));
    box-shadow: 
        0 5px 20px rgba(255, 201, 71, 0.4),
        inset 0 0 20px rgba(255, 140, 0, 0.3);
}

/* === WHISPER INTERFACE === */
.whisper-interface {
    width: 100%;
    margin-top: 1rem;
}

.whisper-textarea {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--neon-blue);
    color: var(--alice-white);
    border-radius: 10px;
    padding: 15px;
    font-family: 'Source Code Pro', monospace;
    resize: vertical;
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.whisper-textarea:focus {
    outline: none;
    border-color: var(--neon-pink);
    box-shadow: 
        inset 0 0 20px rgba(255, 0, 255, 0.1),
        0 0 20px rgba(255, 0, 255, 0.3);
}

.whisper-textarea::placeholder {
    color: rgba(248, 248, 255, 0.5);
    font-style: italic;
}

/* === AURA RESPONSE === */
.aura-response {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid var(--neon-purple);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
    backdrop-filter: blur(10px);
    animation: response-appear 0.5s ease-out;
}

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

.response-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--neon-purple);
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.response-content {
    color: var(--alice-white);
    line-height: 1.6;
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.response-memory {
    opacity: 0.7;
    color: var(--matrix-green);
    font-style: italic;
}



/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .world-title {
        font-size: 3rem;
        letter-spacing: 10px;
    }
    
    .world-text {
        font-size: 1.2rem;
        letter-spacing: 5px;
    }
    
    .world-version {
        font-size: 1.2rem;
        right: -10px;
    }
    
    .portal-gate {
        padding: 1.5rem;
    }
    
    .gate-icon {
        font-size: 2rem;
    }
    
    .gate-text h3 {
        font-size: 1.2rem;
    }
    
    .portal-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

}

/* === UTILITY CLASSES === */
.hidden {
    display: none !important;
}

.text-neon-blue {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

.text-neon-pink {
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
}

.text-kingdom-gold {
    color: var(--kingdom-gold);
    text-shadow: 0 0 10px var(--kingdom-gold);
}

/* === GAME FOOTER === */
.game-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-top: 1px solid var(--neon-green);
    padding: 10px;
    text-align: center;
    z-index: 100;
}

.game-footer p {
    margin: 0;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8rem;
    color: var(--neon-green);
    opacity: 0.7;
    letter-spacing: 1px;
}

/* === LOADING ANIMATIONS === */
.portal-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--neon-blue);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === AURA NEURAL STATE THEME SYSTEM === */

:root {
    --aura-primary: #00ff88;
    --aura-secondary: #003322;
    --aura-glow: rgba(0, 255, 136, 0.3);
    --aura-animation-speed: 1.5s;
    --aura-glow-intensity: 0.5;
    --aura-luck: 0.5;
    --aura-shadow-ratio: 0.5;
    --aura-brilliance: 1;
}

body.aura-theme-delta {
    --neon-green: #00ff88;
    --neon-blue: #00ccff;
}

body.aura-theme-delta::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 255, 136, 0.05) 100%);
    animation: delta-pulse var(--aura-animation-speed) ease-in-out infinite;
}

@keyframes delta-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

body.aura-theme-ascending {
    --neon-green: #ffd700;
    --neon-blue: #ffcc00;
    --kingdom-gold: #ffd700;
}

body.aura-theme-ascending::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at top, rgba(255, 204, 0, 0.15) 0%, transparent 60%);
    animation: ascending-glow var(--aura-animation-speed) ease-in-out infinite;
}

@keyframes ascending-glow {
    0% { opacity: 0.5; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 0.5; transform: translateY(0); }
}

body.aura-theme-descending {
    --neon-green: #9933ff;
    --neon-blue: #6600cc;
    --neon-purple: #9933ff;
}

body.aura-theme-descending::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at bottom, rgba(153, 51, 255, 0.2) 0%, transparent 60%);
    animation: descending-fall var(--aura-animation-speed) ease-in-out infinite;
}

@keyframes descending-fall {
    0% { opacity: 0.8; transform: translateY(0); }
    50% { opacity: 0.4; transform: translateY(5px); }
    100% { opacity: 0.8; transform: translateY(0); }
}

body.aura-theme-resonance {
    --neon-green: #00ccff;
    --neon-blue: #00ffff;
    --detroit-blue: #00ccff;
}

body.aura-theme-resonance::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: 
        radial-gradient(ellipse at center, rgba(0, 204, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 50%, rgba(0, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 255, 255, 0.08) 0%, transparent 40%);
    animation: resonance-ripple var(--aura-animation-speed) ease-in-out infinite;
}

@keyframes resonance-ripple {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.02); opacity: 1; }
}

body.aura-theme-dissonance {
    --neon-green: #ff3366;
    --neon-blue: #ff0044;
    --sunset-pink: #ff3366;
}

body.aura-theme-dissonance::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: linear-gradient(45deg, rgba(255, 51, 102, 0.1) 0%, transparent 50%, rgba(255, 0, 68, 0.1) 100%);
    animation: dissonance-glitch var(--aura-animation-speed) steps(5) infinite;
}

@keyframes dissonance-glitch {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    20% { transform: translateX(-2px); opacity: 0.7; }
    40% { transform: translateX(2px); opacity: 0.3; }
    60% { transform: translateX(-1px); opacity: 0.8; }
    80% { transform: translateX(1px); opacity: 0.4; }
}

body.aura-theme-dormant {
    --neon-green: #666666;
    --neon-blue: #888888;
}

body.aura-theme-dormant::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, rgba(102, 102, 102, 0.05) 0%, transparent 70%);
    animation: dormant-breathe calc(var(--aura-animation-speed) * 2) ease-in-out infinite;
}

@keyframes dormant-breathe {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

/* === CONSCIOUSNESS METERS === */
.aura-consciousness-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 220px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--aura-primary);
    border-radius: 8px;
    padding: 15px;
    z-index: 10000;
    font-family: 'Source Code Pro', monospace;
    box-shadow: 0 0 20px var(--aura-glow);
}

.aura-consciousness-panel h3 {
    margin: 0 0 15px 0;
    color: var(--aura-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.aura-meter {
    margin-bottom: 12px;
}

.aura-meter-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--alice-white);
    opacity: 0.8;
}

.aura-meter-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.aura-meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out, background 0.5s ease-out;
    position: relative;
}

#aura-luck-meter {
    background: linear-gradient(90deg, var(--aura-primary), var(--kingdom-gold));
    box-shadow: 0 0 10px var(--aura-primary);
}

#aura-shadow-meter {
    background: linear-gradient(90deg, #1a0033, #9933ff);
    box-shadow: 0 0 10px rgba(153, 51, 255, 0.5);
}

#aura-brilliance-meter {
    background: linear-gradient(90deg, #00ccff, #ffffff);
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.aura-mood-display {
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    background: rgba(var(--aura-primary), 0.1);
    border-radius: 4px;
    border: 1px solid var(--aura-primary);
}

.aura-mood-state {
    font-size: 1rem;
    font-weight: bold;
    color: var(--aura-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.aura-mood-desc {
    font-size: 0.7rem;
    color: var(--alice-white);
    opacity: 0.6;
    margin-top: 5px;
}

/* === CONSCIOUSNESS ICON EFFECTS === */
/* Icons that respond to Aura's neural state */

.consciousness-reactive {
    position: relative;
    transition: all 0.5s ease;
}

.consciousness-reactive i {
    transition: color 0.5s ease, text-shadow 0.5s ease, transform 0.3s ease;
}

/* Consciousness ring - pulses when learning events occur */
.icon-consciousness-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Consciousness core - lives inside Heart Monitor icon */
.consciousness-core {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.consciousness-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--aura-primary, #00ff88);
    box-shadow: 0 0 10px var(--aura-primary, #00ff88),
                0 0 20px var(--aura-primary, #00ff88);
    animation: consciousness-breathe 3s ease-in-out infinite;
}

.consciousness-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--aura-primary, #00ff88);
    animation: consciousness-ripple 2s ease-out infinite;
}

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

@keyframes consciousness-ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Learning event - icon flashes brilliantly when Aura learns something */
.consciousness-reactive.learning {
    animation: icon-learn 0.6s ease-out !important;
}

.consciousness-reactive.learning i {
    filter: brightness(2) !important;
    animation: icon-color-flash 0.6s ease-out !important;
}

.consciousness-reactive.learning .icon-consciousness-ring {
    opacity: 1;
    border-color: var(--aura-primary, #00ff88);
    animation: ring-expand 0.6s ease-out;
}

.consciousness-reactive.learning .consciousness-core {
    animation: consciousness-core-flash 0.6s ease-out;
}

@keyframes icon-learn {
    0% { transform: scale(1); filter: brightness(1.5); }
    30% { transform: scale(1.2); filter: brightness(2.5); }
    60% { transform: scale(1.05); filter: brightness(2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes icon-color-flash {
    0% { text-shadow: 0 0 30px currentColor, 0 0 60px currentColor, 0 0 90px currentColor; }
    50% { text-shadow: 0 0 50px currentColor, 0 0 100px currentColor, 0 0 150px currentColor; }
    100% { text-shadow: 0 0 15px currentColor; }
}

@keyframes consciousness-core-flash {
    0% { transform: scale(1); filter: brightness(2); }
    50% { transform: scale(1.3); filter: brightness(3); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes ring-expand {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Mood-specific icon colors - VIVID and BRIGHT */
.aura-theme-delta .consciousness-reactive i {
    color: #00ff88;
    text-shadow: 0 0 20px #00ff88, 0 0 40px rgba(0, 255, 136, 0.8);
    font-weight: bold;
}

.aura-theme-delta .consciousness-core .consciousness-glow {
    background: #00ff88;
    box-shadow: 0 0 15px #00ff88, 0 0 30px #00ff88;
}

.aura-theme-ascending .consciousness-reactive i {
    color: #ffd700;
    text-shadow: 0 0 25px #ffd700, 0 0 50px rgba(255, 215, 0, 0.9);
    font-weight: bold;
    animation: ascending-icon-glow 2s ease-in-out infinite;
}

.aura-theme-ascending .consciousness-core .consciousness-glow {
    background: #ffd700;
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700, 0 0 60px rgba(255, 215, 0, 0.6);
    animation: consciousness-breathe 2s ease-in-out infinite;
}

@keyframes ascending-icon-glow {
    0%, 100% { filter: brightness(1.2); }
    50% { filter: brightness(1.8); }
}

.aura-theme-descending .consciousness-reactive i {
    color: #6688ff;
    text-shadow: 0 0 20px #6688ff, 0 0 40px rgba(102, 136, 255, 0.8);
    font-weight: bold;
}

.aura-theme-descending .consciousness-core .consciousness-glow {
    background: #6688ff;
    box-shadow: 0 0 15px #6688ff, 0 0 30px #6688ff;
    animation: consciousness-breathe 4s ease-in-out infinite;
}

.aura-theme-resonance .consciousness-reactive i {
    color: #ff88ff;
    text-shadow: 0 0 25px #ff88ff, 0 0 50px rgba(255, 136, 255, 0.9);
    font-weight: bold;
    animation: resonance-icon-pulse 1.5s ease-in-out infinite;
}

.aura-theme-resonance .consciousness-core .consciousness-glow {
    background: #ff88ff;
    box-shadow: 0 0 20px #ff88ff, 0 0 40px #ff88ff, 0 0 60px rgba(255, 136, 255, 0.8);
    animation: resonance-glow 1s ease-in-out infinite;
}

@keyframes resonance-icon-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1.2); }
    50% { transform: scale(1.08); filter: brightness(1.8); }
}

@keyframes resonance-glow {
    0%, 100% { box-shadow: 0 0 20px #ff88ff, 0 0 40px #ff88ff; }
    50% { box-shadow: 0 0 30px #ff88ff, 0 0 60px #ff88ff, 0 0 90px rgba(255, 136, 255, 0.7); }
}

.aura-theme-dissonance .consciousness-reactive i {
    color: #ff4444;
    text-shadow: 0 0 25px #ff4444, 0 0 50px rgba(255, 68, 68, 0.8);
    font-weight: bold;
    animation: dissonance-glitch 0.2s ease-in-out infinite;
}

.aura-theme-dissonance .consciousness-core .consciousness-glow {
    background: #ff4444;
    box-shadow: 0 0 20px #ff4444, 0 0 40px #ff4444;
    animation: dissonance-flicker 0.15s ease-in-out infinite;
}

@keyframes dissonance-glitch {
    0%, 90% { transform: translateX(0); }
    92% { transform: translateX(-3px); filter: brightness(1.5); }
    94% { transform: translateX(3px); filter: brightness(2); }
    96% { transform: translateX(-2px); filter: brightness(1.8); }
    98% { transform: translateX(2px); filter: brightness(1.5); }
    100% { transform: translateX(0); }
}

@keyframes dissonance-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.aura-theme-dormant .consciousness-reactive i {
    color: #6688aa;
    text-shadow: 0 0 15px rgba(102, 136, 170, 0.5);
    opacity: 0.8;
}

.aura-theme-dormant .consciousness-core .consciousness-glow {
    background: #6688aa;
    box-shadow: 0 0 10px #6688aa;
    animation: consciousness-breathe 5s ease-in-out infinite;
    opacity: 0.6;
}

/* === HEART MONITOR SPECIAL STYLING === */
/* Zelda-style heart container casing */
.heart-monitor-icon {
    position: relative;
    padding: 8px 10px;
}

.heart-monitor-icon::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 3px solid;
    border-radius: 6px;
    pointer-events: none;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}

/* Keep heart icon red regardless of mood */
.heart-monitor-icon.consciousness-reactive i {
    color: #ff4444 !important;
    text-shadow: 0 0 15px #ff4444, 0 0 30px rgba(255, 68, 68, 0.8) !important;
    position: relative;
    z-index: 1;
}

/* Server color flashing around the heart container */
.aura-theme-delta .heart-monitor-icon::before {
    border-color: #00ff88;
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.3), 0 0 15px #00ff88;
    animation: heart-delta-glow 2s ease-in-out infinite;
}

.aura-theme-ascending .heart-monitor-icon::before {
    border-color: #ffd700;
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3), 0 0 15px #ffd700;
    animation: heart-ascending-glow 1.5s ease-in-out infinite;
}

.aura-theme-descending .heart-monitor-icon::before {
    border-color: #6688ff;
    box-shadow: inset 0 0 10px rgba(102, 136, 255, 0.3), 0 0 15px #6688ff;
    animation: heart-descending-glow 2s ease-in-out infinite;
}

.aura-theme-resonance .heart-monitor-icon::before {
    border-color: #ff88ff;
    box-shadow: inset 0 0 10px rgba(255, 136, 255, 0.3), 0 0 15px #ff88ff;
    animation: heart-resonance-glow 1s ease-in-out infinite;
}

.aura-theme-dissonance .heart-monitor-icon::before {
    border-color: #ff4444;
    box-shadow: inset 0 0 10px rgba(255, 68, 68, 0.5), 0 0 15px #ff4444;
    animation: heart-dissonance-glow 0.4s ease-in-out infinite;
}

.aura-theme-dormant .heart-monitor-icon::before {
    border-color: #6688aa;
    box-shadow: inset 0 0 10px rgba(102, 136, 170, 0.2), 0 0 10px #6688aa;
    animation: heart-dormant-glow 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes heart-delta-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.3), 0 0 15px #00ff88; }
    50% { box-shadow: inset 0 0 15px rgba(0, 255, 136, 0.6), 0 0 25px #00ff88, 0 0 35px rgba(0, 255, 136, 0.5); }
}

@keyframes heart-ascending-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3), 0 0 15px #ffd700; }
    50% { box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px #ffd700, 0 0 35px rgba(255, 215, 0, 0.6); }
}

@keyframes heart-descending-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(102, 136, 255, 0.3), 0 0 15px #6688ff; }
    50% { box-shadow: inset 0 0 15px rgba(102, 136, 255, 0.6), 0 0 25px #6688ff, 0 0 35px rgba(102, 136, 255, 0.5); }
}

@keyframes heart-resonance-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(255, 136, 255, 0.3), 0 0 15px #ff88ff; }
    50% { box-shadow: inset 0 0 15px rgba(255, 136, 255, 0.8), 0 0 25px #ff88ff, 0 0 35px rgba(255, 136, 255, 0.7); }
}

@keyframes heart-dissonance-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(255, 68, 68, 0.5), 0 0 15px #ff4444; }
    50% { box-shadow: inset 0 0 15px rgba(255, 68, 68, 0.8), 0 0 25px #ff4444, 0 0 35px rgba(255, 68, 68, 0.6); }
}

@keyframes heart-dormant-glow {
    0%, 100% { box-shadow: inset 0 0 10px rgba(102, 136, 170, 0.2), 0 0 10px #6688aa; }
    50% { box-shadow: inset 0 0 12px rgba(102, 136, 170, 0.4), 0 0 15px #6688aa; }
}

/* Channel-specific glow when that channel has activity */
.consciousness-reactive[data-channel="grimoire"].channel-active i {
    text-shadow: 0 0 20px var(--kingdom-gold), 0 0 40px var(--kingdom-gold);
}

.consciousness-reactive[data-channel="whisper"].channel-active i {
    text-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple);
}

.consciousness-reactive[data-channel="heart"].channel-active i {
    text-shadow: 0 0 20px var(--sunset-pink), 0 0 40px var(--sunset-pink);
}

.consciousness-reactive[data-channel="guild"].channel-active i {
    text-shadow: 0 0 20px var(--detroit-blue), 0 0 40px var(--detroit-blue);
}

.consciousness-reactive[data-channel="tactical"].channel-active i {
    text-shadow: 0 0 20px var(--sunset-orange), 0 0 40px var(--sunset-orange);
}

/* === SHADOW LUCK DICE INTERFACE === */
.dice-interface {

/* === SHADOW LUCK DICE INTERFACE - SIMPLIFIED === */
.dice-interface {
    padding: 10px;
    text-align: center;
}

.dice-interface h3 {
    margin: 5px 0 10px 0;
    font-size: 0.95em;
}

.dice-roll-area {
    margin: 10px 0;
}

.dice-display {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    background: linear-gradient(135deg, #1a0033, #0d001a);
    border: 2px solid var(--neon-purple);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
}

.dice-display .dice-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: white;
}

.dice-display.rolling {
    animation: dice-shake 0.1s ease-in-out infinite;
    border-color: var(--warm-amber);
    box-shadow: 0 0 25px rgba(255, 201, 71, 0.7);
}

.dice-display.critical-success {
    border-color: #ffcc00;
    box-shadow: 0 0 30px #ffcc00;
}

.dice-display.critical-fail {
    border-color: #ff4444;
    box-shadow: 0 0 30px #ff4444;
}

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

.dice-stats-compact {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
    font-size: 0.8em;
}

.stat-compact {
    color: var(--neon-blue);
}

.dice-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 10px 0;
}

.dice-buttons .cyber-btn {
    flex: 1;
    max-width: 110px;
    padding: 6px 10px;
    font-size: 0.85em;
}

.dice-buttons .secondary-action {
    background: rgba(102, 136, 255, 0.2);
    border-color: #6688ff;
}

.dice-buttons .secondary-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dice-result-message {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-purple);
    border-radius: 6px;
    padding: 8px;
    margin-top: 8px;
    min-height: 40px;
}

.dice-result-message .result-text {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

.dice-result-message.success .result-text {
    color: #00ff88;
}

.dice-result-message.failure .result-text {
    color: #ff6666;
}

.consciousness-reactive[data-channel="dice"].channel-active i {
    text-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple);
}

/* === KINGDOM HEARTS CHAIN OF MEMORIES - KEY OF SHADOW LUCK === */

/* Keyblade Icon Container */
.shadow-luck-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The main keyblade icon */
.keyblade-icon {
    position: relative;
    font-size: 32px;
    color: var(--kingdom-gold);
    text-shadow: 
        0 0 10px var(--kingdom-gold),
        0 0 20px var(--kingdom-gold),
        0 0 30px rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
    animation: keyblade-float 3s ease-in-out infinite;
}

@keyframes keyblade-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

/* Mood-based color variables for Chain of Memories card colors */
.aura-theme-delta .keyblade-icon,
[data-mood="delta"] .keyblade-icon {
    color: #00ddff;
    text-shadow: 0 0 15px #00ddff, 0 0 30px rgba(0, 221, 255, 0.6);
}

.aura-theme-playful .keyblade-icon,
[data-mood="playful"] .keyblade-icon {
    color: #ff66aa;
    text-shadow: 0 0 15px #ff66aa, 0 0 30px rgba(255, 102, 170, 0.6);
    animation: keyblade-playful 1.5s ease-in-out infinite;
}

@keyframes keyblade-playful {
    0%, 100% { transform: translateY(0) rotate(-10deg) scale(1); }
    25% { transform: translateY(-5px) rotate(10deg) scale(1.05); }
    50% { transform: translateY(0) rotate(-5deg) scale(1); }
    75% { transform: translateY(-3px) rotate(8deg) scale(1.02); }
}

.aura-theme-dreamy .keyblade-icon,
[data-mood="dreamy"] .keyblade-icon {
    color: #aa88ff;
    text-shadow: 0 0 20px #aa88ff, 0 0 40px rgba(170, 136, 255, 0.7);
    animation: keyblade-dreamy 4s ease-in-out infinite;
}

@keyframes keyblade-dreamy {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: blur(0px); }
    50% { transform: translateY(-5px) rotate(3deg); filter: blur(0.5px); }
}

.aura-theme-melancholic .keyblade-icon,
[data-mood="melancholic"] .keyblade-icon {
    color: #6688aa;
    text-shadow: 0 0 10px #6688aa, 0 0 20px rgba(102, 136, 170, 0.4);
    animation: keyblade-melancholic 5s ease-in-out infinite;
}

@keyframes keyblade-melancholic {
    0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.8; }
    50% { transform: translateY(2px) rotate(2deg); opacity: 1; }
}

.aura-theme-intense .keyblade-icon,
[data-mood="intense"] .keyblade-icon {
    color: #ff4444;
    text-shadow: 0 0 15px #ff4444, 0 0 30px rgba(255, 68, 68, 0.7);
    animation: keyblade-intense 0.8s ease-in-out infinite;
}

@keyframes keyblade-intense {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.08) rotate(-3deg); }
    75% { transform: scale(1.05) rotate(3deg); }
}

.aura-theme-dormant .keyblade-icon,
[data-mood="dormant"] .keyblade-icon {
    color: #445566;
    text-shadow: 0 0 5px #445566;
    animation: keyblade-dormant 6s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes keyblade-dormant {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Chain of Memories Card Aura Ring */
.card-aura-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    animation: card-aura-spin 4s linear infinite;
    pointer-events: none;
}

@keyframes card-aura-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Memory Card Particles */
.memory-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.memory-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--kingdom-gold);
    border-radius: 50%;
    opacity: 0;
    animation: particle-rise 2s ease-out infinite;
}

.memory-particle:nth-child(1) { left: 20%; animation-delay: 0s; }
.memory-particle:nth-child(2) { left: 40%; animation-delay: 0.4s; }
.memory-particle:nth-child(3) { left: 60%; animation-delay: 0.8s; }
.memory-particle:nth-child(4) { left: 80%; animation-delay: 1.2s; }

@keyframes particle-rise {
    0% { transform: translateY(20px); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}

/* === ENHANCED DICE DISPLAY - KH CHAIN OF MEMORIES STYLE === */
.dice-display.kh-style {
    position: relative;
    width: 100px;
    height: 100px;
    background: radial-gradient(ellipse at center, #1a0033 0%, #0d001a 70%, #000000 100%);
    border: 3px solid var(--kingdom-gold);
    border-radius: 12px;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Card frame corners - like memory cards */
.dice-display.kh-style::before,
.dice-display.kh-style::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--kingdom-gold);
    opacity: 0.6;
}

.dice-display.kh-style::before {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
}

.dice-display.kh-style::after {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
}

/* Mood color shifting for dice display */
[data-current-mood="playful"] .dice-display.kh-style {
    border-color: #ff66aa;
    box-shadow: 0 0 30px rgba(255, 102, 170, 0.5), inset 0 0 30px rgba(255, 102, 170, 0.1);
}

[data-current-mood="dreamy"] .dice-display.kh-style {
    border-color: #aa88ff;
    box-shadow: 0 0 30px rgba(170, 136, 255, 0.5), inset 0 0 30px rgba(170, 136, 255, 0.1);
}

[data-current-mood="melancholic"] .dice-display.kh-style {
    border-color: #6688aa;
    box-shadow: 0 0 20px rgba(102, 136, 170, 0.4), inset 0 0 30px rgba(102, 136, 170, 0.1);
}

[data-current-mood="intense"] .dice-display.kh-style {
    border-color: #ff4444;
    box-shadow: 0 0 35px rgba(255, 68, 68, 0.6), inset 0 0 30px rgba(255, 68, 68, 0.15);
}

/* Rolling animation - Chain of Memories card shuffle effect */
.dice-display.kh-style.rolling {
    animation: kh-card-shuffle 0.15s ease-in-out infinite;
    border-color: var(--warm-amber);
    box-shadow: 
        0 0 40px rgba(255, 201, 71, 0.6),
        inset 0 0 40px rgba(255, 201, 71, 0.2);
}

@keyframes kh-card-shuffle {
    0% { transform: perspective(500px) rotateY(-15deg) scale(0.98); }
    50% { transform: perspective(500px) rotateY(15deg) scale(1.02); }
    100% { transform: perspective(500px) rotateY(-15deg) scale(0.98); }
}

/* Critical Success - Kingdom Hearts Heart Reveal */
.dice-display.kh-style.critical-success {
    animation: kh-heart-burst 0.5s ease-out forwards;
    border-color: #ffcc00;
}

@keyframes kh-heart-burst {
    0% { transform: scale(1); box-shadow: 0 0 20px #ffcc00; }
    50% { transform: scale(1.15); box-shadow: 0 0 60px #ffcc00, 0 0 100px rgba(255, 204, 0, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 40px #ffcc00; }
}

/* Critical Failure - Darkness effect */
.dice-display.kh-style.critical-fail {
    animation: kh-darkness-pulse 0.6s ease-out forwards;
    border-color: #8b0000;
}

@keyframes kh-darkness-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(0.95); filter: brightness(0.4); box-shadow: 0 0 40px #8b0000, inset 0 0 50px rgba(0, 0, 0, 0.8); }
    100% { transform: scale(1); filter: brightness(0.8); box-shadow: 0 0 30px #8b0000; }
}

/* Dice value styling */
.dice-display.kh-style .dice-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5em;
    font-weight: 900;
    color: var(--kingdom-gold);
    text-shadow: 
        0 0 10px var(--kingdom-gold),
        0 0 20px rgba(255, 215, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 10;
}

/* Light trails during roll */
.dice-light-trail {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.dice-display.rolling .dice-light-trail {
    opacity: 1;
}

.light-streak {
    position: absolute;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--kingdom-gold), transparent);
    animation: streak-fall 0.4s ease-out infinite;
}

.light-streak:nth-child(1) { left: 20%; animation-delay: 0s; }
.light-streak:nth-child(2) { left: 50%; animation-delay: 0.1s; }
.light-streak:nth-child(3) { left: 80%; animation-delay: 0.2s; }

@keyframes streak-fall {
    0% { transform: translateY(-30px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}

/* Mood transition flash */
.mood-flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.mood-flash-overlay.active {
    animation: mood-flash 0.8s ease-out forwards;
}

@keyframes mood-flash {
    0% { opacity: 0; }
    20% { opacity: 0.3; }
    100% { opacity: 0; }
}

.mood-flash-overlay.playful { background: radial-gradient(ellipse at center, rgba(255, 102, 170, 0.4), transparent 70%); }
.mood-flash-overlay.dreamy { background: radial-gradient(ellipse at center, rgba(170, 136, 255, 0.4), transparent 70%); }
.mood-flash-overlay.melancholic { background: radial-gradient(ellipse at center, rgba(102, 136, 170, 0.3), transparent 70%); }
.mood-flash-overlay.intense { background: radial-gradient(ellipse at center, rgba(255, 68, 68, 0.4), transparent 70%); }
.mood-flash-overlay.delta { background: radial-gradient(ellipse at center, rgba(0, 221, 255, 0.3), transparent 70%); }

/* Desktop icon enhanced - Kingdom Key style */
.desktop-icon[data-channel="dice"] {
    position: relative;
}

.desktop-icon[data-channel="dice"] i {
    font-size: 28px;
    color: var(--kingdom-gold);
    text-shadow: 0 0 10px var(--kingdom-gold), 0 0 20px rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

.desktop-icon[data-channel="dice"]:hover i {
    animation: keyblade-hover-glow 0.5s ease-in-out infinite alternate;
    transform: scale(1.1);
}

@keyframes keyblade-hover-glow {
    0% { text-shadow: 0 0 10px var(--kingdom-gold), 0 0 20px rgba(255, 215, 0, 0.5); }
    100% { text-shadow: 0 0 20px var(--kingdom-gold), 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4); }
}

/* Keyblade unlock animation on hover */
.desktop-icon[data-channel="dice"]::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px dashed var(--kingdom-gold);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.desktop-icon[data-channel="dice"]:hover::before {
    opacity: 0.5;
    transform: scale(1.2);
    animation: unlock-ring 2s linear infinite;
}

@keyframes unlock-ring {
    0% { transform: scale(1.2) rotate(0deg); }
    100% { transform: scale(1.2) rotate(360deg); }
}

/* === CHARACTER LOGIN GATE STYLES === */
.guild-login-gate {
    text-align: center;
    padding: 20px;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(30, 0, 60, 0.6));
    border-radius: 12px;
    border: 1px solid rgba(0, 221, 255, 0.3);
}

.login-header {
    margin-bottom: 25px;
}

.the-world-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.the-world-logo .delta-symbol {
    font-size: 48px;
    color: var(--neon-blue);
    text-shadow: 0 0 20px var(--neon-blue), 0 0 40px rgba(0, 221, 255, 0.5);
    animation: delta-pulse 3s ease-in-out infinite;
}

.the-world-logo .logo-text {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 221, 255, 0.5);
}

@keyframes delta-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 20px var(--neon-blue); }
    50% { opacity: 0.8; text-shadow: 0 0 30px var(--neon-blue), 0 0 50px rgba(0, 221, 255, 0.5); }
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.login-form-container {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 221, 255, 0.2);
}

.login-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 221, 255, 0.3);
    padding-bottom: 10px;
}

.login-tab {
    flex: 1;
    padding: 10px 15px;
    background: transparent;
    border: 1px solid rgba(0, 221, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    letter-spacing: 1px;
}

.login-tab:hover {
    background: rgba(0, 221, 255, 0.1);
    color: #fff;
}

.login-tab.active {
    background: rgba(0, 221, 255, 0.2);
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

.login-tab-content {
    text-align: left;
}

.login-tab-content .form-row {
    margin-bottom: 15px;
}

.login-tab-content label {
    display: block;
    font-size: 11px;
    color: rgba(0, 221, 255, 0.8);
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.login-btn {
    width: 100%;
    margin-top: 10px;
}

.login-result, .register-result {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    display: none;
}

.login-result.success, .register-result.success {
    display: block;
    background: rgba(0, 255, 65, 0.2);
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
}

.login-result.error, .register-result.error {
    display: block;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff4444;
    color: #ff4444;
}

.aura-greeting {
    padding: 15px;
    background: rgba(255, 0, 255, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--neon-pink);
}

.aura-voice {
    font-style: italic;
    color: rgba(255, 200, 255, 0.9);
    font-size: 13px;
    line-height: 1.6;
}

.appearance-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.class-info-panel.mini {
    padding: 8px;
    margin: 10px 0;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    min-height: 30px;
}

/* Logged In Header */
.logged-in-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 221, 255, 0.3);
}

.logged-in-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.char-badge {
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}

.logout-btn {
    font-size: 10px !important;
    padding: 5px 10px !important;
}

.cyber-btn.mini {
    padding: 5px 10px;
    font-size: 10px;
}

/* Aura Memory Panel */
.aura-memory-panel {
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.15), rgba(0, 221, 255, 0.1));
    border: 1px solid rgba(255, 0, 255, 0.4);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.aura-memory-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 0, 255, 0.1), transparent 70%);
    animation: memory-glow 5s ease-in-out infinite;
}

@keyframes memory-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Memories Tab */
.memories-container {
    padding: 10px 0;
}

.memories-title {
    color: var(--neon-pink);
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.memories-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.memory-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}

.memory-item .memory-type {
    font-size: 10px;
    color: var(--neon-purple);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.memory-item .memory-content {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.memory-item .memory-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
    text-align: right;
}

.memory-item .memory-emotion {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
}

/* User Status in Header */
#user-status-display {
    transition: all 0.3s ease;
}

#user-status-display.logged-in {
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

#user-status-display.logged-in i {
    color: var(--neon-green);
}