/* =========================================
   EMERALD SPACE - MASTER THEME (V4 - FIXED)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    /* Core Colors */
    --emerald: #2ecc71;
    --emerald-glow: rgba(46, 204, 113, 0.4);
    --gold: #ffca28;
    --gold-glow: rgba(255, 202, 40, 0.4);
    --cyan: #00eaff;
    --cyan-glow: rgba(0, 234, 255, 0.4);
    --danger: #ff4444;
    --danger-glow: rgba(255, 68, 68, 0.4);
    
    /* Backgrounds & Panels */
    --space-bg: #090c10;
    --carbon: #161b22;
    --panel-glass: rgba(22, 27, 34, 0.85);
    --panel-border: rgba(255, 255, 255, 0.08);
    
    /* Typography Colors */
    --text-main: #e6edf3;
    --text-dim: #8b949e;
}

* {
    box-sizing: border-box; margin: 0; padding: 0;
    user-select: none; -webkit-tap-highlight-color: transparent;
}

/* --- GLOBAL SMOOTHING --- */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--space-bg);
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(0, 234, 255, 0.03), transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(46, 204, 113, 0.03), transparent 50%);
    color: var(--text-main);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .text-mono, .stat-badge, .hp-text, #player-gold, #player-stamina {
    font-family: 'Share Tech Mono', monospace; letter-spacing: 1px;
}

/* =========================================
   SISTEM POP-UP & MODAL (GLOBAL - FIXED)
   ========================================= */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; 
}

.z-menu { z-index: 9999; }
.z-alert { z-index: 20000; }
.z-top { z-index: 30000; }

.modal-box { 
    background: var(--carbon); border-radius: 12px; padding: 25px; 
    width: 85%; max-width: 320px; text-align: center; 
    border: 2px solid var(--panel-border); box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.modal-title { margin-bottom: 12px; font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.modal-text { color: var(--text-main); font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.modal-subtext { font-size: 11px; color: var(--text-dim); margin-bottom: 20px; text-transform: uppercase; font-weight: bold; }
.modal-icon { width: 60px; height: 60px; object-fit: contain; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));}
.modal-icon-md { width: 45px; height: 45px; object-fit: contain; margin-bottom: 10px; }

/* =========================================
   SCI-FI PANELS (GLASSMORPHISM)
   ========================================= */
.sci-fi-panel {
    background: var(--panel-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); padding: 15px;
}

/* =========================================
   MODERN BUTTONS (HOLOGRAPHIC)
   ========================================= */
button { font-family: 'Rajdhani', sans-serif; outline: none; transition: all 0.2s ease-in-out; cursor: pointer;}
button:active { transform: scale(0.95); }

.btn-action {
    display: block; width: 100%; padding: 14px; background: var(--emerald); color: #000;
    font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
    border: none; border-radius: 8px; box-shadow: 0 0 15px var(--emerald-glow); margin-bottom: 10px;
}

.btn-action:disabled { background: #30363d !important; color: #8b949e !important; box-shadow: none !important; cursor: not-allowed; transform: none; }
.btn-action.green { background: var(--emerald); box-shadow: 0 0 15px var(--emerald-glow); }
.btn-action.red { background: var(--danger); box-shadow: 0 0 15px var(--danger-glow); color: white;}
.btn-action.outline { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); box-shadow: none;}
.btn-action.outline-gray { background: transparent; border: 1px solid #30363d; color: #8b949e; box-shadow: none; margin-bottom: 0;}

.btn-half {
    flex: 1; padding: 12px; font-weight: 800; border-radius: 8px; border: none; text-transform: uppercase; font-size: 12px;
}

.btn-half.yellow { background: transparent; border: 1px solid var(--gold); color: var(--gold); box-shadow: inset 0 0 10px var(--gold-glow); }
.btn-half.blue { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); box-shadow: inset 0 0 10px var(--cyan-glow); }
.btn-half.red-outline { background: transparent; border: 1px solid var(--danger); color: var(--danger); box-shadow: inset 0 0 10px var(--danger-glow); }

/* =========================================
   UTILITIES
   ========================================= */
.flex-row { display: flex; gap: 10px; width: 100%; margin-bottom: 12px;}
.flex-1 { flex: 1; }
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0 !important; }
.text-emerald { color: var(--emerald); }
.text-gold { color: var(--gold); }
.text-danger { color: var(--danger); }
.text-cyan { color: var(--cyan); }
.text-black { color: black !important; }

@keyframes pulseGlow {
    0% { box-shadow: 0 0 10px var(--emerald-glow); }
    50% { box-shadow: 0 0 20px var(--emerald), 0 0 40px var(--emerald-glow); }
    100% { box-shadow: 0 0 10px var(--emerald-glow); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   UNIVERSAL NEON SCROLLBAR (PHANTOM & SOLFLARE READY)
   ========================================= */
::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    display: block !important;
}

::-webkit-scrollbar-track {
    background: rgba(13, 17, 23, 0.9) !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--emerald), #1e8449) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px var(--emerald-glow) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00eaff, var(--emerald)) !important;
    box-shadow: 0 0 15px var(--cyan-glow) !important;
}

/* KHUSUS UNTUK FIREFOX & DOMPET YANG MENGGUNAKAN ENGINE GECKO */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--emerald) rgba(13, 17, 23, 0.9) !important;
}

/* Animasi Berkedip untuk Jam Digital */
@keyframes blinkTimer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cd-blink {
    animation: blinkTimer 1s infinite;
}