/* ROOT VARIABLES AND GLOBAL STYLES - OPTIMIZED */
:root {
    /* Keep variables for theming */
    --modal-bg: rgba(255, 255, 255, 0.9);
    --stats-bg: rgba(255, 255, 255, 0.7);
    --combat-log-bg: rgba(255, 255, 255, 0.5);
    --bar-bg: #ccc;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Simplified shadow */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars on the body */
    background-color: #000; /* Ensure body background is black */
}

#game-area {
    position: absolute; /* Use absolute positioning */
    width: 900px;       /* Native width */
    height: 460px;      /* Native height */
    /* Position/Transform will be set by JavaScript */
    transform-origin: top left; /* Default origin for mobile scaling */
    background: var(--game-bg);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: background 1.5s ease;
    color: var(--text-color);
    will-change: transform;
    margin: 0; /* Ensure no margin interferes */
    display: none; /* Keep initial state hidden */
}

/* Ensure cutscene modal is positioned correctly within game-area */
#cutscene-modal {
    position: absolute;
    /* Change width/height to top/left/right/bottom */
    top: 0;
    left: 0;
    right: 0; /* Added */
    bottom: 0; /* Added */
    /* width: 100%; */ /* Removed */
    /* height: 100%; */ /* Removed */
    z-index: 30; /* Keep z-index */
    display: flex; /* Keep display */
    flex-direction: column; /* Keep direction */
    justify-content: flex-end; /* Keep justify */
    border-radius: 10px; /* Keep radius */
    overflow: hidden; /* Keep overflow */
    background: rgba(0, 0, 0, 0.8); /* Keep background */
    /* Remove transform properties - let it inherit position within parent */
    /* transform: none; */ /* Removed */
    /* transform-origin: top left; */ /* Removed */
}

/* PHASE-SPECIFIC STYLES */
.day {
    --game-bg: linear-gradient(180deg, #87CEEB, #64A0D0, #4682B4);
    --text-color: #3A2E1F;
    --modal-bg: rgba(255, 250, 235, 0.85);
    --planet-color: radial-gradient(circle at 30% 30%, #8B4513 10%, #A0522D 60%, #654321 90%);
    --stats-bg: rgba(255, 250, 235, 0.8);
    --combat-log-bg: rgba(255, 250, 235, 0.7);
    --health-bar-fill: linear-gradient(to right, red, #800000);
    --exp-bar-fill: linear-gradient(to right, gold, rgb(192, 163, 0));
}

.night {
    /* --game-bg: #191970; */ /* Base bg set in #game-area */
    --text-color: #E6E6FA;
    --modal-bg: rgba(20, 20, 40, 0.9);
    --planet-color: #2E2859;
    --stats-bg: rgba(40, 40, 80, 0.8);
    --combat-log-bg: rgba(40, 40, 80, 0.6);
    --health-bar-fill: #8B0000;
    --exp-bar-fill: #4B0082;
}

/* MADNESS PHASE STYLES - OPTIMIZED ANIMATION */
.madness-day-1 {
    --game-bg: linear-gradient(180deg, #FFB74D, #FF9800, #F57C00);
    --text-color: #5D4037;
    --modal-bg: rgba(255, 248, 225, 0.9);
    --planet-color: radial-gradient(circle at 30% 30%, #FF8F00 10%, #EF6C00 60%, #E65100 90%);
    --stats-bg: rgba(255, 243, 224, 0.85);
    background: #FFD700 !important;
}

.madness-day-2 {
    --game-bg: linear-gradient(180deg, #FF7043, #FF5722, #E64A19);
    --text-color: #3E2723;
    --modal-bg: rgba(255, 235, 205, 0.85);
    --planet-color: radial-gradient(circle at 30% 30%, #FF7043 10%, #FF5722 60%, #E64A19 90%);
    --stats-bg: rgba(255, 235, 200, 0.85);
    /* OPTIMIZATION: Replace filter animation with opacity pulse */
    animation: pulse-opacity 4s infinite alternate;
    background: #FF8C00 !important;
}

.madness-day-3 {
    --game-bg: linear-gradient(180deg, #FF5252, #FF1744, #D50000);
    --text-color: #1A1A1A;
    --modal-bg: rgba(255, 220, 200, 0.8);
    --planet-color: radial-gradient(circle at 35% 35%, #FF5252 10%, #FF1744 50%, #D50000 85%);
    --stats-bg: rgba(255, 220, 180, 0.85);
    /* OPTIMIZATION: Replace filter animation with opacity pulse */
    animation: pulse-opacity 2s infinite alternate;
    background: #FF4500 !important;
}

/* OPTIMIZATION: Opacity pulse animation */
@keyframes pulse-opacity {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}

/* Removed old pulse-burn keyframe */
/* @keyframes pulse-burn { ... } */

/* GAME AREA */

/* DAY MODE ELEMENTS - OPTIMIZED SUN */
.day #game-area::before { /* Sun */
    content: '';
    position: absolute;
    top: -75px;
    right: -75px;
    width: 125px;
    height: 125px;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.85), rgba(255, 215, 0, 0.6)); /* Slightly less intense */
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
    z-index: 1;
    animation: sunPulse 8s infinite alternate; /* Keep simple scale animation */
    /* filter: none; */ /* Filter removed */
    will-change: transform;
}

/* Define sun pulse animation if it doesn't exist */
@keyframes sunPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.03); } /* Reduced scale */
}

.day #game-area::after { /* Hills */
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* Keep SVG hills, they are static */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M0,1000 C150,900 350,950 500,900 C650,850 750,950 1000,900 L1000,1000 Z'/%3E%3C/svg%3E") bottom/100% 80px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400'%3E%3Cpath fill='rgba(255,255,255,0.15)' d='M0,400 C150,300 300,350 500,300 C700,250 800,350 1000,300 L1000,400 Z'/%3E%3C/svg%3E") bottom/100% 100px no-repeat;
    z-index: 2;
    pointer-events: none;
    opacity: 0.8; /* Slightly reduced opacity */
}

/* UI ELEMENTS */
#health-bar,
#exp-bar {
    position: absolute;
    top: 10px;
    width: 200px;
    height: 30px;
    background: var(--bar-bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); /* Reduced shadow */
    z-index: 11;
}

#health-bar {
    left: 10px;
}

#exp-bar {
    right: 10px;
}

#health-bar-fill,
#exp-bar-fill {
    height: 100%;
    width: 0%;
    /* OPTIMIZATION: Transition only width */
    transition: width 0.5s ease;
    border-radius: 15px;
    z-index: 12;
}

#health-bar-fill {
    background: var(--health-bar-fill);
}

#exp-bar-fill {
    background: var(--exp-bar-fill);
}

#health-text,
#exp-text,
#level-display-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font: bold 20px 'Cinzel', serif;
    color: white;
    text-shadow: var(--text-shadow); /* Use simplified shadow */
    z-index: 20;
    top: 2px; /* Adjusted slightly */
    left: 0;
}

#level-display-text {
    left: 10px;
    width: 30px;
    font-size: 22px;
    z-index: 21;
}

/* PLANET AND PLAYER - Handled in world.css */
#container {
    position: absolute;
    top: 80px;
    width: 100%;
    height: 400px;
    overflow: hidden;
    z-index: 1; /* Add explicit z-index to ensure it's below combat elements */
}

/* STATS AND MODAL */
#stats-grid {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    text-align: center;
    background: var(--stats-bg);
    padding: 4px 4px 8px 4px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); /* Reduced shadow */
    z-index: 10;
    font-family: 'Cinzel', serif;
    /* OPTIMIZATION: Transition only background */
    transition: background 1.5s ease;
    font-size: 18px;
}

#event-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-height: 400px;
    background: var(--modal-bg);
    padding: 25px;
    border: 2px solid #FF8C00;
    border-radius: 10px;
    text-align: center;
    z-index: 20;
    overflow-y: auto;
    /* OPTIMIZATION: Transition specific properties */
    transition: background 1.5s ease, color 1.5s ease, opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); /* Reduced shadow */
    will-change: opacity, transform; /* Hint for display changes */
}

.day #event-modal {
    border: 3px solid #c9a66b;
    background: linear-gradient(to bottom, rgba(255, 250, 235, 0.95), rgba(255, 235, 205, 0.85));
}

#event-description {
    margin-bottom: 25px;
    font-size: 24px;
    line-height: 1.4;
}

#choices {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.choice-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 200px;
}

/* BUTTONS AND EFFECTS - OPTIMIZED */
button {
    font-family: 'Quicksand', sans-serif;
    padding: 10px 20px;
    border: 2px solid #FF8C00;
    background: #fff;
    cursor: pointer;
    /* OPTIMIZATION: Transition specific properties */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.day button {
    font-family: 'Cinzel', serif;
    padding: 12px 25px;
    border: 2px solid #c9a66b;
    background: linear-gradient(to bottom, #FFD700, #FF8C00);
    color: #3A2E1F !important; /* Force black text during day */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Reduced shadow */
}

.day button:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* Reduced shadow */
    background: linear-gradient(to bottom, #FFC107, #FF8C00);
}

.night button {
    background: #2E2859;
    color: #E6E6FA;
    border-color: #9370DB;
}

/* Level up buttons - Simplified shadows */
.day button.levelup-magic,
.night button.levelup-magic,
.day button.levelup-freeze,
.day button.levelup-burn,
.day button.levelup-poison,
.day button.levelup-confusion,
.night button.levelup-freeze,
.night button.levelup-burn,
.night button.levelup-poison,
.night button.levelup-confusion {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Simplified shadow */
}

.day button.levelup-magic:hover,
.night button.levelup-magic:hover {
    box-shadow: 0 3px 6px rgba(47, 82, 143, 0.4); /* Simplified shadow */
}

/* Special level up buttons - OPTIMIZED */
.day button.levelup-special,
.night button.levelup-special {
    background-size: 300% 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* Simplified shadow */
    /* OPTIMIZATION: Reduced shadow complexity, removed pulse-glow animation */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    /* OPTIMIZATION: Keep gradient shift, remove shine */
    animation: gradient-shift 3s ease infinite;
    font-weight: bold;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

/* Override text color for special buttons in day phase */
.day button.levelup-special {
    color: #3A2E1F !important; /* Force black text during day */
}

.night button.levelup-special {
    color: #fff;
    background: linear-gradient(135deg, #9370DB, #8A2BE2, #4B0082, #8A2BE2); /* Kept */
    background-size: 300% 100%; /* Kept */
    border: 2px solid #B19CD9; /* Kept */
    box-shadow: 0 0 8px rgba(123, 104, 238, 0.5); /* Optimized */
    animation: gradient-shift 3s ease infinite; /* Optimized */
}

.day button.levelup-special::before,
.night button.levelup-special::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite;
    z-index: -1;
}

.day button.levelup-special:hover,
.night button.levelup-special:hover {
    transform: translateY(-2px) scale(1.03); /* Slightly reduced scale */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 215, 0, 0.5); /* Simplified shadow */
    filter: brightness(1.05); /* Reduced brightness */
}

/* Animations for special buttons */
@keyframes gradient-shift { /* Keep */
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* OPTIMIZATION: Removed pulse-glow, pulse-glow-night, shine keyframes */
/* @keyframes pulse-glow { ... } */
/* @keyframes pulse-glow-night { ... } */
/* @keyframes shine { ... } */

/* Removed special level-up button inner styling ::after */
/* .levelup-special::after { ... } */

/* Level indicator within buttons */
.level-indicator {
    display: inline-block;
    font-size: 0.75em;
    padding: 3px 6px;
    margin-left: 5px;
    border-radius: 10px;
    vertical-align: middle;
    font-weight: bold;
}

.day .level-indicator {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.night .level-indicator {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.effect-description {
    font-size: 0.85em;
    font-style: italic;
    color: #222;
    margin-top: 5px;
}

.night .effect-description {
    color: #9370DB;
}

.action-button {
    color: #222;
}

.day .action-button {
    color: #3A2E1F !important;
}

/* Affinity level indicators in buttons */
.action-button .affinity-level {
    display: inline-block;
    font-size: 0.8em;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 8px;
    vertical-align: middle;
    /* text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); */
    min-height: 64px;
}

.day .action-button .affinity-level {
    /* background: rgba(0, 0, 0, 0.15); */
    color: #222;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
}

.night .action-button .affinity-level {
    /* background: rgba(255, 255, 255, 0.15); */
    color: #E6E6FA;
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.action-button .freeze-level {
    background: rgba(100, 200, 255, 0.4);
}

.action-button .burn-level {
    background: rgba(255, 100, 50, 0.4);
}

.action-button .poison-level {
    background: rgba(150, 255, 100, 0.4);
}

.action-button .confusion-level {
    background: rgba(200, 100, 255, 0.4);
}

/* COMBAT LOG - OPTIMIZED */
#combat-log {
    position: absolute;
    top: 54px;
    left: 10px;
    width: 200px;
    height: 270px;
    background: var(--combat-log-bg);
    padding: 10px 0;
    overflow-y: auto;
    z-index: 10;
    display: none; /* Managed by JS */
    flex-direction: column-reverse;
    /* OPTIMIZATION: Transition only background */
    transition: background 1.5s ease;
    max-width: 55%;
    font-family: 'Cinzel', serif;
    border-radius: 10px;
}

#combat-log .entry {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    /* OPTIMIZATION: Use simpler opacity fade-in */
    animation: simpleFadeIn 0.3s ease-out;
}

@keyframes simpleFadeIn { from { opacity: 0; } to { opacity: 1; } }

#combat-log .player-damage {
    color: red;
}

#combat-log .special-entry {
    color: #FFD700;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.2); /* Slightly lighter */
    border-left: 3px solid #FFD700;
    padding-left: 12px;
    text-shadow: 0 0 3px black; /* Reduced shadow */
}

/* LOW-POLY CLOUDS - OPTIMIZED */
.cloud {
    position: absolute;
    width: 225px;
    height: 60px;
    z-index: 3;
    pointer-events: none;
    /* OPTIMIZATION: Transition background and opacity */
    transition: background 1.5s ease, opacity 0.5s ease;
    /* OPTIMIZATION: Simplified clip-path */
    clip-path: polygon(0% 80%, 20% 40%, 50% 60%, 80% 30%, 100% 70%, 100% 100%, 0% 100%);
    border-radius: 0;
    will-change: transform, opacity; /* Hint for animation */
}

.cloud:before,
.cloud:after {
    content: '';
    position: absolute;
    transition: background 1.5s ease;
    border-radius: 0;
    /* OPTIMIZATION: Simplified clip-path for cloud parts */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.cloud:before {
    width: 90px;  /* 50% larger than 60px */
    height: 60px; /* 50% larger than 40px */
    top: -30px;   /* Adjusted for larger size */
    left: 38px;   /* Adjusted for larger size */
    transform: rotate(5deg); /* Reduced rotation */
}

.cloud:after {
    width: 105px; /* 50% larger than 70px */
    height: 75px; /* 50% larger than 50px */
    top: -45px;   /* Adjusted for larger size */
    right: 38px;  /* Adjusted for larger size */
    transform: rotate(-10deg); /* Reduced rotation */
}

.day .cloud {
    background: rgba(255, 255, 255, 0.75); /* Slightly less opaque */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border */
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); /* Reduced shadow */
}

.day .cloud:before,
.day .cloud:after {
    background: rgba(255, 255, 255, 0.75); /* Updated */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Updated */
}

.night .cloud {
    background: rgba(40, 40, 65, 0.65); /* Slightly less opaque */
    border: 1px solid rgba(100, 149, 237, 0.2); /* Lighter border */
    box-shadow: 0 0 6px rgba(100, 149, 237, 0.15); /* Reduced shadow */
}

.night .cloud:before,
.night .cloud:after {
    background: rgba(40, 40, 65, 0.65); /* Updated */
    border: 1px solid rgba(100, 149, 237, 0.2); /* Updated */
}

/* Add madness cloud styles */
.madness .cloud {
    background: rgba(255, 180, 80, 0.5); /* Adjusted color */
    border: 1px solid rgba(255, 130, 0, 0.3); /* Updated */
    box-shadow: 0 0 6px rgba(255, 130, 0, 0.3); /* Updated */
    /* OPTIMIZATION: Remove distort animations */
    animation: cloudFloat 180s linear infinite; /* Keep float only */
}

.madness .cloud:before,
.madness .cloud:after {
    background: rgba(255, 180, 80, 0.5); /* Updated */
    border: 1px solid rgba(255, 130, 0, 0.3); /* Updated */
    /* OPTIMIZATION: Remove distort animations */
    animation: none;
}

/* OPTIMIZATION: Removed cloudDistort and cloudPartDistort keyframes */
/* @keyframes cloudDistort { ... } */
/* @keyframes cloudPartDistort { ... } */

/* ANIMATIONS */
@keyframes cloudFloat { /* Keep */
    0% { transform: translateX(0); }
    100% { transform: translateX(150vw); }
}

/* Special styling for boss descriptions */
.boss-description {
    font-style: italic;
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.9;
}

/* Refined combat UI styles */
#combat-ui {
    position: absolute;
    right: 10px;
    top: 54px;
    width: 172px;
    background: var(--stats-bg);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-color);
    display: none; /* Managed by JS */
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); /* Reduced shadow */
    z-index: 10;
    /* OPTIMIZATION: Transition background and color only */
    transition: background 1.5s ease, color 1.5s ease;
    border: 2px solid;
    font-size: 14px;
}

.day #combat-ui {
    border-color: #c9a66b;
}

.night #combat-ui {
    border-color: #9370DB;
}

.enemy-stats {
    margin-bottom: 4px;
}

.enemy-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: 'Cinzel', serif;
    text-align: center;
    text-shadow: var(--text-shadow); /* Use simplified shadow */
}

.enemy-health-bar,
.cooldown-bar {
    height: 18px;
    background-color: var(--bar-bg);
    border-radius: 9px;
    position: relative;
    /* margin-bottom: 4px; */ /* Kept commented */
    overflow: hidden;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Reduced shadow */
}

.enemy-health-fill {
    height: 100%;
    width: 100%;
    border-radius: 9px; /* Full radius */
    /* OPTIMIZATION: Transition width only */
    transition: width 0.3s ease;
}

.day .enemy-health-fill {
    background: linear-gradient(to right, #800000, #FF4500);
}

.night .enemy-health-fill {
    background: #8B0000;
}

.enemy-health-text {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-family: 'Cinzel', serif;
    text-shadow: var(--text-shadow);
    color: white;
}

.cooldown-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: 'Cinzel', serif;
    text-align: center;
}

.cooldown-label {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0 5px;
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    position: absolute; /* Added for positioning */
    left: 5px;         /* Added for positioning */
    top: 50%;          /* Added for positioning */
    transform: translateY(-50%); /* Added for positioning */
    z-index: 2;         /* Added for positioning */
    color: #fff;        /* Added for positioning */
}

.magic-type {
    flex: 1;
    text-align: left;
}

.chance {
    font-size: 0.85em;
    opacity: 0.9;
    margin: 0 5px;
    white-space: nowrap;
}

.affinity-level {
    font-size: 0.75em;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 3px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.freeze-cooldown .affinity-level {
    background: rgba(100, 200, 255, 0.3);
}

.burn-cooldown .affinity-level {
    background: rgba(255, 100, 50, 0.3);
}

.poison-cooldown .affinity-level {
    background: rgba(150, 255, 100, 0.3);
}

.confusion-cooldown .affinity-level {
    background: rgba(200, 100, 255, 0.3);
}

.cooldown-progress {
    height: 100%;
    width: 0%;
    border-radius: 9px; /* Full radius */
    /* OPTIMIZATION: Use linear transition for smoothness */
    transition: width 0.1s linear;
    background: linear-gradient(to right, #3498db, #2ecc71); /* Added default gradient */
    will-change: width; /* Hint for animation */
}

/* Day/Night specific cooldown colors */
.day .physical-cooldown .cooldown-progress {
    background: linear-gradient(to right, #4682B4, #1E90FF);
}

.night .physical-cooldown .cooldown-progress {
    background: #4B0082;
}

.day .freeze-cooldown .cooldown-progress {
    background: linear-gradient(to right, #1E90FF, #87CEEB);
}

.night .freeze-cooldown .cooldown-progress {
    background: #0000CD;
}

.day .burn-cooldown .cooldown-progress {
    background: linear-gradient(to right, #FF4500, #FFA500);
}

.night .burn-cooldown .cooldown-progress {
    background: #8B0000;
}

.day .poison-cooldown .cooldown-progress {
    background: linear-gradient(to right, #006400, #00FF00);
}

.night .poison-cooldown .cooldown-progress {
    background: #006400;
}

.day .confusion-cooldown .cooldown-progress {
    background: linear-gradient(to right, #800080, #BA55D3);
}

.night .confusion-cooldown .cooldown-progress {
    background: #4B0082;
}

.affinity-cooldowns {
    display: flex;
    flex-direction: column;
}

/* Make the light effect smaller on the thinner bars */
/* .cooldown-bar::after { height: 9px; } */

/* Central combat action display - OPTIMIZED */
#combat-action-display {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    background: var(--modal-bg);
    border: 2px solid;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    z-index: 15;
    /* OPTIMIZATION: Transition specific properties */
    transition: opacity 0.3s ease, transform 0.3s ease, background 1.5s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); /* Reduced shadow */
    display: none; /* Managed by JS */
}

.day #combat-action-display {
    border-color: #c9a66b;
}

.night #combat-action-display {
    border-color: #9370DB;
}

.action-text {
    font-size: 24px;
    font-family: 'Cinzel', serif;
    margin-bottom: 10px;
    color: var(--text-color);
    text-align: inherit; /* Changed from center */
}

.next-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Cormorant Garamond', serif;
    color: var(--text-color);
    opacity: 0.8;
}

.next-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.next-timer {
    font-size: 18px;
}

/* Highlight active cooldown bars */
.cooldown-active .cooldown-progress {
    filter: brightness(1.3);
    box-shadow: 0 0 6px currentColor; /* Simplified highlight */
}

/* Pause animation for cooldown bars */
.cooldown-paused .cooldown-progress {
    transition: none;
}

/* Fix orbits container */
.orbits-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.cooldown-ready { /* Style applied when ready */
    /* Maybe add a subtle border or brightness */
    filter: brightness(1.1);
    /* animation: pulsate 1.5s infinite alternate; */ /* Removed pulsate */
    /* box-shadow: 0 0 8px #ffcc00; */ /* Removed pulsate */
}

.cooldown-active {
    box-shadow: 0 0 6px currentColor !important; /* Simplified highlight */
    background-color: rgba(255, 100, 0, 0.2) !important; /* Reduced opacity */
}

.cooldown-bar {
    position: relative;
    margin: 5px 0;
    background-color: rgba(50, 50, 50, 0.6);
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
}

/* When a cooldown is complete, make the text more visible */
.cooldown-ready + .cooldown-label {
    color: #ffcc00;
    text-shadow: 0 0 3px black, 0 0 5px black;
    font-weight: bold;
}

@keyframes fadeInOut {
    from { opacity: 0.2; }
    to { opacity: 1; }
}

/* Status effects display - OPTIMIZED */
.player-status-effects,
.enemy-status-effects.battle-enemy-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* Slightly reduced gap */
    justify-content: center;
    position: absolute;
    width: 100%;
    max-width: 110px; /* Slightly reduced width */
    transform: translateY(-30px) translateZ(50px);
    z-index: 999;
    pointer-events: none;
}

.player-status-effects {
    left: calc(32%);
    top: calc(75% - 15px);
}

.enemy-status-effects.battle-enemy-status {
    left: calc(60%);
    top: calc(55% - 15px);
}

.status-effect {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.45); /* Slightly less opaque */
    border-radius: 4px;
    padding: 2px 5px; /* Slightly reduced padding */
    font-size: 0.85em; /* Slightly smaller */
    position: relative;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); /* Reduced shadow */
    will-change: transform, opacity; /* Hint for animation */
}

.status-effect-icon {
    margin-right: 4px; /* Updated */
    font-size: 1em; /* Updated */
}

.status-effect-counter {
    font-weight: bold;
    min-width: 14px; /* Updated */
    text-align: center;
    margin-top: -5px; /* Updated */
}

/* Add animation for status effects */
/* OPTIMIZATION: Simplified pulse animation */
@keyframes simpleStatusPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.status-effect-new {
    animation: simpleStatusPulse 0.6s ease-in-out; /* Faster, simpler */
}

/* GAME OVER SCREEN STYLES - OPTIMIZED */
.game-over-screen {
    /* position: fixed; */ /* Changed */
    position: absolute; /* Position relative to #game-area */
    top: 0;
    left: 0;
    width: 100%; /* Fill #game-area */
    height: 100%; /* Fill #game-area */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Keep on top within game-area */
    overflow: hidden;
    animation: simpleFadeIn 1.5s ease-in-out; /* Slightly faster fade */
    border-radius: 10px; /* Match game-area */
}

.victory-bg {
    background: linear-gradient(to bottom, #080830, #0f0f40 60%, #060635);
}

.defeat-bg {
    background: linear-gradient(to bottom, #300808, #400f0f 60%, #350606);
}

.game-over-content {
    position: relative;
    z-index: 5;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Reduced gap */
    /* margin-top: 10vh; */ /* Removed vh margin */
    margin-top: 5%; /* Use percentage margin */
    max-width: 90%; /* Slightly increase max-width within container */
    padding: 10px; /* Add some padding */
}

.game-over-title {
    font: bold 56px 'Cinzel', serif; /* Reduced font size */
    color: #E6E6FA;
    letter-spacing: 3px; /* Reduced letter spacing */
    text-shadow: 0 0 8px rgba(148, 0, 211, 0.4), 0 0 15px rgba(75, 0, 130, 0.2); /* Slightly reduced shadow */
    margin: 0;
    animation: simpleGlow 8s infinite alternate;
}

.game-over-message {
    font: 24px 'Cormorant Garamond', serif; /* Reduced font size */
    color: #D8CFC3;
    margin: 5px 0; /* Reduced margin */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.game-over-flavor {
    font: italic 18px 'Cormorant Garamond', serif; /* Reduced font size */
    color: #B8B0A3;
    margin: 0 0 20px 0; /* Reduced margin */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    max-width: 550px; /* Reduced max width */
}

/* Game Log Display adjustments */
#game-log-display {
    position: absolute; /* Keep absolute to fill parent */
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    overflow: auto; padding: 20px; z-index: 1001; /* Ensure log is above content */
    display: none; /* Keep initially hidden */
    color: white; /* Ensure text is visible */
}
#game-log-display button { /* Style buttons inside log */
    /* position: fixed; */ /* Changed */
    position: absolute; /* Position relative to log display */
    top: 10px;
    z-index: 1002; /* Ensure buttons are above log content */
    background: rgba(50,50,50,0.8);
    color: gold;
    border: 1px solid gold;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}
#game-log-display button:hover {
    background: rgba(80,80,80,0.9);
}
#game-log-display .close-log-btn { /* Specific positioning */
    right: 10px;
}
#game-log-display .copy-log-btn { /* Specific positioning */
    right: 95px; /* Adjust as needed */
}
#game-log-display pre { /* Style the log content */
    color: white;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 40px; /* Space below buttons */
}

/* Restart Button Styling (Assuming it's added inside .game-over-content) */
.restart-button {
    background: rgba(60, 20, 80, 0.3);
    border: 1px solid rgba(180, 160, 220, 0.4);
    color: #D8CFC3;
    font: 18px 'Cinzel', serif; /* Slightly smaller font */
    padding: 10px 25px; /* Adjusted padding */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px; /* Adjusted margin */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(120, 0, 180, 0.2);
}
.restart-button:hover {
    background: rgba(80, 30, 100, 0.5);
    border-color: rgba(200, 180, 240, 0.6);
    box-shadow: 0 0 20px rgba(140, 20, 200, 0.3);
    transform: translateY(-2px);
}

/* Ensure end game planet/orbits fit */
.end-game-planet, .end-game-orbits {
    /* Position might need adjustment if they look wrong */
    /* Example: Ensure they scale or position relative to the smaller screen */
    position: absolute;
    bottom: 10%; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%; /* Prevent them being too large */
    max-height: 40%;
}
.end-game-planet {
    opacity: 0.7;
    animation: pulsate 8s infinite alternate ease-in-out; /* Keep pulsation */
}
.end-game-orbits {
    opacity: 0.5;
    /* transform: translateX(-50%) scale(0.8); */ /* Example scaling */
}


@keyframes simpleGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* BATTLE TRANSITION AND COMBAT VIEW - OPTIMIZED */
.combat-scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden; z-index: 5;
    /* OPTIMIZATION: Transition transform and opacity */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.8s cubic-bezier(0.34, 1.1, 0.64, 1); /* Faster, simpler curve */
    perspective: 1000px; /* Reduced perspective */
    overflow: hidden; pointer-events: none;
    transform-origin: center center;
    transform: scale(0.7) translateZ(-300px); /* Adjusted initial state */
    will-change: transform, opacity;
}

.combat-scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateZ(0); /* Active state */
}

/* Zoom transition effect */
.combat-active #container {
    /* OPTIMIZATION: Faster, simpler transition */
    transform: scale(0.1) translateZ(-500px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.68, -0.3, 0.27, 1.3), opacity 0.6s ease-out;
    transform-origin: 50% 75%;
}

/* Make sure battle stage works with existing layout */
.battle-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.34, 1.1, 0.64, 1); /* Faster */
    perspective: 600px; /* Reduced perspective */
}

/* Position player in 3D space - back/side view with better 3D shaping */
.battle-player {
    position: absolute;
    bottom: 100px;
    left: 34%;
    width: 220px;
    height: 180px;
    z-index: 6;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Faster transition */
    animation: player-idle 3s ease-in-out infinite;
    transform-origin: bottom center;
    background-image: url('images/characters/player/hero-back.png');
    background-size: contain; /* Adjust as needed: contain, cover, or specific size */
    background-repeat: no-repeat;
    background-position: center bottom;
    /* background-color: transparent; */ /* Removed redundant */
    will-change: transform; /* Added */
}

/* Position enemy face-on in 3D space */
.battle-enemy {
    position: absolute;
    bottom: 170px;
    right: 34%;
    width: 120px;
    height: 120px;
    /* Adjusted base transform */
    transform: translateX(50%) translateZ(30px) scale(0.85);
    z-index: 4;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Faster transition */
    transform-origin: bottom center;
    background-size: contain; /* Changed to contain */
    background-position: center bottom; /* Align bottom */
    background-repeat: no-repeat;
    /* background-color: transparent; */ /* Removed redundant */
    /* border-radius: 0; */ /* Removed redundant */
    /* box-shadow: none; */ /* Removed redundant */
    /* border: none; */ /* Removed redundant */
    /* outline: none; */ /* Removed redundant */
    will-change: transform, opacity; /* Added */
}

/* Remove any remaining styles from the old implementation when showing monster images */
.battle-enemy::before {
    display: none; /* Remove fallback face */
}

/* Removed fallback styles for no-image */
/* .day .battle-enemy.no-image { ... } */
/* .day .battle-enemy.no-image::before { ... } */
/* .night .battle-enemy.no-image { ... } */
/* .night .battle-enemy.no-image::before { ... } */

/* Battle background with enhanced horizon effect */
.battle-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--game-bg);
    z-index: -1;
    /* Add enhanced horizon effect */
    background-image: linear-gradient(
        to bottom,
        var(--game-bg) 0%,
        var(--game-bg) 60%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.2) 90%,
        rgba(255, 255, 255, 0.3) 100%
    );
}

/* Removed day/night enemy ::before face styles */
/* .day .battle-enemy::before { ... } */
/* .night .battle-enemy::before { ... } */

/* New monster defeat animation - tumble and fly off screen */
/* OPTIMIZATION: Simplified defeat animation */
@keyframes simple-enemy-defeated {
    0% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)); opacity: 1; } /* Use variable */
    100% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)) translateY(-150px) rotate(90deg) scale(0.5); opacity: 0; }
}

/* Apply the defeated animation */
.battle-enemy.defeated {
    /* Store current transform before applying animation */
    --current-transform: transform;
    animation: simple-enemy-defeated 0.8s ease-in forwards !important;
    pointer-events: none;
    z-index: 100; /* Ensure defeated enemy appears above other elements */
}

/* New dodge animation with mirror flip for enemy */
/* OPTIMIZATION: Simplified dodge animation */
@keyframes simple-enemy-dodge {
    0%, 100% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)); }
    50% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)) translateX(15px) scale(0.95); } /* Simple side shift */
}

/* Apply the dodge animation */
.battle-enemy.dodge {
    --current-transform: transform; /* Added */
    animation: simple-enemy-dodge 0.4s ease-in-out forwards;
}

/* Damage indicators - OPTIMIZED */
.damage-indicator {
    position: absolute;
    font-size: 22px; /* Default size */
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0 0 3px #000; /* Reduced shadow */
    /* OPTIMIZATION: Use simpler float animation */
    animation: simple-damage-float 1s forwards;
    z-index: 2000;
    font-family: 'Cinzel', serif;
    will-change: transform, opacity; /* Added */
}

/* Damage tiers for increasingly impactful visuals */
.damage-indicator.tier-1 {
    font-size: 20px; /* Updated */
    color: #ff6666;
    /* text-shadow: 0 0 4px #000; */ /* Removed specific shadow */
    /* animation: damage-float-small 1.2s forwards; */ /* Use simple */
}

.damage-indicator.tier-2 {
    font-size: 24px; /* Updated */
    color: #ff3333;
    /* text-shadow: 0 0 6px #300; */ /* Removed specific shadow */
    /* animation: damage-float-medium 1.2s forwards; */ /* Use simple */
}

.damage-indicator.tier-3 {
    font-size: 28px; /* Updated */
    color: #ff0000;
    /* text-shadow: 0 0 8px #500; */ /* Removed specific shadow */
    /* animation: damage-float-large 1.2s forwards; */ /* Use simple */
}

.damage-indicator.tier-4 {
    font-size: 34px; /* Updated */
    color: #ff0000;
    /* text-shadow: 0 0 10px #700, 0 0 20px #f00; */ /* Removed specific shadow */
    /* animation: damage-float-huge 1.2s forwards; */ /* Use simple */
    font-weight: 900;
}

.damage-indicator.tier-5 {
    font-size: 40px; /* Updated */
    color: #ff0000;
    /* text-shadow: 0 0 12px #900, 0 0 24px #f00, 0 0 36px #f00; */ /* Removed specific shadow */
    /* animation: damage-float-massive 1.2s forwards; */ /* Use simple */
    font-weight: 900;
    letter-spacing: 1px;
}

/* OPTIMIZATION: Single simple float animation */
@keyframes simple-damage-float {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-25px) scale(0.9); opacity: 0; }
}

/* Critical hit indicators */
.damage-indicator.critical {
    color: #ffaa00; /* Adjusted color */
    text-shadow: 0 0 6px #700, 0 0 10px #f70; /* Simplified shadow */
    animation-duration: 1.2s; /* Slightly longer for crits */
}

/* Updated Cutscene styling to match game area dimensions */


.cutscene-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    background-color: black; /* Fallback */
    transition: background-image 0.5s ease-in-out;
}

.character-container {
    position: relative;
    width: 100%;
    height: 60%;  /* Adjusted to better fit the smaller height */
    z-index: 2;
}

.player-character {
    position: absolute;
    bottom: 0;
    height: 100%;  /* Adjusted from 80% to 100% for better visibility */
    width: 250px;  /* Reduced from 300px to better fit smaller space */
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease-in-out, opacity 0.3s ease-in-out;
    left: 10%;
}

.player-character.center {
    left: 50%;
    transform: translateX(-50%);
}

.npc-character {
    position: absolute;
    bottom: 0;
    height: 100%;  /* Inherited - Keep: Makes it 100% of parent */
    min-width: 400px;  /* Keep base width if needed, but allow expansion */
    max-width: 400px;  /* Add: Limit maximum width */
    width: auto;       /* Add: Allow width to adjust based on aspect ratio */
    background-size: contain; /* Inherited - Keep: Fit image */
    background-position: bottom; /* Inherited - Keep: Anchor image */
    background-repeat: no-repeat; /* Inherited - Keep */
    transition: background-image 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Inherited - Keep */
    right: 3%; /* Keep positioning */
}

.cutscene-dialog-box {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 15px 15px 0 15px;
    margin: 0% 5% 5% 5%;
    color: white;
    font-family: 'Quicksand', sans-serif;
    z-index: 3;
    /* Add fixed height to prevent size shifting */
    min-height: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.speaker-name {
    font-size: 20px;  /* Reduced from 24px */
    color: #ffd700;
    margin-bottom: 8px;  /* Reduced from 10px */
    font-family: 'Cinzel', serif;
}

.dialog-text {
    font-size: 16px;  /* Reduced from 18px */
    line-height: 1.4;  /* Slightly reduced line height */
    margin-bottom: 0;  /* Reduced from 15px */
    animation: simpleFadeIn 0.5s ease-in-out; /* Use simpler fade */
    /* Add min-height to ensure consistent dialog box height */
    min-height: 46px; /* Accommodates approximately 2 lines of text */
    overflow-y: auto;
    flex-grow: 1;
}

/* Reroll button styles */
.reroll-button {
    /* Inherits optimized .levelup-special styles */
    /* Add specific icon/text styling if needed */
    /* background: linear-gradient(135deg, #5c3582 0%, #9b5de5 100%) !important; */ /* Removed specific gradient */
    /* color: #fff !important; */ /* Inherited */
    /* border: 2px solid #d4a0ff !important; */ /* Overridden by .levelup-special */
    position: relative;
    overflow: hidden;
}

.reroll-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.2"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 10h7V3l-2.35 3.35z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: 0.8;
    pointer-events: none;
}

.reroll-button:hover {
    transform: scale(1.03); /* Use special hover transform */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 215, 0, 0.5) !important; /* Use special day hover shadow */
}

.night .reroll-button:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 12px rgba(123, 104, 238, 0.7) !important; /* Use special night hover shadow */
}


/* Existing animations here */
@keyframes player-idle {
    0% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg); } /* Kept original */
    50% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg) translateY(-5px); } /* Kept original */
    100% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg); } /* Kept original */
}

/* OPTIMIZATION: Simplified attack animations */
@keyframes simple-battle-attack {
    0%, 100% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg) scaleX(-1); }
    50% { transform: translateX(-40%) translateZ(25px) rotateY(-15deg) scaleX(-1); } /* Less movement */
}

/* OPTIMIZATION: Simplified magic animations (removed filters) */
@keyframes simple-player-magic-attack {
    0%, 100% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg) scaleX(-1); opacity: 1; }
    50% { transform: translateX(-50%) translateZ(20px) rotateY(-5deg) scaleX(-1) scale(1.05); opacity: 0.8; } /* Scale + Opacity */
}

@keyframes simple-enemy-magic-attack {
    0%, 100% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)); opacity: 1; }
    50% { transform: var(--current-transform, translateX(50%) translateZ(30px) scale(0.85)) scale(1.05); opacity: 0.8; } /* Scale + Opacity */
}

/* Magic projectile element */
.magic-projectile {
    position: absolute;
    width: 25px; /* Smaller */
    height: 25px; /* Smaller */
    border-radius: 50%;
    z-index: 10;
    animation: magic-projectile 0.5s ease-out forwards; /* Faster */
    will-change: transform, opacity; /* Added */
}

/* Magic impact effect */
.magic-impact {
    position: absolute;
    width: 50px; /* Smaller */
    height: 50px; /* Smaller */
    border-radius: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    animation: magic-impact 0.4s ease-out forwards; /* Faster */
    will-change: transform, opacity; /* Added */
}

@keyframes magic-impact { /* Keep */
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Style for different magic types */
.magic-projectile.burn, .magic-impact.burn {
    background: radial-gradient(circle, #ff8800, #ff0000);
    box-shadow: 0 0 10px #ff4400, 0 0 20px #ff2200; /* Simplified */
}

.magic-projectile.freeze, .magic-impact.freeze {
    background: radial-gradient(circle, #88ccff, #0066ff);
    box-shadow: 0 0 10px #55aaff, 0 0 20px #0066ff; /* Simplified */
}

.magic-projectile.poison, .magic-impact.poison {
    background: radial-gradient(circle, #88ff88, #00aa00);
    box-shadow: 0 0 10px #55cc55, 0 0 20px #008800; /* Simplified */
}

.magic-projectile.confusion, .magic-impact.confusion {
    background: radial-gradient(circle, #ff88ff, #cc00cc);
    box-shadow: 0 0 10px #ff55ff, 0 0 20px #cc00cc; /* Simplified */
}

/* Monster size modifiers */
.battle-enemy.size-1 {
    transform: translateX(50%) translateZ(30px) scale(0.85); /* Adjusted Z */
    animation: enemy-idle 3s ease-in-out infinite; /* Apply animation only to size-1 */
}

.battle-enemy.size-2 {
    /* Double size */
    transform: translateX(50%) translateZ(30px) scale(1.7); /* Adjusted Z */
    animation: enemy-idle-large 3s ease-in-out infinite;
}

.battle-enemy.size-3 {
    /* Triple size */
    transform: translateX(50%) translateZ(30px) scale(2.5); /* Adjusted Z */
    bottom: 118px; /* Adjust position to avoid clipping */
    animation: enemy-idle-huge 3s ease-in-out infinite;
}

/* Adjust idle animation for different sizes */
@keyframes enemy-idle {
    0% { transform: translateX(50%) translateZ(30px) scale(0.85) translateX(-5px); } /* Adjusted Z */
    50% { transform: translateX(50%) translateZ(30px) scale(0.85) translateX(5px); } /* Adjusted Z */
    100% { transform: translateX(50%) translateZ(30px) scale(0.85) translateX(-5px); } /* Adjusted Z */
}

@keyframes enemy-idle-large {
    0% { transform: translateX(50%) translateZ(30px) scale(1.7) translateX(-3px); } /* Adjusted Z */
    50% { transform: translateX(50%) translateZ(30px) scale(1.7) translateX(3px); } /* Adjusted Z */
    100% { transform: translateX(50%) translateZ(30px) scale(1.7) translateX(-3px); } /* Adjusted Z */
}

@keyframes enemy-idle-huge {
    0% { transform: translateX(50%) translateZ(30px) scale(2.5) translateX(-2px); } /* Adjusted Z */
    50% { transform: translateX(50%) translateZ(30px) scale(2.5) translateX(2px); } /* Adjusted Z */
    100% { transform: translateX(50%) translateZ(30px) scale(2.5) translateX(-2px); } /* Adjusted Z */
}

/* Music toggle buttons */
.music-toggle-btn {
    background: rgba(0, 0, 0, 0.7);
    color: gold;
    border: 1px solid gold;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    font-family: 'Cinzel', serif;
}

.music-toggle-btn:hover {
    background: rgba(50, 50, 50, 0.8);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#title-music-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 12px;
}

#game-music-toggle {
    position: absolute;
    bottom: 30px; 
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restart-button {
    background: rgba(60, 20, 80, 0.3);
    border: 1px solid rgba(180, 160, 220, 0.4);
    color: #D8CFC3;
    font: 20px 'Cinzel', serif;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(120, 0, 180, 0.2);
}

.restart-button:hover {
    background: rgba(80, 30, 100, 0.5);
    border-color: rgba(200, 180, 240, 0.6);
    box-shadow: 0 0 20px rgba(140, 20, 200, 0.3);
    transform: translateY(-2px);
}

.end-game-planet {
    opacity: 0.7;
    animation: pulsate 8s infinite alternate ease-in-out;
}

.end-game-orbits {
    opacity: 0.5;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* PHASE PROGRESS INDICATOR - OPTIMIZED */
#phase-progress {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 300px;
    height: 120px;
    text-align: center;
    overflow: visible;
}

.phase-orbit-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.phase-orbit-container::before { /* Center dot */
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--text-color);
    border-radius: 50%;
    top: 10px;
    left: 146px;
    box-shadow: 0 0 4px var(--accent-color); /* Reduced shadow */
    z-index: 5;
    opacity: 0.5;
}

.day .phase-orbit-container::before {
    background: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); /* Updated shadow */
}

.night .phase-orbit-container::before {
    background: rgba(147, 112, 219, 0.8);
    box-shadow: 0 0 8px rgba(147, 112, 219, 0.4); /* Updated shadow */
}

/* Create the orbit path */
.phase-orbit-container::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px dotted var(--text-color);
    border-radius: 50%;
    top: -60px;
    left: 80px;
    opacity: 0.3; /* Reduced opacity */
    z-index: 1;
}

.day .phase-orbit-container::after {
    border-color: rgba(255, 215, 0, 0.4); /* Updated color */
}

.night .phase-orbit-container::after {
    border-color: rgba(147, 112, 219, 0.4); /* Updated color */
}

/* Removed phase-arc styles */
/* .phase-arc { ... } */
/* .day .phase-arc, .night .phase-arc, ... { display: none; } */

.orbit-events {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100px;
    overflow: visible;
    pointer-events: none;
}

.current-event-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 20;
    transform-origin: center center;
    /* OPTIMIZATION: Replace shadow pulse with opacity pulse */
    animation: simpleEventPulse 3s infinite alternate ease-in-out;
    pointer-events: none;
    will-change: transform, opacity; /* Added */
}

.day .current-event-marker {
    background: linear-gradient(to bottom, #FFD700, #FFB000); /* Adjusted gradient */
    /* box-shadow: 0 0 12px rgba(255, 215, 0, 0.8); */ /* Removed */
}

.night .current-event-marker {
    background: linear-gradient(to bottom, #A88DE0, #6A4FAF); /* Adjusted gradient */
    /* box-shadow: 0 0 12px rgba(147, 112, 219, 0.8); */ /* Removed */
    /* animation-name: event-pulse-night; */ /* Removed */
}

/* Add a core to the current event marker */
.current-event-marker::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: white;
    opacity: 0.9;
}

.phase-info {
    position: absolute;
    bottom: 44px;
    left: 0;
    width: 100%;
    text-align: center;
}

.event-counter {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--text-color);
    text-shadow: 0 1px 1px rgba(0,0,0,0.4); /* Simplified shadow */
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Position the event dots around the full circle */
.event-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform-origin: center center;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Added transform */
    z-index: 10;
    will-change: background-color, transform; /* Added */
}

.day .event-dot {
    background-color: rgba(201, 166, 107, 0.5); /* Updated */
    box-shadow: none; /* Removed shadow */
}

.night .event-dot {
    background-color: rgba(147, 112, 219, 0.5); /* Updated */
    box-shadow: none; /* Removed shadow */
}

.event-dot.completed {
    /* OPTIMIZATION: Use simple scale instead of star-twinkle animation */
    transform: scale(1.2); /* Added */
    /* animation: star-twinkle 3s infinite alternate ease-in-out; */ /* Removed */
    width: 8px;
    height: 8px;
}

.day .event-dot.completed {
    background-color: rgba(255, 215, 0, 0.8); /* Updated */
    /* box-shadow: 0 0 5px rgba(255, 215, 0, 0.7); */ /* Removed */
}

.night .event-dot.completed {
    background-color: rgba(147, 112, 219, 0.8); /* Updated */
    /* box-shadow: 0 0 5px rgba(147, 112, 219, 0.7); */ /* Removed */
}

.event-dot.current {
    background-color: transparent;
}

/* For boss events */
.is-boss-event .current-event-marker {
    /* OPTIMIZATION: Replace shadow pulse with opacity/scale pulse */
    animation: simpleBossEventPulse 2s infinite alternate;
    width: 16px;
    height: 16px;
    /* Position is now set dynamically by JavaScript */
}

.is-boss-event .current-event-marker::after {
    width: 7px;
    height: 7px;
}

/* Added new optimized pulse keyframes */
@keyframes simpleEventPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; }
}

@keyframes simpleBossEventPulse {
    0% { transform: scale(1.1); opacity: 0.9; }
    100% { transform: scale(1.2); opacity: 1; }
}

.monster-description {
    position: absolute;
    top: 54px; /* Position below phase progress (approx 100px height) + some spacing */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 50%; /* Set width to 50% */
    max-width: none; /* Remove max-width limit */
    text-align: center;
    font-family: 'Cormorant Garamond', serif; /* Adjusted font */
    font-size: 1em; /* Adjusted size */
    line-height: 1.4; /* Adjusted line height */
    color: var(--text-color); /* Use phase text color */
    text-shadow: 0 1px 2px rgba(0,0,0,0.7); /* Simplified shadow */
    background: none; /* Remove background */
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove border-radius */
    border: none; /* Remove border */
    box-shadow: none; /* Remove box-shadow */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 9; /* Lower z-index, below stats grid */
    pointer-events: none; /* Prevent interaction */
}

.monster-description.visible {
    opacity: 1;
}

.madness .monster-description {

    animation: madnessPulse 2s infinite;
}

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

.monster-description .monster-exp-reward {
    display: block; /* Ensures it's on a new line */
    margin-top: 5px; /* Adds a little space */
    font-size: 0.9em; /* Slightly smaller than description */
    opacity: 0.8; /* Slightly faded */
    font-style: italic;
}