/* ==========================================================================
   DESTINY NETWORK — Centralized Design System & Theme Utilities
   ========================================================================== */

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

/* No layout jump when the web fonts arrive (CLS fix, owner 2026-10-13). Until JetBrains Mono / Barlow Condensed
   download, text is drawn in a local font TUNED to the same line height (measured: JetBrains Mono ascent 102% /
   descent 30%; Barlow Condensed 100% / 20%), so swapping fonts doesn't push anything down.
   Same URL as the <link> in index.html, so the browser loads the font list once. (IBM Plex: line-tracker loads its own.) */
@font-face {
    font-family: 'JetBrains Mono Fallback';
    src: local('Menlo'), local('Consolas'), local('DejaVu Sans Mono'), local('Liberation Mono'), local('Courier New');
    ascent-override: 102%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
    font-family: 'Barlow Condensed Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
    size-adjust: 80%; ascent-override: 125%; descent-override: 25%; line-gap-override: 0%;
}

:root {
    /* Color Palette */
    --bg: #0a0c0f;
    --surface: #111418;
    --surface2: #181c22;
    --surface3: #222933;
    
    /* Borders & Glows */
    --border: rgba(255, 255, 255, 0.07);
    --border2: rgba(255, 255, 255, 0.13);
    --border-active: rgba(245, 158, 11, 0.4);
    --border-glow: rgba(245, 158, 11, 0.15);

    /* Text & Accents */
    --text: #e8eaed;
    --muted: #6b7280;
    --dim: #243040;
    --accent: #f59e0b;      /* Golden Yellow */
    --accent2: #3b82f6;     /* Royal Blue */
    --cyan: #06b6d4;        /* Cyberpunk Cyan */
    
    /* Status Colors */
    --win: #10b981;         /* Neon Green */
    --live: #ef4444;        /* Neon Red */
    --loss: #ef4444;        /* Neon Red */
    --amber: #f5a623;       /* Amber */
    --pending: #6b7280;     /* Muted Grey */

    /* Typography Fonts */
    --font-head: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
    --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
}

/* Custom Universal Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

/* Selection */
::selection {
    background: var(--accent);
    color: #000;
}

/* Standard Utility Animations */
@keyframes greenFlash {
    0% { background: rgba(16, 185, 129, 0.25); box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); }
    100% { background: transparent; box-shadow: none; }
}

@keyframes redFlash {
    0% { background: rgba(239, 68, 68, 0.25); box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }
    100% { background: transparent; box-shadow: none; }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.05); }
}

.flash-green { animation: greenFlash 1s ease-out; }
.flash-red { animation: redFlash 1s ease-out; }
.pulse-glow { animation: pulseGlow 1.6s infinite ease-in-out; }

/* Global Toast / Notification Container */
#destiny-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.destiny-toast {
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s;
}

.destiny-toast.win { border-left-color: var(--win); }
.destiny-toast.live { border-left-color: var(--live); }
.destiny-toast.cyan { border-left-color: var(--cyan); }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}