/**
 * Effects & Animations
 * Neo-noir aesthetic effects, subtle animations
 */

/* ============ SCANLINE OVERLAY (optional) ============ */
.scanlines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* ============ SUBTLE FLICKER EFFECT ============ */
@keyframes subtleFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.95; }
    94% { opacity: 1; }
    96% { opacity: 0.98; }
    97% { opacity: 1; }
}

.flicker {
    animation: subtleFlicker 8s infinite;
}

/* ============ AI CHAT BUBBLES ============ */

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

.ai-chat-bubble {
    font-family: var(--font-body, 'Inter', sans-serif);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============ MATRIX BACKGROUND (muted) ============ */

.matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.35;
}

/* ============ CONFETTI ============ */

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

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============ SIMPLIFIED EFFECTS ============ */

/* Simple elimination flash */
.player-card.elim-flash {
    animation: elimFlash 0.5s ease;
}

@keyframes elimFlash {
    0% { opacity: 1; }
    25% { opacity: 0.3; background: rgba(204, 51, 68, 0.2); }
    50% { opacity: 1; }
    75% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Simple guess pulse */
.guess-selection-bar.guess-pulse,
#cosmetics-guess-form.guess-pulse {
    animation: guessPulseSimple 0.4s ease;
}

@keyframes guessPulseSimple {
    0% { 
        box-shadow: 0 0 0 0 var(--user-accent-glow);
    }
    50% { 
        box-shadow: 0 0 15px 5px var(--user-accent-glow);
    }
    100% { 
        box-shadow: 0 0 0 0 var(--user-accent-glow);
    }
}

/* ============ ELIMINATION EFFECTS (Legacy) ============ */

.player-card.elim-classic {
    animation: elimClassic 0.5s ease;
}

@keyframes elimClassic {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); background: rgba(255, 51, 51, 0.3); }
    100% { transform: scale(1); }
}

.player-card.elim-glitch {
    animation: elimGlitch 0.8s ease;
}

@keyframes elimGlitch {
    0%, 100% { transform: translate(0); filter: none; }
    10% { transform: translate(-5px, 5px); filter: hue-rotate(90deg); }
    20% { transform: translate(5px, -5px); filter: hue-rotate(180deg); }
    30% { transform: translate(-5px, -5px); filter: hue-rotate(270deg); }
    40% { transform: translate(5px, 5px); filter: hue-rotate(360deg); }
    50% { transform: translate(0); filter: none; }
}

.player-card.elim-shatter {
    animation: elimShatter 0.6s ease forwards;
}

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

/* ============ GUESS EFFECTS ============ */

.guess-selection-bar.guess-classic {
    animation: guessClassic 0.3s ease;
}

@keyframes guessClassic {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.guess-selection-bar.guess-pulse {
    animation: guessPulse 0.4s ease;
}

@keyframes guessPulse {
    0% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(0, 255, 136, 0.5)); }
    50% { box-shadow: 0 0 20px 10px var(--accent-glow, rgba(0, 255, 136, 0.5)); }
    100% { box-shadow: 0 0 0 0 var(--accent-glow, rgba(0, 255, 136, 0.5)); }
}

/* Neon Flash - Unlockable (10 wins) */
.guess-selection-bar.guess-neon_flash {
    animation: guessNeonFlash 0.5s ease;
}

@keyframes guessNeonFlash {
    0% { 
        filter: brightness(1);
        box-shadow: 0 0 5px var(--accent, #00ff88);
    }
    30% { 
        filter: brightness(1.5);
        box-shadow: 0 0 30px var(--accent, #00ff88), 0 0 60px var(--accent, #00ff88);
    }
    100% { 
        filter: brightness(1);
        box-shadow: 0 0 5px var(--accent, #00ff88);
    }
}

/* Glitch - Unlockable (25 eliminations) */
.guess-selection-bar.guess-glitch {
    animation: guessGlitch 0.4s ease;
}

@keyframes guessGlitch {
    0%, 100% { transform: translateX(0); filter: none; }
    10% { transform: translateX(-3px); filter: hue-rotate(90deg); }
    20% { transform: translateX(3px); filter: hue-rotate(180deg); }
    30% { transform: translateX(-3px); filter: hue-rotate(270deg); }
    40% { transform: translateX(3px); filter: none; }
    50% { transform: translateX(0); }
}

/* Shockwave - Unlockable (50 games) */
.guess-selection-bar.guess-shockwave {
    animation: guessShockwave 0.6s ease-out;
}

@keyframes guessShockwave {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Fire Burst - Shop (400 credits) */
.guess-selection-bar.guess-fire_burst {
    animation: guessFireBurst 0.5s ease;
}

@keyframes guessFireBurst {
    0% { 
        box-shadow: 0 0 5px #ff4500;
    }
    40% { 
        box-shadow: 0 0 20px #ff4500, 0 0 40px #ff8c00, 0 0 60px #ffd700;
    }
    100% { 
        box-shadow: 0 0 5px #ff4500;
    }
}

/* Electric - Premium */
.guess-selection-bar.guess-electric {
    animation: guessElectric 0.5s ease;
}

@keyframes guessElectric {
    0%, 100% { 
        filter: brightness(1);
        box-shadow: 0 0 5px #00d4ff;
    }
    15% { 
        filter: brightness(2);
        box-shadow: 0 0 20px #00d4ff, 0 0 40px #87ceeb;
    }
    30% { 
        filter: brightness(1);
        box-shadow: 0 0 5px #00d4ff;
    }
    45% { 
        filter: brightness(1.8);
        box-shadow: 0 0 25px #00d4ff, 0 0 50px #87ceeb;
    }
    60% { 
        filter: brightness(1);
    }
}

/* Rainbow Wave - Premium */
.guess-selection-bar.guess-rainbow_wave {
    animation: guessRainbowWave 0.6s ease;
}

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

/* ============ VICTORY EFFECTS ============ */

.firework {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warning);
    animation: fireworkExplode 1s ease-out forwards;
}

@keyframes fireworkExplode {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(20);
        opacity: 0;
    }
}

.gold-particle {
    position: absolute;
    top: -20px;
    width: var(--size, 15px);
    height: var(--size, 15px);
    background: linear-gradient(135deg, #ffd700, #ffed4a, #ffd700);
    border-radius: 50%;
    opacity: var(--opacity, 0.8);
    animation: goldFall var(--dur, 3s) ease-in forwards;
}

@keyframes goldFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: var(--opacity, 0.8);
    }
    100% {
        transform: translateY(var(--fall-distance, 100vh)) rotate(360deg);
        opacity: 0;
    }
}

.supernova {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff, var(--warning), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: supernovaExpand 2s ease-out forwards;
}

@keyframes supernovaExpand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 200vmax;
        height: 200vmax;
        opacity: 0;
    }
}

.champion-crown {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    animation: crownDescend 2s ease-out forwards;
}

@keyframes crownDescend {
    0% {
        top: -100px;
        opacity: 0;
    }
    50% {
        top: 30%;
        opacity: 1;
    }
    100% {
        top: 40%;
        opacity: 1;
    }
}

/* ============ CARD BORDER COSMETICS ============ */

/* Neon Glow - Gameplay unlock (25 games) */
.player-card.border-neon_glow {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    animation: neonGlowPulse 2s ease-in-out infinite;
}

@keyframes neonGlowPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
    50% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 35px rgba(0, 255, 255, 0.4); }
}

/* Fire - Gameplay unlock (50 eliminations) */
.player-card.border-fire {
    border-color: #ff4500;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
    animation: fireBorderPulse 1.5s ease-in-out infinite;
}

@keyframes fireBorderPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.4); }
    50% { box-shadow: 0 0 20px rgba(255, 69, 0, 0.6), 0 0 30px rgba(255, 140, 0, 0.3); }
}

/* Gold Elite - Rank unlock (Gold 1400 MMR) */
.player-card.border-gold_elite {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Void Pulse - Shop (500 credits) */
.player-card.border-void_pulse {
    border-color: #8b00ff;
    box-shadow: 0 0 15px rgba(139, 0, 255, 0.5);
    animation: voidPulse 2.5s ease-in-out infinite;
}

@keyframes voidPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(139, 0, 255, 0.5);
        border-color: #8b00ff;
    }
    50% { 
        box-shadow: 0 0 25px rgba(139, 0, 255, 0.8), 0 0 40px rgba(75, 0, 130, 0.4);
        border-color: #9932cc;
    }
}

/* Holographic - Premium (Ko-fi supporter) */
.player-card.border-holographic {
    border: 2px solid transparent;
    background: 
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) border-box;
    background-size: 100% 100%, 600% 100%;
    animation: holographicShift 4s linear infinite;
}

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

/* Frost - Premium (Ko-fi supporter) */
/* Simple icy blue border */
.player-card.border-frost {
    border-color: #87ceeb !important;
}

/* Galaxy - Unlockable (2000 MMR) */
/* Deep space purple border */
.player-card.border-galaxy {
    border-color: #9932cc !important;
}

/* Godframe - Admin only */
/* Divine golden border */
.player-card.border-godframe {
    border-color: #ffd700 !important;
}

/* ============ NAME COLOR COSMETICS ============ */

/* Cyan - Gameplay unlock (10 wins) */
.name.name-cyan { 
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Fire - Gameplay unlock (50 eliminations) */
.name.name-fire { 
    color: #ff4500;
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.4);
}

/* Gold - Rank unlock (Gold 1400 MMR) */
.name.name-gold { 
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Void - Shop (600 credits) */
.name.name-void_text { 
    color: #8b00ff;
    text-shadow: 0 0 10px rgba(139, 0, 255, 0.6);
}

/* Rainbow - Premium (Ko-fi supporter) */
.name.name-rainbow,
.player-card .name.name-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: rainbow-shift 3s linear infinite !important;
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Omniscient - Admin only */
/* Gold/Black shifting color */
.name.name-omniscient,
.player-card .name.name-omniscient {
    animation: omniscient-shift 2s ease-in-out infinite !important;
}

@keyframes omniscient-shift {
    0%, 100% { 
        color: #ffd700 !important;
        -webkit-text-fill-color: #ffd700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% { 
        color: #1a1a1a !important;
        -webkit-text-fill-color: #1a1a1a;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
}

/* ============ PROFILE TITLES ============ */

.player-title {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
    font-style: italic;
}

/* Player badge - simple text badge */
.player-badge {
    font-size: 0.7rem;
    font-family: 'Courier Prime', monospace;
    color: var(--user-accent);
    margin-left: 0.25rem;
}

/* ============ MMR BAR SYSTEM ============ */

.mmr-change-widget {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mmr-change-widget.visible {
    opacity: 1;
    transform: translateY(0);
}

.mmr-change-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mmr-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.mmr-tier-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.mmr-tier-badge.tier-bronze { background: linear-gradient(135deg, #cd7f32, #8b4513); color: #fff; }
.mmr-tier-badge.tier-silver { background: linear-gradient(135deg, #c0c0c0, #808080); color: #1a1a2e; }
.mmr-tier-badge.tier-gold { background: linear-gradient(135deg, #ffd700, #daa520); color: #1a1a2e; }
.mmr-tier-badge.tier-platinum { background: linear-gradient(135deg, #00d4ff, #0099cc); color: #1a1a2e; }
.mmr-tier-badge.tier-diamond { background: linear-gradient(135deg, #b9f2ff, #4fc3f7); color: #1a1a2e; }
.mmr-tier-badge.tier-master { background: linear-gradient(135deg, #9c27b0, #e91e63, #ff5722); color: #fff; }

.mmr-tier-badge.flash {
    animation: tierFlash 0.6s ease;
}

@keyframes tierFlash {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.3); filter: brightness(1.5); }
}

.mmr-bar-container {
    margin-bottom: 0.75rem;
}

.mmr-bar-track {
    position: relative;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mmr-bar-tiers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.mmr-tier-segment {
    flex: 1;
    opacity: 0.3;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mmr-tier-segment:last-child {
    border-right: none;
}

.mmr-tier-segment.bronze { background: linear-gradient(to right, #8b4513, #cd7f32); }
.mmr-tier-segment.silver { background: linear-gradient(to right, #808080, #c0c0c0); }
.mmr-tier-segment.gold { background: linear-gradient(to right, #daa520, #ffd700); }
.mmr-tier-segment.platinum { background: linear-gradient(to right, #0099cc, #00d4ff); }
.mmr-tier-segment.diamond { background: linear-gradient(to right, #4fc3f7, #b9f2ff); }
.mmr-tier-segment.master { background: linear-gradient(to right, #9c27b0, #e91e63); }

.mmr-bar-fill {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accent-primary), var(--success));
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--accent-glow);
}

.mmr-bar-fill.gain {
    background: linear-gradient(90deg, var(--success), #00ff88);
    box-shadow: 0 0 15px rgba(0, 255, 100, 0.5);
}

.mmr-bar-fill.loss {
    background: linear-gradient(90deg, #ff4444, #ff6666);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

.mmr-bar-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 32px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.mmr-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.mmr-value-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.mmr-value-current {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.mmr-delta-float {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

.mmr-delta-float.visible {
    opacity: 1;
    transform: translateY(0);
}

.mmr-delta-float.gain {
    color: var(--success);
    animation: deltaFloatUp 2s ease forwards;
}

.mmr-delta-float.loss {
    color: #ff4444;
    animation: deltaFloatUp 2s ease forwards;
}

@keyframes deltaFloatUp {
    0% { opacity: 0; transform: translateY(10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 0; transform: translateY(-15px); }
}

/* ============ RANK UP BANNER ============ */

.rank-up-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 40, 0.95));
    border: 2px solid var(--warning);
    border-radius: var(--radius);
    padding: 1.5rem 3rem;
    text-align: center;
    z-index: 100;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
}

.rank-up-banner.visible {
    animation: rankUpAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rankUpAppear {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

.rank-up-text {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--warning);
    text-shadow: 0 0 20px var(--warning);
    letter-spacing: 0.2em;
    animation: rankUpPulse 0.5s ease infinite;
}

@keyframes rankUpPulse {
    0%, 100% { text-shadow: 0 0 20px var(--warning); }
    50% { text-shadow: 0 0 40px var(--warning), 0 0 60px var(--warning); }
}

.rank-up-tier {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Rank up particle burst */
@keyframes rankUpParticleBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.5);
        opacity: 0;
    }
}

/* ============ SCREEN SHAKE ============ */

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-3px, -2px); }
    20% { transform: translate(3px, 2px); }
    30% { transform: translate(-2px, 3px); }
    40% { transform: translate(2px, -3px); }
    50% { transform: translate(-3px, 1px); }
    60% { transform: translate(3px, -1px); }
    70% { transform: translate(-1px, 3px); }
    80% { transform: translate(1px, -2px); }
    90% { transform: translate(-2px, 2px); }
}

.screen-shake {
    animation: screenShake 0.4s ease-out;
}

/* ============ ELIMINATION ANTICIPATION ============ */

.elim-anticipation {
    animation: elimAnticipation 0.3s ease-out;
}

@keyframes elimAnticipation {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.6);
        filter: brightness(1.3);
    }
    100% { 
        box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.4);
        filter: brightness(1.1);
    }
}

/* Particle burst for eliminations */
.elim-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.elim-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: particleBurst 0.6s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* ============ VICTORY SEQUENCE ============ */

.gameover-card {
    position: relative;
}

.gameover-card.cinematic {
    opacity: 0;
}

.gameover-card.cinematic.phase-trophy {
    opacity: 1;
}

.trophy-icon.animate {
    animation: trophyBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes trophyBounce {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    80% { transform: scale(0.9) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gameover-title.animate {
    animation: titleReveal 0.6s ease forwards;
}

@keyframes titleReveal {
    0% { opacity: 0; transform: translateY(-20px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.gameover-message.animate {
    animation: messageReveal 0.5s ease forwards;
}

@keyframes messageReveal {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Spotlight effect for victory */
.victory-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.7) 70%);
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.victory-spotlight.visible {
    opacity: 1;
}

/* Staggered word reveal */
.revealed-word-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.revealed-word-item.revealed {
    opacity: 1;
    transform: translateX(0);
}

.revealed-word-item.winner.revealed {
    animation: winnerReveal 0.6s ease forwards;
}

@keyframes winnerReveal {
    0% { opacity: 0; transform: translateX(-20px) scale(0.9); }
    50% { transform: translateX(5px) scale(1.05); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* ============ QUEST ANIMATIONS ============ */

.daily-quest.just-completed {
    animation: questCompletePulse 0.8s ease;
}

@keyframes questCompletePulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(0, 255, 65, 0);
        transform: scale(1);
    }
    30% { 
        box-shadow: 0 0 30px 10px rgba(0, 255, 65, 0.4);
        transform: scale(1.02);
    }
    60% { 
        box-shadow: 0 0 20px 5px rgba(0, 255, 65, 0.2);
        transform: scale(1.01);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(0, 255, 65, 0);
        transform: scale(1);
    }
}

.quest-status-text.bounce-in {
    animation: statusBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes statusBounceIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.quest-claim-btn.claiming {
    pointer-events: none;
    animation: claimPulse 0.3s ease infinite;
}

@keyframes claimPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.quest-claim-btn.claimed-success {
    background: var(--success) !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Credits float animation */
.credits-float {
    position: absolute;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--warning);
    pointer-events: none;
    z-index: 100;
    animation: creditsFloatUp 1.5s ease-out forwards;
    text-shadow: 0 0 10px var(--warning);
}

@keyframes creditsFloatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

/* Quest card slide out on claim */
.daily-quest.claim-complete {
    animation: questClaimSlide 0.5s ease forwards;
}

@keyframes questClaimSlide {
    0% { 
        opacity: 1;
        transform: translateX(0);
    }
    100% { 
        opacity: 0.6;
        transform: translateX(0);
    }
}

/* Mini confetti for quest completion */
.quest-confetti {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.quest-confetti-piece {
    position: absolute;
    width: 6px;
    height: 6px;
    animation: questConfettiFall 1s ease-out forwards;
}

@keyframes questConfettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100px) rotate(360deg);
        opacity: 0;
    }
}

/* ============ NEW CARD BORDER COSMETICS ============ */

.player-card.border-pixel_frame {
    border: 3px solid #39ff14;
    box-shadow: 
        inset 0 0 0 2px #000,
        0 0 0 2px #39ff14,
        0 0 10px rgba(57, 255, 20, 0.3);
    image-rendering: pixelated;
}

.player-card.border-rune_circle {
    border-color: #9933ff;
    box-shadow: 0 0 20px rgba(153, 51, 255, 0.5);
    animation: runeGlow 3s ease-in-out infinite;
}

@keyframes runeGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(153, 51, 255, 0.5); }
    50% { box-shadow: 0 0 35px rgba(153, 51, 255, 0.8), 0 0 50px rgba(153, 51, 255, 0.3); }
}

.player-card.border-glitch_edge {
    border-color: #00ffff;
    animation: glitchBorder 0.5s steps(2) infinite;
}

@keyframes glitchBorder {
    0% { border-color: #00ffff; box-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
    25% { border-color: #ff00ff; box-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; }
    50% { border-color: #00ffff; box-shadow: -1px 0 #ff00ff, 1px 0 #00ffff; }
    75% { border-color: #ff00ff; box-shadow: 1px 0 #00ffff, -1px 0 #ff00ff; }
    100% { border-color: #00ffff; box-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
}

.player-card.border-stargate {
    border-color: #4169e1;
    box-shadow: 0 0 25px rgba(65, 105, 225, 0.6);
    animation: stargateSwirl 4s linear infinite;
}

@keyframes stargateSwirl {
    0% { box-shadow: 0 0 25px rgba(65, 105, 225, 0.6), 0 0 40px rgba(100, 149, 237, 0.3); }
    50% { box-shadow: 0 0 35px rgba(100, 149, 237, 0.8), 0 0 50px rgba(65, 105, 225, 0.4); }
    100% { box-shadow: 0 0 25px rgba(65, 105, 225, 0.6), 0 0 40px rgba(100, 149, 237, 0.3); }
}

.player-card.border-dragon_scale {
    border-color: #ff4500;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), transparent);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.4), inset 0 0 30px rgba(255, 215, 0, 0.1);
}

.player-card.border-time_warp {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: timeWarpPulse 2s ease-in-out infinite;
}

@keyframes timeWarpPulse {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

/* ============ NEW CARD BACKGROUND COSMETICS ============ */

.player-card.bg-arcade_cabinet {
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 65, 0.03) 2px,
            rgba(0, 255, 65, 0.03) 4px
        ),
        var(--bg-card);
}

.player-card.bg-enchanted_forest {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.15), rgba(0, 100, 0, 0.1), var(--bg-card));
}

.player-card.bg-hyperspace {
    background: 
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 50, 0.3), var(--bg-card));
}

.player-card.bg-spell_book {
    background: 
        linear-gradient(135deg, rgba(139, 69, 19, 0.15), rgba(101, 67, 33, 0.1)),
        var(--bg-card);
}

.player-card.bg-vhs_static {
    background: var(--bg-card);
    animation: vhsStatic 0.1s steps(3) infinite;
}

@keyframes vhsStatic {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.02); }
    100% { filter: brightness(0.98); }
}

.player-card.bg-crystal_cave {
    background: 
        linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1)),
        var(--bg-card);
    box-shadow: inset 0 0 30px rgba(138, 43, 226, 0.1);
}

/* ============ NEW NAME COLOR COSMETICS ============ */

.name.name-electric_blue { 
    color: #00bfff; 
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.name.name-enchanted { 
    color: #da70d6;
    text-shadow: 0 0 10px rgba(218, 112, 214, 0.5);
}

.name.name-retro_green { 
    color: #33ff33;
    text-shadow: 0 0 8px rgba(51, 255, 51, 0.4);
}

.name.name-molten { 
    color: #ff4500;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.name.name-cosmic { 
    color: #9370db;
    text-shadow: 0 0 10px rgba(147, 112, 219, 0.5);
}

.name.name-glitch_text {
    color: #00ffff;
    animation: glitchText 0.3s steps(2) infinite;
}

@keyframes glitchText {
    0% { text-shadow: -1px 0 #ff00ff, 1px 0 #00ffff; }
    50% { text-shadow: 1px 0 #ff00ff, -1px 0 #00ffff; }
    100% { text-shadow: -1px 0 #ff00ff, 1px 0 #00ffff; }
}

/* ============ NEW ELIMINATION EFFECTS ============ */

.player-card.elim-teleport {
    animation: elimTeleport 0.8s ease-out forwards;
}

@keyframes elimTeleport {
    0% { opacity: 1; filter: brightness(1); }
    30% { opacity: 1; filter: brightness(2) blur(2px); }
    60% { opacity: 0.5; filter: brightness(3) blur(5px); transform: scaleY(2); }
    100% { opacity: 0; filter: brightness(5) blur(10px); transform: scaleY(0); }
}

.player-card.elim-petrify {
    animation: elimPetrify 1s ease-out forwards;
}

@keyframes elimPetrify {
    0% { filter: grayscale(0) brightness(1); }
    40% { filter: grayscale(1) brightness(0.8); transform: scale(1); }
    70% { filter: grayscale(1) brightness(0.6); transform: scale(1.05); }
    100% { filter: grayscale(1) brightness(0.4); transform: scale(0.9); opacity: 0.5; }
}

.player-card.elim-banish {
    animation: elimBanish 0.8s ease-in forwards;
}

@keyframes elimBanish {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(0.8) rotate(180deg); opacity: 0.7; }
    100% { transform: scale(0) rotate(720deg); opacity: 0; }
}

.player-card.elim-derez {
    animation: elimDerez 0.7s steps(8) forwards;
}

@keyframes elimDerez {
    0% { opacity: 1; filter: none; }
    25% { opacity: 0.8; filter: brightness(1.5); clip-path: inset(0 0 0 0); }
    50% { opacity: 0.6; filter: brightness(2); clip-path: inset(10% 0 10% 0); }
    75% { opacity: 0.3; filter: brightness(2.5); clip-path: inset(30% 0 30% 0); }
    100% { opacity: 0; filter: brightness(3); clip-path: inset(50% 0 50% 0); }
}

.player-card.elim-ragdoll {
    animation: elimRagdoll 0.8s ease-out forwards;
}

@keyframes elimRagdoll {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(15deg) translateY(-10px); }
    50% { transform: rotate(-10deg) translateY(5px); }
    75% { transform: rotate(5deg) translateY(20px); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(50px); opacity: 0; }
}

.player-card.elim-snap {
    animation: elimSnap 1.2s ease-out forwards;
}

@keyframes elimSnap {
    0% { opacity: 1; filter: none; }
    30% { opacity: 1; filter: sepia(0.5); }
    60% { opacity: 0.6; filter: sepia(1) blur(1px); }
    100% { opacity: 0; filter: sepia(1) blur(5px); transform: scale(1.1); }
}

.player-card.elim-8bit_death {
    animation: elim8bit 0.6s steps(4) forwards;
}

@keyframes elim8bit {
    0% { opacity: 1; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.2); filter: brightness(2); }
    50% { opacity: 0.8; transform: scale(0.8); }
    75% { opacity: 0.4; transform: scale(1.5); filter: brightness(3); }
    100% { opacity: 0; transform: scale(0); }
}

.player-card.elim-lightning_strike {
    animation: elimLightning 0.5s ease-out forwards;
}

@keyframes elimLightning {
    0% { opacity: 1; filter: brightness(1); }
    20% { opacity: 1; filter: brightness(5) contrast(2); background: #ffff00; }
    40% { opacity: 0.8; filter: brightness(1); }
    60% { opacity: 0.6; filter: brightness(3); }
    100% { opacity: 0; filter: brightness(0.5); }
}

/* ============ NEW GUESS EFFECTS ============ */

#guess-form.guess-magic_cast,
.cosmetics-guess-form.guess-magic_cast {
    animation: guessMagicCast 0.5s ease;
}

@keyframes guessMagicCast {
    0% { box-shadow: 0 0 0 0 rgba(153, 51, 255, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(153, 51, 255, 0.4), 0 0 60px 30px rgba(218, 112, 214, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(153, 51, 255, 0); }
}

#guess-form.guess-power_up,
.cosmetics-guess-form.guess-power_up {
    animation: guessPowerUp 0.4s ease;
}

@keyframes guessPowerUp {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(1.5); box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

#guess-form.guess-glitch_send,
.cosmetics-guess-form.guess-glitch_send {
    animation: guessGlitchSend 0.4s steps(4);
}

@keyframes guessGlitchSend {
    0% { transform: translate(0); filter: none; }
    25% { transform: translate(-3px, 2px); filter: hue-rotate(90deg); }
    50% { transform: translate(3px, -2px); filter: hue-rotate(180deg); }
    75% { transform: translate(-2px, -1px); filter: hue-rotate(270deg); }
    100% { transform: translate(0); filter: none; }
}

#guess-form.guess-coin_insert,
.cosmetics-guess-form.guess-coin_insert {
    animation: guessCoinInsert 0.5s ease;
}

@keyframes guessCoinInsert {
    0% { transform: scale(1); }
    30% { transform: scale(1.02) translateY(-5px); }
    60% { transform: scale(1) translateY(0); }
    80% { transform: scale(1.01); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
    100% { transform: scale(1); }
}

/* ============ NEW TURN INDICATORS ============ */

.player-card.turn-magic_circle.current-turn {
    box-shadow: 0 0 30px rgba(153, 51, 255, 0.6);
    animation: turnMagicCircle 2s linear infinite;
}

@keyframes turnMagicCircle {
    0% { box-shadow: 0 0 30px rgba(153, 51, 255, 0.6), 0 0 50px rgba(218, 112, 214, 0.3); }
    50% { box-shadow: 0 0 40px rgba(218, 112, 214, 0.8), 0 0 60px rgba(153, 51, 255, 0.4); }
    100% { box-shadow: 0 0 30px rgba(153, 51, 255, 0.6), 0 0 50px rgba(218, 112, 214, 0.3); }
}

.player-card.turn-targeting_system.current-turn {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    animation: turnTargeting 1s steps(2) infinite;
}

@keyframes turnTargeting {
    0% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), inset 0 0 10px rgba(255, 0, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.8), inset 0 0 15px rgba(255, 0, 0, 0.3); }
    100% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), inset 0 0 10px rgba(255, 0, 0, 0.2); }
}

.player-card.turn-pixel_select.current-turn {
    animation: turnPixelSelect 0.5s steps(2) infinite;
}

@keyframes turnPixelSelect {
    0% { box-shadow: 0 0 0 3px #39ff14; }
    50% { box-shadow: 0 0 0 3px transparent; }
    100% { box-shadow: 0 0 0 3px #39ff14; }
}

.player-card.turn-boss_health.current-turn {
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
    border-color: #ff0000;
}

/* ============ NEW VICTORY EFFECTS ============ */

.level-up-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 30px #ffd700, 0 0 60px #ff8c00;
    animation: levelUpEffect 2s ease-out forwards;
}

@keyframes levelUpEffect {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.2); }
}

.dragon-fly {
    position: absolute;
    font-size: 6rem;
    animation: dragonFly 3s ease-in-out forwards;
}

@keyframes dragonFly {
    0% { left: -100px; top: 60%; opacity: 0; transform: scaleX(-1); }
    20% { opacity: 1; }
    50% { top: 30%; }
    80% { opacity: 1; }
    100% { left: calc(100% + 100px); top: 40%; opacity: 0; transform: scaleX(-1); }
}

.pixel-character {
    position: absolute;
    font-size: 2rem;
    animation: pixelBounce 0.5s ease infinite;
}

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

.spell-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 3px solid rgba(153, 51, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spellCircleExpand 2s ease-out forwards;
}

@keyframes spellCircleExpand {
    0% { width: 0; height: 0; opacity: 1; }
    50% { opacity: 1; }
    100% { width: 400px; height: 400px; opacity: 0; }
}

.warp-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 12px
        );
    animation: warpJump 1.5s ease-in-out forwards;
}

@keyframes warpJump {
    0% { opacity: 0; transform: scaleX(0); }
    30% { opacity: 1; transform: scaleX(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: scaleX(3); }
}

.aurora-wave {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 255, 127, 0.2),
        rgba(138, 43, 226, 0.2),
        rgba(0, 191, 255, 0.2),
        transparent
    );
    animation: auroraWave 3s ease-in-out infinite;
}

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

/* ============ NEW PARTICLE OVERLAYS ============ */

body[data-particles="magic_dust"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background-image: 
        radial-gradient(2px 2px at 10% 20%, rgba(255, 215, 0, 0.4), transparent),
        radial-gradient(2px 2px at 30% 50%, rgba(218, 112, 214, 0.3), transparent),
        radial-gradient(2px 2px at 50% 30%, rgba(255, 215, 0, 0.4), transparent),
        radial-gradient(2px 2px at 70% 70%, rgba(218, 112, 214, 0.3), transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(255, 215, 0, 0.4), transparent);
    animation: magicDustFloat 6s ease-in-out infinite;
}

@keyframes magicDustFloat {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-10px); }
}

body[data-particles="binary_fall"]::before {
    content: '01010110 10101001 01100101';
    position: fixed;
    top: -50px;
    left: 0;
    right: 0;
    font-family: monospace;
    font-size: 12px;
    color: rgba(0, 255, 65, 0.15);
    letter-spacing: 5px;
    pointer-events: none;
    z-index: 9997;
    animation: binaryFall 10s linear infinite;
    white-space: nowrap;
    overflow: hidden;
}

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

body[data-particles="pixel_noise"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.3;
}

body[data-particles="embers"]::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    background-image: 
        radial-gradient(2px 2px at 20% 80%, rgba(255, 100, 0, 0.5), transparent),
        radial-gradient(2px 2px at 40% 90%, rgba(255, 150, 0, 0.4), transparent),
        radial-gradient(2px 2px at 60% 85%, rgba(255, 100, 0, 0.5), transparent),
        radial-gradient(2px 2px at 80% 95%, rgba(255, 150, 0, 0.4), transparent);
    animation: embersRise 8s ease-in-out infinite;
}

@keyframes embersRise {
    0% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-30px); opacity: 0.8; }
    100% { transform: translateY(0); opacity: 0.5; }
}

body[data-particles="runes"]::before {
    content: '᛭ ᚱ ᚢ ᚾ ᛖ ᛊ';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 24px;
    color: rgba(153, 51, 255, 0.15);
    pointer-events: none;
    z-index: 9997;
    animation: runesFloat 10s ease-in-out infinite;
}

@keyframes runesFloat {
    0%, 100% { opacity: 0.3; transform: translateY(0) rotate(0deg); }
    50% { opacity: 0.6; transform: translateY(-20px) rotate(5deg); }
}

/* Matrix cascade victory effect */
.matrix-cascade-char {
    position: absolute;
    top: -30px;
    font-family: monospace;
    font-size: 16px;
    color: #00ff41;
    opacity: var(--opacity, 0.7);
    animation: matrixCascadeFall var(--dur, 2s) linear forwards;
    animation-delay: var(--delay, 0s);
    text-shadow: 0 0 10px #00ff41;
}

@keyframes matrixCascadeFall {
    0% {
        transform: translateY(0);
        opacity: var(--opacity, 0.7);
    }
    100% {
        transform: translateY(var(--fall-distance, 100vh));
        opacity: 0;
    }
}

/* Nuclear victory effect */
.nuclear-stem {
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 40px;
    height: 0;
    background: linear-gradient(to top, #ff4500, #ff8c00, #ffd700);
    transform: translateX(-50%);
    animation: nuclearStem 1s ease-out forwards;
    border-radius: 20px 20px 0 0;
}

@keyframes nuclearStem {
    0% { height: 0; }
    100% { height: 30%; }
}

.nuclear-cloud {
    position: absolute;
    bottom: 45%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff, #ffd700, #ff8c00, #ff4500);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: nuclearCloud 1.5s ease-out 0.5s forwards;
    opacity: 0;
}

@keyframes nuclearCloud {
    0% { width: 20px; height: 20px; opacity: 0; }
    30% { opacity: 1; }
    100% { width: 300px; height: 200px; opacity: 0; }
}

/* ============ REDUCED MOTION ============ */

/* ============ EXPENSIVE SHOP COSMETICS ============ */

/* Card Borders - Expensive Shop */
.player-card.border-obsidian_throne {
    border-color: #1a1a1a;
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.3), inset 0 0 15px rgba(255, 100, 0, 0.1);
    animation: obsidianGlow 3s ease-in-out infinite;
}

@keyframes obsidianGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 100, 0, 0.3), inset 0 0 15px rgba(255, 100, 0, 0.1); }
    50% { box-shadow: 0 0 35px rgba(255, 100, 0, 0.5), inset 0 0 25px rgba(255, 100, 0, 0.2); }
}

.player-card.border-celestial_halo {
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 255, 255, 0.3);
    animation: celestialHalo 4s ease-in-out infinite;
}

@keyframes celestialHalo {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 255, 255, 0.5); }
}

/* Card Backgrounds - Expensive Shop */
.player-card.bg-ancient_temple {
    background: 
        linear-gradient(135deg, rgba(139, 119, 101, 0.15), rgba(101, 67, 33, 0.1)),
        var(--bg-card);
    box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.05);
}

.player-card.bg-dimensional_rift {
    background: 
        radial-gradient(ellipse at center, rgba(138, 43, 226, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, rgba(0, 0, 50, 0.3), var(--bg-card));
    animation: dimensionalRift 4s ease-in-out infinite;
}

@keyframes dimensionalRift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

/* Card Backgrounds - Legendary Admin */
.player-card.bg-reality_tear {
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

.player-card.bg-reality_tear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: 
        conic-gradient(from 0deg at 50% 50%, 
            transparent 0deg, 
            rgba(138, 43, 226, 0.4) 30deg,
            transparent 60deg,
            rgba(0, 255, 255, 0.4) 120deg,
            transparent 150deg,
            rgba(255, 0, 255, 0.4) 210deg,
            transparent 240deg,
            rgba(138, 43, 226, 0.4) 300deg,
            transparent 330deg
        );
    transform: translate(-50%, -50%);
    animation: realityTearVortex 8s linear infinite;
    pointer-events: none;
}

.player-card.bg-reality_tear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: realityTearCore 3s ease-in-out infinite;
    pointer-events: none;
}

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

@keyframes realityTearCore {
    0%, 100% { 
        width: 60%;
        height: 60%;
        filter: blur(5px);
    }
    50% { 
        width: 70%;
        height: 70%;
        filter: blur(8px);
    }
}

/* Name Colors - Expensive Shop */
.name.name-prismatic {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: prismaticShift 3s linear infinite;
}

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

.name.name-supernova_glow {
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffd700, 0 0 30px #ff8c00, 0 0 40px #ff4500;
    animation: supernovaGlow 2s ease-in-out infinite;
}

@keyframes supernovaGlow {
    0%, 100% { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffd700, 0 0 30px #ff8c00; }
    50% { text-shadow: 0 0 20px #ffffff, 0 0 40px #ffd700, 0 0 60px #ff8c00, 0 0 80px #ff4500; }
}

/* Elimination Effects - Expensive Shop */
.player-card.elim-dimension_shatter {
    animation: elimDimensionShatter 1s ease-out forwards;
}

@keyframes elimDimensionShatter {
    0% { opacity: 1; transform: scale(1); filter: none; }
    30% { transform: scale(1.1); filter: hue-rotate(90deg); }
    60% { transform: scale(0.9) skewX(10deg); filter: hue-rotate(180deg); opacity: 0.7; }
    100% { transform: scale(0) rotate(180deg); filter: hue-rotate(360deg); opacity: 0; }
}

.player-card.elim-time_collapse {
    animation: elimTimeCollapse 1.2s ease-in-out forwards;
}

@keyframes elimTimeCollapse {
    0% { opacity: 1; filter: none; }
    25% { opacity: 0.8; filter: blur(2px); transform: scale(1.1); }
    50% { opacity: 1; filter: none; transform: scale(0.9); }
    75% { opacity: 0.5; filter: blur(4px) sepia(1); transform: scale(1.2); }
    100% { opacity: 0; filter: blur(10px); transform: scale(0); }
}

/* Elimination Effects - Legendary Admin */
.player-card.elim-annihilate {
    animation: elimAnnihilate 2s ease-out forwards;
    position: relative;
}

.player-card.elim-annihilate::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, #ffffff 0%, #ff00ff 30%, #00ffff 60%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: annihilateCore 2s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes elimAnnihilate {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    10% { filter: brightness(2) saturate(2); }
    20% { filter: brightness(5) saturate(3); transform: scale(1.1); }
    30% { filter: brightness(10) contrast(3) saturate(0); transform: scale(1.2); }
    50% { filter: brightness(0) invert(1); transform: scale(0.8); opacity: 0.8; }
    70% { filter: brightness(0) blur(10px); transform: scale(0.3); opacity: 0.4; }
    100% { transform: scale(0); opacity: 0; filter: brightness(0) blur(20px); }
}

@keyframes annihilateCore {
    0% { width: 0; height: 0; opacity: 0; }
    20% { width: 200%; height: 200%; opacity: 1; }
    40% { width: 300%; height: 300%; opacity: 0.8; }
    100% { width: 0; height: 0; opacity: 0; }
}

/* Guess Effects - Expensive Shop */
#guess-form.guess-thunderclap,
.cosmetics-guess-form.guess-thunderclap {
    animation: guessThunderclap 0.6s ease;
}

@keyframes guessThunderclap {
    0% { transform: scale(1); filter: brightness(1); }
    20% { transform: scale(1.05); filter: brightness(3); background: rgba(255, 255, 0, 0.3); }
    40% { transform: scale(0.98); filter: brightness(1); }
    60% { transform: scale(1.02); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

#guess-form.guess-gravity_pulse,
.cosmetics-guess-form.guess-gravity_pulse {
    animation: guessGravityPulse 0.7s ease;
}

@keyframes guessGravityPulse {
    0% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(0.95); box-shadow: 0 0 50px 20px rgba(138, 43, 226, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); }
}

/* Guess Effects - Legendary Admin */
#guess-form.guess-reality_warp,
.cosmetics-guess-form.guess-reality_warp {
    animation: guessRealityWarp 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

#guess-form.guess-reality_warp::before,
.cosmetics-guess-form.guess-reality_warp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(255, 0, 255, 0.3), 
        rgba(0, 255, 255, 0.3), 
        rgba(255, 215, 0, 0.3),
        rgba(255, 0, 255, 0.3));
    background-size: 400% 400%;
    animation: realityWarpOverlay 1s ease;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
}

@keyframes guessRealityWarp {
    0% { transform: scale(1) perspective(500px) rotateX(0deg) rotateY(0deg); filter: none; }
    15% { transform: scale(1.1) perspective(500px) rotateX(10deg) rotateY(-5deg); filter: hue-rotate(60deg) brightness(1.3); }
    30% { transform: scale(0.95) perspective(500px) rotateX(-10deg) rotateY(10deg); filter: hue-rotate(120deg) brightness(1.5); }
    45% { transform: scale(1.05) perspective(500px) rotateX(5deg) rotateY(-10deg); filter: hue-rotate(180deg); }
    60% { transform: scale(0.98) perspective(500px) rotateX(-5deg) rotateY(5deg); filter: hue-rotate(240deg) brightness(1.2); }
    75% { transform: scale(1.02) perspective(500px) rotateX(3deg) rotateY(-3deg); filter: hue-rotate(300deg); }
    100% { transform: scale(1) perspective(500px) rotateX(0deg) rotateY(0deg); filter: none; }
}

@keyframes realityWarpOverlay {
    0% { opacity: 0; background-position: 0% 50%; }
    50% { opacity: 0.6; background-position: 100% 50%; }
    100% { opacity: 0; background-position: 200% 50%; }
}

/* Turn Indicators - Expensive Shop */
.player-card.turn-void_aura.current-turn {
    box-shadow: 0 0 40px rgba(75, 0, 130, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
    animation: turnVoidAura 2s ease-in-out infinite;
}

@keyframes turnVoidAura {
    0%, 100% { box-shadow: 0 0 40px rgba(75, 0, 130, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 60px rgba(75, 0, 130, 1), inset 0 0 30px rgba(0, 0, 0, 0.7); }
}

.player-card.turn-celestial_blessing.current-turn {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 255, 255, 0.4);
    animation: turnCelestialBlessing 2s ease-in-out infinite;
}

@keyframes turnCelestialBlessing {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 100px rgba(255, 255, 255, 0.6); }
}

/* Turn Indicators - Legendary Admin */
.player-card.turn-divine_mandate.current-turn {
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 1),
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 100px rgba(255, 255, 255, 0.6),
        0 0 150px rgba(255, 215, 0, 0.4);
    animation: turnDivineMandate 2s ease-in-out infinite;
    border-color: #ffd700;
    position: relative;
    overflow: visible;
}

.player-card.turn-divine_mandate.current-turn::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.8), transparent);
    transform: translateX(-50%);
    animation: divineRay 1.5s ease-in-out infinite;
}

.player-card.turn-divine_mandate.current-turn::after {
    content: '✦';
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700, 0 0 40px #ffffff;
    animation: divineStar 1s ease-in-out infinite;
}

@keyframes turnDivineMandate {
    0%, 100% { 
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.8),
            0 0 100px rgba(255, 255, 255, 0.6),
            0 0 150px rgba(255, 215, 0, 0.4);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 1),
            0 0 100px rgba(255, 215, 0, 1),
            0 0 150px rgba(255, 255, 255, 0.8),
            0 0 200px rgba(255, 215, 0, 0.6);
        filter: brightness(1.2);
    }
}

@keyframes divineRay {
    0%, 100% { opacity: 0.6; height: 60px; }
    50% { opacity: 1; height: 80px; }
}

@keyframes divineStar {
    0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
    50% { transform: translateX(-50%) rotate(180deg) scale(1.3); }
}

/* Victory Effects - Expensive Shop */
.cosmic-collapse-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ffffff, #ffd700, #ff4500);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cosmicCollapseExpand 2s ease-out forwards;
}

@keyframes cosmicCollapseExpand {
    0% { width: 300px; height: 300px; opacity: 0; }
    30% { opacity: 1; }
    100% { width: 10px; height: 10px; opacity: 0; filter: brightness(5); }
}

.ascension-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    animation: ascensionRise 3s ease-out forwards;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
}

@keyframes ascensionRise {
    0% { opacity: 0; transform: translate(-50%, 100%); }
    30% { opacity: 1; transform: translate(-50%, -50%); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.5); }
}

/* Victory Effects - Legendary Admin: BIG BANG */
/* The ultimate victory - the universe itself explodes into existence */
.big-bang-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: bigBangExpand 5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    box-shadow: 
        0 0 50px 25px #ffffff,
        0 0 100px 50px rgba(255, 255, 200, 0.8),
        0 0 150px 75px rgba(255, 215, 0, 0.6);
}

/* Singularity core - the point of creation */
.big-bang-singularity {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, 
        #ffffff 0%, 
        #ffffcc 20%, 
        #ffd700 40%, 
        #ff8c00 60%, 
        transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: singularityPulse 0.5s ease-out forwards;
    box-shadow: 
        0 0 100px 50px #ffffff,
        0 0 200px 100px rgba(255, 215, 0, 0.8);
}

@keyframes singularityPulse {
    0% { width: 0; height: 0; opacity: 0; }
    50% { width: 60px; height: 60px; opacity: 1; }
    100% { width: 30px; height: 30px; opacity: 1; }
}

/* Galaxy arm particles */
.big-bang-galaxy-particle {
    position: absolute;
    width: var(--size, 4px);
    height: var(--size, 4px);
    background: var(--color, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: galaxySpiral var(--duration, 3s) ease-out forwards;
    animation-delay: var(--delay, 0s);
    box-shadow: 0 0 calc(var(--size, 4px) * 2) var(--color, #ffffff);
}

@keyframes galaxySpiral {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--rotation, 720deg)) translateX(var(--distance, 300px));
        opacity: 0;
    }
}

/* Nebula clouds forming */
.big-bang-nebula {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(ellipse at center,
        var(--nebula-color, rgba(138, 43, 226, 0.4)) 0%,
        transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(var(--rotation, 0deg));
    animation: nebulaExpand var(--duration, 3s) ease-out forwards;
    animation-delay: var(--delay, 0.5s);
    opacity: 0;
    filter: blur(10px);
}

@keyframes nebulaExpand {
    0% {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    100% {
        width: var(--final-size, 400px);
        height: var(--final-size, 400px);
        opacity: 0;
        transform: translate(-50%, -50%) rotate(calc(var(--rotation, 0deg) + 45deg));
    }
}

@keyframes bigBangExpand {
    0% { 
        width: 5px; 
        height: 5px; 
        opacity: 1; 
        background: #ffffff;
        box-shadow: 
            0 0 50px 25px #ffffff,
            0 0 100px 50px rgba(255, 255, 200, 0.8),
            0 0 150px 75px rgba(255, 215, 0, 0.6);
    }
    5% { 
        width: 30px; 
        height: 30px; 
        background: #ffffee;
        box-shadow: 
            0 0 80px 40px #ffffff,
            0 0 160px 80px rgba(255, 215, 0, 0.9);
    }
    15% { 
        width: 80px; 
        height: 80px; 
        background: #ffd700;
        box-shadow: 
            0 0 100px 50px #ffd700,
            0 0 200px 100px #ff8c00;
    }
    30% { 
        width: 200px; 
        height: 200px; 
        background: #ff8c00;
        box-shadow: 
            0 0 120px 60px #ff4500,
            0 0 240px 120px rgba(255, 0, 100, 0.6);
    }
    45% { 
        width: 400px; 
        height: 400px; 
        background: #ff4500;
        box-shadow: 
            0 0 150px 75px #ff0066,
            0 0 300px 150px rgba(138, 43, 226, 0.5);
    }
    60% { 
        width: 700px; 
        height: 700px; 
        background: linear-gradient(45deg, #ff00ff, #8b00ff);
        box-shadow: 
            0 0 180px 90px #8b00ff,
            0 0 360px 180px rgba(0, 255, 255, 0.4);
        opacity: 0.8;
    }
    75% {
        width: 1000px;
        height: 1000px;
        background: linear-gradient(45deg, #8b00ff, #00ffff);
        box-shadow: 
            0 0 200px 100px rgba(0, 255, 255, 0.6),
            0 0 400px 200px rgba(0, 100, 255, 0.3);
        opacity: 0.6;
    }
    90% {
        width: 150vmax;
        height: 150vmax;
        background: radial-gradient(circle, 
            rgba(0, 255, 255, 0.3) 0%,
            rgba(100, 0, 255, 0.2) 30%,
            rgba(0, 0, 50, 0.3) 60%,
            transparent 80%);
        opacity: 0.4;
    }
    100% { 
        width: 250vmax; 
        height: 250vmax; 
        opacity: 0;
        background: transparent;
    }
}

/* Cosmic strings - energy lines radiating outward */
.big-bang-string {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, 
        #ffffff 0%, 
        #ffd700 30%, 
        #ff00ff 60%, 
        transparent 100%);
    transform-origin: top center;
    transform: translate(-50%, 0) rotate(var(--angle, 0deg));
    animation: cosmicString 2s ease-out forwards;
    animation-delay: var(--delay, 0.2s);
    opacity: 0;
}

@keyframes cosmicString {
    0% {
        height: 0;
        opacity: 0;
    }
    20% {
        height: 50px;
        opacity: 1;
    }
    100% {
        height: var(--length, 400px);
        opacity: 0;
    }
}

/* Star formation particles at the end */
.big-bang-star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: var(--color, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 calc(var(--size, 3px) * 3) var(--color, #ffffff);
    animation: starFormation var(--duration, 2.5s) ease-out forwards;
    animation-delay: var(--delay, 1s);
    opacity: 0;
}

@keyframes starFormation {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    40% {
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1);
    }
    100% {
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.5);
        opacity: 0;
    }
}

/* Matrix Colors - Expensive Shop (handled via JS canvas) */

/* Multi-color matrix effects */
body.matrix-multicolor[data-matrix-effect="nebula_core"] .matrix-char {
    animation: matrixNebula 4s ease-in-out infinite;
}

body.matrix-multicolor[data-matrix-effect="solar_flare"] .matrix-char {
    animation: matrixSolarFlare 3s ease-in-out infinite;
}

body.matrix-multicolor[data-matrix-effect="event_horizon"] .matrix-char {
    animation: matrixEventHorizon 2s linear infinite;
    text-shadow: 
        0 0 10px var(--matrix-color-1),
        0 0 20px var(--matrix-color-2),
        0 0 30px var(--matrix-color-3);
}

@keyframes matrixNebula {
    0%, 100% { color: var(--matrix-color-1, #4b0082); }
    33% { color: var(--matrix-color-2, #9400d3); }
    66% { color: var(--matrix-color-3, #00ced1); }
}

@keyframes matrixSolarFlare {
    0%, 100% { color: var(--matrix-color-1, #ff4500); text-shadow: 0 0 10px var(--matrix-color-1); }
    25% { color: var(--matrix-color-2, #ff8c00); text-shadow: 0 0 15px var(--matrix-color-2); }
    50% { color: var(--matrix-color-3, #ffd700); text-shadow: 0 0 20px var(--matrix-color-3); }
    75% { color: var(--matrix-color-4, #ffffff); text-shadow: 0 0 25px var(--matrix-color-4); }
}

@keyframes matrixEventHorizon {
    0% { 
        color: var(--matrix-color-1, #ff00ff);
        text-shadow: 0 0 15px var(--matrix-color-1), 0 0 30px var(--matrix-color-2);
        filter: brightness(1);
    }
    25% { 
        color: var(--matrix-color-2, #00ffff);
        text-shadow: 0 0 20px var(--matrix-color-2), 0 0 40px var(--matrix-color-3);
        filter: brightness(1.2);
    }
    50% { 
        color: var(--matrix-color-3, #ffffff);
        text-shadow: 0 0 25px var(--matrix-color-3), 0 0 50px var(--matrix-color-1);
        filter: brightness(1.5);
    }
    75% { 
        color: var(--matrix-color-4, #ff00ff);
        text-shadow: 0 0 20px var(--matrix-color-4), 0 0 40px var(--matrix-color-2);
        filter: brightness(1.2);
    }
    100% { 
        color: var(--matrix-color-1, #ff00ff);
        text-shadow: 0 0 15px var(--matrix-color-1), 0 0 30px var(--matrix-color-2);
        filter: brightness(1);
    }
}

/* Particle Overlays - Expensive Shop */
body[data-particles="quantum_foam"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background-image: 
        radial-gradient(3px 3px at 10% 20%, rgba(138, 43, 226, 0.4), transparent),
        radial-gradient(2px 2px at 30% 50%, rgba(0, 255, 255, 0.3), transparent),
        radial-gradient(4px 4px at 50% 30%, rgba(255, 0, 255, 0.3), transparent),
        radial-gradient(2px 2px at 70% 70%, rgba(138, 43, 226, 0.4), transparent),
        radial-gradient(3px 3px at 90% 40%, rgba(0, 255, 255, 0.3), transparent);
    animation: quantumFoamFloat 4s ease-in-out infinite;
}

@keyframes quantumFoamFloat {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

body[data-particles="astral_projection"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 191, 255, 0.15) 0%, transparent 50%);
    animation: astralFloat 8s ease-in-out infinite;
}

@keyframes astralFloat {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 0.8; transform: translateX(20px); }
}

/* Particle Overlays - Legendary Admin */
body[data-particles="cosmic_dust"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9997;
    background-image: 
        radial-gradient(1px 1px at 5% 10%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(2px 2px at 15% 30%, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(1px 1px at 25% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 35% 20%, rgba(138, 43, 226, 0.8), transparent),
        radial-gradient(1px 1px at 45% 70%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(2px 2px at 55% 40%, rgba(0, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 65% 60%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 75% 80%, rgba(255, 0, 255, 0.8), transparent),
        radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(2px 2px at 95% 55%, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(0, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 30% 90%, rgba(255, 0, 255, 0.7), transparent),
        radial-gradient(1px 1px at 50% 15%, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(2px 2px at 70% 45%, rgba(138, 43, 226, 0.7), transparent),
        radial-gradient(1px 1px at 90% 75%, rgba(255, 255, 255, 0.9), transparent);
    animation: cosmicDustDrift 30s linear infinite, cosmicDustTwinkle 4s ease-in-out infinite;
}

body[data-particles="cosmic_dust"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9996;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
    animation: cosmicDustNebula 20s ease-in-out infinite;
}

@keyframes cosmicDustDrift {
    0% { transform: translateY(0) translateX(0) rotate(0deg); }
    50% { transform: translateY(-50px) translateX(30px) rotate(2deg); }
    100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

@keyframes cosmicDustTwinkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes cosmicDustNebula {
    0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); }
    50% { opacity: 0.8; filter: hue-rotate(30deg); }
}

/* Seasonal Themes - Expensive Shop */
body[data-seasonal="blood_moon"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9996;
    background: radial-gradient(circle at 80% 20%, rgba(139, 0, 0, 0.2) 0%, transparent 50%);
}

body[data-seasonal="cosmic_storm"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9996;
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(138, 43, 226, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(0, 191, 255, 0.15) 0%, transparent 40%);
    animation: cosmicStormSwirl 10s ease-in-out infinite;
}

@keyframes cosmicStormSwirl {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

/* Seasonal Themes - Legendary Admin */
body[data-seasonal="eclipse"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9996;
    background: 
        radial-gradient(circle at 50% 20%, 
            rgba(0, 0, 0, 1) 0%, 
            rgba(0, 0, 0, 0.95) 8%,
            rgba(255, 100, 0, 0.6) 10%,
            rgba(255, 50, 0, 0.4) 15%,
            rgba(255, 0, 0, 0.2) 20%,
            transparent 35%
        );
    animation: eclipseGlow 5s ease-in-out infinite, eclipseCorona 8s linear infinite;
}

body[data-seasonal="eclipse"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9995;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.2) 100%);
}

@keyframes eclipseGlow {
    0%, 100% { 
        opacity: 0.9;
        filter: brightness(1);
    }
    50% { 
        opacity: 1;
        filter: brightness(1.2);
    }
}

@keyframes eclipseCorona {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(15deg); }
}

/* Alt Backgrounds - Expensive Shop */
body[data-alt-bg="eldritch_realm"] .matrix-bg {
    background: linear-gradient(180deg, rgba(75, 0, 130, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

body[data-alt-bg="astral_plane"] .matrix-bg {
    background: linear-gradient(180deg, rgba(138, 43, 226, 0.2) 0%, rgba(0, 191, 255, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%);
}

/* Alt Backgrounds - Legendary Admin */
body[data-alt-bg="multiverse"] .matrix-bg {
    background: 
        radial-gradient(ellipse at 15% 25%, rgba(255, 0, 100, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(0, 100, 255, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 50%, rgba(100, 255, 0, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 200, 0, 0.1) 0%, transparent 30%),
        radial-gradient(ellipse at 70% 30%, rgba(200, 0, 255, 0.1) 0%, transparent 30%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 20, 0.9) 100%);
    animation: multiverseShift 15s ease-in-out infinite, multiversePulse 5s ease-in-out infinite;
}

body[data-alt-bg="multiverse"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -2;
    background-image: 
        radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 30% 60%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 50% 40%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 90% 30%, rgba(255, 255, 255, 0.3), transparent);
    animation: multiverseStars 20s linear infinite;
}

@keyframes multiverseShift {
    0%, 100% { filter: hue-rotate(0deg); }
    25% { filter: hue-rotate(60deg); }
    50% { filter: hue-rotate(120deg); }
    75% { filter: hue-rotate(180deg); }
}

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

@keyframes multiverseStars {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(3deg); }
}

/* Profile Accents - Expensive Shop (handled via JS) */
/* Profile Banners - Expensive Shop */
.profile-banner[data-banner="ancient_runes"] {
    background: 
        linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(101, 67, 33, 0.2)),
        var(--bg-secondary);
}

.profile-banner[data-banner="galactic_core"] {
    background: 
        radial-gradient(ellipse at center, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, rgba(75, 0, 130, 0.3), rgba(0, 0, 50, 0.3)),
        var(--bg-secondary);
}

/* Profile Accents - Legendary Admin */
body.accent-singularity {
    --profile-accent: #ff00ff;
}

body.accent-singularity .profile-modal,
body.accent-singularity [style*="--profile-accent"] {
    animation: singularityAccent 3s linear infinite;
}

@keyframes singularityAccent {
    0% { --profile-accent: #ff00ff; filter: hue-rotate(0deg); }
    25% { --profile-accent: #00ffff; filter: hue-rotate(90deg); }
    50% { --profile-accent: #ffd700; filter: hue-rotate(180deg); }
    75% { --profile-accent: #ff0000; filter: hue-rotate(270deg); }
    100% { --profile-accent: #ff00ff; filter: hue-rotate(360deg); }
}

/* Profile Titles - Legendary Admin: THE CREATOR */
/* The divine title of one who shapes reality itself */
.player-title.title-the-creator {
    background: linear-gradient(90deg, 
        #ffd700, #ffffff, #ffd700, #ff8c00, 
        #ffd700, #ffffff, #ffeaa7, #ffd700);
    background-size: 600% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        creatorTitleShift 5s linear infinite,
        creatorTitleGlow 2s ease-in-out infinite;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.7rem;
    filter: 
        drop-shadow(0 0 4px rgba(255, 215, 0, 1))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    position: relative;
}

/* Divine star decorations */
.player-title.title-the-creator::before {
    content: '✦';
    -webkit-text-fill-color: #ffd700;
    margin-right: 4px;
    animation: creatorStar 1.5s ease-in-out infinite;
    text-shadow: 
        0 0 6px #ffd700,
        0 0 12px #ffffff,
        0 0 18px rgba(255, 215, 0, 0.6);
}

.player-title.title-the-creator::after {
    content: '✦';
    -webkit-text-fill-color: #ffd700;
    margin-left: 4px;
    animation: creatorStar 1.5s ease-in-out infinite 0.75s;
    text-shadow: 
        0 0 6px #ffd700,
        0 0 12px #ffffff,
        0 0 18px rgba(255, 215, 0, 0.6);
}

@keyframes creatorTitleShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 600% 50%; }
}

@keyframes creatorTitleGlow {
    0%, 100% { 
        filter: 
            drop-shadow(0 0 4px rgba(255, 215, 0, 1))
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
    50% { 
        filter: 
            drop-shadow(0 0 8px rgba(255, 215, 0, 1))
            drop-shadow(0 0 16px rgba(255, 255, 255, 1))
            drop-shadow(0 0 24px rgba(255, 215, 0, 0.6));
    }
}

@keyframes creatorStar {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.3) rotate(180deg);
    }
}

/* ============ ADMIN BADGE: INFINITY ============ */
/* The infinite symbol pulses with universal power */
.player-badge-infinity {
    display: inline-block;
    animation: 
        infinityPulse 2s ease-in-out infinite,
        infinityRotate 8s linear infinite;
    filter: 
        drop-shadow(0 0 4px rgba(255, 0, 255, 0.8))
        drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
    transform-origin: center;
}

@keyframes infinityPulse {
    0%, 100% {
        filter: 
            drop-shadow(0 0 4px rgba(255, 0, 255, 0.8))
            drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
        transform: scale(1);
    }
    50% {
        filter: 
            drop-shadow(0 0 8px rgba(255, 0, 255, 1))
            drop-shadow(0 0 16px rgba(0, 255, 255, 0.9))
            drop-shadow(0 0 24px rgba(255, 215, 0, 0.5));
        transform: scale(1.15);
    }
}

@keyframes infinityRotate {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 4px rgba(255, 0, 255, 0.8)); }
    25% { filter: hue-rotate(90deg) drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)); }
    50% { filter: hue-rotate(180deg) drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
    75% { filter: hue-rotate(270deg) drop-shadow(0 0 6px rgba(255, 100, 0, 0.8)); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 4px rgba(255, 0, 255, 0.8)); }
}

/* Profile Banners - Legendary Admin */
.profile-banner[data-banner="genesis"] {
    background: 
        radial-gradient(circle at 50% 50%, 
            rgba(255, 255, 255, 0.5) 0%, 
            rgba(255, 215, 0, 0.4) 10%, 
            rgba(255, 140, 0, 0.3) 20%,
            rgba(255, 0, 100, 0.2) 35%,
            rgba(100, 0, 255, 0.15) 50%,
            transparent 70%
        ),
        linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 0, 40, 0.9)),
        var(--bg-secondary);
    animation: genesisPulse 3s ease-in-out infinite, genesisExpand 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.profile-banner[data-banner="genesis"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: 
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 215, 0, 0.1) 30deg,
            transparent 60deg,
            rgba(255, 100, 0, 0.1) 90deg,
            transparent 120deg,
            rgba(255, 0, 100, 0.1) 150deg,
            transparent 180deg,
            rgba(100, 0, 255, 0.1) 210deg,
            transparent 240deg,
            rgba(0, 100, 255, 0.1) 270deg,
            transparent 300deg,
            rgba(0, 255, 200, 0.1) 330deg,
            transparent 360deg
        );
    transform: translate(-50%, -50%);
    animation: genesisSpiral 20s linear infinite;
    pointer-events: none;
}

@keyframes genesisPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

@keyframes genesisExpand {
    0%, 100% { 
        background-size: 100% 100%, 100% 100%, 100% 100%;
    }
    50% { 
        background-size: 150% 150%, 100% 100%, 100% 100%;
    }
}

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

/* New Victory Effect Animations */
@keyframes cosmicCollapseStar {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(calc(50vw - 50%), calc(50vh - 50%)) scale(0); opacity: 0; }
}

@keyframes ascensionRay {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes ascensionParticle {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

@keyframes bigBangRing {
    0% { width: 10px; height: 10px; opacity: 1; }
    100% { width: 200vmax; height: 200vmax; opacity: 0; }
}

@keyframes bigBangStar {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.5); opacity: 0; }
}

@keyframes bigBangFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes galaxyArmParticle {
    0% { opacity: 0; transform: scale(0); }
    30% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .confetti-piece,
    .firework,
    .gold-particle,
    .supernova,
    .champion-crown,
    .mmr-bar-fill,
    .mmr-bar-marker,
    .mmr-delta-float,
    .rank-up-banner,
    .screen-shake,
    .elim-anticipation,
    .elim-particle,
    .trophy-icon.animate,
    .gameover-title.animate,
    .gameover-message.animate,
    .revealed-word-item,
    .daily-quest.just-completed,
    .quest-claim-btn,
    .credits-float,
    .quest-confetti-piece {
        animation: none !important;
        transition: none !important;
    }
    
    .player-card.elim-classic,
    .player-card.elim-glitch,
    .player-card.elim-shatter,
    .guess-selection-bar.guess-classic,
    .guess-selection-bar.guess-pulse {
        animation: none !important;
    }
    
    .mmr-change-widget,
    .revealed-word-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============ CUSTOM BACKGROUNDS ============ */

/* Starfield - Unlockable (25 games) */
body[data-background="starfield"] .matrix-bg {
    opacity: 0;
}

body[data-background="starfield"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: 
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 50% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 80% 40%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 10% 90%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 30% 10%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 25% 55%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 5% 45%, rgba(255, 255, 255, 0.5), transparent),
        #05080f;
    background-size: 200px 200px;
    animation: starfield-twinkle 4s ease-in-out infinite;
}

@keyframes starfield-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Circuit - Unlockable (50 games) */
body[data-background="circuit"] .matrix-bg {
    opacity: 0;
}

body[data-background="circuit"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(0, 255, 136, 0.15) 49px, rgba(0, 255, 136, 0.15) 50px),
        repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(0, 255, 136, 0.15) 49px, rgba(0, 255, 136, 0.15) 50px),
        #050a08;
}

/* Nebula - Shop (500 credits) */
body[data-background="nebula"] .matrix-bg {
    opacity: 0;
}

body[data-background="nebula"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 191, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 20%, rgba(255, 0, 128, 0.2) 0%, transparent 40%),
        #08050f;
    animation: nebula-drift 20s ease-in-out infinite;
}

@keyframes nebula-drift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 5% 5%; }
}

/* Cyber Grid - Shop (600 credits) */
body[data-background="cyber_grid"] .matrix-bg {
    opacity: 0;
}

body[data-background="cyber_grid"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0, 255, 255, 0.12) 39px, rgba(0, 255, 255, 0.12) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0, 255, 255, 0.12) 39px, rgba(0, 255, 255, 0.12) 40px),
        linear-gradient(180deg, #050810 0%, #0a0515 100%);
}

/* Cherry Blossom - Premium */
body[data-background="cherry_blossom"] .matrix-bg {
    opacity: 0;
}

body[data-background="cherry_blossom"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 182, 193, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 105, 180, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 192, 203, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #0f0508 0%, #100510 100%);
}