@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@400;500;700&display=swap');

/* GLOBAL RESET */
* { box-sizing: border-box; }
body {
    background-color: #0f172a;
    color: #e2e8f0;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    user-select: none;
    margin: 0; padding: 0;
}

h1, h2, h3, .tech-font { font-family: 'Orbitron', sans-serif; }

/* UTILS */
.fixed.inset-0 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
.hidden { display: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* BACKGROUND */
.bg-grid {
    background-image: linear-gradient(#06b6d4 1px, transparent 1px), linear-gradient(90deg, #06b6d4 1px, transparent 1px); 
    background-size: 40px 40px; z-index: 0;
}

/* OVERLAYS - Z-INDEX HIERARCHY */
/* Grid: 0 */
/* Game Elements: 10-20 */
/* Lower UI (Timer/Version): 60 */
/* Modals (Prestige/Ach): 150 */
/* Login Overlay: 200 */
/* Patch Notes: 250 (Above Login) */
/* Tooltip/Toast: 9999 */

.glass-panel { background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(10px); }
#login-overlay { z-index: 200; } 

/* VERSION & TIMER - Must be clickable */
#version-display {
    z-index: 300; /* Higher than login so we can read patch notes before logging in */
}
#save-timer {
    z-index: 60;
}

/* MODALS */
#patch-modal { z-index: 400; } /* Highest modal */
#prestige-modal, #achievements-modal { z-index: 150; }

/* TOOLTIPS & TOASTS */
#global-tooltip {
    position: fixed; z-index: 10000; pointer-events: none;
    background: rgba(15, 23, 42, 0.98); border: 1px solid #06b6d4;
    color: #fff; padding: 8px 12px; border-radius: 6px;
    font-size: 11px; max-width: 250px; width: max-content;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8); display: none; white-space: normal;
}
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9000; pointer-events: none; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: rgba(6, 182, 212, 0.15); border: 1px solid #06b6d4; color: #cffafe;
    padding: 12px 24px; border-radius: 8px; font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem; box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    animation: slideIn 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards; backdrop-filter: blur(5px); text-align: center;
}
@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* CORE */
.core-container { position: relative; display: flex; justify-content: center; align-items: center; height: 260px; z-index: 10; }
.core {
    width: 160px; height: 160px;
    background: radial-gradient(circle, #06b6d4 0%, #0891b2 100%);
    border-radius: 50%; box-shadow: 0 0 20px #06b6d4, 0 0 60px #0891b2;
    cursor: pointer; position: relative; z-index: 20;
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex; justify-content: center; align-items: center;
}
.core:active { transform: scale(0.95); box-shadow: 0 0 10px #06b6d4, 0 0 30px #0891b2; }
.core:hover { transform: scale(1.05); box-shadow: 0 0 30px #22d3ee, 0 0 90px #06b6d4; }
.particle {
    position: fixed; pointer-events: none; animation: floatUp 0.8s ease-out forwards;
    font-weight: bold; color: #fff; font-size: 1.5rem; text-shadow: 0 0 5px #06b6d4; z-index: 9999;
}
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-80px) scale(1.5); opacity: 0; } }

/* PRESTIGE BUTTONS */
.btn-prestige-0 { background-color: rgba(88, 28, 135, 0.4); border-color: #a855f7; color: #e9d5ff; } 
.btn-prestige-1 { background-color: rgba(59, 130, 246, 0.5); border-color: #60a5fa; color: #dbeafe; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); } 
.btn-prestige-2 { background-color: rgba(234, 179, 8, 0.5); border-color: #facc15; color: #fef9c3; box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); } 
.btn-prestige-3 { background-color: rgba(236, 72, 153, 0.5); border-color: #f472b6; color: #fce7f3; box-shadow: 0 0 25px rgba(236, 72, 153, 0.5); } 

/* ACHIEVEMENTS */
.achievement-card {
    background: #1e293b; border: 1px solid #334155; padding: 10px; border-radius: 6px;
    opacity: 0.5; filter: grayscale(1); transition: all 0.3s; position: relative; color: #e2e8f0;
}
.achievement-card.unlocked { opacity: 1; filter: grayscale(0); }
.frame-green { border-color: #22c55e !important; box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); opacity: 1 !important; filter: grayscale(0) !important; }
.frame-bronze { border-color: #cd7f32 !important; box-shadow: 0 0 10px rgba(205, 127, 50, 0.4); opacity: 1 !important; filter: grayscale(0) !important; }
.frame-silver { border-color: #e2e8f0 !important; box-shadow: 0 0 10px rgba(226, 232, 240, 0.4); opacity: 1 !important; filter: grayscale(0) !important; }
.frame-gold { border-color: #fbbf24 !important; box-shadow: 0 0 15px rgba(251, 191, 36, 0.6); background: linear-gradient(45deg, #451a03, #78350f); opacity: 1 !important; filter: grayscale(0) !important; }
.frame-blue { border-color: #3b82f6 !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); opacity: 1 !important; filter: grayscale(0) !important; }

.star-active { color: #f59e0b; text-shadow: 0 0 5px #f59e0b; }
.star-inactive { color: #475569; }
.info-icon { cursor: help; }

/* ICONS WALL */
#user-achievements { display: grid; grid-template-columns: repeat(2, 28px); gap: 4px; margin-top: 4px; }
.profile-icon {
    width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    font-size: 14px; border: 2px solid #334155; background: #0f172a; cursor: help; color: #fff;
}
.pi-green { border-color: #22c55e; color: #22c55e; }
.pi-bronze { border-color: #cd7f32; color: #cd7f32; }
.pi-silver { border-color: #cbd5e1; color: #fff; box-shadow: 0 0 5px rgba(255,255,255,0.3); }
.pi-gold { border-color: #fbbf24; color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.pi-blue { border-color: #3b82f6; color: #3b82f6; }

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: #1e293b; }
.custom-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }

.battery-item {
    font-size: 0.7rem; border: 1px solid #334155; background: #0f172a; padding: 3px 6px; border-radius: 4px;
    display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px;
}
.mini-bar-bg { width: 100%; height: 6px; background: #1e293b; border-radius: 2px; overflow: hidden; margin-top: 2px; border: 1px solid #334155; }
.mini-bar-fill { height: 100%; background: #22d3ee; }
.ach-tab.active { border-bottom: 2px solid #f59e0b; color: #fbbf24; }

/* STAT COLORS */
.stat-default { color: #4ade80; } 
.stat-purple { color: #c084fc; } 
.stat-special-green { color: #4ade80; text-shadow: 0 0 5px rgba(74, 222, 128, 0.5); } 
.stat-bronze { color: #cd7f32; text-shadow: 0 0 5px rgba(205, 127, 50, 0.5); } 
.stat-silver { color: #cbd5e1; text-shadow: 0 0 8px rgba(203, 213, 225, 0.6); } 
.stat-gold { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }