/* ============================================
   MUSHIES - Pixel Retro Fun Modern Stylesheet
   ============================================ */

/* CSS Variables */
:root {
    /* Colors from the game */
    --bg-forest: #1a2f1a;
    --bg-dark: #0d1a0d;
    --bg-panel: rgba(25, 25, 25, 0.95);

    /* Resource colors */
    --gold: #ffd700;
    --orange: #e67300;
    --white: #f5f5f5;
    --cyan: #00e5ff;

    /* Shroom colors */
    --red: #cc3333;
    --blue: #3366e6;
    --green: #4db34d;
    --yellow: #e6e633;
    --purple: #9933cc;
    --pink: #e64d8c;

    /* UI */
    --text: #f0f0f0;
    --text-dim: #888;
    --accent: #7fff00;
    --accent-glow: rgba(127, 255, 0, 0.4);

    /* Fonts */
    --font-pixel: 'Press Start 2P', cursive;
    --font-retro: 'VT323', monospace;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-retro);
    background: var(--bg-dark);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Pixel perfect images */
img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ============================================
   Background Effects
   ============================================ */

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

.spore {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.6;
    animation: floatSpore 8s ease-in-out infinite;
    box-shadow: 0 0 10px var(--gold);
}

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

/* ============================================
   Navigation
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(13, 26, 13, 0.75);
    z-index: 1000;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(127, 255, 0, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 40px;
    height: 40px;
    animation: bounce 2s ease-in-out infinite;
}

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

.logo-text {
    font-family: var(--font-pixel);
    font-size: 1.25rem;
    color: var(--accent);
    text-shadow: 2px 2px 0 var(--bg-dark), 0 0 20px var(--accent-glow);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    font-family: var(--font-retro);
    font-size: 1.25rem;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.nav-links a:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.2s;
}

.nav-links a:hover::after {
    width: 100%;
}

.wishlist-link {
    background: linear-gradient(135deg, var(--accent) 0%, #99ff33 100%) !important;
    color: var(--bg-dark) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.35rem !important;
    box-shadow:
        0 4px 20px rgba(127, 255, 0, 0.4),
        0 0 40px rgba(127, 255, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: wishlistPulse 3s ease-in-out infinite;
}

@keyframes wishlistPulse {
    0%, 100% {
        box-shadow:
            0 4px 20px rgba(127, 255, 0, 0.4),
            0 0 40px rgba(127, 255, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 6px 30px rgba(127, 255, 0, 0.6),
            0 0 60px rgba(127, 255, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

.wishlist-link::after {
    display: none !important;
}

.wishlist-link:hover {
    background: linear-gradient(135deg, #99ff33 0%, #b3ff66 100%) !important;
    color: var(--bg-dark) !important;
    box-shadow:
        0 8px 30px rgba(127, 255, 0, 0.6),
        0 0 60px rgba(127, 255, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
    text-shadow: none !important;
    animation: none;
}

.nav-btn {
    background: var(--accent) !important;
    color: var(--bg-dark) !important;
    padding: 0.5rem 1rem;
    border: 3px solid var(--bg-dark);
    box-shadow: 4px 4px 0 var(--bg-dark);
}

.nav-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bg-dark);
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 2rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Bottom fade from hero to rest of page */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--bg-dark));
    z-index: 20;
    pointer-events: none;
}

/* ============================================
   Game Scene - Layered Parallax Background
   ============================================ */

.game-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* No z-index - let children control their own stacking */
}

/* Sky layer - not needed, forest_bg tiles to fill */
.scene-sky {
    display: none;
}

/* Forest parallax layer - scaled larger and offset to crop sky */
.scene-forest {
    position: absolute;
    top: -15%;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/forest_bg.png') repeat-x bottom;
    background-size: auto 115%;
    image-rendering: pixelated;
    animation: forestSway 25s ease-in-out infinite;
}

@keyframes forestSway {
    0%, 100% { background-position: 0 bottom; }
    50% { background-position: 30px bottom; }
}

/* Ground/grass layer - foreground tile in front of mushroom */
.scene-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: url('assets/foreground_tile.png') repeat-x top;
    background-size: auto 100%;
    image-rendering: pixelated;
    z-index: 10; /* High z-index to be in front of mushroom */
    pointer-events: none; /* Allow clicks to pass through to mushroom */
}

/* Underground layer - not needed since foreground tile has dirt */
.scene-underground {
    display: none;
}

/* Decorative small mushrooms - positioned on grass (top portion of foreground tile) */
.deco-shroom {
    position: absolute;
    image-rendering: pixelated;
    z-index: 3;
    opacity: 0.9;
    animation: shroomBob 3s ease-in-out infinite;
}

/* Position mushrooms to sit on the grass - all at same level */
.deco-1 {
    bottom: 140px;
    left: 8%;
    width: 40px;
    animation-delay: 0s;
}

.deco-2 {
    bottom: 140px;
    left: 20%;
    width: 30px;
    animation-delay: 0.5s;
}

.deco-3 {
    bottom: 140px;
    right: 15%;
    width: 45px;
    animation-delay: 1s;
}

.deco-4 {
    bottom: 140px;
    right: 5%;
    width: 28px;
    animation-delay: 1.5s;
}

.deco-5 {
    bottom: 140px;
    right: 30%;
    width: 35px;
    animation-delay: 0.8s;
}

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

.hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4rem;
    max-width: 1200px;
    position: absolute;
    bottom: 130px;
    z-index: 5; /* Between forest and ground */
}

.hero-text {
    text-align: left;
    background: rgba(13, 26, 13, 0.85);
    padding: 2rem 2.5rem;
    border: 4px solid rgba(127, 255, 0, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 75px;
    position: relative;
    z-index: 15; /* Above ground (z-index: 10) */
}

.hero-text h1 {
    font-family: var(--font-pixel);
    font-size: 4rem;
    color: var(--accent);
    text-shadow:
        4px 4px 0 var(--bg-dark),
        8px 8px 0 rgba(0,0,0,0.3),
        0 0 40px var(--accent-glow);
    margin-bottom: 1rem;
    animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% {
        text-shadow:
            4px 4px 0 var(--bg-dark),
            8px 8px 0 rgba(0,0,0,0.3),
            0 0 40px var(--accent-glow);
    }
    50% {
        text-shadow:
            4px 4px 0 var(--bg-dark),
            8px 8px 0 rgba(0,0,0,0.3),
            0 0 60px var(--accent-glow),
            0 0 80px var(--accent-glow);
    }
}

/* Glitch Effect */
.glitch {
    position: relative;
}

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

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--red);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--blue);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    5% { clip: rect(70px, 9999px, 71px, 0); }
    10% { clip: rect(29px, 9999px, 24px, 0); }
    15% { clip: rect(3px, 9999px, 38px, 0); }
    20% { clip: rect(97px, 9999px, 95px, 0); }
    25% { clip: rect(35px, 9999px, 53px, 0); }
    30% { clip: rect(54px, 9999px, 66px, 0); }
    35% { clip: rect(51px, 9999px, 37px, 0); }
    40% { clip: rect(88px, 9999px, 95px, 0); }
    45% { clip: rect(63px, 9999px, 93px, 0); }
    50% { clip: rect(47px, 9999px, 22px, 0); }
    55% { clip: rect(12px, 9999px, 71px, 0); }
    60% { clip: rect(4px, 9999px, 41px, 0); }
    65% { clip: rect(29px, 9999px, 31px, 0); }
    70% { clip: rect(47px, 9999px, 100px, 0); }
    75% { clip: rect(22px, 9999px, 73px, 0); }
    80% { clip: rect(52px, 9999px, 18px, 0); }
    85% { clip: rect(34px, 9999px, 53px, 0); }
    90% { clip: rect(59px, 9999px, 68px, 0); }
    95% { clip: rect(40px, 9999px, 70px, 0); }
    100% { clip: rect(95px, 9999px, 35px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); }
    5% { clip: rect(52px, 9999px, 74px, 0); }
    10% { clip: rect(79px, 9999px, 85px, 0); }
    15% { clip: rect(75px, 9999px, 5px, 0); }
    20% { clip: rect(67px, 9999px, 61px, 0); }
    25% { clip: rect(14px, 9999px, 79px, 0); }
    30% { clip: rect(1px, 9999px, 66px, 0); }
    35% { clip: rect(86px, 9999px, 30px, 0); }
    40% { clip: rect(23px, 9999px, 98px, 0); }
    45% { clip: rect(85px, 9999px, 72px, 0); }
    50% { clip: rect(71px, 9999px, 75px, 0); }
    55% { clip: rect(2px, 9999px, 48px, 0); }
    60% { clip: rect(30px, 9999px, 16px, 0); }
    65% { clip: rect(59px, 9999px, 50px, 0); }
    70% { clip: rect(41px, 9999px, 62px, 0); }
    75% { clip: rect(2px, 9999px, 82px, 0); }
    80% { clip: rect(47px, 9999px, 73px, 0); }
    85% { clip: rect(3px, 9999px, 27px, 0); }
    90% { clip: rect(26px, 9999px, 55px, 0); }
    95% { clip: rect(42px, 9999px, 97px, 0); }
    100% { clip: rect(38px, 9999px, 49px, 0); }
}

.tagline {
    font-family: var(--font-retro);
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.subtitle {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
    letter-spacing: 4px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

.hero-mushroom {
    position: relative;
    cursor: pointer;
    z-index: 1; /* Behind scene-ground (z-index: 2) */
    margin-top: 20px; /* Bump down 20px total */
}

/* Click me indicator */
.hero-mushroom::after {
    content: '👆 CLICK ME!';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--gold);
    text-shadow: 2px 2px 0 var(--bg-dark);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}

.hero-mushroom:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
    animation: clickMeBounce 0.6s ease-in-out infinite;
}

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

.big-mushroom {
    width: 300px;
    height: auto;
    transition: transform 0.2s, filter 0.2s;
    animation: mushroomBreathe 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.3)) drop-shadow(4px 8px 0 rgba(0, 0, 0, 0.3));
}

.big-mushroom:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 80px rgba(127, 255, 0, 0.4));
}

.big-mushroom.clicked {
    animation: mushroomClick 0.2s ease-out;
}

@keyframes mushroomBreathe {
    0%, 100% { transform: scale(1) translateX(0) rotate(0deg); }
    25% { transform: scale(1.01) translateX(-3px) rotate(-1deg); }
    75% { transform: scale(1.01) translateX(3px) rotate(1deg); }
}

@keyframes mushroomClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.click-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    animation: particleBurst 0.6s ease-out forwards;
    box-shadow: 0 0 6px var(--gold);
}

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

.spore-counter {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-pixel);
    font-size: 1.5rem;
    color: var(--gold);
    text-shadow: 2px 2px 0 var(--bg-dark);
    opacity: 0;
    pointer-events: none;
}

.spore-counter.show {
    animation: floatUp 0.8s ease-out forwards;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-60px);
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 50px; /* Above the ground */
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--text);
    background: rgba(13, 26, 13, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    z-index: 10;
    animation: scrollBounce 2s ease-in-out infinite;
    text-shadow: 1px 1px 0 var(--bg-dark);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.scroll-indicator:hover {
    background: rgba(127, 255, 0, 0.2);
    color: var(--accent);
}

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

/* ============================================
   Buttons
   ============================================ */

.btn {
    font-family: var(--font-pixel);
    font-size: 0.875rem;
    padding: 1rem 1.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.1s;
}

.pixel-btn {
    border: 4px solid;
    position: relative;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: #5cb300;
    box-shadow:
        inset -4px -4px 0 #5cb300,
        inset 4px 4px 0 #99ff33,
        6px 6px 0 var(--bg-dark);
}

.btn-primary:hover {
    transform: translate(3px, 3px);
    box-shadow:
        inset -4px -4px 0 #5cb300,
        inset 4px 4px 0 #99ff33,
        3px 3px 0 var(--bg-dark);
}

.btn-secondary {
    background: var(--bg-panel);
    color: var(--text);
    border-color: #333;
    box-shadow:
        inset -4px -4px 0 #111,
        inset 4px 4px 0 #444,
        6px 6px 0 var(--bg-dark);
}

.btn-secondary:hover {
    transform: translate(3px, 3px);
    box-shadow:
        inset -4px -4px 0 #111,
        inset 4px 4px 0 #444,
        3px 3px 0 var(--bg-dark);
    color: var(--accent);
}

.btn-large {
    font-size: 1rem;
    padding: 1.25rem 2rem;
}

.btn-icon {
    font-size: 1.25rem;
}

/* ============================================
   Section Headers
   ============================================ */

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--accent);
    text-shadow: 3px 3px 0 var(--bg-dark);
    margin-bottom: 1rem;
}

.pixel-divider {
    width: 200px;
    height: 4px;
    margin: 0 auto;
    background: repeating-linear-gradient(
        90deg,
        var(--accent) 0px,
        var(--accent) 8px,
        transparent 8px,
        transparent 16px
    );
}

.section-subtitle {
    font-family: var(--font-retro);
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-top: 1rem;
}

/* ============================================
   Features Section
   ============================================ */

.features {
    padding: 6rem 2rem;
    background: var(--bg-dark);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: var(--bg-panel);
    border: 4px solid #333;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-card h3 {
    font-family: var(--font-pixel);
    font-size: 0.875rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.feature-card p {
    font-family: var(--font-retro);
    font-size: 1.25rem;
    color: var(--text-dim);
}

/* ============================================
   Workers Section
   ============================================ */

.workers {
    padding: 6rem 2rem;
    background:
        linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-forest) 50%, var(--bg-dark) 100%);
}

.workers-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.workers-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.workers-row-locked {
    opacity: 0.85;
}

.workers-hint {
    text-align: center;
    font-family: var(--font-retro);
    font-size: 1.2rem;
    color: var(--gold);
    margin-top: 2rem;
    animation: pulse 2s ease-in-out infinite;
}

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

/* Keep for backwards compat */
.workers-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.worker-card {
    background: var(--bg-panel);
    border: 4px solid #333;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    width: 220px;
    flex-shrink: 0;
}

.worker-card[data-color="red"] { --card-accent: var(--red); }
.worker-card[data-color="blue"] { --card-accent: var(--blue); }
.worker-card[data-color="orange"] { --card-accent: var(--orange); }
.worker-card[data-color="yellow"] { --card-accent: var(--yellow); }
.worker-card[data-color="green"] { --card-accent: var(--green); }
.worker-card[data-color="cyan"] { --card-accent: var(--cyan); }
.worker-card[data-color="purple"] { --card-accent: var(--purple); }
.worker-card[data-color="mystery"] { --card-accent: #666; }

.worker-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--accent));
}

.worker-card {
    cursor: pointer;
    will-change: transform;
}

.worker-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: var(--card-accent, var(--accent));
}

.worker-card.bounce {
    animation: cardBounce 0.35s ease !important;
}

.worker-card.bounce:hover {
    transform: none;
}

@keyframes cardBounce {
    0% { transform: scale(1); }
    25% { transform: scale(0.92) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(2deg); }
    75% { transform: scale(0.97) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Locked worker cards */
.worker-card-locked {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 4px dashed #444;
    cursor: not-allowed;
    overflow: hidden;
}

.worker-card-locked:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: #555;
}

.worker-card-locked h3 {
    color: #666 !important;
    letter-spacing: 4px;
}

.worker-card-locked .worker-desc {
    color: #555;
    font-style: italic;
}

.worker-card-locked .worker-stat {
    border-top-color: #333;
}

.worker-card-locked .stat-value {
    color: #666;
    letter-spacing: 2px;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.lock-icon {
    font-size: 3rem;
    opacity: 0.3;
    filter: grayscale(100%);
    animation: lockPulse 3s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.worker-sprite-locked {
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    background: linear-gradient(45deg, #222 25%, #2a2a2a 25%, #2a2a2a 50%, #222 50%, #222 75%, #2a2a2a 75%);
    background-size: 16px 16px;
    border-radius: 50%;
    position: relative;
    animation: mysteryShimmer 4s linear infinite;
}

@keyframes mysteryShimmer {
    0% { background-position: 0 0; }
    100% { background-position: 64px 64px; }
}

/* Sprite sheet animation for worker idle animations */
/* Sprites are 432x48 (9 frames of 48x48 each) */
.worker-sprite {
    width: 96px;  /* 48 * 2 for scale */
    height: 96px; /* 48 * 2 for scale */
    margin: 0 auto 1rem;
    background-size: 864px 96px; /* 432*2 x 48*2 for crisp scaling */
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    animation: spriteIdle 0.9s steps(9) infinite;
}

@keyframes spriteIdle {
    0% { background-position: 0 0; }
    100% { background-position: -864px 0; } /* Full width of scaled sprite sheet */
}

/* Walk animation keyframes - 4 frames at 192x48, scaled 2x to 384x96 */
@keyframes spriteWalk {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; } /* 192*2 = 384px */
}

/* On hover, switch to walk animation */
.worker-card:hover .worker-sprite {
    background-size: 384px 96px; /* 192*2 x 48*2 for walk sprites */
    animation: spriteWalk 0.4s steps(4) infinite;
}

/* Keep old class for backwards compat */
.worker-image {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worker-image img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.worker-card h3 {
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    color: var(--card-accent, var(--accent));
    margin-bottom: 0.75rem;
}

.worker-desc {
    font-family: var(--font-retro);
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    min-height: 50px;
}

.worker-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 2px dashed #333;
    font-family: var(--font-retro);
    font-size: 1rem;
}

.stat-icon {
    font-size: 1rem;
}

.stat-label {
    color: var(--text-dim);
}

.stat-value {
    color: var(--gold);
    font-weight: bold;
}

/* ============================================
   Village Section - Tabbed Game Scenes
   ============================================ */

.village {
    padding: 6rem 2rem;
    background: var(--bg-dark);
}

/* Village Tabs */
.village-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.village-tab {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-panel);
    color: var(--text-dim);
    border: 3px solid #333;
    cursor: pointer;
    transition: all 0.2s;
}

.village-tab:hover {
    background: #252525;
    color: var(--text);
    border-color: #444;
}

.village-tab.active {
    background: var(--accent);
    color: var(--bg-dark);
    border-color: #5cb300;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Village Content Container */
.village-content {
    max-width: 1100px;
    margin: 0 auto;
}

/* Village Panel (each tab's content) */
.village-panel {
    display: none;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.village-panel.active {
    display: grid;
}

/* Game Scene Container */
.village-game-scene {
    position: relative;
    height: 350px;
    border: 4px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

/* Reuse forest and ground from hero */
.village-game-scene .scene-forest {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/forest_bg.png') repeat-x bottom;
    background-size: auto 100%;
    image-rendering: pixelated;
}

.village-game-scene .scene-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: url('assets/foreground_tile.png') repeat-x top;
    background-size: auto 100%;
    image-rendering: pixelated;
    z-index: 2;
}

/* Decorative mushrooms in scenes */
.scene-deco {
    position: absolute;
    image-rendering: pixelated;
    z-index: 3;
    animation: shroomBob 3s ease-in-out infinite;
}

.deco-a { bottom: 60px; left: 5%; width: 25px; animation-delay: 0s; }
.deco-b { bottom: 55px; right: 8%; width: 20px; animation-delay: 0.7s; }
.deco-c { bottom: 58px; left: 10%; width: 22px; animation-delay: 0.3s; }
.deco-d { bottom: 62px; right: 5%; width: 28px; animation-delay: 1s; }
.deco-e { bottom: 55px; right: 15%; width: 24px; animation-delay: 0.5s; }
.deco-f { bottom: 60px; left: 8%; width: 20px; animation-delay: 0.2s; }
.deco-g { bottom: 58px; left: 25%; width: 26px; animation-delay: 0.8s; }
.deco-h { bottom: 55px; right: 10%; width: 22px; animation-delay: 1.2s; }

/* ---- Houses Tab Styles ---- */
.house-stack {
    position: absolute;
    bottom: 60px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 3;
}

.house-level {
    width: 70px;
    image-rendering: pixelated;
    margin-bottom: -20px;
    filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.3));
}

.house-level.house-top {
    margin-bottom: 0;
}

.house-pos-1 { left: 5%; }
.house-pos-2 { left: 22%; }
.house-pos-3 { left: 40%; }
.house-pos-4 { left: 58%; }
.house-pos-5 { left: 78%; }

.house-stack:hover .house-level {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* ---- Gardens Tab Styles ---- */
.garden {
    position: absolute;
    bottom: 60px;
    width: 80px;
    image-rendering: pixelated;
    z-index: 3;
    animation: gardenPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.3));
}

.garden-1 { left: 15%; animation-delay: 0s; }
.garden-2 { left: 40%; animation-delay: 0.5s; }
.garden-3 { left: 65%; animation-delay: 1s; }

@keyframes gardenPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(127, 255, 0, 0.3)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(127, 255, 0, 0.5)); }
}

.scene-main-shroom {
    position: absolute;
    bottom: 55px;
    right: 5%;
    width: 100px;
    image-rendering: pixelated;
    z-index: 4;
    animation: mushroomBreathe 3s ease-in-out infinite;
}

/* ---- Labs Tab Styles ---- */
.lab-building {
    position: absolute;
    bottom: 60px;
    z-index: 3;
}

.lab-1 { left: 20%; }
.lab-2 { right: 20%; }

.lab-sprite {
    width: 90px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.3));
}

.lab-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(51, 102, 230, 0.4) 0%, transparent 70%);
    animation: labPulse 2s ease-in-out infinite;
}

@keyframes labPulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

.hub-particles {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(153, 51, 204, 0.3) 0%, transparent 70%);
    animation: hubFloat 3s ease-in-out infinite;
}

@keyframes hubFloat {
    0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.7; transform: translateX(-50%) translateY(-10px); }
}

/* ---- Great Tree Tab Styles ---- */
.tree-scene {
    background: linear-gradient(180deg, rgba(153, 51, 204, 0.1) 0%, transparent 50%);
}

.great-tree {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.tree-sprite {
    width: 180px;
    image-rendering: pixelated;
    animation: treeBreathe 4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4));
}

@keyframes treeBreathe {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4)); }
    50% { transform: scale(1.03); filter: drop-shadow(0 0 50px rgba(255, 215, 0, 0.6)); }
}

.tree-aura {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(127, 255, 0, 0.1) 40%, transparent 70%);
    animation: auraRotate 10s linear infinite;
    pointer-events: none;
}

@keyframes auraRotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* ---- Info Panel Styles ---- */
.village-info-panel {
    background: var(--bg-panel);
    border: 4px solid #333;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.village-info-panel h3 {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.village-info-panel p {
    font-family: var(--font-retro);
    font-size: 1.3rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.village-info-panel .highlight {
    color: var(--gold);
    font-weight: bold;
}

.feature-list {
    list-style: none;
    font-family: var(--font-retro);
    font-size: 1.2rem;
    color: var(--text-dim);
}

.feature-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.feature-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* Prestige Panel Special */
.prestige-panel {
    border-color: #4a3060;
    background: linear-gradient(135deg, var(--bg-panel) 0%, rgba(74, 48, 96, 0.3) 100%);
}

.wisdom-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border: 2px dashed var(--gold);
    text-align: center;
    animation: wisdomGlow 2s ease-in-out infinite;
}

@keyframes wisdomGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
}

.wisdom-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.wisdom-text {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--gold);
}

/* Responsive Village */
@media (max-width: 800px) {
    .village-panel {
        grid-template-columns: 1fr;
    }

    .village-game-scene {
        height: 280px;
    }

    .village-tabs {
        gap: 0.25rem;
    }

    .village-tab {
        font-size: 0.6rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   Resources Section - High Fidelity
   ============================================ */

.resources {
    padding: 6rem 2rem;
    background: linear-gradient(180deg,
        var(--bg-dark) 0%,
        rgba(20, 35, 20, 1) 30%,
        rgba(25, 45, 25, 1) 70%,
        var(--bg-dark) 100%);
    position: relative;
    overflow: hidden;
}

.resources::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(127, 255, 0, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.resources-showcase {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.resource-card {
    background: linear-gradient(145deg, rgba(30, 40, 30, 0.95), rgba(20, 30, 20, 0.98));
    border: 3px solid #2a3a2a;
    border-radius: 12px;
    padding: 2rem;
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--resource-color, var(--accent));
    opacity: 0.8;
}

.resource-card:hover {
    transform: translateY(-8px);
    border-color: var(--resource-color, var(--accent));
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px var(--resource-glow, rgba(127, 255, 0, 0.1));
}

.resource-visual {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0.5;
    animation: resourcePulse 3s ease-in-out infinite;
}

@keyframes resourcePulse {
    0%, 100% { transform: scale(0.9); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.6; }
}

/* CRT Scanline overlay for all resource visuals */
.resource-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: overlay;
    animation: crtFlicker 0.1s infinite;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.85; }
}

/* CRT phosphor glow effect */
.resource-visual::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background: radial-gradient(ellipse at center,
        var(--crt-glow, rgba(255, 255, 255, 0.1)) 0%,
        transparent 60%);
    pointer-events: none;
    animation: phosphorPulse 2s ease-in-out infinite;
}

@keyframes phosphorPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ========== SPORES VISUAL - Enhanced ========== */
.resource-spores {
    --resource-color: #fffef0;
    --resource-glow: rgba(255, 255, 240, 0.35);
    --crt-glow: rgba(255, 253, 230, 0.25);
}

.spore-glow {
    background: radial-gradient(circle,
        rgba(255, 255, 250, 0.9) 0%,
        rgba(255, 253, 240, 0.6) 30%,
        rgba(245, 240, 200, 0.3) 60%,
        transparent 80%);
}

.spore-collector {
    position: relative;
    width: 90px;
    height: 90px;
}

.spore-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 1) 0%, transparent 30%),
        radial-gradient(circle at 30% 30%, #fffef8 0%, #f8f4e8 30%, #f0e8d0 60%, #e0d4b8 100%);
    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(255, 255, 250, 1),
        0 0 80px rgba(255, 253, 240, 0.7),
        0 0 120px rgba(245, 240, 200, 0.4),
        inset 0 -8px 20px rgba(180, 160, 100, 0.25),
        inset 0 2px 10px rgba(255, 255, 255, 0.8);
    animation: sporeCorePulse 2s ease-in-out infinite;
}

@keyframes sporeCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 40px rgba(255, 255, 250, 1),
            0 0 80px rgba(255, 253, 240, 0.7),
            0 0 120px rgba(245, 240, 200, 0.4),
            inset 0 -8px 20px rgba(180, 160, 100, 0.25),
            inset 0 2px 10px rgba(255, 255, 255, 0.8);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow:
            0 0 50px rgba(255, 255, 255, 1),
            0 0 100px rgba(255, 253, 240, 0.9),
            0 0 150px rgba(245, 240, 200, 0.6),
            inset 0 -8px 20px rgba(180, 160, 100, 0.25),
            inset 0 2px 10px rgba(255, 255, 255, 0.9);
    }
}

.spore-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 250, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 250, 0.3);
    animation: sporeRingPulse 3s ease-in-out infinite;
}

.spore-ring::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 1px solid rgba(255, 255, 250, 0.2);
    border-radius: 50%;
    animation: sporeRingPulse 3s ease-in-out infinite 0.5s;
}

@keyframes sporeRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.15; }
}

.spore-particles { position: absolute; width: 100%; height: 100%; }

.spore-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 0%, #fffef0 50%, #f5f0d8 100%);
    border-radius: 50%;
    box-shadow:
        0 0 12px rgba(255, 255, 255, 1),
        0 0 24px rgba(255, 253, 240, 0.8);
}

.spore-particle:nth-child(1) { top: 5%; left: 15%; animation: sporeFloat 4s ease-in-out infinite 0s; }
.spore-particle:nth-child(2) { top: 10%; right: 10%; animation: sporeFloat 3.5s ease-in-out infinite 0.5s; }
.spore-particle:nth-child(3) { bottom: 15%; left: 8%; animation: sporeFloat 4.5s ease-in-out infinite 1s; }
.spore-particle:nth-child(4) { bottom: 10%; right: 15%; animation: sporeFloat 3.8s ease-in-out infinite 1.5s; }
.spore-particle:nth-child(5) { top: 45%; left: 0%; animation: sporeFloat 4.2s ease-in-out infinite 0.8s; }
.spore-particle:nth-child(6) { top: 45%; right: 0%; animation: sporeFloat 3.6s ease-in-out infinite 1.2s; }

@keyframes sporeFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    25% { transform: translate(6px, -10px) scale(1.2); opacity: 1; }
    50% { transform: translate(-4px, -15px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(-8px, -6px) scale(1.1); opacity: 0.85; }
}

/* ========== CAPS VISUAL - Enhanced with Red/Shaker color ========== */
.resource-caps {
    --resource-color: #e84040;
    --resource-glow: rgba(232, 64, 64, 0.3);
    --crt-glow: rgba(255, 100, 80, 0.2);
}

.cap-glow {
    background: radial-gradient(circle,
        rgba(255, 80, 60, 0.7) 0%,
        rgba(232, 64, 64, 0.5) 40%,
        rgba(180, 40, 40, 0.2) 70%,
        transparent 85%);
}

.cap-display {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cap-icon {
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 0 15px rgba(255, 80, 60, 0.6));
}

.cap-top {
    width: 56px;
    height: 32px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 180, 160, 0.6) 0%, transparent 40%),
        linear-gradient(180deg,
            #ff6b5b 0%,
            #e84040 25%,
            #cc2d2d 60%,
            #a02020 100%);
    border-radius: 50% 50% 35% 35%;
    position: relative;
    box-shadow:
        0 6px 25px rgba(232, 64, 64, 0.7),
        0 0 40px rgba(255, 80, 60, 0.4),
        inset 0 -10px 20px rgba(80, 20, 20, 0.4),
        inset 0 6px 15px rgba(255, 200, 180, 0.5);
    animation: capBounce 2.5s ease-in-out infinite;
}

.cap-top::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 10px;
    width: 14px;
    height: 10px;
    background: rgba(255, 240, 230, 0.6);
    border-radius: 50%;
    filter: blur(2px);
}

.cap-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.03) 3px,
        rgba(255, 255, 255, 0.03) 6px
    );
    border-radius: inherit;
    pointer-events: none;
}

@keyframes capBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-1deg); }
    50% { transform: translateY(-6px) rotate(0deg); }
    75% { transform: translateY(-4px) rotate(1deg); }
}

.cap-stem {
    width: 18px;
    height: 20px;
    background: linear-gradient(180deg, #f8f0e8 0%, #e8d8c8 50%, #d8c8b8 100%);
    margin: -5px auto 0;
    border-radius: 4px 4px 8px 8px;
    box-shadow:
        inset -4px 0 8px rgba(0, 0, 0, 0.15),
        inset 4px 0 8px rgba(255, 255, 255, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.2);
}

.cap-stack {
    position: absolute;
    bottom: 0;
    right: -5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0.85;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(232, 64, 64, 0.5));
}

.cap-piece {
    width: 24px;
    height: 13px;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(255, 150, 130, 0.4) 0%, transparent 50%),
        linear-gradient(180deg, #ff5545 0%, #cc2d2d 50%, #991515 100%);
    border-radius: 50% 50% 25% 25%;
    box-shadow:
        0 2px 8px rgba(200, 40, 40, 0.5),
        inset 0 -4px 8px rgba(60, 10, 10, 0.3),
        inset 0 2px 4px rgba(255, 180, 160, 0.4);
    animation: capStackFloat 3s ease-in-out infinite;
}

.cap-piece:nth-child(1) { animation-delay: 0s; transform: translateX(3px) rotate(-5deg); }
.cap-piece:nth-child(2) { animation-delay: 0.4s; transform: translateX(-2px) rotate(3deg); }
.cap-piece:nth-child(3) { animation-delay: 0.8s; transform: translateX(5px) rotate(-2deg); }

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

/* ========== WISDOM VISUAL - Epic Ancient style ========== */
.resource-wisdom {
    --resource-color: #ffd700;
    --resource-glow: rgba(255, 215, 0, 0.35);
    --crt-glow: rgba(255, 220, 100, 0.25);
}

.wisdom-glow {
    background: radial-gradient(circle,
        rgba(255, 230, 150, 0.8) 0%,
        rgba(255, 200, 80, 0.6) 25%,
        rgba(200, 150, 50, 0.4) 50%,
        rgba(150, 100, 30, 0.2) 70%,
        transparent 85%);
}

.wisdom-orb {
    position: relative;
    width: 85px;
    height: 85px;
}

.wisdom-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 35% 35%,
            #fff8d0 0%,
            #ffd700 30%,
            #daa520 55%,
            #b8860b 75%,
            #8b6914 100%);
    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(255, 215, 0, 1),
        0 0 80px rgba(255, 200, 50, 0.8),
        0 0 120px rgba(218, 165, 32, 0.5),
        0 0 160px rgba(184, 134, 11, 0.3),
        inset 0 -10px 25px rgba(100, 60, 10, 0.5),
        inset 0 6px 20px rgba(255, 250, 200, 0.7);
    animation: wisdomPulse 4s ease-in-out infinite;
}

/* Ancient crack/rune pattern on wisdom orb */
.wisdom-core::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 60% 40%, rgba(255, 255, 200, 0.3) 0%, transparent 20%),
        linear-gradient(45deg, transparent 45%, rgba(255, 220, 100, 0.2) 50%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(255, 220, 100, 0.2) 50%, transparent 55%);
    border-radius: 50%;
    animation: wisdomShimmer 3s linear infinite;
}

@keyframes wisdomShimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wisdom-core::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(255, 220, 150, 0.3);
    border-radius: 50%;
}

@keyframes wisdomPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 40px rgba(255, 215, 0, 1),
            0 0 80px rgba(255, 200, 50, 0.8),
            0 0 120px rgba(218, 165, 32, 0.5),
            0 0 160px rgba(184, 134, 11, 0.3),
            inset 0 -10px 25px rgba(100, 60, 10, 0.5),
            inset 0 6px 20px rgba(255, 250, 200, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 50px rgba(255, 215, 0, 1),
            0 0 100px rgba(255, 200, 50, 1),
            0 0 150px rgba(218, 165, 32, 0.7),
            0 0 200px rgba(184, 134, 11, 0.4),
            inset 0 -10px 25px rgba(100, 60, 10, 0.5),
            inset 0 6px 20px rgba(255, 250, 200, 0.9);
    }
}

.wisdom-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    animation: wisdomAura 4s ease-in-out infinite;
}

.wisdom-aura::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 50%;
}

.wisdom-aura::after {
    content: '';
    position: absolute;
    top: -24px;
    left: -24px;
    right: -24px;
    bottom: -24px;
    border: 1px dashed rgba(255, 215, 0, 0.15);
    border-radius: 50%;
    animation: wisdomAuraOuter 8s linear infinite reverse;
}

@keyframes wisdomAura {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 0.3; }
}

@keyframes wisdomAuraOuter {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wisdom-runes {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: runesRotate 15s linear infinite;
}

@keyframes runesRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rune {
    position: absolute;
    font-size: 16px;
    color: rgba(255, 215, 0, 0.9);
    text-shadow:
        0 0 10px rgba(255, 215, 0, 1),
        0 0 20px rgba(255, 200, 50, 0.8),
        0 0 30px rgba(218, 165, 32, 0.5);
    animation: runeGlow 2s ease-in-out infinite;
}

.rune:nth-child(1) { top: -8px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.rune:nth-child(2) { top: 50%; right: -8px; transform: translateY(-50%); animation-delay: 0.5s; }
.rune:nth-child(3) { bottom: -8px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.rune:nth-child(4) { top: 50%; left: -8px; transform: translateY(-50%); animation-delay: 1.5s; }

@keyframes runeGlow {
    0%, 100% { opacity: 0.7; text-shadow: 0 0 10px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 200, 50, 0.8); }
    50% { opacity: 1; text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 200, 50, 1), 0 0 45px rgba(218, 165, 32, 0.6); }
}

/* CRT RGB chromatic aberration on hover */
.resource-card:hover .resource-visual {
    animation: crtRgbShift 0.15s ease-out;
}

@keyframes crtRgbShift {
    0% { filter: none; }
    25% { filter: drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.15)) drop-shadow(2px 0 0 rgba(0, 255, 255, 0.15)); }
    50% { filter: drop-shadow(-1px 0 0 rgba(255, 0, 0, 0.1)) drop-shadow(1px 0 0 rgba(0, 255, 255, 0.1)); }
    100% { filter: none; }
}

/* Resource Info */
.resource-info { text-align: center; width: 100%; }
.resource-title {
    font-family: var(--font-pixel); font-size: 1rem;
    color: var(--resource-color, var(--accent));
    margin-bottom: 0.5rem; letter-spacing: 2px;
    text-shadow: 0 0 20px var(--resource-glow, rgba(127, 255, 0, 0.3));
}
.resource-counter { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-bottom: 1rem; }
.counter-value { font-family: var(--font-retro); font-size: 2rem; color: #fff; font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.counter-rate { font-family: var(--font-retro); font-size: 1rem; color: var(--accent); opacity: 0.9; }
.wisdom-bonus { color: var(--gold) !important; }
.resource-description { font-family: var(--font-retro); font-size: 1.1rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 1rem; }
.resource-producers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.producer-tag {
    font-family: var(--font-retro); font-size: 0.85rem; padding: 0.25rem 0.6rem;
    background: rgba(127, 255, 0, 0.1); border: 1px solid rgba(127, 255, 0, 0.3);
    border-radius: 4px; color: var(--accent);
}
.prestige-tag { background: rgba(212, 168, 75, 0.15); border-color: rgba(212, 168, 75, 0.4); color: var(--gold); }
.resource-unlock { margin-top: 0.5rem; }
.unlock-badge {
    font-family: var(--font-retro); font-size: 0.9rem; color: var(--orange);
    padding: 0.3rem 0.8rem; border: 1px dashed var(--orange); border-radius: 4px; display: inline-block;
}
.wisdom-badge { color: var(--gold); border-color: var(--gold); background: rgba(212, 168, 75, 0.1); }

/* Counter tick animation */
.counter-value {
    display: inline-block;
    transition: color 0.1s ease;
    position: relative;
}

.counter-tick {
    animation: counterTick 0.15s ease-out;
}

@keyframes counterTick {
    0% {
        transform: scale(1);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px var(--resource-color, rgba(127, 255, 0, 0.5));
    }
    100% {
        transform: scale(1);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* Paused state styling */
.counter-paused {
    color: var(--resource-color, var(--accent)) !important;
}

.counter-paused::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--resource-color, var(--accent));
    border-radius: 2px;
    opacity: 0.6;
    animation: pausePulse 1s ease-in-out infinite;
}

@keyframes pausePulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.8); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1); }
}

/* Rate display enhancement */
.counter-rate {
    transition: all 0.3s ease;
}

.resource-card:hover .counter-rate {
    opacity: 0.6;
}

/* ============================================
   Wisdom Mysterious State - Text Glitch Effect
   ============================================ */

.wisdom-mysterious {
    position: relative;
    overflow: hidden;
}

/* Scanline overlay */
.wisdom-interference {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0.15) 2px
    );
    animation: scanlineFlicker 0.1s steps(2) infinite;
}

.wisdom-interference::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 215, 0, 0.03) 50%,
        transparent 100%
    );
    animation: scanlineMove 4s linear infinite;
}

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

@keyframes scanlineMove {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

/* Scrambled text container */
.wisdom-scrambled {
    position: relative;
    z-index: 2;
}

/* The actual glitching text - JS handles the character corruption */
.scramble-text {
    position: relative;
    display: inline-block;
    font-family: var(--font-retro);
    color: rgba(255, 255, 255, 0.95);
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.5),
        2px 0 0 rgba(255, 180, 50, 0.25),
        -2px 0 0 rgba(180, 140, 60, 0.25);
    animation: textFlicker 3s steps(1) infinite;
}

/* Pseudo element chromatic layers - gold/amber theme */
.scramble-text::before,
.scramble-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Warm gold offset - left */
.scramble-text::before {
    color: rgba(255, 180, 50, 0.3);
    animation: glitchWarm 2s steps(1) infinite;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%);
}

/* Cool amber offset - right */
.scramble-text::after {
    color: rgba(200, 150, 80, 0.25);
    animation: glitchCool 2s steps(1) infinite;
    clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%, 0 80%, 100% 80%, 100% 95%, 0 95%);
}

@keyframes glitchWarm {
    0%, 100% { transform: translateX(-2px); opacity: 0.3; }
    5% { transform: translateX(-3px); opacity: 0.4; }
    6% { transform: translateX(-1px); opacity: 0.2; }
    15% { transform: translateX(-2px); opacity: 0.3; }
    20% { transform: translateX(-4px); opacity: 0.5; clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%, 0 70%, 100% 70%, 100% 90%, 0 90%); }
    21% { transform: translateX(-2px); opacity: 0.3; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
    40% { transform: translateX(-1px); opacity: 0.25; }
    55% { transform: translateX(-3px); opacity: 0.35; }
    60% { transform: translateX(-5px); opacity: 0.5; clip-path: polygon(0 5%, 100% 5%, 100% 25%, 0 25%, 0 55%, 100% 55%, 100% 85%, 0 85%); }
    61% { transform: translateX(-2px); opacity: 0.3; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
    75% { transform: translateX(-2px); opacity: 0.3; }
    85% { transform: translateX(-1px); opacity: 0.2; }
    90% { transform: translateX(-3px); opacity: 0.4; }
    91% { transform: translateX(-2px); opacity: 0.3; }
}

@keyframes glitchCool {
    0%, 100% { transform: translateX(2px); opacity: 0.25; }
    8% { transform: translateX(3px); opacity: 0.35; }
    9% { transform: translateX(1px); opacity: 0.2; }
    25% { transform: translateX(2px); opacity: 0.25; }
    30% { transform: translateX(4px); opacity: 0.4; clip-path: polygon(0 15%, 100% 15%, 100% 45%, 0 45%, 0 75%, 100% 75%, 100% 100%, 0 100%); }
    31% { transform: translateX(2px); opacity: 0.25; clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%, 0 80%, 100% 80%, 100% 95%, 0 95%); }
    50% { transform: translateX(1px); opacity: 0.2; }
    65% { transform: translateX(3px); opacity: 0.35; }
    70% { transform: translateX(5px); opacity: 0.45; clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%, 0 60%, 100% 60%, 100% 90%, 0 90%); }
    71% { transform: translateX(2px); opacity: 0.25; clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%, 0 80%, 100% 80%, 100% 95%, 0 95%); }
    80% { transform: translateX(2px); opacity: 0.25; }
    95% { transform: translateX(1px); opacity: 0.2; }
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.85; }
    10% { opacity: 1; }
    15% { opacity: 0.9; text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 3px 0 0 rgba(255, 180, 50, 0.35), -3px 0 0 rgba(180, 140, 60, 0.35); }
    16% { opacity: 1; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 2px 0 0 rgba(255, 180, 50, 0.25), -2px 0 0 rgba(180, 140, 60, 0.25); }
    40% { opacity: 0.95; }
    45% { opacity: 1; }
    70% { opacity: 1; text-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 4px 0 0 rgba(255, 180, 50, 0.45), -4px 0 0 rgba(180, 140, 60, 0.45); }
    71% { text-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 2px 0 0 rgba(255, 180, 50, 0.25), -2px 0 0 rgba(180, 140, 60, 0.25); }
    85% { opacity: 0.9; }
    90% { opacity: 1; }
}

/* Title styling - stronger effect */
.wisdom-scrambled .resource-title.scramble-text {
    text-shadow:
        0 0 12px rgba(255, 215, 0, 0.6),
        3px 0 0 rgba(255, 180, 50, 0.35),
        -3px 0 0 rgba(180, 140, 60, 0.35);
    animation: titleFlicker 2s steps(1) infinite;
}

.wisdom-scrambled .resource-title.scramble-text::before {
    color: rgba(255, 200, 80, 0.35);
}

.wisdom-scrambled .resource-title.scramble-text::after {
    color: rgba(220, 170, 100, 0.3);
}

@keyframes titleFlicker {
    0%, 100% {
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 3px 0 0 rgba(255, 180, 50, 0.35), -3px 0 0 rgba(180, 140, 60, 0.35);
    }
    10% {
        text-shadow: 0 0 18px rgba(255, 215, 0, 0.9), 5px 0 0 rgba(255, 180, 50, 0.5), -5px 0 0 rgba(180, 140, 60, 0.5);
    }
    11% {
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 3px 0 0 rgba(255, 180, 50, 0.35), -3px 0 0 rgba(180, 140, 60, 0.35);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 3px 0 0 rgba(255, 180, 50, 0.35), -3px 0 0 rgba(180, 140, 60, 0.35);
    }
    55% {
        text-shadow: 0 0 25px rgba(255, 215, 0, 1), 6px 0 0 rgba(255, 180, 50, 0.6), -6px 0 0 rgba(180, 140, 60, 0.6);
    }
    56% {
        text-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 3px 0 0 rgba(255, 180, 50, 0.35), -3px 0 0 rgba(180, 140, 60, 0.35);
    }
}

/* Counter value */
.wisdom-scrambled .counter-value.scramble-text {
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.5),
        2px 0 0 rgba(255, 0, 64, 0.45),
        -2px 0 0 rgba(0, 255, 255, 0.45);
}

/* Rate text */
.wisdom-scrambled .counter-rate.scramble-text {
    text-shadow:
        0 0 6px rgba(255, 215, 0, 0.4),
        2px 0 0 rgba(255, 0, 64, 0.35),
        -2px 0 0 rgba(0, 255, 255, 0.35);
}

/* Description */
.wisdom-scrambled .resource-description.scramble-text {
    line-height: 1.6;
    text-shadow:
        0 0 5px rgba(255, 215, 0, 0.3),
        1px 0 0 rgba(255, 0, 64, 0.25),
        -1px 0 0 rgba(0, 255, 255, 0.25);
}

/* Producer tags */
.wisdom-scrambled .producer-tag.scramble-text {
    text-shadow:
        0 0 4px rgba(255, 215, 0, 0.3),
        1px 0 0 rgba(255, 0, 64, 0.2),
        -1px 0 0 rgba(0, 255, 255, 0.2);
}

/* Hint at bottom */
.wisdom-discover-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    text-align: center;
    z-index: 10;
}

.wisdom-discover-hint span {
    font-family: var(--font-retro);
    font-size: 0.95rem;
    color: rgba(255, 215, 0, 0.9);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* ============================================
   CTA Section
   ============================================ */

.cta {
    padding: 6rem 2rem;
    background:
        radial-gradient(ellipse at center, rgba(127, 255, 0, 0.1) 0%, transparent 60%),
        var(--bg-dark);
    text-align: center;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta h2 {
    font-family: var(--font-pixel);
    font-size: 1.75rem;
    color: var(--accent);
    text-shadow: 3px 3px 0 var(--bg-dark);
    margin-bottom: 1rem;
}

.cta p {
    font-family: var(--font-retro);
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
}

.cta-buttons {
    margin-bottom: 2rem;
}

.steam-btn {
    background: linear-gradient(180deg, #1b2838 0%, #171a21 100%);
    color: var(--text) !important;
    border-color: #2a475e;
    box-shadow:
        inset -4px -4px 0 #171a21,
        inset 4px 4px 0 #2a475e,
        6px 6px 0 var(--bg-dark);
}

.steam-btn:hover {
    background: linear-gradient(180deg, #2a475e 0%, #1b2838 100%);
    transform: translate(3px, 3px);
    box-shadow:
        inset -4px -4px 0 #171a21,
        inset 4px 4px 0 #2a475e,
        3px 3px 0 var(--bg-dark);
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-family: var(--font-retro);
    font-size: 1.25rem;
    color: var(--text-dim);
}

.cta-features span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Footer
   ============================================ */

.footer {
    padding: 3rem 2rem;
    background: var(--bg-dark);
    border-top: 4px solid #222;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo img {
    width: 30px;
    height: 30px;
}

.footer-logo span {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--accent);
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    font-family: var(--font-retro);
    font-size: 1.25rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--accent);
}

.copyright {
    font-family: var(--font-retro);
    font-size: 1rem;
    color: var(--text-dim);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-text {
        text-align: center;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .big-mushroom {
        width: 180px;
    }

    .village-showcase {
        grid-template-columns: 1fr;
    }

    .village-scene {
        height: 300px;
    }

    .nav-links a:not(.nav-btn) {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .tagline {
        font-size: 1.5rem;
    }

    .section-header h2 {
        font-size: 1.25rem;
    }

    .btn {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .resources-grid {
        gap: 1rem;
    }

    .resource-item {
        min-width: 100px;
        padding: 1rem;
    }

    .cta h2 {
        font-size: 1.25rem;
    }

    .cta-features {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ============================================
   Scanline Effect (Optional Retro)
   ============================================ */

body::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 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ============================================
   Wiki Coming Soon Modal
   ============================================ */

.wiki-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.wiki-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.wiki-modal {
    background: linear-gradient(145deg, #1a2f1a 0%, #0d1a0d 100%);
    border: 3px solid var(--accent);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 
        0 0 40px rgba(127, 255, 0, 0.3),
        0 0 80px rgba(127, 255, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    text-align: center;
}

.wiki-modal-overlay.active .wiki-modal {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    color: var(--accent);
    background: rgba(127, 255, 0, 0.1);
}

.modal-icon {
    position: relative;
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: modalBounce 2s ease-in-out infinite;
}

.modal-mushroom {
    display: inline-block;
}

.modal-sparkles {
    position: absolute;
    top: -10px;
    right: -20px;
    font-size: 1.5rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

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

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.5; transform: scale(1.2) rotate(15deg); }
}

.modal-title {
    font-family: var(--font-pixel);
    font-size: 1.25rem;
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent-glow);
    margin-bottom: 0.75rem;
    letter-spacing: 2px;
}

.modal-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin: 0 auto 1rem;
    border-radius: 2px;
}

.modal-text {
    font-family: var(--font-retro);
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.modal-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.modal-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(127, 255, 0, 0.08);
    border: 1px solid rgba(127, 255, 0, 0.2);
    border-radius: 8px;
    font-family: var(--font-retro);
    font-size: 1.1rem;
    color: var(--text);
    transition: all 0.2s;
}

.modal-feature:hover {
    background: rgba(127, 255, 0, 0.15);
    border-color: rgba(127, 255, 0, 0.4);
    transform: translateX(4px);
}

.modal-feature .feature-icon {
    font-size: 1.25rem;
}

.modal-progress {
    margin-top: 1rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    width: 75%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #4dff00);
    border-radius: 4px;
    animation: progressPulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px var(--accent-glow);
}

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

.progress-text {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* Mobile adjustments for modal */
@media (max-width: 480px) {
    .wiki-modal {
        padding: 1.75rem;
    }
    
    .modal-title {
        font-size: 1rem;
    }
    
    .modal-icon {
        font-size: 3rem;
    }
    
    .modal-feature {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   Screenshot Carousel
   ============================================ */

.screenshot-carousel {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 4rem;
}

/* Carousel Descriptions */
.carousel-descriptions {
    text-align: center;
    margin-bottom: 1.5rem;
    min-height: 90px;
    position: relative;
}

.carousel-description {
    display: none;
    animation: descFadeIn 0.5s ease-out;
}

.carousel-description.active {
    display: block;
}

.carousel-description h3 {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    text-shadow: 0 0 15px var(--accent-glow);
    letter-spacing: 1px;
}

.carousel-description p {
    font-size: 1.3rem;
    color: var(--text);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

@keyframes descFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Carousel Frame - Pixel Art Style */
.carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 4px solid var(--accent);
    box-shadow:
        0 0 0 2px var(--bg-dark),
        0 0 0 4px #333,
        0 0 40px rgba(127, 255, 0, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #0a150a 0%, #0d1a0d 100%);
}

/* Scanline overlay for retro feel */
.carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 5;
}

/* Corner decorations */
.carousel-container::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(127, 255, 0, 0.15);
    border-radius: 2px;
    pointer-events: none;
    z-index: 4;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
}

/* Active slide glow */
.carousel-slide.active img {
    filter: brightness(1.02);
}

/* Navigation Buttons - Pixel Style */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-panel);
    border: 3px solid var(--accent);
    color: var(--accent);
    width: 48px;
    height: 48px;
    border-radius: 4px;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 0 #1a3a1a,
        0 0 20px rgba(127, 255, 0, 0.2);
}

.carousel-btn:hover {
    background: var(--accent);
    color: var(--bg-dark);
    box-shadow:
        0 4px 0 #4a8a00,
        0 0 30px var(--accent-glow);
    transform: translateY(-50%) scale(1.05);
}

.carousel-btn:active {
    box-shadow: 0 2px 0 #1a3a1a;
    transform: translateY(calc(-50% + 2px));
}

.carousel-prev {
    left: -24px;
}

.carousel-next {
    right: -24px;
}

/* Navigation Dots - Mushroom Cap Style */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 1.75rem;
    padding-bottom: 8px;
}

.carousel-dot {
    width: 20px;
    height: 14px;
    border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
    border: 2px solid #555;
    background: linear-gradient(180deg, #444 0%, #333 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
    transform-origin: bottom center;
}

/* Mushroom stem */
.carousel-dot::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: linear-gradient(90deg, #3a3a3a 0%, #555 50%, #3a3a3a 100%);
    border-radius: 2px 2px 3px 3px;
    border: 1px solid #333;
    border-top: none;
}

/* Cap highlight/spot */
.carousel-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: all 0.3s;
}

.carousel-dot:hover {
    background: linear-gradient(180deg, #5a5a5a 0%, #444 100%);
    border-color: #777;
    transform: scale(1.1) translateY(-2px);
}

.carousel-dot:hover::before {
    background: linear-gradient(90deg, #4a4a4a 0%, #666 50%, #4a4a4a 100%);
}

/* Active mushroom - glowing green */
.carousel-dot.active {
    background: linear-gradient(180deg, var(--accent) 0%, #5a9a00 100%);
    border-color: var(--accent);
    box-shadow:
        0 0 12px var(--accent-glow),
        0 4px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.2) translateY(-2px);
}

.carousel-dot.active::before {
    background: linear-gradient(90deg, #4a7a00 0%, var(--accent) 50%, #4a7a00 100%);
    border-color: #3a5a00;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-dot.active::after {
    background: rgba(255, 255, 255, 0.4);
    width: 8px;
    height: 5px;
}

/* Progress indicator */
.carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    transition: width 0.1s linear;
    z-index: 6;
}

/* Tablet */
@media (max-width: 1024px) {
    .screenshot-carousel {
        max-width: 95%;
        padding: 0 3.5rem;
    }

    .carousel-btn {
        width: 44px;
        height: 44px;
    }

    .carousel-prev {
        left: -20px;
    }

    .carousel-next {
        right: -20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .screenshot-carousel {
        max-width: 100%;
        padding: 0 3rem;
        margin-bottom: 2rem;
    }

    .carousel-descriptions {
        min-height: 80px;
        margin-bottom: 1rem;
    }

    .carousel-description h3 {
        font-size: 0.85rem;
    }

    .carousel-description p {
        font-size: 1.1rem;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border-width: 2px;
    }

    .carousel-prev {
        left: -16px;
    }

    .carousel-next {
        right: -16px;
    }

    .carousel-container {
        border-width: 3px;
    }

    .carousel-dots {
        gap: 18px;
        margin-top: 1.25rem;
        padding-bottom: 6px;
    }

    .carousel-dot {
        width: 16px;
        height: 11px;
    }

    .carousel-dot::before {
        width: 5px;
        height: 6px;
        bottom: -6px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .screenshot-carousel {
        padding: 0 2.5rem;
    }

    .carousel-descriptions {
        min-height: 70px;
    }

    .carousel-description h3 {
        font-size: 0.75rem;
    }

    .carousel-description p {
        font-size: 1rem;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .carousel-prev {
        left: -12px;
    }

    .carousel-next {
        right: -12px;
    }

    .carousel-dots {
        gap: 16px;
        padding-bottom: 5px;
    }

    .carousel-dot {
        width: 14px;
        height: 10px;
    }

    .carousel-dot::before {
        width: 4px;
        height: 5px;
        bottom: -5px;
    }

    .carousel-dot::after {
        width: 4px;
        height: 3px;
        top: 2px;
    }
}

/* ============================================
   Discord Button Styles
   ============================================ */

.discord-link {
    color: #5865F2 !important;
    transition: all 0.2s;
}

.discord-link:hover {
    color: #7289da !important;
    text-shadow: 0 0 10px rgba(88, 101, 242, 0.5);
}

.discord-btn {
    background: linear-gradient(135deg, #5865F2 0%, #7289da 100%) !important;
    border-color: #5865F2 !important;
}

.discord-btn:hover {
    background: linear-gradient(135deg, #7289da 0%, #99aab5 100%) !important;
    box-shadow: 0 0 25px rgba(88, 101, 242, 0.6), 0 0 50px rgba(88, 101, 242, 0.3) !important;
    transform: translateY(-3px);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}