:root {
    --gold: #FFD700;
    --gold-light: #FFF3B0;
    --pink: #FF69B4;
    --pink-dark: #E91E8C;
    --lavender: #E6E6FA;
    --purple-dark: #4B0082;
    --purple-soft: #8B5CF6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Fredoka', 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

/* Theme Classes */
.light-theme {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, #FFE4B5 100%);
    color: var(--purple-dark);
}

.dark-theme {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #16082a 100%);
    color: #E6E6FA;
}

/* Sparkle Animation */
.sparkle {
    position: absolute;
    font-size: 1.5rem;
    animation: sparkle-float 6s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes sparkle-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
}

/* Title Animation */
.title-bounce {
    animation: title-bounce 3s ease-in-out infinite;
    background: linear-gradient(45deg, var(--purple-dark), var(--pink), var(--purple-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.dark-theme .title-bounce {
    background: linear-gradient(45deg, var(--gold), var(--pink), var(--lavender));
    -webkit-background-clip: text;
    background-clip: text;
}

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

.subtitle {
    font-family: 'Space Grotesk', sans-serif;
}

/* Buttons */
.theme-toggle, .history-toggle {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.dark-theme .theme-toggle, .dark-theme .history-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.theme-toggle:hover, .history-toggle:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.5);
}

/* Input Card */
.input-card {
    background: linear-gradient(145deg, var(--lavender), white);
    box-shadow: 0 20px 60px rgba(75, 0, 130, 0.2);
}

.dark-theme .input-card {
    background: linear-gradient(145deg, rgba(45, 27, 78, 0.9), rgba(26, 10, 46, 0.9));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.scenario-input {
    background: rgba(255, 255, 255, 0.8);
    border: 3px solid var(--pink);
    color: var(--purple-dark);
    font-family: 'Fredoka', sans-serif;
    transition: all 0.3s ease;
}

.dark-theme .scenario-input {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border-color: var(--purple-soft);
}

.scenario-input:focus {
    outline: none;
    border-color: var(--purple-soft);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.4);
}

.simulate-btn {
    background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(255, 105, 180, 0.4);
}

.simulate-btn:hover:not(:disabled) {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 105, 180, 0.6);
}

.random-btn {
    background: linear-gradient(135deg, var(--gold) 0%, #FFA500 100%);
    color: var(--purple-dark);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.random-btn:hover {
    transform: scale(1.05);
}

/* Loading Portal */
.loading-portal {
    animation: fade-in 0.5s ease;
}

.portal-spinner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--pink), var(--purple-soft), var(--gold), var(--pink));
    animation: portal-spin 2s linear infinite;
    position: relative;
}

.portal-spinner::after {
    content: '🌀';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    animation: portal-inner 1s ease-in-out infinite alternate;
}

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

@keyframes portal-inner {
    from { transform: translate(-50%, -50%) scale(1); }
    to { transform: translate(-50%, -50%) scale(1.2); }
}

.loading-text {
    color: var(--purple-dark);
}

.dark-theme .loading-text {
    color: var(--lavender);
}

/* Error Card */
.error-card {
    background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
    color: var(--purple-dark);
}

.error-card button {
    background: var(--pink);
    color: white;
    border: none;
    cursor: pointer;
}

/* Results Animation */
.animate-fade-in {
    animation: fade-in 0.8s ease;
}

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

/* Story Card */
.story-card {
    background: linear-gradient(145deg, #FFFEF0 0%, var(--lavender) 100%);
    border: 4px solid var(--gold);
    position: relative;
}

.dark-theme .story-card {
    background: linear-gradient(145deg, rgba(45, 27, 78, 0.9), rgba(26, 10, 46, 0.95));
    border-color: var(--purple-soft);
}

.newspaper-header {
    border-color: var(--purple-dark) !important;
}

.dark-theme .newspaper-header {
    border-color: var(--lavender) !important;
}

.story-content {
    font-family: 'Space Grotesk', serif;
    line-height: 1.8;
}

/* Section Titles */
.section-title {
    color: var(--purple-dark);
}

.dark-theme .section-title {
    color: var(--gold);
}

/* Headlines */
.headlines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.headline-card {
    background: linear-gradient(135deg, #FFFEF0, #FFF8DC);
    border: 2px solid var(--gold);
    box-shadow: 4px 4px 0 var(--purple-dark);
    transition: transform 0.3s ease;
}

.dark-theme .headline-card {
    background: linear-gradient(135deg, rgba(45, 27, 78, 0.8), rgba(26, 10, 46, 0.9));
    border-color: var(--purple-soft);
    box-shadow: 4px 4px 0 var(--pink);
}

.headline-card:hover {
    transform: scale(1.02) rotate(0deg) !important;
}

/* Impacts */
.impact-card {
    background: linear-gradient(145deg, white, var(--lavender));
    border: 2px solid var(--pink);
}

.dark-theme .impact-card {
    background: linear-gradient(145deg, rgba(45, 27, 78, 0.8), rgba(26, 10, 46, 0.9));
    border-color: var(--purple-soft);
}

.badge-before {
    background: rgba(128, 128, 128, 0.3);
    color: inherit;
}

.badge-after {
    background: linear-gradient(135deg, var(--pink), var(--purple-soft));
    color: white;
}

/* Images */
.polaroid-frame {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.dark-theme .polaroid-frame {
    background: #1a0a2e;
    border: 2px solid var(--purple-soft);
}

.polaroid-frame:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
}

.caption {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--purple-dark);
}

.dark-theme .caption {
    color: var(--lavender);
}

/* Dive Deeper Button */
.dive-deeper-btn {
    background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink) 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}

.dive-deeper-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.6);
}

/* History Panel */
.history-overlay {
    animation: fade-in 0.3s ease;
}

.history-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.history-panel {
    background: linear-gradient(145deg, var(--lavender), white);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
}

.dark-theme .history-panel {
    background: linear-gradient(145deg, #2d1b4e, #1a0a2e);
}

.history-item {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--pink);
    transition: all 0.3s ease;
}

.dark-theme .history-item {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--purple-soft);
}

.history-item:hover {
    transform: translateX(-5px);
    background: rgba(255, 255, 255, 0.8);
}

.dark-theme .history-item:hover {
    background: rgba(139, 92, 246, 0.2);
}

/* Footer */
.footer-text {
    font-size: 1rem;
}

.footer-link {
    color: var(--pink);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--purple-soft);
}

.disclaimer {
    font-family: 'Space Grotesk', sans-serif;
}

/* Responsive */
@media (max-width: 768px) {
    .title-bounce {
        font-size: 2rem;
    }
    
    .images-grid {
        grid-template-columns: 1fr;
    }
    
    .polaroid-frame {
        transform: rotate(0deg) !important;
    }
    
    .headline-card {
        transform: rotate(0deg) !important;
    }
}