/* =============================================================================
   CHIPTUNE CHALLENGE 2026 - PIXEL ART SYSTEM
   =============================================================================

   This file contains the pixel art infrastructure for all monthly themes.
   Each theme has:
   - Animated background layer
   - Floating sprite animations
   - Easter egg interactions
   - Player/UI decorations

   Structure:
   - .pixel-bg: Full-screen background canvas/layer
   - .pixel-sprite: Individual animated sprites
   - .pixel-scene: Composite scene container
   - .easter-egg: Hidden interactive elements
*/

/* =============================================================================
   BASE INFRASTRUCTURE
   ============================================================================= */

/* Background layer - sits behind all content */
.pixel-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Canvas layer for particle effects */
.pixel-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Scene container for positioned sprites */
.pixel-scene {
    position: fixed;
    bottom: 100px; /* Above the player */
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Individual sprite base */
.pixel-sprite {
    position: absolute;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Easter egg base - hidden by default */
.easter-egg {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

.easter-egg.revealed {
    opacity: 1;
}

.easter-egg:hover {
    transform: scale(1.1);
}

/* =============================================================================
   CSS PIXEL ART UTILITIES
   ============================================================================= */

/* Pixel heart using box-shadow */
.pixel-heart {
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        /* Row 1 */
        4px 0 0 var(--pixel-color, #ff6b9d),
        8px 0 0 var(--pixel-color, #ff6b9d),
        16px 0 0 var(--pixel-color, #ff6b9d),
        20px 0 0 var(--pixel-color, #ff6b9d),
        /* Row 2 */
        0 4px 0 var(--pixel-color, #ff6b9d),
        4px 4px 0 var(--pixel-color, #ff6b9d),
        8px 4px 0 var(--pixel-color, #ff6b9d),
        12px 4px 0 var(--pixel-color, #ff6b9d),
        16px 4px 0 var(--pixel-color, #ff6b9d),
        20px 4px 0 var(--pixel-color, #ff6b9d),
        24px 4px 0 var(--pixel-color, #ff6b9d),
        /* Row 3 */
        0 8px 0 var(--pixel-color, #ff6b9d),
        4px 8px 0 var(--pixel-color, #ff6b9d),
        8px 8px 0 var(--pixel-color, #ff6b9d),
        12px 8px 0 var(--pixel-color, #ff6b9d),
        16px 8px 0 var(--pixel-color, #ff6b9d),
        20px 8px 0 var(--pixel-color, #ff6b9d),
        24px 8px 0 var(--pixel-color, #ff6b9d),
        /* Row 4 */
        4px 12px 0 var(--pixel-color, #ff6b9d),
        8px 12px 0 var(--pixel-color, #ff6b9d),
        12px 12px 0 var(--pixel-color, #ff6b9d),
        16px 12px 0 var(--pixel-color, #ff6b9d),
        20px 12px 0 var(--pixel-color, #ff6b9d),
        /* Row 5 */
        8px 16px 0 var(--pixel-color, #ff6b9d),
        12px 16px 0 var(--pixel-color, #ff6b9d),
        16px 16px 0 var(--pixel-color, #ff6b9d),
        /* Row 6 */
        12px 20px 0 var(--pixel-color, #ff6b9d);
    animation: floatHeart 3s ease-in-out infinite;
}

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

/* Pixel star */
.pixel-star {
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        8px 0 0 var(--pixel-color, #ffd700),
        4px 4px 0 var(--pixel-color, #ffd700),
        8px 4px 0 var(--pixel-color, #ffd700),
        12px 4px 0 var(--pixel-color, #ffd700),
        0 8px 0 var(--pixel-color, #ffd700),
        4px 8px 0 var(--pixel-color, #ffd700),
        8px 8px 0 var(--pixel-color, #ffd700),
        12px 8px 0 var(--pixel-color, #ffd700),
        16px 8px 0 var(--pixel-color, #ffd700),
        4px 12px 0 var(--pixel-color, #ffd700),
        8px 12px 0 var(--pixel-color, #ffd700),
        12px 12px 0 var(--pixel-color, #ffd700),
        8px 16px 0 var(--pixel-color, #ffd700);
    animation: twinkle 1.5s ease-in-out infinite;
}

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

/* Pixel coin */
.pixel-coin {
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow:
        4px 0 0 #ffd700,
        8px 0 0 #ffd700,
        0 4px 0 #ffd700,
        4px 4px 0 #ffec80,
        8px 4px 0 #ffd700,
        12px 4px 0 #ffd700,
        0 8px 0 #ffd700,
        4px 8px 0 #ffec80,
        8px 8px 0 #ffd700,
        12px 8px 0 #b8860b,
        0 12px 0 #ffd700,
        4px 12px 0 #ffd700,
        8px 12px 0 #b8860b,
        12px 12px 0 #b8860b,
        4px 16px 0 #b8860b,
        8px 16px 0 #b8860b;
    animation: spinCoin 0.5s steps(4) infinite;
}

@keyframes spinCoin {
    0% { transform: scaleX(1); }
    25% { transform: scaleX(0.5); }
    50% { transform: scaleX(0.1); }
    75% { transform: scaleX(0.5); }
    100% { transform: scaleX(1); }
}

/* =============================================================================
   FEBRUARY: ARCADE VALENTINE
   ============================================================================= */

/* Full-screen arcade background with overlays */
.chiptune-theme-february .pixel-bg {
    background:
        /* CRT scanlines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* Dark overlay gradient for readability */
        linear-gradient(
            135deg,
            rgba(10, 10, 26, 0.82) 0%,
            rgba(26, 10, 46, 0.78) 50%,
            rgba(10, 26, 46, 0.82) 100%
        ),
        /* Arcade background image */
        url('/static/sites/zimventures/chiptune/images/arcade-valentine-bg.png') center center / cover no-repeat;
    background-attachment: scroll, scroll, fixed;
}

/* Arcade cabinet scene - positioned at bottom */
.chiptune-theme-february .arcade-scene {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

/* Placeholder for user-provided arcade cabinet PNG */
.chiptune-theme-february .arcade-cabinet {
    width: 300px;
    height: 400px;
    /* Will be replaced with user PNG */
    background: url('../img/themes/february/arcade-cabinet.png') no-repeat center bottom;
    background-size: contain;
    image-rendering: pixelated;
}

/* Fallback CSS arcade cabinet if no image */
.chiptune-theme-february .arcade-cabinet.css-fallback {
    background: none;
    position: relative;
}

.chiptune-theme-february .arcade-cabinet.css-fallback::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 180px;
    background: linear-gradient(180deg, #2a2a4a 0%, #1a1a2e 100%);
    border: 3px solid #ff6b9d;
    border-radius: 8px 8px 0 0;
    box-shadow:
        0 0 20px rgba(255, 107, 157, 0.3),
        inset 0 -40px 0 #0a0a1a;
}

/* Screen glow on cabinet */
.chiptune-theme-february .arcade-cabinet.css-fallback::after {
    content: '';
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 60px;
    background: linear-gradient(135deg, #00d4ff, #ff6b9d);
    border-radius: 4px;
    animation: screenFlicker 0.1s infinite;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

@keyframes screenFlicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Floating hearts container */
.chiptune-theme-february .floating-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Individual floating heart */
.chiptune-theme-february .float-heart {
    position: absolute;
    animation: riseHeart 12s linear infinite; /* Slower for less CPU */
    opacity: 0;
    will-change: transform, opacity; /* GPU acceleration */
}

@keyframes riseHeart {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Neon sign effect */
.chiptune-theme-february .neon-text {
    font-family: 'Press Start 2P', monospace;
    color: #ff6b9d;
    text-shadow:
        0 0 5px #ff6b9d,
        0 0 10px #ff6b9d,
        0 0 20px #ff6b9d,
        0 0 40px #ff6b9d;
    animation: neonFlicker 3s ease-in-out infinite;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px #ff6b9d,
            0 0 10px #ff6b9d,
            0 0 20px #ff6b9d,
            0 0 40px #ff6b9d;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* INSERT COIN text */
.chiptune-theme-february .insert-coin {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: blinkText 1s steps(1) infinite;
    z-index: 5;
    pointer-events: none;
}

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

/* =============================================================================
   JANUARY: NEW BEGINNINGS
   ============================================================================= */

/* Retro computer background image */
.chiptune-theme-january .pixel-bg {
    background-color: #0a0a1a;
    background-image:
        /* Semi-transparent overlay for text readability */
        linear-gradient(
            180deg,
            rgba(10, 10, 26, 0.75) 0%,
            rgba(10, 26, 46, 0.65) 50%,
            rgba(26, 10, 46, 0.75) 100%
        ),
        /* The retro computer background image */
        url('/static/sites/zimventures/chiptune/images/january-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* No starfield pseudo-elements for January - using image instead */
.chiptune-theme-january .pixel-bg::before,
.chiptune-theme-january .pixel-bg::after {
    display: none;
}

@keyframes starfieldScroll {
    from { transform: translateY(0) translateX(0); }
    to { transform: translateY(-50%) translateX(-25%); }
}

@keyframes starfieldScrollSlow {
    from { transform: translateY(0) translateX(0); }
    to { transform: translateY(-33%) translateX(-16%); }
}

/* Title screen frame effect */
.chiptune-theme-january .title-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    text-align: center;
}

/* "PRESS START" blinking text - positioned in left gutter, rotated */
.chiptune-theme-january .press-start {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #00d4ff;
    text-shadow:
        0 0 10px rgba(0, 212, 255, 0.8),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 30px rgba(0, 212, 255, 0.3);
    animation: pressStartBlink 1.5s steps(1) infinite;
    z-index: 100;
    letter-spacing: 2px;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    padding: 10px;
    transition: transform 0.1s ease;
}

.chiptune-theme-january .press-start:hover {
    animation: none;
    opacity: 1;
    transform: translateY(-50%) rotate(-90deg) scale(1.1);
    text-shadow:
        0 0 15px rgba(0, 212, 255, 1),
        0 0 30px rgba(0, 212, 255, 0.8),
        0 0 45px rgba(0, 212, 255, 0.5);
}

@keyframes pressStartBlink {
    0%, 70% { opacity: 1; }
    71%, 100% { opacity: 0; }
}

/* Hide on smaller screens where there's no gutter */
@media (max-width: 1200px) {
    .chiptune-theme-january .press-start {
        display: none;
    }
}

/* Floating stars container */
.chiptune-theme-january .floating-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Individual twinkling star */
.chiptune-theme-january .twinkle-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    animation: twinkleStar 2s ease-in-out infinite;
}

.chiptune-theme-january .twinkle-star::before,
.chiptune-theme-january .twinkle-star::after {
    content: '';
    position: absolute;
    background: #fff;
}

.chiptune-theme-january .twinkle-star::before {
    width: 12px;
    height: 2px;
    top: 1px;
    left: -4px;
}

.chiptune-theme-january .twinkle-star::after {
    width: 2px;
    height: 12px;
    top: -4px;
    left: 1px;
}

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

/* Character select silhouettes */
.chiptune-theme-january .select-arrow {
    position: fixed;
    font-family: 'Press Start 2P', monospace;
    font-size: 1.5rem;
    color: #ff6b9d;
    animation: arrowBounce 0.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 0 10px rgba(255, 107, 157, 0.5);
}

.chiptune-theme-january .select-arrow.left {
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.chiptune-theme-january .select-arrow.right {
    right: 10%;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
}

/* Scanline effect for CRT feel */
.chiptune-theme-january .pixel-bg {
    position: fixed;
}

.chiptune-theme-january::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.03) 0px,
        rgba(0, 0, 0, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9998;
}

/* "2026" year display */
.chiptune-theme-january .year-display {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 2rem;
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5),
        4px 4px 0 #b8860b;
    pointer-events: none;
    z-index: 3;
    animation: yearPulse 3s ease-in-out infinite;
}

@keyframes yearPulse {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.5),
            4px 4px 0 #b8860b;
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 215, 0, 0.7),
            4px 4px 0 #b8860b;
    }
}

/* Attract mode demo text - positioned in right gutter, rotated */
.chiptune-theme-january .attract-text {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    pointer-events: none;
    z-index: 4;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Hide on smaller screens where there's no gutter */
@media (max-width: 1200px) {
    .chiptune-theme-january .attract-text {
        display: none;
    }
}

/* High score display style */
.chiptune-theme-january .high-score {
    position: fixed;
    top: 10%;
    right: 5%;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #00d4ff;
    text-align: right;
    pointer-events: none;
    z-index: 3;
}

.chiptune-theme-january .high-score .label {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25rem;
    display: block;
}

.chiptune-theme-january .high-score .score {
    color: #ffd700;
    font-size: 0.6rem;
}

/* =============================================================================
   MARCH: ADVENTURE / AWAKENING
   ============================================================================= */

.chiptune-theme-march .pixel-bg {
    background:
        /* Rolling hills silhouette */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Cpath d='M0,50 Q25,30 50,40 T100,35 T150,45 T200,38 L200,50 Z' fill='%231a3e2a'/%3E%3C/svg%3E") repeat-x bottom,
        /* Sky gradient */
        linear-gradient(
            180deg,
            #87ceeb 0%,
            #b4e7f8 40%,
            #ffecd2 70%,
            #1a3e2a 100%
        );
    background-size: 400px 100px, 100% 100%;
}

/* Floating clouds */
.chiptune-theme-march .cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    animation: driftCloud 30s linear infinite;
}

.chiptune-theme-march .cloud::before,
.chiptune-theme-march .cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

@keyframes driftCloud {
    from { transform: translateX(-200px); }
    to { transform: translateX(calc(100vw + 200px)); }
}

/* Bird sprites */
.chiptune-theme-march .bird {
    position: absolute;
    width: 12px;
    height: 8px;
    background: #333;
    clip-path: polygon(0 50%, 40% 0, 50% 50%, 60% 0, 100% 50%);
    animation: flyBird 10s linear infinite;
}

@keyframes flyBird {
    0% { transform: translateX(-50px) translateY(0); }
    25% { transform: translateX(25vw) translateY(-20px); }
    50% { transform: translateX(50vw) translateY(0); }
    75% { transform: translateX(75vw) translateY(-15px); }
    100% { transform: translateX(calc(100vw + 50px)) translateY(0); }
}

/* =============================================================================
   COMMON ANIMATIONS
   ============================================================================= */

/* Scanline overlay effect */
.scanlines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* CRT screen curve effect */
.crt-curve::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 70%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 9998;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .pixel-scene {
        height: 150px;
        bottom: 80px;
    }

    .chiptune-theme-february .arcade-cabinet {
        width: 200px;
        height: 280px;
    }

    .chiptune-theme-february .insert-coin {
        font-size: 0.5rem;
        bottom: 60px;
    }
}

@media (max-width: 480px) {
    .pixel-scene {
        display: none; /* Hide complex scenes on very small screens */
    }
}