#heartsContainer {
    position: fixed; bottom: 20px; right: 20px; display: flex; gap: 5px; z-index: 1000;
}

.stamina-container {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 10px; background: #0008; border: 1px solid #fff; border-radius: 5px; overflow: hidden;
}

#staminaFill { width: 100%; height: 100%; background: linear-gradient(90deg, #ff0, #ff9800); transition: width 0.1s; }

.stamina-label {
    position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%);
    color: white; font: bold 12px sans-serif; text-shadow: 1px 1px 1px black;
}

/* Overlays */
#menu-overlay, #shop-overlay, #guide-overlay, #settings-overlay, #rebirth-overlay, #slayer-shop-overlay, #pet-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    z-index: 20; pointer-events: auto; transition: opacity 0.3s;
}

#menu-overlay { background: #0f1525e6; justify-content: center; z-index: 10; border: 1px solid #00ff884d; padding: 40px; overflow-y: auto; gap: 30px; border-radius: 8px; }
#shop-overlay { background: #0f1525fa; justify-content: center; }
#guide-overlay { background: #0009; justify-content: center; }
#settings-overlay { background: #0009; justify-content: flex-start; overflow-y: auto; padding: 20px 0; }
#rebirth-overlay, #slayer-shop-overlay { background: #14001efa; justify-content: center; z-index: 25; }
#slayer-shop-overlay { background: #1e0505fa; }

#menu-overlay.hidden { opacity: 0; pointer-events: none; }
.hidden { display: none !important; }

.menu-header { text-align: center; }
.menu-footer { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; width: 100%; }

/* Settings */
.settings-card {
    background: linear-gradient(145deg, #1e293bf2, #0f172af2); padding: 40px 60px; border-radius: 25px;
    border: 1px solid #ffffff1a; box-shadow: 0 20px 50px #0008, inset 0 0 0 1px #ffffff0d;
    display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 400px;
    animation: float 6s ease-in-out infinite; margin: auto;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.settings-card h1 {
    font-size: 48px; margin-bottom: 30px; background: linear-gradient(to right, #0ff, #0099ff);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px #0ff5;
}
.settings-card button {
    width: 100%; margin: 8px 0; font-size: 20px; padding: 15px 30px;
    background: #ffffff0d; border: 1px solid #ffffff1a; color: #e0e0e0;
}
.settings-card button:hover { background: #ffffff1a; transform: translateX(5px); border-color: #ffffff4d; color: #fff; }
.settings-card .btn-close { background: linear-gradient(45deg, #ff3366, #ff5252); border: 0; margin-top: 20px; font-weight: bold; color: #fff; }
.settings-card .btn-close:hover { background: linear-gradient(45deg, #ff5252, #ff1744); transform: scale(1.05); box-shadow: 0 5px 15px #ff336666; }

.settings-section-title {
    color: #00ff88; font-size: 20px; font-weight: bold; margin: 15px 0 5px; width: 100%;
    text-align: center; border-bottom: 1px solid #00ff884d; padding-bottom: 5px;
}

/* Buttons */
button {
    background: linear-gradient(45deg, #0066ff, #0099ff); color: #fff; border: 0; padding: 15px 50px;
    font: bold 24px inherit; border-radius: 50px; cursor: pointer; transition: .2s;
    box-shadow: 0 5px 15px #0066ff66; margin: 0;
}
button:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px #0066ff99; }
button:active { transform: translateY(1px); }

.btn-play-large {
    font-size: 48px; padding: 20px 80px; background: linear-gradient(45deg, #00ff88, #00b8d4);
    box-shadow: 0 0 30px #00ff8866; border: 2px solid #fff; animation: pulse-play 2s infinite;
}
@keyframes pulse-play { 0%, 100% { transform: scale(1); box-shadow: 0 0 30px #00ff8866; } 50% { transform: scale(1.05); box-shadow: 0 0 50px #00ff88b3; } }

.btn-menu-item { font-size: 18px; padding: 12px 25px; min-width: 120px; }
.btn-max { background: linear-gradient(45deg, #ff9800, #ff5722); }
.btn-max:hover { box-shadow: 0 5px 15px #ff572266; }
.btn-reset { background: linear-gradient(45deg, #ff3333, #cc0000); font-size: 20px; }
.btn-reset:hover { box-shadow: 0 5px 15px #ff333366; }
.btn-rebirth { background: linear-gradient(45deg, #d500f9, #aa00ff); font-size: 22px; box-shadow: 0 0 20px #d500f966; margin-bottom: 20px; }
.btn-rebirth:hover { box-shadow: 0 0 30px #d500f9cc; }

/* Shop */
.shop-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 90%; max-width: 800px;
    max-height: 60vh; overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: #0ff #0f152580;
}
.shop-grid::-webkit-scrollbar { width: 8px; }
.shop-grid::-webkit-scrollbar-track { background: #0f152580; }
.shop-grid::-webkit-scrollbar-thumb { background-color: #0ff; border-radius: 4px; }

.shop-item {
    background: #2a3b5a80; border: 2px solid #0066ff; border-radius: 15px; padding: 20px;
    text-align: center; transition: transform .2s; display: flex; flex-direction: column; justify-content: space-between;
}
.shop-item:hover { transform: scale(1.05); background: #2a3b5acc; }
.shop-item h3 { margin-top: 0; }
.shop-item p { font-size: 16px; margin-bottom: 15px; color: #ccc; }
.shop-item button { font-size: 18px; padding: 10px 20px; width: 100%; }
.shop-buttons { display: flex; gap: 10px; margin-top: 10px; }
.shop-buttons button { margin: 0; padding: 10px; font-size: 16px; flex: 1; border-radius: 8px; }

/* Guide */
.guide-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; justify-content: center; width: 100%; padding-bottom: 10px; border-bottom: 1px solid #ffffff1a; }
.guide-tab-btn {
    background: #ffffff0d; border: 1px solid #ffffff1a; padding: 10px 15px; color: #aaa;
    cursor: pointer; border-radius: 8px; font-size: 14px; transition: .2s; flex: 1; min-width: 100px; text-align: center;
}
.guide-tab-btn:hover { background: #ffffff1a; color: #fff; transform: translateY(-2px); }
.guide-tab-btn.active {
    background: linear-gradient(45deg, #00ff88, #00b8d4); color: #050a15; font-weight: bold; border-color: #00ff88; box-shadow: 0 0 15px #00ff884d;
}

.guide-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; width: 100%; overflow-y: auto; padding: 5px; max-height: 60vh; }
#guide-items { display: flex; flex-direction: column; width: 95%; max-width: 1000px; height: 80vh; overflow-y: auto; overflow-x: hidden; padding: 10px; pointer-events: auto; }
.guide-section-title { grid-column: 1 / -1; color: #fff; border-bottom: 2px solid #00ff88; padding-bottom: 10px; margin-top: 20px; }

/* Progress */
.progress-wrapper { align-self: center; width: 800px; text-align: center; background: #0f1525cc; padding: 10px; border-radius: 15px; border: 1px solid #2a3b5a; }
.progress-label { font: bold 14px sans-serif; display: block; margin-bottom: 5px; }
.progress-bar { width: 100%; height: 12px; background: #0008; border-radius: 6px; overflow: hidden; margin-bottom: 5px; border: 1px solid #2a3b5a; }
#progressFill { height: 100%; width: 0%; background: linear-gradient(90deg, #0066ff, #00ff88); transition: width .3s ease-out; box-shadow: 0 0 10px #00ff8880; }
#progressText { color: #ccc; font: bold 12px sans-serif; }

@media (max-width: 768px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); width: 95%; padding: 5px; }
    .settings-card { min-width: 90%; padding: 20px; width: 90%; }
    .settings-card h1 { font-size: 32px; }
}
@media (max-width: 480px) { .shop-grid { grid-template-columns: 1fr; } }

/* --- New Styles Extracted from index.html --- */
.hud-widget {
    position: fixed; z-index: 1000; background: #0f1423d9; border: 1px solid #ffffff1a; border-left: 3px solid;
    backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 4px; font: bold 16px 'Segoe UI', monospace;
    box-shadow: 0 4px 15px #0008; display: flex; align-items: center; gap: 8px; transition: transform .2s;
}
.hud-widget:hover { transform: scale(1.02); }
#fpsCounter { top: 15px; left: 15px; color: #0f0; border-left-color: #0f0; }
#killCounterDisplay { top: 15px; right: 15px; color: #f33; border-left-color: #f33; }
#bossTimerDisplay { top: 65px; right: 15px; color: #e040fb; border-left-color: #e040fb; }

#bgCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }

#minimap-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000; width: 200px; height: 200px;
    border-radius: 8px; border: 2px solid #0ff8; box-shadow: 0 0 20px #0ff3; background: #000; overflow: hidden;
}
#minimapCanvas { position: absolute; inset: 0; }
.radar-sweep {
    position: absolute; top: 50%; left: 50%; width: 150%; height: 150%;
    background: conic-gradient(from 0deg, transparent 0deg, #0ff1 60deg, transparent 60deg);
    transform-origin: top left; animation: radar-spin 4s linear infinite; pointer-events: none;
}
@keyframes radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#heartsContainer { position: fixed; bottom: 25px; right: 240px; z-index: 1000; display: flex; gap: 2px; filter: drop-shadow(0 0 5px #f338); }
.heart-block { width: 24px; height: 14px; border: 1px solid #555; transform: skewX(-25deg); margin-right: 4px; transition: all .3s cubic-bezier(.4,0,.2,1); }

#pause-overlay {
    position: absolute; inset: 0; background: #000b; display: none; flex-direction: column;
    align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(5px);
}
#pet-overlay { z-index: 9999 !important; pointer-events: auto !important; background: #0f141efa; }

/* Evolution Bar (Merged) */
.evolution-bar {
    position: relative; width: 100%; max-width: 800px; height: 32px;
    background: #0a0f19; border: 1px solid #ff980080; border-radius: 16px;
    overflow: hidden; margin-top: auto; box-shadow: 0 5px 20px #0008;
}
.evo-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff9800, #ff3d00); transition: width .3s; }
.evo-text {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
    gap: 10px; font: bold 14px 'Segoe UI', sans-serif; color: #fff; text-shadow: 1px 1px 3px #000; z-index: 1;
}
#lblProgress { color: #ffb74d; letter-spacing: 1px; text-transform: uppercase; }

/* Side Stats Styling (Black Cards) */
#game-stats-container .stat-item {
    background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 12px; border-radius: 8px; margin-bottom: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); backdrop-filter: blur(5px);
}