/* =============================================================================
   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
   ============================================================================= */

/* Rolling hills are now loaded from SVG assets via march.css theme file */
/* pixel-bg overrides are in themes/march.css */

/* Adventure badge - floating element injected by JS */
.chiptune-theme-march .adventure-badge {
    position: fixed;
    bottom: 100px;
    left: 20px;
    font-family: 'Kalam', 'Comic Sans MS', cursive;
    font-size: 0.65rem;
    color: #3D2B1F;
    background: #F5F0E1;
    border: 2px solid #8B7355;
    border-radius: 4px;
    padding: 6px 12px;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(61, 43, 31, 0.15);
    animation: adventureBadgeFloat 3s ease-in-out infinite;
    transition: background 0.2s ease, color 0.2s ease;
}

.chiptune-theme-march .adventure-badge:hover {
    background: #EDE5D0;
}

.chiptune-theme-march .adventure-badge.treasure-found {
    background: #FFD700;
    color: #3D2B1F;
    border-color: #DAA520;
    font-weight: bold;
}

.chiptune-theme-march .adventure-badge .badge-icon {
    margin-right: 4px;
}

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

/* Hide on smaller screens where there's no room */
@media (max-width: 1200px) {
    .chiptune-theme-march .adventure-badge {
        display: none;
    }
}

/* Konami code treasure chest overlay */
.chiptune-theme-march .konami-treasure {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
    animation: chestOpen 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chiptune-theme-march .konami-treasure.fade-out {
    animation: chestFadeOut 1s ease-out forwards;
}

.chiptune-theme-march .konami-treasure .chest {
    font-size: 5rem;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    margin-bottom: 1rem;
}

.chiptune-theme-march .konami-treasure .chest-text {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFD700;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
    text-align: center;
    padding: 0 1rem;
}

@keyframes chestOpen {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

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

/* Flash fade - used by easter egg effects across themes */
@keyframes flashFade {
    from { opacity: 0.8; }
    to { opacity: 0; }
}

/* 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 */
    }
}

/* =============================================================================
   MAY EASTER EGGS
   ============================================================================= */

.chiptune-theme-may .may-coin-counter {
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 100;
    background: #FFFFFF;
    border: 3px solid #7CB342;
    border-radius: 999px;
    padding: 6px 16px 6px 12px;
    box-shadow: 0 4px 0 rgba(124, 179, 66, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Fredoka', 'Comic Sans MS', cursive;
    font-weight: 700;
    color: #1565C0;
    pointer-events: none;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chiptune-theme-may .may-coin-counter .may-coin-icon {
    color: #FFD54F;
    font-size: 1.1rem;
    text-shadow: 0 1px 0 #F57F17;
}

.chiptune-theme-may .may-coin-counter.may-coin-bump {
    transform: scale(1.15);
}

.chiptune-theme-may .may-coin-pop {
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10001;
    font-family: 'Fredoka', 'Comic Sans MS', cursive;
    font-weight: 700;
    font-size: 1.6rem;
    color: #FFD54F;
    text-shadow:
        2px 2px 0 #1565C0,
        4px 4px 0 rgba(21, 101, 192, 0.4);
    animation: mayCoinPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes mayCoinPop {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    100% { transform: translate(-50%, -130%) scale(0.85); opacity: 0; }
}

.chiptune-theme-may .may-pipe {
    position: fixed;
    bottom: 160px; /* sits above the Discord floating badge */
    right: 20px;
    z-index: 100;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    filter: drop-shadow(0 4px 0 rgba(85, 139, 47, 0.5));
    transition: transform 0.15s ease, filter 0.15s ease;
}

.chiptune-theme-may .may-pipe:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 0 rgba(85, 139, 47, 0.5));
}

.chiptune-theme-may .may-pipe:active {
    transform: translateY(2px);
    filter: drop-shadow(0 2px 0 rgba(85, 139, 47, 0.5));
}

.chiptune-theme-may .may-pipe-flash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    background:
        radial-gradient(circle at bottom right, rgba(85, 139, 47, 0.85) 0%, rgba(124, 179, 66, 0.5) 30%, transparent 70%);
    transform-origin: bottom right;
    animation: mayPipeFlash 0.7s ease-out forwards;
}

@keyframes mayPipeFlash {
    0%   { opacity: 0; transform: scale(0.4); }
    35%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.4); }
}

.chiptune-theme-may .may-mushroom {
    position: fixed;
    bottom: 22vh;
    left: -80px;
    z-index: 10000;
    pointer-events: none;
    line-height: 0;
    animation:
        mayMushroomTravel 4.5s linear forwards,
        mayMushroomBounce 0.45s ease-in-out infinite alternate;
}

@keyframes mayMushroomTravel {
    from { left: -80px; }
    to   { left: calc(100vw + 80px); }
}

@keyframes mayMushroomBounce {
    from { transform: translateY(0)    rotate(-4deg); }
    to   { transform: translateY(-32px) rotate(4deg); }
}

.chiptune-theme-may .may-oneup-text {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10001;
    pointer-events: none;
    font-family: 'Fredoka', 'Comic Sans MS', cursive;
    font-weight: 700;
    font-size: 4rem;
    color: #7CB342;
    text-shadow:
        4px 4px 0 #1565C0,
        8px 8px 0 rgba(21, 101, 192, 0.35);
    letter-spacing: 2px;
    animation: mayOneup 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes mayOneup {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
    55%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -160%) scale(1); opacity: 0; }
}

@media (max-width: 768px) {
    .chiptune-theme-may .may-coin-counter {
        bottom: 80px;
    }

    .chiptune-theme-may .may-pipe {
        bottom: 140px; /* clears the mobile Discord circle at bottom: 90px */
    }

    .chiptune-theme-may .may-oneup-text {
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chiptune-theme-may .may-coin-pop,
    .chiptune-theme-may .may-mushroom,
    .chiptune-theme-may .may-oneup-text,
    .chiptune-theme-may .may-pipe-flash,
    .chiptune-theme-may .may-coin-counter.may-coin-bump {
        animation: none;
        transition: none;
    }
}