/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MORRHOLLOW UNIFIED DESIGN SYSTEM
   PS1 Magitek Cyberpunk MMO - Inspired by League of Legends & WoW

   Philosophy: Tight, compact, low-fi, scanline aesthetic
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       COLOR PALETTE - PS1 Magitek Cyberpunk
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* Primary Arcane Gold Accents */
    --neon-cyan: rgba(212, 175, 55, 1);  /* Arcane Gold (primary) */
    --neon-cyan-glow: rgba(212, 175, 55, 0.8);
    --neon-magenta: rgba(186, 166, 116, 1);  /* Dusty Tan (secondary) */
    --neon-magenta-glow: rgba(186, 166, 116, 0.8);
    --neon-purple: rgba(146, 128, 95, 1);  /* Muted gold-purple */
    --neon-gold: rgba(212, 175, 55, 1);  /* Same as primary */

    /* Dark Base Colors (PS1 low-fi aesthetic) */
    --bg-primary: rgba(10, 10, 20, 0.95);
    --bg-secondary: rgba(20, 20, 35, 0.92);
    --bg-tertiary: rgba(30, 30, 45, 0.88);
    --bg-hover: rgba(40, 40, 60, 0.85);

    /* Glass/Transparent Overlays */
    --glass-light: rgba(255, 255, 255, 0.05);
    --glass-medium: rgba(255, 255, 255, 0.08);
    --glass-heavy: rgba(255, 255, 255, 0.12);

    /* Borders - Chunky PS1 Style */
    --border-primary: 1px solid rgba(212, 175, 55, 0.3);
    --border-secondary: 1px solid rgba(186, 166, 116, 0.2);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.1);
    --border-glow: 1px solid rgba(212, 175, 55, 0.6);

    /* Text Colors - Low Saturation for PS1 Feel */
    --text-primary: #e0e0f0;
    --text-secondary: #a0a0b8;
    --text-tertiary: #707088;
    --text-disabled: #505060;
    --text-neon: var(--neon-cyan);

    /* Semantic Colors */
    --success: #00ff88;
    --warning: #ffaa00;
    --danger: #ff4466;
    --info: var(--neon-cyan);

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       TYPOGRAPHY - Compact & Readable (LoL/WoW Inspired)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'RemiliaMincho', serif;
    --font-family-mono: 'Courier New', monospace;

    /* Font Sizes - TIGHT like LoL/WoW */
    --font-xs: 9px;       /* Timestamps, helper text */
    --font-sm: 10px;      /* Labels, secondary info */
    --font-base: 11px;    /* Body text - SMALL! */
    --font-md: 12px;      /* Emphasized text */
    --font-lg: 13px;      /* Section titles */
    --font-xl: 14px;      /* Panel headers */
    --font-2xl: 16px;     /* Main headers */
    --font-3xl: 20px;     /* Hero text */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights - TIGHT */
    --line-dense: 1.2;
    --line-normal: 1.3;
    --line-relaxed: 1.4;

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SPACING - Minimal Padding (LoL/WoW Style)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-8: 16px;
    --space-10: 20px;

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       BORDER RADIUS - Chunky PS1 Style
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 999px;

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SHADOWS - Subtle PS1 Glow Effects
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-glow-cyan: 0 0 10px var(--neon-cyan-glow);  /* Gold glow */
    --shadow-glow-magenta: 0 0 10px var(--neon-magenta-glow);  /* Tan glow */
    --shadow-glow-gold: 0 0 10px rgba(212, 175, 55, 0.8);  /* Alias for gold */
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       TRANSITIONS
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --transition-slow: 0.2s ease;

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       Z-INDEX SYSTEM
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PS1 VISUAL EFFECTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Scanline Overlay Effect */
.ps1-scanlines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;  /* Slightly subtler for gold theme */
}

/* Dithered Gradient Effect */
.ps1-dither {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px
        );
}

/* CRT Glow Effect */
.ps1-glow {
    position: relative;
}

.ps1-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: inherit;
    filter: blur(4px);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

/* Pixelated Border Effect */
.ps1-pixelated {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIFIED PANEL SYSTEM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.panel {
    background: var(--bg-primary);
    border: var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family-primary);
    font-size: var(--font-base);
    line-height: var(--line-normal);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

/* Panel with PS1 effects */
.panel-ps1 {
    composes: panel;
}

.panel-ps1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(212, 175, 55, 0.02),
        rgba(212, 175, 55, 0.02) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

/* Panel Header - COMPACT like LoL */
.panel-header {
    height: 32px; /* Very compact! */
    padding: 0 var(--space-4);
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(212, 175, 55, 0.05) 100%);
    border-bottom: var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.panel-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.6) 50%,
        transparent 100%);
    opacity: 0.5;
}

.panel-title {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    color: rgba(212, 175, 55, 0.95);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
}

.panel-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* Panel Body - TIGHT padding */
.panel-body {
    padding: var(--space-4) var(--space-6); /* 8px 12px - VERY compact */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Panel Footer */
.panel-footer {
    padding: var(--space-3) var(--space-6);
    border-top: var(--border-subtle);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS - Unified Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.card {
    background: var(--bg-secondary);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5); /* 8px 10px */
    transition: all var(--transition-normal);
    position: relative;
}

.card:hover {
    background: var(--bg-hover);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: var(--shadow-glow-gold);
    transform: translateY(-1px);
}

.card-compact {
    padding: var(--space-3) var(--space-4); /* 6px 8px - even tighter */
}

.card-header {
    margin-bottom: var(--space-3);
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.card-body {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Stat Card - LoL Inspired */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: rgba(212, 175, 55, 0.95);
    text-shadow: var(--shadow-glow-gold);
}

.stat-label {
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS - Unified Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn {
    padding: var(--space-3) var(--space-5); /* 6px 10px */
    background: var(--bg-secondary);
    border: var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 175, 55, 0.2),
        transparent);
    transition: left var(--transition-slow);
}

.btn:hover {
    background: var(--bg-hover);
    border-color: rgba(212, 175, 55, 0.6);
    color: rgba(212, 175, 55, 0.95);
    box-shadow: var(--shadow-glow-gold);
    transform: translateY(-1px);
}

.btn:hover::before {
    left: 100%;
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.2) 0%,
        rgba(212, 175, 55, 0.1) 100%);
    border-color: rgba(212, 175, 55, 0.6);
    color: rgba(212, 175, 55, 0.95);
    box-shadow: var(--shadow-glow-gold);
}

.btn-primary:hover {
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(212, 175, 55, 0.15) 100%);
}

.btn-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover {
    background: linear-gradient(180deg,
        rgba(255, 68, 102, 0.2) 0%,
        rgba(255, 68, 102, 0.1) 100%);
    box-shadow: 0 0 10px rgba(255, 68, 102, 0.6);
}

.btn-success {
    border-color: var(--success);
    color: var(--success);
}

.btn-success:hover {
    background: linear-gradient(180deg,
        rgba(0, 255, 136, 0.2) 0%,
        rgba(0, 255, 136, 0.1) 100%);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.btn-sm {
    padding: var(--space-2) var(--space-4); /* 4px 8px */
    font-size: var(--font-xs);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INPUTS - Unified Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.input {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-family: var(--font-family-primary);
    transition: all var(--transition-normal);
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: var(--shadow-glow-gold);
    background: var(--bg-secondary);
}

.input::placeholder {
    color: var(--text-tertiary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LISTS - Unified Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-subtle);
    transition: all var(--transition-fast);
    min-height: 44px;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item:hover {
    background: var(--glass-light);
}

.list-item-interactive {
    cursor: pointer;
}

.list-item-interactive:hover {
    background: var(--glass-medium);
    border-left: 2px solid rgba(212, 175, 55, 0.8);
    padding-left: calc(var(--space-4) - 2px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLBARS - Unified Design (Replaces 24 duplicates!)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) rgba(0, 0, 0, 0.2);
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.4) 0%,
        rgba(186, 166, 116, 0.5) 100%);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.6) 0%,
        rgba(186, 166, 116, 0.7) 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIVIDERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 50%,
        transparent 100%);
    margin: var(--space-4) 0;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(212, 175, 55, 0.3) 50%,
        transparent 100%);
    margin: 0 var(--space-4);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES & TAGS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    border: var(--border-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    color: rgba(212, 175, 55, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    border-color: var(--success);
    color: var(--success);
}

.badge-warning {
    border-color: var(--warning);
    color: var(--warning);
}

.badge-danger {
    border-color: var(--danger);
    color: var(--danger);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UTILITY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Spacing */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* Text */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-neon { color: rgba(212, 175, 55, 0.95); text-shadow: var(--shadow-glow-gold); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.5px; }

/* Flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Grid */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Misc */
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }