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

:root {
    --bg-primary: #05020c;
    --bg-secondary: #0c051a;
    --text-primary: #ffffff;
    --text-secondary: #8fefff;
    --accent: #00f0ff;
    --accent-hover: #00c0ff;
    --accent-glow: rgba(0, 240, 255, 0.4);
    --card-bg: rgba(13, 6, 28, 0.85);
    --card-border: rgba(0, 240, 255, 0.22);
    --danger: #ff0055;
    --danger-hover: #ff007f;
    --danger-glow: rgba(255, 0, 85, 0.35);
    --success: #39ff14;
    --success-hover: #00ff66;
    --success-glow: rgba(57, 255, 20, 0.35);
    --warning: #ffea00;
    --warning-glow: rgba(255, 234, 0, 0.3);
    
    /* Chart and Custom Faction Overrides */
    --popularity-bar: #00f0ff;
    --popularity-bar-glow: rgba(0, 240, 255, 0.45);
    --stat-up-color: #39ff14;
    
    --font-main: 'Share Tech Mono', 'Outfit', monospace, -apple-system, sans-serif;
}

/* 1. Cyber Mainframe Animated Background */
body {
    background-color: var(--bg-primary) !important;
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(139, 92, 246, 0.2) 0%, transparent 65%),
        radial-gradient(circle at 10% 85%, rgba(255, 0, 85, 0.08) 0%, transparent 45%),
        linear-gradient(rgba(5, 2, 12, 0.97), rgba(5, 2, 12, 0.98)),
        linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 25px 25px, 25px 25px !important;
    background-attachment: fixed !important;
    position: relative;
}

/* CRT Scanlines and Screen Glare Overlay */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.4;
}

/* 2. Cyber Header overrides */
.game-header {
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1) !important;
    background: linear-gradient(135deg, rgba(13, 6, 28, 0.95), rgba(22, 10, 48, 0.95)) !important;
    position: relative;
    overflow: hidden;
}

.game-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.game-header-info h1 {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 2px var(--accent) !important;
    letter-spacing: 2px !important;
    font-family: var(--font-main) !important;
}

.game-header-avatar img {
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5) !important;
}

/* 3. Glassmorphic Neon Cards */
.card {
    background: linear-gradient(180deg, rgba(13, 6, 28, 0.85) 0%, rgba(7, 3, 17, 0.92) 100%) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

.card-title {
    border-bottom: 2px solid rgba(0, 240, 255, 0.2) !important;
    color: var(--accent) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
    font-family: var(--font-main) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
}

/* 4. Hyper-Neon Buttons */
.btn {
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    font-family: var(--font-main) !important;
    border: 1px solid var(--accent) !important;
    background: rgba(0, 240, 255, 0.05) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 8px rgba(0, 240, 255, 0.05) !important;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.5) !important;
}

.btn:hover, .btn:focus {
    background: var(--accent) !important;
    color: #05020c !important;
    box-shadow: 0 0 25px var(--accent), 0 0 5px rgba(0, 240, 255, 0.5) !important;
    text-shadow: none !important;
    transform: translateY(-2px) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-secondary:hover {
    background: rgba(0, 240, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25) !important;
}

.btn-success {
    background: rgba(57, 255, 20, 0.05) !important;
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.15), inset 0 0 8px rgba(57, 255, 20, 0.05) !important;
    text-shadow: 0 0 4px rgba(57, 255, 20, 0.5) !important;
}

.btn-success:hover {
    background: var(--success) !important;
    color: #05020c !important;
    box-shadow: 0 0 25px var(--success), 0 0 5px rgba(57, 255, 20, 0.5) !important;
    text-shadow: none !important;
}

.btn-danger {
    background: rgba(255, 0, 85, 0.05) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.15), inset 0 0 8px rgba(255, 0, 85, 0.05) !important;
    text-shadow: 0 0 4px rgba(255, 0, 85, 0.5) !important;
}

.btn-danger:hover {
    background: var(--danger) !important;
    color: #05020c !important;
    box-shadow: 0 0 25px var(--danger), 0 0 5px rgba(255, 0, 85, 0.5) !important;
    text-shadow: none !important;
}

/* 5. Cybernetic Interactive Lists */
.decision-item {
    background-color: rgba(5, 3, 10, 0.6) !important;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    transition: all 0.25s ease !important;
}

.decision-item:hover, .decision-item:focus {
    background-color: rgba(0, 240, 255, 0.08) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
    padding-left: 22px !important;
}

.decision-item::after {
    color: var(--accent) !important;
    text-shadow: 0 0 5px var(--accent) !important;
}

.decision-category {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    background: rgba(5, 3, 10, 0.45) !important;
}

.decision-category[open] {
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15) !important;
}

.decision-category summary.decision-category-title {
    color: var(--accent) !important;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.3) !important;
}

.stat-item {
    background-color: rgba(5, 3, 10, 0.65) !important;
    border: 1px solid rgba(0, 240, 255, 0.12) !important;
}

/* 6. Form Fields */
.form-input {
    background-color: rgba(5, 3, 10, 0.8) !important;
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    font-family: var(--font-main) !important;
}

.form-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px var(--accent-glow), inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
}

/* 7. HUD & Stats */
.hud-score-value {
    color: var(--warning) !important;
    text-shadow: 0 0 12px var(--warning) !important;
}

.stat-value.up {
    color: var(--success) !important;
    text-shadow: 0 0 8px var(--success) !important;
}

.stat-value.down {
    color: var(--danger) !important;
    text-shadow: 0 0 8px var(--danger) !important;
}

/* 8. Threat alert badges pulsing animations */
.faction-alert-badge.A {
    background-color: var(--warning) !important;
    box-shadow: 0 0 10px var(--warning) !important;
}

.faction-alert-badge.R {
    background-color: var(--danger) !important;
    box-shadow: 0 0 10px var(--danger) !important;
}

/* 9. Glowing Alert & News Box overrides */
.alert-box {
    background: linear-gradient(135deg, rgba(13, 6, 28, 0.95), rgba(7, 3, 17, 0.95)) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.35), inset 0 0 15px rgba(0, 240, 255, 0.1) !important;
}

.alert-danger {
    border-color: var(--danger) !important;
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.35), inset 0 0 15px rgba(255, 0, 85, 0.1) !important;
}

.alert-danger h1 {
    color: var(--danger) !important;
    text-shadow: 0 0 12px var(--danger) !important;
}

.alert-news {
    border-color: var(--warning) !important;
    box-shadow: 0 0 30px rgba(255, 230, 0, 0.35), inset 0 0 15px rgba(255, 230, 0, 0.1) !important;
}

.alert-news h1 {
    color: var(--warning) !important;
    text-shadow: 0 0 12px var(--warning) !important;
}

/* 10. Table styling */
.table-container {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    background-color: rgba(5, 3, 10, 0.5) !important;
}

.game-table th {
    border-bottom: 2px solid rgba(0, 240, 255, 0.2) !important;
    color: var(--text-secondary) !important;
}

.game-table td {
    border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}