/* ==========================================
   🎮 PIXEL DECORATIONS & EFFECTS
   Additional Game Design Elements
   ========================================== */

/* 🌟 Floating Pixel Stars */
.pixel-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.pixel-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--pixel-cyan);
    animation: twinkle 3s infinite;
}

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

/* 🎯 Level Up Notification */
.level-up-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--color-surface);
    border: 4px solid var(--pixel-yellow);
    padding: 2rem;
    box-shadow: 0 0 30px rgba(255, 190, 11, 0.5), 6px 6px 0px rgba(0, 0, 0, 0.6);
    z-index: 10000;
    text-align: center;
    animation: level-up-pop 2s ease-out;
}

@keyframes level-up-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    10% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    90% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

.level-up-notification h2 {
    font-size: 1.5rem;
    color: var(--pixel-yellow);
    text-transform: uppercase;
    animation: rainbow-text 1s infinite;
}

@keyframes rainbow-text {
    0% { color: var(--pixel-yellow); }
    33% { color: var(--pixel-cyan); }
    66% { color: var(--pixel-pink); }
    100% { color: var(--pixel-yellow); }
}

/* 💎 Pixel Coin Animation */
.pixel-coin {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--pixel-yellow);
    border: 2px solid var(--pixel-orange);
    position: relative;
    animation: coin-spin 1s infinite;
}

@keyframes coin-spin {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.2); }
}

/* 🎨 Glitch Effect for Hover */
.glitch-effect {
    position: relative;
}

.glitch-effect:hover::before,
.glitch-effect:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-effect:hover::before {
    animation: glitch-1 0.3s infinite;
    color: var(--pixel-cyan);
    z-index: -1;
}

.glitch-effect:hover::after {
    animation: glitch-2 0.3s infinite;
    color: var(--pixel-pink);
    z-index: -2;
}

@keyframes glitch-1 {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes glitch-2 {
    0% { transform: translate(0); }
    20% { transform: translate(2px, -2px); }
    40% { transform: translate(2px, 2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(-2px, 2px); }
    100% { transform: translate(0); }
}

/* 🎮 Pixel Button Click Effect */
.btn-pixel-click {
    position: relative;
    overflow: hidden;
}

.btn-pixel-click::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-pixel-click:active::after {
    width: 200%;
    height: 200%;
}

/* 🌈 Rainbow Border Animation */
.rainbow-border {
    position: relative;
    background: var(--color-surface);
    padding: 4px;
}

.rainbow-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
    border-image: linear-gradient(
        45deg,
        var(--pixel-purple),
        var(--pixel-cyan),
        var(--pixel-pink),
        var(--pixel-yellow),
        var(--pixel-green),
        var(--pixel-purple)
    ) 1;
    animation: rainbow-rotate 3s linear infinite;
}

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

/* ⚡ Power-Up Flash */
.power-up-flash {
    animation: power-up 0.5s ease-out;
}

@keyframes power-up {
    0% { box-shadow: 0 0 0 0 rgba(0, 245, 255, 0.7); }
    50% { box-shadow: 0 0 30px 20px rgba(0, 245, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 245, 255, 0); }
}

/* 🎯 Achievement Unlock Animation */
.achievement-unlock {
    animation: achievement-bounce 0.6s ease-out;
}

@keyframes achievement-bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-20px); }
    50% { transform: translateY(-10px); }
    75% { transform: translateY(-15px); }
}

/* 💫 Sparkle Effect */
.sparkle {
    position: relative;
}

.sparkle::before,
.sparkle::after {
    content: '✨';
    position: absolute;
    animation: sparkle-float 2s ease-in-out infinite;
}

.sparkle::before {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.sparkle::after {
    bottom: -10px;
    right: -10px;
    animation-delay: 1s;
}

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

/* 🎨 8-bit Pixel Art Border Corners */
.pixel-corners {
    position: relative;
}

.pixel-corners::before,
.pixel-corners::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 4px solid var(--pixel-cyan);
}

.pixel-corners::before {
    top: -4px;
    left: -4px;
    border-right: none;
    border-bottom: none;
}

.pixel-corners::after {
    bottom: -4px;
    right: -4px;
    border-left: none;
    border-top: none;
}

/* 🎮 Game Boy Screen Effect */
.gameboy-screen {
    background: 
        linear-gradient(
            to bottom,
            rgba(155, 188, 15, 0.1) 0%,
            rgba(139, 172, 15, 0.1) 100%
        );
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(155, 188, 15, 0.2);
}

/* 🌟 Star Rating Pixel Style */
.pixel-rating {
    display: inline-flex;
    gap: 4px;
}

.pixel-rating .star {
    width: 16px;
    height: 16px;
    background: var(--pixel-yellow);
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
}

.pixel-rating .star.empty {
    background: var(--color-text-muted);
    opacity: 0.3;
}

/* 🎯 HP/MP Bars */
.stat-bar {
    height: 20px;
    background: var(--color-bg);
    border: 2px solid var(--pixel-purple);
    position: relative;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    transition: width 0.5s ease;
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        0 0 10px currentColor;
}

.stat-bar-fill.hp {
    background: linear-gradient(to right, var(--pixel-green), var(--pixel-yellow));
}

.stat-bar-fill.mp {
    background: linear-gradient(to right, var(--pixel-cyan), var(--pixel-blue));
}

.stat-bar-fill.exp {
    background: linear-gradient(to right, var(--pixel-purple), var(--pixel-pink));
}

.stat-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.4rem;
    color: white;
    text-shadow: 1px 1px 0 black;
    font-family: var(--font-pixel);
    pointer-events: none;
}

/* 🎨 Pixel Art Divider */
.pixel-divider {
    height: 8px;
    background: 
        linear-gradient(90deg, 
            transparent 0%,
            transparent 25%,
            var(--pixel-purple) 25%,
            var(--pixel-purple) 50%,
            var(--pixel-cyan) 50%,
            var(--pixel-cyan) 75%,
            transparent 75%,
            transparent 100%
        );
    background-size: 40px 8px;
    animation: pixel-divider-scroll 1s linear infinite;
}

@keyframes pixel-divider-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}

/* 🕹️ Joystick Loader */
.joystick-loader {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
}

.joystick-loader::before {
    content: '🕹️';
    font-size: 2rem;
    position: absolute;
    animation: joystick-wiggle 0.5s ease-in-out infinite;
}

@keyframes joystick-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

/* 🎮 Game Over Screen */
.game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fade-in 0.3s ease;
}

.game-over-content {
    text-align: center;
    background: var(--color-surface);
    border: 4px solid var(--pixel-pink);
    padding: 3rem;
    box-shadow: 0 0 50px var(--pixel-pink);
}

.game-over-content h1 {
    font-size: 2rem;
    color: var(--pixel-pink);
    text-transform: uppercase;
    animation: blink 1s infinite;
    margin-bottom: 2rem;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 🏆 Trophy Cabinet */
.trophy-cabinet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 12px;
}

.trophy-item {
    width: 60px;
    height: 60px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--pixel-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
    transition: all 100ms ease;
}

.trophy-item:hover {
    transform: translate(2px, 2px);
    border-color: var(--pixel-yellow);
}

.trophy-item.locked {
    opacity: 0.3;
    filter: grayscale(100%);
}

.trophy-item.locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

/* 💬 Pixel Speech Bubble */
.speech-bubble-pixel {
    position: relative;
    background: var(--color-surface);
    border: 3px solid var(--pixel-cyan);
    padding: 12px;
    font-size: 0.6rem;
}

.speech-bubble-pixel::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 0px solid transparent;
    border-top: 12px solid var(--pixel-cyan);
}

/* 🎨 Pixel Art Loading Spinner */
.pixel-spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}

.pixel-spinner div {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--pixel-cyan);
}

.pixel-spinner div:nth-child(1) { top: 0; left: 16px; animation: pixel-spin 1s infinite 0s; }
.pixel-spinner div:nth-child(2) { top: 8px; left: 24px; animation: pixel-spin 1s infinite 0.125s; }
.pixel-spinner div:nth-child(3) { top: 16px; left: 24px; animation: pixel-spin 1s infinite 0.25s; }
.pixel-spinner div:nth-child(4) { top: 24px; left: 16px; animation: pixel-spin 1s infinite 0.375s; }
.pixel-spinner div:nth-child(5) { top: 24px; left: 8px; animation: pixel-spin 1s infinite 0.5s; }
.pixel-spinner div:nth-child(6) { top: 16px; left: 0; animation: pixel-spin 1s infinite 0.625s; }
.pixel-spinner div:nth-child(7) { top: 8px; left: 0; animation: pixel-spin 1s infinite 0.75s; }
.pixel-spinner div:nth-child(8) { top: 0; left: 8px; animation: pixel-spin 1s infinite 0.875s; }

@keyframes pixel-spin {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* 🎯 Quest Log Style */
.quest-log {
    background: var(--color-bg-secondary);
    border: 3px solid var(--pixel-yellow);
    padding: 16px;
}

.quest-item {
    padding: 12px;
    border: 2px solid var(--pixel-purple);
    margin-bottom: 8px;
    background: var(--color-bg);
    position: relative;
    padding-left: 40px;
}

.quest-item::before {
    content: '!';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--pixel-yellow);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid var(--color-bg);
}

.quest-item.completed::before {
    content: '✓';
    background: var(--pixel-green);
}

/* 🎮 Retro Console Frame */
.console-frame {
    background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
    border: 8px solid #1a1a1a;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 
        inset 0 2px 10px rgba(255, 255, 255, 0.1),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.console-screen {
    background: var(--color-bg);
    border: 4px solid var(--pixel-purple);
    padding: 16px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 🌟 Combo Counter */
.combo-counter {
    position: fixed;
    top: 100px;
    right: 20px;
    background: var(--color-surface);
    border: 3px solid var(--pixel-orange);
    padding: 12px 20px;
    font-size: 1.5rem;
    color: var(--pixel-orange);
    animation: combo-pulse 0.5s ease-out;
    z-index: 1000;
}

@keyframes combo-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.combo-counter::before {
    content: 'COMBO';
    display: block;
    font-size: 0.5rem;
    color: var(--color-text-secondary);
}

/* 🎨 Pixel Perfect Grid Helper (Dev Tool) */
.pixel-grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, rgba(255, 0, 255, 0.1) 0px, transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg, rgba(255, 0, 255, 0.1) 0px, transparent 1px, transparent 8px);
    pointer-events: none;
    z-index: 99999;
    display: none;
}

.show-pixel-grid .pixel-grid-overlay {
    display: block;
}

/* 📢 Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* 🎮 END OF PIXEL DECORATIONS */