@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=MedievalSharp&display=swap');

:root {
    --bg-primary: #050101;
    --bg-secondary: #0e0404;
    --text-primary: #f3e8e8;
    --text-secondary: #a38c8c;
    --accent: #c51f1f;
    --accent-hover: #ef4444;
    --accent-glow: rgba(197, 31, 31, 0.45);
    --card-bg: rgba(12, 3, 3, 0.92);
    --card-border: rgba(197, 31, 31, 0.22);
    
    --danger: #dc2626;
    --danger-hover: #ef4444;
    --danger-glow: rgba(220, 38, 38, 0.35);
    --success: #10b981;
    --success-hover: #34d399;
    --success-glow: rgba(16, 185, 129, 0.25);
    --warning: #eab308;
    --warning-glow: rgba(234, 179, 8, 0.25);
    
    /* Popularity and Faction overrides */
    --popularity-bar: #c51f1f;
    --popularity-bar-glow: rgba(197, 31, 31, 0.5);
    --stat-up-color: #10b981;

    --font-main: 'Cinzel', 'MedievalSharp', 'Outfit', serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 1. Volcanic/Abyssal Spire Core Background */
body {
    background-color: var(--bg-primary) !important;
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(197, 31, 31, 0.28) 0%, transparent 60%),
        radial-gradient(circle at 10% 85%, rgba(0, 0, 0, 0.85) 0%, transparent 45%),
        linear-gradient(rgba(5, 1, 1, 0.98), rgba(5, 1, 1, 0.99)),
        radial-gradient(circle at 80% 80%, rgba(197, 31, 31, 0.12) 0%, transparent 50%) !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
}

/* 2. Gothic Breathing Animations */
@keyframes abyssal-pulse {
    0%, 100% {
        text-shadow: 0 0 8px rgba(197, 31, 31, 0.5), 0 0 2px var(--accent);
    }
    50% {
        text-shadow: 0 0 18px rgba(239, 68, 68, 0.75), 0 0 4px #ef4444;
    }
}

/* 3. Volcanic/Citadel Header Override */
.game-header {
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 20px rgba(197, 31, 31, 0.35), inset 0 0 15px rgba(197, 31, 31, 0.15) !important;
    background: linear-gradient(135deg, rgba(14, 3, 3, 0.96), rgba(28, 6, 6, 0.96)) !important;
    position: relative;
    overflow: hidden;
}

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

.game-header-info h1 {
    color: #ffffff !important;
    animation: abyssal-pulse 4s infinite ease-in-out;
    letter-spacing: 1.5px !important;
    font-family: var(--font-main) !important;
}

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

/* 4. Glassmorphic Dark Iron Cards */
.card {
    background: linear-gradient(180deg, rgba(14, 3, 3, 0.93) 0%, rgba(6, 1, 1, 0.97) 100%) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.95), 0 0 20px rgba(197, 31, 31, 0.12) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

.card-title {
    border-bottom: 2px solid rgba(197, 31, 31, 0.25) !important;
    color: var(--accent) !important;
    animation: abyssal-pulse 5s infinite ease-in-out;
    font-family: var(--font-main) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
}

/* 5. Cursed Obsidian Buttons */
.btn {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !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: linear-gradient(180deg, #1c0505 0%, #0c0202 100%) !important;
    color: #fca5a5 !important;
    box-shadow: 0 4px 10px rgba(197, 31, 31, 0.25), inset 0 0 8px rgba(197, 31, 31, 0.1) !important;
    text-shadow: 0 0 4px rgba(197, 31, 31, 0.4) !important;
}

.btn:hover, .btn:focus {
    background: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px var(--accent), 0 0 5px rgba(197, 31, 31, 0.5) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}

.btn-secondary {
    background: rgba(14, 3, 3, 0.3) !important;
    border: 1px solid rgba(197, 31, 31, 0.3) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-secondary:hover {
    background: rgba(197, 31, 31, 0.15) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 15px rgba(197, 31, 31, 0.3) !important;
}

.btn-success {
    background: rgba(16, 185, 129, 0.08) !important;
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important;
    text-shadow: 0 0 4px rgba(16, 185, 129, 0.4) !important;
}

.btn-success:hover {
    background: var(--success) !important;
    color: #050101 !important;
    box-shadow: 0 0 25px var(--success), 0 0 5px rgba(16, 185, 129, 0.5) !important;
    text-shadow: none !important;
}

.btn-danger {
    background: rgba(220, 38, 38, 0.08) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.15) !important;
    text-shadow: 0 0 4px rgba(220, 38, 38, 0.4) !important;
}

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

.btn-gothic, .btn.btn-gothic {
    background: linear-gradient(135deg, #1c0505 0%, #450a0a 100%) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(197, 31, 31, 0.6) !important;
    box-shadow: 0 4px 15px rgba(197, 31, 31, 0.35) !important;
    font-family: var(--font-main) !important;
    text-shadow: 0 0 5px rgba(197, 31, 31, 0.5) !important;
    letter-spacing: 1.5px !important;
}

.btn-gothic:hover, .btn.btn-gothic:hover {
    background: linear-gradient(135deg, #450a0a 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(197, 31, 31, 0.7) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* 6. Ironclad Decision Panels & Interactives */
.decision-item {
    background-color: rgba(8, 2, 2, 0.65) !important;
    border: 1px solid rgba(197, 31, 31, 0.15) !important;
    transition: all 0.25s ease !important;
}

.decision-item:hover, .decision-item:focus {
    background-color: rgba(197, 31, 31, 0.08) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 20px rgba(197, 31, 31, 0.25), inset 0 0 10px rgba(197, 31, 31, 0.05) !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(197, 31, 31, 0.2) !important;
    background: rgba(8, 2, 2, 0.45) !important;
}

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

.decision-category summary.decision-category-title {
    color: var(--accent) !important;
    font-family: var(--font-main) !important;
    text-shadow: 0 0 5px rgba(197, 31, 31, 0.3) !important;
}

.stat-item {
    background-color: rgba(8, 2, 2, 0.7) !important;
    border: 1px solid rgba(197, 31, 31, 0.12) !important;
}

/* 7. Gothic Form Fields */
.form-input {
    background-color: rgba(8, 2, 2, 0.8) !important;
    border: 1px solid rgba(197, 31, 31, 0.35) !important;
    color: var(--text-primary) !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(197, 31, 31, 0.1) !important;
}

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

.stat-value.up {
    color: #10b981 !important;
    text-shadow: 0 0 8px #10b981 !important;
}

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

/* Faction threat pulsing badges */
.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 Coven/Necromancer Warning Overlays */
.alert-box {
    background: linear-gradient(135deg, rgba(14, 3, 3, 0.98), rgba(6, 1, 1, 0.98)) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 30px rgba(197, 31, 31, 0.4), inset 0 0 15px rgba(197, 31, 31, 0.15) !important;
}

.alert-danger {
    border-color: var(--danger) !important;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.4), inset 0 0 15px rgba(220, 38, 38, 0.15) !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(234, 179, 8, 0.35), inset 0 0 15px rgba(234, 179, 8, 0.1) !important;
}

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

/* 10. Gothic Table Structures */
.table-container {
    border: 1px solid rgba(197, 31, 31, 0.25) !important;
    background-color: rgba(8, 2, 2, 0.5) !important;
}

.game-table th {
    border-bottom: 2px solid rgba(197, 31, 31, 0.25) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-main) !important;
}

.game-table td {
    border-bottom: 1px solid rgba(197, 31, 31, 0.12) !important;
}