/* ====== ENHANCED PLANET/CIRCLE ELEMENT - OPTIMIZED V2 ====== */
#circle {
    position: absolute;
    top: 210px; /* Adjusted from 1710px based on #events-wrapper top */
    left: -1100px;
    width: 3000px;
    height: 3000px;
    border-radius: 50%;
    background-color: var(--planet-color); /* Base color */
    /* OPTIMIZATION: Simplified base grid and noise */
    background-image:
        /* Fine-grained noise texture (kept) */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
        /* Simplified grid */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200" stroke="rgba(0,0,0,0.15)" stroke-width="1.5" fill="none"/></svg>');
    background-size: 100px 100px, 400px 400px; /* Adjusted sizes */
    transform-style: preserve-3d; /* Keep for event positioning */
    backface-visibility: hidden;
    transition: transform 1.5s ease; /* Keep transition */
    z-index: 9;
    will-change: transform; /* Hint for rotation */
    overflow: hidden;
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.25); /* Slightly reduced shadow */
    transform: rotate(var(--planet-rotation, 0deg));
}

/* OPTIMIZATION: Simplified terrain features in pseudo-elements */
#circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image:
        /* Simplified wavy lines */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M0,100 Q150,80 300,100 M0,200 Q150,180 300,200" stroke="rgba(0,0,0,0.1)" stroke-width="3" fill="none"/></svg>'),
        /* Simplified low-poly hills */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"><path d="M0,300 L100,150 L200,250 L300,100 L400,220 L500,150 L600,300 Z" fill="rgba(0,0,0,0.15)"/><path d="M0,300 L150,200 L300,270 L450,180 L600,250 L600,300 Z" fill="rgba(0,0,0,0.1)"/></svg>');
    background-size: 600px 600px, 1200px 600px;
    background-position: center center, center 85%;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

/* Day planet variations - Simplified */
.day #circle {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
        /* Simplified day terrain */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M0,150 C100,140 200,160 300,150" stroke="rgba(139,69,19,0.15)" stroke-width="4" fill="none" /></svg>'),
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.3) 0%,
            transparent 50% /* Smaller highlight */
        ),
        linear-gradient(
            to bottom,
            rgba(210, 180, 140, 1),
            rgba(222, 184, 135, 1)
        ),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200" stroke="rgba(0,0,0,0.15)" stroke-width="1.5" fill="none"/></svg>');
    background-size: 100px 100px, 600px 600px, 100% 100%, 100% 100%, 400px 400px;
}

.day #circle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image:
        /* Simplified dunes/craters */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M0,100 C100,120 200,80 300,100 C400,120 500,80 600,100 M0,300 C100,320 200,280 300,300 C400,320 500,280 600,300" stroke="rgba(160,82,45,0.1)" stroke-width="2" fill="none"/><circle cx="100" cy="200" r="30" fill="rgba(160,82,45,0.08)" /><circle cx="300" cy="350" r="40" fill="rgba(160,82,45,0.08)" /></svg>'),
        /* Simplified water */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><ellipse cx="400" cy="400" rx="120" ry="90" fill="rgba(65,105,225,0.2)"/><ellipse cx="800" cy="800" rx="150" ry="110" fill="rgba(65,105,225,0.2)"/></svg>');
    background-size: 800px 800px, 2400px 2400px;
    background-position: center, center;
    mix-blend-mode: screen;
    opacity: 0.8; /* Slightly reduced opacity */
}

/* Night planet variations - Simplified */
.night #circle {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E"),
        /* Simplified night terrain */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><path d="M0,150 C100,170 200,130 300,150" stroke="rgba(25,25,112,0.15)" stroke-width="4" fill="none" /></svg>'),
        radial-gradient(
            circle at 70% 30%,
            rgba(75, 0, 130, 0.3) 0%,
            transparent 50%
        ),
        linear-gradient(
            to bottom,
            rgba(47, 79, 79, 1),
            rgba(25, 25, 112, 1)
        ),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200" stroke="rgba(0,0,0,0.25)" stroke-width="1.5" fill="none"/></svg>');
    background-size: 100px 100px, 600px 600px, 100% 100%, 100% 100%, 400px 400px;
}

.night #circle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image:
        /* Simplified ridges/craters */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M0,150 C100,130 200,170 300,150 C400,130 500,170 600,150" stroke="rgba(70,130,180,0.1)" stroke-width="2" fill="none"/><circle cx="150" cy="250" r="50" fill="rgba(0,0,0,0.15)" stroke="rgba(70,130,180,0.05)" stroke-width="1"/><circle cx="350" cy="100" r="40" fill="rgba(0,0,0,0.15)" stroke="rgba(70,130,180,0.05)" stroke-width="1"/></svg>'),
        /* Simplified stars */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><circle cx="50" cy="50" r="1.5" fill="white" opacity="0.7"/><circle cx="150" cy="100" r="1.5" fill="white" opacity="0.6"/><circle cx="350" cy="150" r="1.5" fill="white" opacity="0.8"/><circle cx="250" cy="300" r="1.5" fill="white" opacity="0.7"/><circle cx="100" cy="350" r="1.5" fill="white" opacity="0.6"/></svg>'),
        /* Simplified city lights */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><circle cx="300" cy="300" r="10" fill="rgba(255,255,150,0.1)"/><circle cx="600" cy="250" r="8" fill="rgba(255,255,150,0.1)"/><circle cx="450" cy="500" r="12" fill="rgba(255,255,150,0.1)"/></svg>');
    background-size: 800px 800px, 800px 800px, 1600px 1600px;
    background-position: center, center, center;
    mix-blend-mode: screen;
    opacity: 0.9;
}

/* Madness planet variations - Simplified */
.madness #circle {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E"),
        /* Simplified chaotic pattern */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><path d="M0 100 L100 150 L200 50 L300 200 L400 100 M0 300 L100 250 L200 350 L300 200 L400 300" stroke="rgba(255,0,0,0.15)" stroke-width="3" fill="none" /></svg>'),
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 0, 0, 0.1) 0deg 10deg, /* Wider bands */
            rgba(0, 0, 0, 0.2) 10deg 20deg
        ),
        linear-gradient(
            to bottom,
            rgba(139, 0, 0, 1),
            rgba(128, 0, 0, 1)
        ),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200" stroke="rgba(255,50,50,0.2)" stroke-width="1.5" fill="none"/></svg>');
    background-size: 100px 100px, 800px 800px, 100% 100%, 100% 100%, 400px 400px;
}

.madness #circle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image:
        /* Simplified cracks */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><path d="M500,0 L510,500 L490,1000 M0,500 L500,510 L1000,490 M200,200 L800,800 M800,200 L200,800" stroke="rgba(255,0,0,0.3)" stroke-width="3" fill="none"/></svg>');
    background-size: 2000px 2000px;
    mix-blend-mode: screen;
    opacity: 0.7;
}

/* ====== EVENTS WRAPPER ====== */
#events-wrapper {
    position: absolute;
    /* Corrected top based on #circle's top + radius */
    top: calc(210px + 1500px);
    /* Centered relative to #circle's left + radius */
    left: calc(-1100px + 1500px);
    width: 0;
    height: 0;
    transform-origin: center;
    transition: transform 1.5s ease;
    perspective: 1000px;
    will-change: transform;
    z-index: 8;
    /* Apply the same rotation as #circle */
    transform: rotate(var(--planet-rotation, 0deg));
}


/* ====== PLAYER CHARACTER - OPTIMIZED ====== */
#player {
    position: absolute;
    /* Position relative to the center of the game area */
    left: 450px; /* Center of 900px width */
    /* Position vertically above the visual horizon of the flat circle */
    top: 142px; /* Adjust as needed */
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%); /* Center the player */
    z-index: 10;
    transition: all 0.2s ease;
    will-change: transform; /* Hint for movement */
}

#player::before {
    content: '';
    position: absolute;
    width: 180%; /* Use element size */
    height: 180%; /* Use element size */
    top: 10px;
    left: 0;
    background-color: transparent;
    background-image: url('images/characters/player/hero-small.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Remove filter for potential performance gain, rely on background swap if needed */
}


.night #player::before {
    /* filter: hue-rotate(210deg) brightness(0.85); */ /* Removed filter */
    /* Consider swapping background-image for night version if available */
    /* background-image: url('images/characters/player/hero-small-night.png'); */
    opacity: 0.9; /* Use opacity for night effect */
}

/* Walking animation - Kept simple */
@keyframes walk-cycle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

#player.moving::before {
    animation: walk-cycle 0.6s infinite;
}

/* Magic active state - Use opacity/glow */
#player.magic-active::before {
    /* filter: brightness(1.3) saturate(1.3); */ /* Removed filter */
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.7); /* Use box-shadow for glow */
    opacity: 1;
}

/* Physical attack animation - Kept simple */
@keyframes shield-attack {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-10deg) scale(1.1); } /* Simplified */
}

#player.physical-active::before {
    animation: shield-attack 0.4s ease-in-out;
}

/* ====== EVENTS & DECORATIONS - POSITIONING ====== */
.event,
.decoration {
    position: absolute;
    /* Position calculation now happens in JS (placeEventIcon, initializeUI) */
    /* transform: translate(-50%, 0); */ /* Base transform set in JS */
    transform-origin: center bottom;
    margin-top: -28px; /* Keep protrusion */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added opacity */
    will-change: transform, opacity; /* Hint for hover/animations */
}

/* ====== DECORATIONS - OPTIMIZED SHAPES & ANIMATIONS ====== */

/* Base decoration style */
.decoration {
    width: 56px;
    height: 56px;
    z-index: 1;
}

/* Size variations */
.decoration.small { transform: translate(-50%, 0) scale(0.7); }
.decoration.large { transform: translate(-50%, 0) scale(1.3); }

/* Trees - Pine */
.decoration[data-type="pine"] { width: 64px; height: 78px; }
.decoration[data-type="pine"]::before {
    content: ''; position: absolute; width: 100%; height: 80%;
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
    transition: none; /* Remove transition if not needed */
    will-change: background; /* Hint if color changes */
}
.day .decoration[data-type="pine"]::before { background: linear-gradient(to bottom, #2E8B57, #006400); } /* Slightly brighter */
.night .decoration[data-type="pine"]::before { background: linear-gradient(to bottom, #1E5638, #003200); }
.decoration[data-type="pine"]::after { /* Trunk */
    content: ''; position: absolute; bottom: 0; left: 50%; width: 18%; height: 25%;
    background: linear-gradient(to bottom, #A0522D, #8B4513); /* Brighter trunk */
    transform: translateX(-50%);
}
/* OPTIMIZATION: Simplified sway animation */
@keyframes simple-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(0.5deg); }
}
.decoration[data-type="pine"]::before {
    animation: simple-sway 10s ease-in-out infinite alternate; /* Slower, alternate */
    transform-origin: bottom center;
}

/* Trees - Palm */
.decoration[data-type="palm"] { width: 70px; height: 85px; }
.decoration[data-type="palm"]::before { /* Leaves */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(50% 0%, 0% 60%, 25% 40%, 50% 50%, 75% 40%, 100% 60%);
    transition: none;
    transform-origin: center bottom;
}
.day .decoration[data-type="palm"]::before { background: linear-gradient(to bottom, #3CB371, #2E8B57); } /* Brighter green */
.night .decoration[data-type="palm"]::before { background: linear-gradient(to bottom, #207748, #1A4D2E); }
.decoration[data-type="palm"]::after { /* Trunk */
    content: ''; position: absolute; top: 30%; left: 50%; width: 15%; height: 70%;
    background: linear-gradient(to bottom, #B8860B 70%, #A0522D); /* Lighter trunk */
    transform: translateX(-50%);
}
/* OPTIMIZATION: Simplified palm sway */
@keyframes simple-palm-sway {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}
.decoration[data-type="palm"]::before {
    animation: simple-palm-sway 6s ease-in-out infinite alternate; /* Slower, alternate */
}

/* Rocks - Boulder */
.decoration[data-type="boulder"] { width: 70px; height: 56px; }
.decoration[data-type="boulder"]::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    /* OPTIMIZATION: Simplified clip-path (more rounded) */
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
.day .decoration[data-type="boulder"]::before { background: linear-gradient(135deg, #BEBEBE, #909090); } /* Lighter grey */
.night .decoration[data-type="boulder"]::before { background: linear-gradient(135deg, #707070, #505050); }
.decoration[data-type="boulder"]::after { /* Texture */
    content: ''; position: absolute; width: 80%; height: 80%; top: 10%; left: 10%;
    background: rgba(0,0,0,0.1); /* Lighter texture */
    /* OPTIMIZATION: Simpler texture shape */
    clip-path: polygon(50% 20%, 70% 40%, 50% 70%, 30% 40%);
    opacity: 0.4;
}

/* Rocks - Spire */
.decoration[data-type="spire"] { width: 56px; height: 92px; }
.decoration[data-type="spire"]::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(40% 0%, 60% 0%, 70% 100%, 30% 100%);
}
.day .decoration[data-type="spire"]::before { background: linear-gradient(to bottom, #E0E0E0, #B0B0B0); } /* Lighter */
.night .decoration[data-type="spire"]::before { background: linear-gradient(to bottom, #B0B0B0, #707070); }
.decoration[data-type="spire"]::after { /* Detail */
    content: ''; position: absolute; width: 50%; height: 50%; top: 25%; left: 25%;
    background: rgba(0,0,0,0.08); /* Lighter detail */
    /* OPTIMIZATION: Simpler detail shape */
    clip-path: polygon(50% 0%, 80% 100%, 20% 100%);
}

/* Mushroom */
.decoration[data-type="mushroom"] { width: 30px; height: 34px; }
.decoration[data-type="mushroom"]::before { /* Cap */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    border-radius: 50% 50% 20% 20% / 60% 60% 30% 30%; /* Slightly adjusted */
    box-shadow: 0 8px 4px -6px rgba(0,0,0,0.15); /* Softer shadow */
}
.day .decoration[data-type="mushroom"]::before { background: linear-gradient(to bottom, #FF7F50, #FF6347); } /* Coral/Tomato */
.night .decoration[data-type="mushroom"]::before { background: linear-gradient(to bottom, #CD5C5C, #A52A2A); } /* IndianRed/Brown */
.decoration[data-type="mushroom"]::after { /* Stem */
    content: ''; position: absolute; bottom: 0; left: 50%; width: 25%; height: 55%;
    background: linear-gradient(to bottom, #FFF8DC, #F5F5DC); /* Cream/Beige */
    transform: translateX(-50%);
    border-radius: 15% 15% 0 0 / 10% 10% 0 0;
}
/* Spots removed for simplicity, can be added back if needed */

/* Crystal */
.decoration[data-type="crystal"] { width: 56px; height: 80px; will-change: opacity; }
.decoration[data-type="crystal"]::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(50% 0%, 85% 50%, 50% 100%, 15% 50%);
}
.day .decoration[data-type="crystal"]::before { background: linear-gradient(135deg, #ADD8E6, #4682B4); opacity: 0.85; } /* Lighter blue */
.night .decoration[data-type="crystal"]::before { background: linear-gradient(135deg, #B19CD9, #8A2BE2); opacity: 0.85; } /* Lavender/BlueViolet */
.decoration[data-type="crystal"]::after { /* Facet */
    content: ''; position: absolute; width: 60%; height: 60%; top: 20%; left: 20%;
    background: rgba(255,255,255,0.3); /* Less intense facet */
    /* OPTIMIZATION: Simpler facet shape */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* OPTIMIZATION: Replaced glow with opacity pulse */
@keyframes crystal-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.9; }
}
.decoration[data-type="crystal"]::before {
    animation: crystal-pulse 4s infinite ease-in-out;
}
/* Removed color variations for simplicity */

/* Temple */
.decoration[data-type="temple"] { width: 84px; height: 75px; }
.decoration[data-type="temple"]::before { /* Base */
    content: ''; position: absolute; width: 100%; height: 40%; bottom: 0; left: 0;
    background: linear-gradient(to bottom, #E6D8C0, #D2B48C); /* Sandstone */
}
.decoration[data-type="temple"]::after { /* Roof */
    content: ''; position: absolute; width: 80%; height: 60%; top: 0; left: 50%;
    transform: translateX(-50%);
    /* OPTIMIZATION: Simplified roof */
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    background: linear-gradient(to bottom, #CD853F, #DAA520); /* Peru/Goldenrod */
}
/* Doorway simplified */
.decoration[data-type="temple"] span::before {
    content: ''; position: absolute; width: 18%; height: 25%; bottom: 0; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
}
/* Columns removed for simplicity */
.day .decoration[data-type="temple"]::before { background: linear-gradient(to bottom, #F0E6D2, #D8C8A8); }
.day .decoration[data-type="temple"]::after { background: linear-gradient(to bottom, #DAA520, #B8860B); }
.night .decoration[data-type="temple"]::before { background: linear-gradient(to bottom, #A68B68, #8B6B4A); }
.night .decoration[data-type="temple"]::after { background: linear-gradient(to bottom, #B8860B, #8B4513); }

/* Volcano */
.decoration[data-type="volcano"] { width: 90px; height: 96px; }
.decoration[data-type="volcano"]::before { /* Cone */
    content: ''; position: absolute; width: 100%; height: 100%;
    /* OPTIMIZATION: Simplified cone */
    clip-path: polygon(10% 100%, 90% 100%, 50% 0%);
    background: linear-gradient(to bottom, #555, #755331, #8B4513); /* Darker base */
}
.decoration[data-type="volcano"]::after { /* Crater glow */
    content: ''; position: absolute; width: 25%; height: 12%; top: 8%; left: 50%;
    transform: translateX(-50%);
    background: #FF6347; /* Tomato */
    border-radius: 50%;
    box-shadow: 0 0 12px #FF6347;
    /* OPTIMIZATION: Simpler glow animation */
    animation: simple-glow 2s infinite alternate;
}
/* Smoke removed for simplicity */
.night .decoration[data-type="volcano"]::before { background: linear-gradient(to bottom, #333, #4A3421, #654321); }
.night .decoration[data-type="volcano"]::after { background: #FF8C00; box-shadow: 0 0 15px #FF8C00; }

/* Campfire */
.decoration[data-type="campfire"] { width: 64px; height: 64px; }
.decoration[data-type="campfire"]::before { /* Wood */
    content: ''; position: absolute; width: 50%; height: 25%; bottom: 0; left: 50%;
    transform: translateX(-50%);
    background: #A0522D; /* Sienna */
    /* OPTIMIZATION: Simpler wood shape */
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.decoration[data-type="campfire"]::after { /* Flame */
    content: ''; position: absolute; width: 35%; height: 45%; bottom: 20%; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to top, #FF6347, #FFA500); /* Tomato to Orange */
    /* OPTIMIZATION: Simpler flame shape */
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    opacity: 0.85;
    transform-origin: center bottom;
    /* OPTIMIZATION: Simpler flicker */
    animation: simple-flicker 0.6s infinite alternate;
}
@keyframes simple-flicker {
    0% { transform: translateX(-50%) scaleY(1); opacity: 0.8; }
    100% { transform: translateX(-50%) scaleY(0.9) scaleX(1.1); opacity: 0.9; }
}
.decoration[data-type="campfire"] span { /* Glow */
    position: absolute; width: 60%; height: 15%; bottom: 0; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,100,0,0.3) 0%, transparent 70%);
    border-radius: 50%;
}
.night .decoration[data-type="campfire"] span {
    width: 80%; height: 25%; opacity: 0.6;
    animation: simple-glow 2s infinite alternate; /* Kept */
}
@keyframes simple-glow { /* Renamed from glow-pulse */
    0% { opacity: 0.4; }
    100% { opacity: 0.7; }
}
.night .decoration[data-type="campfire"]::after { box-shadow: 0 0 15px rgba(255,100,0,0.4); }

/* Cave Entrance */
.decoration[data-type="cave"] { width: 80px; height: 70px; }
.decoration[data-type="cave"]::before { /* Rock face */
    content: ''; position: absolute; width: 100%; height: 100%;
    /* OPTIMIZATION: Simplified shape */
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    background: linear-gradient(to bottom, #A0522D, #8B4513); /* Sienna/SaddleBrown */
}
.decoration[data-type="cave"]::after { /* Opening */
    content: ''; position: absolute; width: 45%; height: 55%; bottom: 0; left: 50%;
    transform: translateX(-50%);
    background: #111; /* Darker */
    clip-path: ellipse(45% 45% at 50% 100%); /* Adjusted ellipse */
    opacity: 0.9;
}
.decoration[data-type="cave"] span { /* Inner light */
    position: absolute; width: 15%; height: 15%; bottom: 10%; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(120,180,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1s ease;
}
.night .decoration[data-type="cave"] span {
    opacity: 1;
    /* OPTIMIZATION: Simpler light pulse */
    animation: simple-cave-light 5s infinite alternate;
}
@keyframes simple-cave-light {
    0% { opacity: 0.2; }
    100% { opacity: 0.4; }
}
.night .decoration[data-type="cave"]::before { background: linear-gradient(to bottom, #8B4513, #654321); }

/* Standing Stones */
.decoration[data-type="stones"] { width: 90px; height: 70px; }
.decoration[data-type="stones"]::before { /* Center stone */
    content: ''; position: absolute; width: 12%; height: 65%; bottom: 0; left: 44%;
    background: linear-gradient(to bottom, #B0B0B0, #808080); /* Lighter grey */
    /* OPTIMIZATION: Simplified shape */
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
/* Removed ::after and span for simplicity, relying on one stone */
.night .decoration[data-type="stones"]::before {
    background: linear-gradient(to bottom, #808080, #505050);
}
/* Removed night glow animation for performance */

/* Mobile optimizations */
@media (max-width: 768px) {
    #circle::before,
    #circle::after {
        /* Further simplify or reduce opacity on mobile if needed */
        opacity: 0.6;
    }

    /* Disable decoration animations on mobile */
    .decoration[data-type="pine"]::before,
    .decoration[data-type="palm"]::before,
    .decoration[data-type="crystal"]::before,
    .decoration[data-type="volcano"]::after,
    .decoration[data-type="campfire"]::after,
    .night .decoration[data-type="cave"] span {
        animation: none !important;
    }

    /* Ensure hover effects don't cause issues */
    .event:hover {
        transform: translate(-50%, 0) !important; /* Prevent hover scale */
    }
}

/* ====== LUCK MOON ====== */
#luck-moon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: radial-gradient(circle at 30% 30%, #f5f5f5, #e0e0e0);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1000;
    display: none;
}

/* Position the moon within the game area */
#game-area #luck-moon {
    position: absolute;
    top: 20px;
    right: 240px;
    width: 52px;
    height: 52px;
}

#luck-moon.visible {
    display: block;
    animation: moonFadeIn 0.5s ease forwards;
}

@keyframes moonFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 0.85;
        transform: scale(1);
    }
}

#luck-moon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

/* Main moon surface texture */
#luck-moon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Crater 1 */
        radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.1) 0%, transparent 60%),
        /* Crater 2 */
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 50%),
        /* Crater 3 */
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 40%),
        /* Surface texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
    border-radius: 50%;
    mix-blend-mode: multiply;
}

/* Moon lighting effects */
#luck-moon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Main highlight */
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
        /* Secondary highlight */
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.3), transparent 50%),
        /* Shadow */
        radial-gradient(circle at 50% 50%, transparent, rgba(0, 0, 0, 0.2) 50%);
    border-radius: 50%;
    mix-blend-mode: overlay;
}

/* Lucky text styles */
#lucky-text {
    position: absolute;
    top: 20px;
    right: 240px;
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
}

#lucky-text.visible {
    animation: luckyTextFade 1.5s ease forwards;
}

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