/* Global Styles - HGames DevTools (Black & Gray theme) */
:root {
    --accent:       #9CA3AF;
    --accent-bright:#D1D5DB;
    --accent-dim:   rgba(156,163,175,0.3);
    --dark-bg:      #0a0a0a;
    --card-bg:      #141414DD;
    --border-color: rgba(156,163,175,0.20);
    --border-light: rgba(156,163,175,0.32);
    --text-muted:   #CCCCCC;
    --text-dim:     #BBBBBB;
}

html {
    min-height: 100%;
}

body {
    background-color: var(--dark-bg);
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Exo 2', sans-serif;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
    .h-screen {
        height: auto !important;
        min-height: 100dvh;
    }

    .h-screen > main {
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Display/heading font — Russo One (legacy class names kept for existing markup) */
.font-orbitron,
.font-cinzel,
.font-rajdhani {
    font-family: 'Russo One', sans-serif !important;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Russo One', sans-serif;
}

.content-box { background-color: rgba(20, 20, 20, 0.88); backdrop-filter: blur(8px); border: 1px solid var(--border-color); }
.content-box-light { background-color: rgba(38, 38, 38, 0.9); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: 'Roboto Mono', monospace; }

/* Alert Messages */
.alert-success { background-color: rgba(16, 185, 129, 0.2); border: 1px solid rgb(16, 185, 129); color: rgb(110, 231, 183); }
.alert-error { background-color: rgba(107, 114, 128, 0.25); border: 1px solid rgb(156, 163, 175); color: rgb(209, 213, 219); }

/* Debug Box */
.debug-box {
    background-color: #1a1a1a; border: 1px solid #2a2a2a; color: #a0aec0;
    padding: 1rem; margin-bottom: 1rem; border-radius: 0.5rem;
    font-family: monospace; font-size: 0.875rem; white-space: pre-wrap;
}

/* ── Dashboard Cards ────────────────────────── */
.dash-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    transition: all 0.3s ease; border-radius: 16px; padding: 24px;
}
.dash-card:hover {
    border-color: rgba(156,163,175,0.45);
    box-shadow: 0 4px 24px rgba(156,163,175,0.12);
    transform: translateY(-2px);
}

/* ── Custom Scrollbar (global) ──────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--dark-bg); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Hover utilities ────────────────────────── */
.hover-grow { transition: all 0.3s ease; }
.hover-grow:hover { transform: scale(1.03); }

/* ── Flash animation ────────────────────────── */
@keyframes flashYellow {
    0%   { color: #ffffff; text-shadow: none; }
    20%  { color: #d1d5db; text-shadow: 0 0 12px rgba(156,163,175,0.85); }
    100% { color: #ffffff; text-shadow: none; }
}
.flash-yellow { animation: flashYellow 1.4s ease-out; }