/* ============================================================
 * © 2026 I Know Ball. All Rights Reserved.
 * THE ELITE TACTICAL ACADEMY™
 * Unauthorized copying, modification, or distribution of this file is strictly prohibited.
 * ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (THE SOURCE OF TRUTH)
   ============================================================ */
:root {
    /* --- BRAND IDENTITY --- */
    --brand-foundation: #00ff88;
    --brand-pro:        #00d9ff;
    --brand-tactician:  #ffcc00;
    --brand-mogul:      #ff00ff;
    
    --brand-danger:     #ff4444;
    --brand-success:    #00ff88;

    /* --- NEUTRAL SCALE --- */
    --neutral-100: #ffffff;
    --neutral-200: rgba(255, 255, 255, 0.8);
    --neutral-300: #a0a6c0;
    --neutral-500: #555555;
    --neutral-900: #000000;

   /* --- SURFACE TOKENS --- */
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --bg-primary: #0a1128;

    --surface-glass-heavy: rgba(15, 18, 25, 0.95);
    --surface-glass-light: rgba(40, 45, 60, 0.6);
    --surface-glass-clear: rgba(0, 0, 0, 0.1);
    --surface-overlay:     rgba(0, 0, 0, 0.85);
    
    /* Interactive Surfaces */
    --surface-panel:       rgba(255, 255, 255, 0.05);
    --surface-pill:        rgba(255, 255, 255, 0.06); 
    --surface-active:      rgba(255, 255, 255, 0.1);
    
    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.3);

    /* --- EFFECTS SCALE --- */
    --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.8);
    
    --blur-xs: blur(3px); /* Add this line here */
    --blur-md: blur(15px);
    --blur-lg: blur(25px);

    /* --- GRADIENTS --- */
    --gradient-card: linear-gradient(145deg, rgba(70, 75, 85, 0.6), rgba(40, 45, 55, 0.7));
    --gradient-exam: linear-gradient(145deg, #2a0505, #000);
    --gradient-gold: linear-gradient(to bottom, #ffd700, #ffaa00);

    /* --- Z-INDEX SCALE --- */
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 1000;
    --z-modal: 9999;
    --z-max: 9999;

/* --- SPACING SCALE --- */
    --space-1: 4px;
    --space-2: 10px; /* Aligned to your 10px utility */
    --space-3: 15px; 
    --space-4: 20px;
    --space-5: 30px;

    /* --- DYNAMIC THEME DEFAULTS (Overridden by Classes) --- */
    --theme-color: var(--neutral-100);
    --theme-bg:    var(--surface-panel);
    --theme-glow:  rgba(255, 255, 255, 0.5);
}

/* ============================================================
   2. THEME UTILITIES (CONTEXT LAYER)
   ============================================================ */
.theme-foundation { 
    --theme-color: var(--brand-foundation); 
    --theme-glow: rgba(0, 255, 136, 0.6);
    --theme-bg: rgba(0, 255, 136, 0.5);
}
.theme-pro { 
    --theme-color: var(--brand-pro); 
    --theme-glow: rgba(0, 217, 255, 0.6);
    --theme-bg: rgba(0, 217, 255, 0.5);
}
.theme-tactician { 
    --theme-color: var(--brand-tactician); 
    --theme-glow: rgba(255, 204, 0, 0.6);
    --theme-bg: rgba(255, 204, 0, 0.5);
}
.theme-mogul { 
    --theme-color: var(--brand-mogul); 
    --theme-glow: rgba(255, 0, 255, 0.6);
    --theme-bg: rgba(255, 0, 255, 0.5);
}

/* Danger Glass applied strictly to the outer container */
.danger-mode .scouting-report-container {
    /* FIX: Deepened the background colors for maximum text contrast */
    background: linear-gradient(145deg, rgba(30, 5, 5, 0.95), rgba(10, 0, 0, 0.98));
    border-color: var(--brand-danger);
    box-shadow: 0 0 50px rgba(255, 68, 68, 0.4), inset 0 0 20px rgba(255, 68, 68, 0.2);
    position: relative; 
    overflow: hidden; 
}

/* ============================================================
   3. GLOBAL LAYOUT
   ============================================================ */
body {
    margin: 0; 
    padding: 20px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--neutral-100);
    min-height: 100vh;
    
    /* AUDIT FIX: Hologram Grid + Stadium Background Fused Successfully */
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,255,200,0.06), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0,255,200,0.04), transparent 50%),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle, rgba(15, 18, 30, 0.4) 0%, rgba(15, 18, 30, 0.95) 90%), 
        url('https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=1200');
    
    background-size:
        auto,
        auto,
        40px 40px,
        40px 40px,
        cover,
        cover;
        
    background-position:
        center,
        center,
        0 0,
        0 0,
        center,
        center;
        
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* =========================================================
   HOLOGRAPHIC SCANLINE SWEEP
   ========================================================= */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    
    background: linear-gradient(
        120deg,
        transparent 0%,
        transparent 45%,
        rgba(0,255,200,0.08) 50%,
        transparent 55%,
        transparent 100%
    );
    
    opacity: 0.4;
    mix-blend-mode: screen;
    
    animation: scanSweep 18s linear infinite;
}

/* ============================================================
   SCROLLBAR SUPPRESSION (CLEAN HUD LOOK)
   ============================================================ */

/* 1. Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* 2. Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

h1, h2, h3, h4, h5, h6, p { margin: 0 0 10px 0; color: inherit; }

/* Grid Systems */
.grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; perspective: 1000px; }

/* Home Grid: Centered & Wider */
.home-grid {
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

@media (max-width: 700px) {
    .grid, .home-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   4. COMPONENTS (The Building Blocks)
   ============================================================ */

/* ============================================================
   SCOUTING REPORT CONTAINER (GLASS FIX - STABLE)
   ============================================================ */

.scouting-report-container {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* 🔥 Prevents stacking/render bugs */

    /* Visual Layer: Cleaner Apple-style glass balance */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.09),
        rgba(255, 255, 255, 0.03)
    );

    border: 1px solid var(--theme-color);
    border-radius: 20px;
    padding: 35px 45px;
    max-width: 650px;
    width: 90%;
    margin: 90px auto 40px auto;

    box-shadow: 0 0 40px var(--theme-glow);

    transition: all 0.3s ease;

    /* 🔥 Forces GPU layer early to prevent "snap" */
    transform: translateZ(0);
}

/* --- BLUR LAYER (GPU ISOLATED) --- */
.scouting-report-container::before {
    content: "";
    position: absolute;
    inset: 0;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    background: rgba(255, 255, 255, 0.025);

    z-index: 0;
    pointer-events: none;
}

/* --- CONTENT LAYER --- */
.scouting-report-container > * {
    position: relative;
    z-index: 1;
}

/* --- FALLBACK (no backdrop-filter support) --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .scouting-report-container {
        background: rgba(40, 45, 55, 0.85);
    }
}

div[id*="-hub"] .scouting-report-container { max-width: 1000px; }

/* --- B. Headers (Home Screen) --- */
.scouting-report-header {
    border: 1px solid var(--brand-tactician);
    box-shadow: var(--shadow-md);
    padding: 30px 60px;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Creates perfect spacing between Logo, Text, and Subtitle */
}

.brand-crest {
    /* 1. Reduce the absolute largest width (slightly) to reduce overall height */
    max-width: 260px; /* Reduced from 320px */
    width: 100%;
    height: auto;
    display: block;
    
    /* 2. THE MAIN FIX: DRASTICALLY reduce the top empty space */
    margin-top: 0px; /* Reduced from 20px */
    
    /* 3. NEW: A small negative bottom margin pulls the "IKB" text UP */
    margin-bottom: -15px; 
    
    /* Keeps the premium neon glow */
    filter: drop-shadow(0 0 25px rgba(255, 0, 255, 0.4)); 
}

/* --- Updated .brand-title-stacked for a Gold Trophy feel --- */
.brand-title-stacked {
    font-size: 2.8rem; 
    letter-spacing: 5px; 
    margin: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px;
    /* Reverted to the premium Gold Gradient */
    background: linear-gradient(to bottom, #ffe066, #ffaa00); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 15px rgba(255, 204, 0, 0.3));
}

.header-subtitle {
    color: var(--neutral-200); 
    font-size: 0.85rem;
    font-weight: 700; 
    letter-spacing: 4px; 
    margin: 0;
}

/* ============================================================
   MASTER HEADER & INTELLIGENCE TERMINAL
   ============================================================ */

.home-header-grid {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    perspective: 1000px; /* Enables 3D space for the tilt effect */
}

/* 1. Tactical Grid Matrix Background */
.home-header-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 255, 136, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.35;
    animation: tacticalGridMove 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* 2. Soft Radar Ambient Glow */
.home-header-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.08), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* 3. The 3D Reactive Brand Container */
.brand-header-wrapper {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 5;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

/* 4. Stadium Floodlight (Spotlight behind Logo) */
.brand-header-wrapper::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 420px;
    background: radial-gradient(
        circle,
        rgba(0, 255, 136, 0.18),
        rgba(0, 255, 136, 0.08),
        transparent 70%
    );
    filter: blur(60px);
    opacity: 0.55;
    animation: stadiumGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

/* 5. Terminal Scan Line (Horizontal Sweep) */
.intel-banner-wrapper {
    text-align: center;
    position: relative;
    z-index: 5;
}

.intel-banner-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 136, 0.2), 
        transparent
    );
    animation: intelScan 6s linear infinite;
    pointer-events: none;
    z-index: 20; 
}

/* 6. Live Intelligence Banner */
.live-intel-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50px;
    padding: 8px 25px;
    margin-top: -25px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: box-shadow 0.3s ease;
}

.live-intel-banner:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.25);
}

/* 7. Banner Radar Sweep Animation */
.live-intel-banner.radar-active {
    overflow: hidden;
}

.live-intel-banner.radar-active::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        transparent 0deg,
        rgba(0, 255, 136, 0.08) 40deg,
        rgba(0, 255, 136, 0.18) 55deg,
        transparent 70deg
    );
    animation: radarSweep 8s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.live-intel-banner.radar-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.06), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* --- Keyframes & Utilities --- */

@keyframes tacticalGridMove {
    from { transform: translate(0, 0); }
    to { transform: translate(40px, 40px); }
}

@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes stadiumGlow {
    from { transform: translateX(-50%) scale(0.95); opacity: 0.45; }
    to { transform: translateX(-50%) scale(1.05); opacity: 0.65; }
}

@keyframes intelScan {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.intel-label {
    color: var(--brand-success);
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
}

.intel-text {
    color: var(--neutral-200);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: bold;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.intel-text.intel-fade {
    opacity: 0;
    transform: translateY(-4px);
}

.center-track {
    position: relative;
    width: fit-content;
    margin: 0 auto 40px auto;
}

@media (max-width: 600px) {
    .live-intel-banner {
        flex-direction: column;
        gap: 6px;
        padding: 12px 20px;
    }
}

/* --- C. Strategy Section (Consumes Theme) --- */
.strategy-container { text-align: center; margin-bottom: 25px; }

.tactic-label {
    background: var(--theme-color); 
    color: var(--neutral-900);
    padding: 6px 12px; font-size: 0.75rem; border-radius: 4px;
    font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
    margin-right: 10px; 
    box-shadow: 0 0 15px var(--theme-glow);
    display: inline-block; vertical-align: middle;
}
.strategy-text {
    font-size: 0.7rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; color: var(--neutral-200); vertical-align: middle;
}

/* --- D. Topic Cards --- */
.topic-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    cursor: pointer; 
    border-radius: 16px;
    background: var(--gradient-card);
    backdrop-filter: var(--blur-md);
    
    /* Consumes Contextual Tokens */
    border: 2px solid var(--theme-color);
    box-shadow: 0 0 45px var(--theme-bg), inset 0 0 20px var(--theme-bg);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.topic-card h3 {
    color: var(--theme-color); text-transform: uppercase; font-weight: 900; 
    font-size: 1.3rem; margin: 8px 0; text-shadow: 0 0 20px var(--theme-glow);
}
.topic-card p { color: var(--theme-color); opacity: 0.9; font-size: 0.8rem; font-weight: 600; }
.topic-card .card-badge { position: absolute; top: 20px; left: 20px; }

/* Global Hover State (Desktop Only - Fixes iOS Sticky Tap Bug) */
@media (hover: hover) {
    .topic-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 0 80px var(--theme-glow), inset 0 0 40px var(--theme-glow);
        z-index: var(--z-sticky);
    }
}

/* --- Keyboard Accessibility Focus State --- */
.topic-card:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 4px;
    box-shadow: 0 0 30px var(--theme-glow);
}

/* --- E. Buttons & Navigation --- */
.next-btn {
    /* V6.1 Translucent Inner Fill Formula */
    background: color-mix(in srgb, var(--theme-color) 8%, rgba(0, 0, 0, 0.5));
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    padding: 12px 24px; border-radius: 6px;
    font-weight: 900; text-transform: uppercase; font-size: 0.8rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
    /* V6.1 Secret: Inset shadow creates the internal glass illumination */
    box-shadow: inset 0 0 20px var(--theme-bg), 0 5px 15px rgba(0,0,0,0.4);
}
.next-btn:hover {
    background: var(--theme-color); 
    color: #ffffff !important; 
    box-shadow: 0 0 30px var(--theme-glow), inset 0 0 10px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Dynamic Button Burst */
@keyframes buttonBurst {
    0% { transform: scale(1); box-shadow: 0 0 0 0 var(--theme-glow); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px 15px transparent; background: var(--theme-color); color: #000000; border-color: var(--theme-color); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; background: var(--theme-color); color: #000000; border-color: var(--theme-color); }
}

.exam-ready-burst {
    animation: buttonBurst 0.8s ease-out forwards;
    background: var(--theme-color);
    color: #000;
    border-color: var(--theme-color);
    text-shadow: none;
}

/* Hybrid Button Override for Danger Mode */
.danger-mode .next-btn { 
    border-color: var(--brand-danger); 
    color: var(--theme-color); /* Keeps module identity text */
    box-shadow: 0 0 15px var(--brand-danger); 
}
.danger-mode .next-btn:hover { 
    background: var(--neutral-900); 
    color: var(--theme-color); 
    border-color: var(--brand-danger); 
    box-shadow: 0 0 50px var(--brand-danger), inset 0 0 15px rgba(255, 68, 68, 0.6); 
}

.back-btn, .home-icon-btn {
    background: transparent; border: 1px solid var(--neutral-100); color: var(--neutral-100);
    padding: 0 20px; height: 40px; border-radius: 8px; font-weight: 800;
    text-transform: uppercase; font-size: 0.75rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.3s ease;
}
.back-btn:hover, .home-icon-btn:hover {
    background: var(--neutral-100); color: var(--neutral-900); box-shadow: 0 0 20px rgba(255,255,255,0.6);
}

/* Reset Button (Stealth Mode) */
.footer-reset-btn {
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    color: var(--neutral-300); 
    padding: 12px 30px; 
    border-radius: 50px; 
    font-weight: 700; 
    font-size: 0.75rem;
    text-transform: uppercase; 
    letter-spacing: 1px;
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: none; 
}
.footer-reset-btn:hover {
    background: rgba(255, 68, 68, 0.15); /* Ignites on hover */
    border-color: var(--brand-danger);
    color: var(--brand-danger);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); 
    transform: translateY(-2px);
}

/* --- F. Badges & Pills --- */
.card-badge {
    background: var(--theme-color); color: var(--neutral-100);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 0 15px var(--theme-glow);
    display: inline-block; padding: 6px 14px; border-radius: 6px;
    font-weight: 900; text-transform: uppercase; font-size: 0.7rem;
    margin-bottom: 10px;
}
.foundation-pill {
    background: var(--theme-color); color: var(--neutral-900); font-weight: 900; 
    padding: 4px 12px; border-radius: 4px; display: inline-block; 
    box-shadow: 0 0 15px var(--theme-glow); margin-bottom: 5px; font-size: 0.7rem;
    width: fit-content;
}

/* Horizontal Badge Container */
.badge-pill-container {
    border: 1px solid var(--brand-tactician); 
    border-radius: 50px; 
    padding: 10px 20px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    margin: 0 auto 30px auto; 
    width: fit-content;
    box-shadow: var(--shadow-sm);
}
.badge-item {
    border-radius: 6px; padding: 6px 12px;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    color: var(--neutral-100); border: 1px solid var(--border-subtle);
    background: var(--surface-pill); 
    transition: all 0.3s ease; white-space: nowrap;
}
.badge-item[data-state="locked"] { filter: grayscale(1); opacity: 0.5; }
/* Base active state text/opacity */
.badge-item[data-state="active"] {
    opacity: 1;
    font-weight: 900;
    color: #ffffff; /* 🔥 Changed to pure white */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* 🔥 Added shadow to match Mogul text */
}

/* --- SEMANTIC BADGE TARGETING (Robust) --- */
.badge-item[data-tier="foundation"][data-state="active"] {
    background: var(--brand-foundation);
    border-color: var(--brand-foundation);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

.badge-item[data-tier="pro"][data-state="active"] {
    background: var(--brand-pro);
    border-color: var(--brand-pro);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.6);
}

.badge-item[data-tier="tactician"][data-state="active"] {
    background: var(--brand-tactician);
    border-color: var(--brand-tactician);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
}

/* --- THE RIPPLE EFFECT --- */
.badge-ripple {
    animation: badgeRippleAnim 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes badgeRippleAnim {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.5); box-shadow: 0 0 30px #ffffff; }
    100% { transform: scale(1); filter: brightness(1); }
}

/* --- SUPERCHARGED MOGUL GLOW --- */
@keyframes mogulGlowPulse {
    from { 
        box-shadow: 0 0 15px var(--brand-mogul), inset 0 0 10px rgba(255,255,255,0.5); 
        transform: scale(1); 
    }
    to { 
        /* White-hot core, massive magenta aura */
        box-shadow: 0 0 40px #ffffff, 0 0 80px var(--brand-mogul), inset 0 0 20px #ffffff; 
        transform: scale(1.08); 
        background: #ffffff; 
        color: var(--brand-mogul); 
    }
}

/* Note: Mogul (Magenta) is already perfectly handled by your .mogul-verified class! */

/* Rank Info Button */
.rank-info-btn {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface-pill);
    border: 1px solid var(--border-strong);
    color: var(--neutral-300); font-size: 0.8rem; font-weight: bold;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.rank-info-btn:hover {
    background: var(--neutral-100); color: var(--neutral-900);
    box-shadow: 0 0 10px var(--neutral-100);
}

.danger-mode .pro-insight-box strong { color: var(--brand-danger); }

.formation-container {
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: 30px; margin: 25px auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; overflow: visible; position: relative; width: 100%; box-sizing: border-box;
}
.formation-container img {
    max-height: 350px; width: auto; max-width: 100%; border-radius: 4px; object-fit: contain;
    cursor: zoom-in; transition: all 0.4s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

.formation-container p, .formation-container figcaption {
    margin-top: 20px; margin-bottom: 0; font-family: 'Segoe UI', monospace; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: var(--theme-color); opacity: 0.9;
}

/* --- H. Checkboxes (FIXED SELECTOR) --- */
.scouting-checkpoint, .lesson-complete-check {
    appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--border-strong); border-radius: 6px; width: 24px; height: 24px;
    cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.scouting-checkpoint:hover, .lesson-complete-check:hover { border-color: var(--theme-color); box-shadow: 0 0 10px var(--theme-glow); }
.scouting-checkpoint:checked, .lesson-complete-check:checked {
    background: var(--theme-color); border-color: var(--theme-color); box-shadow: 0 0 20px var(--theme-glow); transform: scale(1.1);
}
.scouting-checkpoint::after, .lesson-complete-check::after { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px; color: #ffffff; display: none; }
/* FIXED: Single colon :checked */
.scouting-checkpoint:checked::after, .lesson-complete-check:checked::after { display: block; }

/* --- I. Exam Arena Layout (10/10 Scalability) --- */
/* --- I. Exam Arena Layout (10/10 Scalability) --- */
.exam-arena-container {
    padding: 15px 20px 20px;
    display: flex;
    flex-direction: column;
    max-height: 100dvh; /* 🔥 Upgraded for perfect mobile scaling */
    overflow-y: hidden;
    touch-action: pan-x;
}

.exam-top-cluster {
    position: relative; 
    display: flex;
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.exam-forfeit-btn {
    border-color: var(--theme-color);
    color: var(--theme-color);
    height: 36px; 
    padding: 0 20px; 
    font-size: 0.75rem; 
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exam-shot-clock {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--neutral-100);
    line-height: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); 
    transition: color 0.3s ease;
}

.exam-live-badge {
    background: var(--brand-danger); 
    border: 1px solid var(--brand-danger);
    color: #ffffff; 
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    line-height: 1;
}

.exam-score-massive {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--theme-color);
    line-height: 0.8;
    text-shadow: 0 0 30px var(--theme-glow);
}

.exam-score-stack {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.exam-timer-bar-container {
    position: relative; 
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.exam-question-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--neutral-100);
    margin: 0 auto 12px auto;
    line-height: 1.2;
    max-width: 90%;
}

.exam-score-divider {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
}

.exam-score-label-text {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--neutral-300);
    margin-top: 5px;
    text-transform: uppercase;
}

.exam-progress-tracker {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--theme-color);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.exam-question-text {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--neutral-100);
    margin-bottom: 30px;
    line-height: 1.5;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.exam-question-container {
    text-align: center;
}


.exam-timer-bar-fill {
    width: 100%; 
    height: 100%;
    background: var(--brand-success); /* Hardcoded to Neon Green */
    box-shadow: 0 0 15px var(--brand-success);
    transition: width 1s linear;
}

/* ============================================================
   5. COMPONENT VARIANTS
   ============================================================ */

/* Home Page Cards (Top-Down Baseline Layout) */
.topic-card.home-variant {
    aspect-ratio: auto; 
    height: auto; 
    min-height: 180px; 
    padding: 30px; 
    align-items: flex-start;
    justify-content: flex-start; /* Anchors all content to the top */
    text-align: left;
    width: 100%; 
    box-sizing: border-box;
}

/* Badge with strict spacing */
.topic-card.home-variant .card-badge {
    position: relative; 
    top: auto; left: auto;
    margin-bottom: 25px; /* Creates a rigid, unmoving gap below the badge */
}

/* Title locked to the baseline */
.topic-card.home-variant h3 { 
    font-size: 1.25rem; 
    margin-top: 0; /* Stripped out so it obeys the badge margin perfectly */
    margin-bottom: 8px; 
    text-align: left;
    width: 100%;
}

/* Description expands downwards safely */
.topic-card.home-variant p { 
    font-size: 0.95rem; 
    text-align: left;
    width: 100%;
    opacity: 0.85;
    margin: 0;
}

/* --- Hub Restoration: Standard Variant --- */

/* The 3-Column Grid for Hubs */
div[id*="-hub"] .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 100%;
}

/* Standard Hub Cards (Wide Rectangles, Top-Down Baseline) */
.topic-card.standard {
    height: auto;
    min-height: 160px;
    aspect-ratio: auto; /* Removes the "Square" constraint */
    padding: 25px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

/* Adjusting Hub Badge Spacing */
.topic-card.standard .card-badge {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 15px;
    font-size: 0.65rem;
    padding: 4px 10px;
}

/* Hub Card Text Alignment */
.topic-card.standard h3 {
    font-size: 1.15rem;
    margin-top: 0;
    margin-bottom: 6px;
}

.topic-card.standard p {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Responsive: Flip to 1 column on mobile */
@media (max-width: 900px) {
    div[id*="-hub"] .grid { grid-template-columns: 1fr; }
}

/* Exam Option */
#exam-options {
    display: grid;
    gap: 10px;
}

.topic-card.exam-option {
    background: var(--gradient-exam);
    border: 1px solid rgba(255, 68, 68, 0.4);
    min-height: 55px;
    height: auto;
    aspect-ratio: auto;
    padding: 12px 15px;
    align-items: center;
    box-shadow: none;
}
.topic-card.exam-option h3 { color: var(--neutral-100); text-shadow: none; }
.topic-card.exam-option:hover {
    transform: translateY(-2px);
    border-color: var(--brand-danger);
    box-shadow: 0 0 40px rgba(255, 68, 68, 0.5);
}

/* Semantic text for the exam option to replace inline styles */
.exam-option-text {
    margin: 0;
    pointer-events: none; /* Crucial so the click registers on the card, not the text */
}

/* Final Boss Exam Banner (Danger Glass) */
.topic-card.level-exam {
    position: relative; /* REQUIRED FOR PILL POSITIONING */
    border-color: var(--brand-danger);
    min-height: 120px;
    background: linear-gradient(145deg, rgba(255, 68, 68, 0.15), rgba(20, 5, 5, 0.6));
    box-shadow: 0 0 45px rgba(255, 68, 68, 0.35), inset 0 0 20px rgba(255, 68, 68, 0.2);
}

.topic-card.level-exam:hover {
    border-color: var(--brand-danger);
    background: linear-gradient(145deg, rgba(255, 68, 68, 0.25), rgba(30, 5, 5, 0.7));
    box-shadow: 0 0 80px rgba(255, 68, 68, 0.7), inset 0 0 40px rgba(255, 68, 68, 0.3);
}

/* --- Purified Badge Styling (No Inline Styles, No !important) --- */
.topic-card.level-exam .card-badge {
    background: var(--brand-danger);
    color: #ffffff; 
    box-shadow: 0 0 15px var(--brand-danger);
    border: none;
}

/* Pure Red Text (Relies on Cascade) */
.topic-card.level-exam h3 {
    color: var(--brand-danger);
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    margin-top: 5px;
}

.topic-card.level-exam p {
    color: var(--brand-danger);
    opacity: 0.85;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

/* --- Elite Exam Target HUD (Tightly Scoped) --- */
.topic-card.level-exam .exam-requirement-pill {
    position: absolute;
    bottom: 20px; /* MOVED FROM TOP TO BOTTOM */
    right: 20px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid var(--brand-danger);
    color: var(--brand-danger);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

/* ============================================================
   --- Exam Lobby Psychology Overrides --- 
   ============================================================ */

/* 1. The Title - Pulled directly from the module theme */
.foundation-title {
    color: var(--theme-color) !important;
    text-shadow: 0 0 20px var(--theme-glow);
}

/* 2. Descriptive Text & Green Highlight Logic */
.exam-lobby-desc {
    color: var(--neutral-200);
    line-height: 1.6;
    font-size: 1.05rem;
    margin-bottom: 25px;
}

.exam-target-score {
    color: var(--theme-color);
    font-size: 1.15rem;
    font-weight: 900;
    text-shadow: 0 0 15px var(--theme-glow);
}

/* 3. The Translucent Neon Warning Box */
.exam-lobby .pro-insight-box {
    /* Mixes 12% of the dynamic theme color with 88% dark charcoal */
    background: color-mix(in srgb, var(--theme-color) 12%, rgba(10, 12, 18, 0.9));
    border: 1px solid var(--theme-color);
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.referee-prefix {
    color: var(--theme-color);
    font-weight: 900;
}

/* 4. Semantic Red Card Text Utility */
.red-card-text {
    color: var(--brand-danger);
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

/* 5. The "Begin Evaluation" Button (Dormant -> Hover) */
.exam-lobby .next-btn {
    background: rgba(255, 68, 68, 0.15); /* Dormant Red Fill */
    border: 1px solid var(--brand-danger);
    color: var(--brand-danger);
    /* Preserved the dynamic theme glow alongside the red danger shadow */
    box-shadow: 
        0 0 15px var(--theme-bg),
        0 0 20px rgba(255, 68, 68, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exam-lobby .next-btn:hover {
    background: var(--theme-color); /* Solid Neon Fill */
    color: var(--brand-danger);     /* Pure Danger Red Text */
    border-color: var(--theme-color);
    box-shadow: 0 0 40px var(--theme-glow), inset 0 0 15px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}
/* ============================================================
   6. STATES
   ============================================================ */
.topic-card.locked {
    background: var(--neutral-900); opacity: 0.5; border-color: var(--neutral-500); box-shadow: none; pointer-events: auto;
}

/* Moved to ::before so it doesn't conflict with the effect-shine ::after */
.topic-card.locked::before {
    content: "🔒"; 
    font-size: 2rem; 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    opacity: 0.7;
    z-index: 5;
}

/* Live Match Pill */
.danger-mode .live-tag-wrapper .card-badge {
    background: var(--brand-danger); box-shadow: 0 0 20px var(--brand-danger);
}

/* ============================================================
   7. UTILITIES
   ============================================================ */

   /* --- Glass Utility --- */
.surface-glass-clear {
    background: var(--surface-glass-clear);
    backdrop-filter: var(--blur-xs);
    -webkit-backdrop-filter: var(--blur-xs);
}

/* --- Elite Shine Utility (Balanced 0.6s Version) --- */
.effect-shine {
    position: relative;
    overflow: hidden;
}

.effect-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg) translateX(0);
    /* 0.6s: The "Goldilocks" duration for elegance and clarity */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 650% ensures it fully exits the wider rectangular cards */
.effect-shine:hover::after {
    transform: skewX(-25deg) translateX(650%);
}

/* UX Logic: Keep locked modules static */
.topic-card.locked.effect-shine::after {
    display: none;
}


.hidden { display: none !important; }
.centered-layout { text-align: center; padding: 50px; }

/* Progress Bars */
.progress-wrapper { margin: 20px 0; }
.progress-label-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; font-weight: bold; color: var(--neutral-300); }
.progress-container { width: 100%; background: var(--border-subtle); height: 10px; border-radius: 10px; }
.progress-bar-fill { 
    width: 0%; 
    height: 100%; 
    background: var(--theme-color); 
    border-radius: 10px; 
    box-shadow: 0 0 15px var(--theme-glow); 

    /* 🔥 Smooth AAA glide */
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* 🔥 Prevents jank on rapid updates */
    will-change: width;
}

/* Live Arena */
.score-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
#exam-current-score-wrapper { font-size: 4rem; font-weight: 900; line-height: 1; }
.danger-mode #exam-current-score, 
.danger-mode .score-total, 
.danger-mode .score-label, 
.danger-mode #exam-progress-text { 
    color: var(--brand-danger); text-shadow: 0 0 20px var(--brand-danger); opacity: 1; 
}

/* --- Modal & Relegation Typography --- */
.red-card-title {
    font-size: 2.5rem; 
    color: var(--brand-danger); 
    margin-top: 20px; 
    font-weight: 900;
    text-transform: uppercase;
}

.red-card-subtitle {
    font-size: 1.2rem; 
    color: var(--neutral-100); 
    margin: 15px 0; 
    font-weight: bold;
}

.modal-danger-body {
    font-size: 1.05rem; 
    font-weight: 700; 
    color: var(--neutral-300); 
    max-width: 80%; 
    margin: 0 auto 20px auto; 
    line-height: 1.4; 
    text-transform: uppercase;
}

.relegation-warning-text {
    color: #ffcc00; /* The exact Gold from your target image */
    font-weight: 900; 
    letter-spacing: 1px;
    display: block;
    margin-top: 15px;
}

.modal-return-box {
    font-size: 0.8rem; 
    color: var(--neutral-100); 
    background: rgba(255, 255, 255, 0.1); 
    padding: 10px 15px; 
    border-radius: 4px; 
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
}

.rank-status-text {
    font-size: 1.2rem; 
    margin-bottom: 10px; 
    font-weight: bold;
}

/* --- Modal Visibility System (Class Controlled Only) --- */
.modal-overlay, .booking-overlay {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: var(--blur-md);
    z-index: var(--z-modal);
}

.modal-overlay.visible {
    display: flex;
}

.modal-overlay.active, .booking-overlay.active {
    display: flex;
}

/* --- Dynamic Celebration & Penalty Overlays --- */
/* The !important tag ensures these safely override the default black modal background */

.booking-overlay.overlay-green {
    background: radial-gradient(circle at center, #00e676 0%, #008b32 100%) !important;
}

.booking-overlay.overlay-red-mist {
    background: radial-gradient(circle at center, #8b0000 0%, #2a0000 100%) !important;
}

.booking-overlay.overlay-blue {
    background: radial-gradient(circle at center, #00d9ff 0%, #005bb5 100%) !important;
}

.booking-overlay.overlay-gold {
    background: radial-gradient(circle at center, #ffcc00 0%, #b38600 100%) !important;
}

.booking-overlay.overlay-purple {
    background: radial-gradient(circle at center, #ff00ff 0%, #8a008a 100%) !important;
}

.booking-overlay.overlay-solid-black {
    background: rgba(0, 0, 0, 0.95) !important;
}

.lock-modal-card {
    background: var(--surface-glass-heavy);
    backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    padding: 40px; border-radius: 20px; text-align: center;
    max-width: 500px; width: 90%;
    box-shadow: var(--shadow-lg), 0 0 30px var(--border-subtle);
    position: relative;
    max-height: 90vh; /* Prevents it from being taller than the screen */
    overflow-y: auto; /* Allows scrolling if content gets too long */
}
/* Rank Legend */
.rank-modal-wide { max-width: 800px; border-color: var(--brand-tactician); }
.rank-legend-table { width: 100%; border-collapse: collapse; color: var(--neutral-100); margin-top: 15px; }
.rank-legend-table th { padding: 10px; font-size: 0.8rem; border-bottom: 1px solid var(--border-strong); }
.rank-legend-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-subtle); font-size: 0.9rem; }
.rank-dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; background-color: currentColor; box-shadow: 0 0 10px currentColor; }

/* --- Elite Modal Button --- */
.modal-main-btn {
    background: var(--gradient-gold);
    color: #000;
    border: none;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
    margin-top: 10px;
}
.modal-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.6);
}

/* ============================================================
   MODAL RANK COLOR SYSTEM (PURE CSS-DRIVEN)
   ============================================================ */

/* --- Rank Text Colors --- */
.text-rank-green  { color: var(--brand-success); }
.text-rank-gold   { color: var(--brand-tactician); }
.text-rank-purple { color: var(--brand-mogul); }
.text-rank-red    { color: var(--brand-danger); }

/* --- Rank Button Variants --- */
.btn-rank-green  { 
    background: var(--brand-success); 
    color: #000; 
    box-shadow: 0 0 20px var(--brand-success); 
}

.btn-rank-gold   { 
    background: var(--brand-tactician); 
    color: #000; 
    box-shadow: 0 0 20px var(--brand-tactician); 
}

.btn-rank-purple { 
    background: var(--brand-mogul); 
    color: #fff; 
    box-shadow: 0 0 20px var(--brand-mogul); 
}

.btn-rank-red    { 
    background: var(--brand-danger); 
    color: #fff; 
    box-shadow: 0 0 20px var(--brand-danger); 
}

/* --- Badge Legend 2x2 Grid --- */
.badge-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}
.badge-legend-item {
    display: flex;
    align-items: flex-start; /* Aligns the dot to the top line of text */
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}
.badge-legend-content { flex: 1; }
.badge-legend-title { font-weight: 900; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 8px; line-height: 1.2; }
.badge-legend-desc { font-size: 0.85rem; color: var(--neutral-300); margin: 0; line-height: 1.5; }

/* ============================================================
   8. ANIMATIONS
   ============================================================ */
@keyframes slowSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.title-icon {
    font-size: 2.5rem; margin: 0 2px;
    background: radial-gradient(circle at 30% 30%, #ffffff, #d0d0d0, #808080);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
    animation: slowSpin 6s linear infinite;
}
.pro-football-icon { animation: slowSpin 10s linear infinite; }

@keyframes nudgeRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.next-btn:hover i.fa-arrow-right { animation: nudgeRight 0.6s ease-in-out infinite; transition: none; }

@keyframes nudgeLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
.back-btn:hover i.fa-arrow-left, .home-icon-btn:hover i.fa-arrow-left { animation: nudgeLeft 0.6s ease-in-out infinite; transition: none; }

/* --- The Violent Arena Shake --- */
.room-shake { 
    animation: violentShake 0.4s cubic-bezier(.36,.07,.19,.97) both; 
}

@keyframes violentShake {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    10%, 90% { transform: translate3d(-10px, 0, 0) rotate(-2deg); box-shadow: 0 0 80px rgba(255, 68, 68, 0.6), inset 0 0 30px rgba(255, 68, 68, 0.3); }
    20%, 80% { transform: translate3d(15px, 0, 0) rotate(3deg); }
    30%, 50%, 70% { transform: translate3d(-20px, 0, 0) rotate(-3deg); box-shadow: 0 0 120px rgba(255, 68, 68, 1), inset 0 0 50px rgba(255, 68, 68, 0.6); }
    40%, 60% { transform: translate3d(20px, 0, 0) rotate(3deg); }
}

.flag-assembly { position: relative; width: 200px; height: 260px; margin-bottom: 20px; }
.flag-pole { width: 12px; height: 250px; background: linear-gradient(90deg, #444, #111); border-radius: 6px; position: absolute; left: 40px; box-shadow: 2px 5px 15px rgba(0,0,0,0.5); }
.flag-fabric {
    width: 160px; height: 120px; position: absolute; top: 10px; left: 46px; background-color: var(--brand-danger);
    background-image: linear-gradient(45deg, var(--brand-tactician) 25%, transparent 25%, transparent 75%, var(--brand-tactician) 75%, var(--brand-tactician)), linear-gradient(45deg, var(--brand-tactician) 25%, transparent 25%, transparent 75%, var(--brand-tactician) 75%, var(--brand-tactician));
    background-size: 80px 80px; background-position: 0 0, 40px 40px; border: 2px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform-origin: left center; animation: fabricWave 1s ease-in-out infinite alternate;
}
@keyframes fabricWave { 0% { transform: skewY(-2deg) scaleX(1); } 100% { transform: skewY(2deg) scaleX(0.95); } }

/* ============================================================
   OFFSIDE OVERLAY (Class-Based Animation + Accessibility)
   ============================================================ */
#offside-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 18, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 20001;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#offside-overlay.visible {
    display: flex;
}

#offside-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Exam Option Impact Animations --- */

/* --- Broadcasting Pulse Dot (White) --- */
.live-recording-dot {
    width: 8px;
    height: 8px;
    background-color: #ffffff; /* Swapped to White */
    border-radius: 50%;
    animation: broadcastPulse 1.5s infinite;
}

@keyframes broadcastPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


/* --- Elite Exam FX & Animations --- */

/* The Calculation Flash Hold (Now forces inner text to be black) */
.flash-white, .flash-white .exam-option-text {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 0 50px #ffffff !important;
    border-color: #ffffff !important;
    transform: scale(1.05);
    transition: all 0.1s ease;
}

/* --- Solid Impact Animations (Premium Feel) --- */
@keyframes impactCorrect {
    0% { background: #ffffff; box-shadow: 0 0 50px #ffffff; border-color: #ffffff; transform: scale(1.05); }
    100% { background: var(--brand-success); border-color: var(--brand-success); box-shadow: 0 0 40px rgba(0, 255, 136, 0.8), inset 0 0 15px rgba(255,255,255,0.4); transform: scale(1); }
}

.topic-card.exam-option.correct {
    animation: impactCorrect 0.5s ease-out forwards;
}

/* Forces text Black on the Solid Green background */
.topic-card.exam-option.correct .exam-option-text {
    color: #000000 !important;
    transition: color 0.1s ease;
}

@keyframes impactIncorrect {
    0% { background: #ffffff; box-shadow: 0 0 50px #ffffff; border-color: #ffffff; transform: scale(1.05); }
    100% { background: var(--brand-danger); border-color: var(--brand-danger); box-shadow: 0 0 40px rgba(255, 68, 68, 0.8), inset 0 0 20px rgba(0,0,0,0.3); transform: scale(1); }
}

.topic-card.exam-option.incorrect {
    animation: impactIncorrect 0.5s ease-out forwards;
}

/* Forces text White on the Solid Red background */
.topic-card.exam-option.incorrect .exam-option-text {
    color: #ffffff !important;
    transition: color 0.1s ease;
}

/* Isolates the user's choice by dimming others */
.dimmed-option {
    opacity: 0.25 !important;
    transform: scale(0.98);
    transition: all 0.3s ease;
    pointer-events: none;
    filter: grayscale(1);
}

/* 5-Second Panic Pulse */
.panic-pulse {
    animation: panicPulse 1s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
    color: var(--brand-danger) !important;
}

@keyframes panicPulse {
    0% { transform: translateX(-50%) scale(1); text-shadow: 0 0 10px rgba(255,68,68,0.5); }
    50% { transform: translateX(-50%) scale(1.2); text-shadow: 0 0 30px rgba(255,68,68,1); }
    100% { transform: translateX(-50%) scale(1); text-shadow: 0 0 10px rgba(255,68,68,0.5); }
}

/* Question Snap-In */
.slide-in-anim {
    animation: slideUpFade 0.3s ease-out forwards;
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Physical Referee Cards (3D Flip) */
.physical-card {
    width: 70px;
    height: 100px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.3);
    transform-origin: center;
    animation: cardReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    margin: 0 auto;
}

/* --- Physical Card States (Pure CSS) --- */
#physical-card-element {
    display: none; /* Hidden by default */
}

#physical-card-element.active-red-card {
    display: inline-block;
    background-color: var(--brand-danger);
}

#physical-card-element.active-yellow-card {
    display: inline-block;
    background-color: #ffcc00;
}

@keyframes cardReveal {
    0% { transform: translateY(50px) rotateY(90deg) scale(0.5); opacity: 0; }
    100% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; }
}

/* --- Modal Visibility System (Class Controlled Only) --- */
.modal-overlay, .booking-overlay {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: var(--blur-md);
    z-index: var(--z-modal);
}

.modal-overlay.active, .booking-overlay.active {
    display: flex;
}

/* --- Layout Utilities --- */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.flex-wrap-gap {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.align-end {
    align-items: flex-end;
}

/* --- Text Utilities --- */
.text-warning {
    color: #ffcc00;
}

.text-danger {
    color: #ff4444;
}

.text-neutral {
    color: var(--neutral-300);
}

/* Ensure strong tags inside muted text pop clearly */
.text-neutral strong {
    color: var(--text-primary, #ffffff); 
    font-weight: 900;
}

/* --- Own Goal Overlay Utilities --- */
.own-goal-icon {
    font-size: 5rem; 
    margin-bottom: 10px; 
    filter: grayscale(1);
}

.own-goal-title {
    font-size: 3rem; 
    color: var(--brand-danger);
}

.own-goal-subtitle {
    font-size: 1rem; 
    color: var(--neutral-100); 
    margin-top: 10px;
}

/* --- Glass Morphism Cards (Inner Content) --- */
.scouting-card {
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.015);
}

/* --- Lesson Typography & Layout Utilities --- */
.lesson-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.lesson-title-text {
    color: var(--theme-color);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* --- Lesson List Items (Replacing Checkboxes) --- */
.lesson-list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.lesson-list-text {
    flex: 1;
}

.lesson-dot {
    height: 8px; 
    width: 8px; 
    border-radius: 50%; 
    display: inline-block; 
    background-color: var(--theme-color); 
    box-shadow: 0 0 10px var(--theme-glow);
    margin-top: 6px;
}

/* --- Confirmation & Bottom Nav --- */
.lesson-confirmation-section {
    margin-top: 30px;
}

.lesson-confirm-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.lesson-bottom-nav {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Removes top margin when image is top of card */
.mt-0 { margin-top: 0 !important; }
.font-sm { font-size: 0.85rem; }

/* =========================================================
   ELITE VISUAL UPGRADES (MASTER CONSOLIDATION)
   ========================================================= */

/* --- 1. The "Command Center" Header --- */
.elite-header-wrapper {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.elite-badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
}
.tactical-watermark {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(255, 255, 255, 0.05);
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    pointer-events: none;
}
.massive-topic-title {
    color: var(--theme-color);
    font-size: 2.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 0 20px var(--theme-glow);
    line-height: 1.1;
}

/* --- 2. Perfected Badge Hierarchy --- */
.module-badge {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--theme-color);
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    box-shadow: 0 0 15px var(--theme-glow);
}
.topic-badge {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    background: transparent;
    box-shadow: none;
}

/* --- 3. Translucent "Glass" Academy Notes (Fallback) --- */
.pro-insight-box {
    background-color: rgba(255, 255, 255, 0.05) !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 4px solid var(--theme-color) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 25px !important;
    border-radius: 10px !important;
    margin: 30px 0 !important;
    /* Powerful Outer and Inner Theme Glow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 
                0 0 25px var(--theme-bg), 
                inset 0 0 15px var(--theme-bg) !important; 
}

/* --- 4. Centered VAR HUD Console --- */
.lesson-bottom-nav {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    gap: 15px;
    width: 100%;
}
.var-console {
    font-family: 'Courier New', Courier, monospace;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
}
.var-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4444;
    box-shadow: 0 0 10px #ff4444;
    animation: varConsolePulse 1s infinite alternate;
}
@keyframes varConsolePulse {
    0% { opacity: 1; box-shadow: 0 0 15px #ff4444; }
    100% { opacity: 0.3; box-shadow: 0 0 2px #ff4444; }
}
.var-text {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--neutral-100);
    font-weight: bold;
}

/* --- 5. Pure Class-Based Screen Architecture --- */
.topic-screen {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.topic-screen.active {
    opacity: 1;
}
.hidden {
    display: none !important;
    pointer-events: none;
}

/* =========================================================
   GENERIC MODAL ENGINE & IMAGE HOVER
   ========================================================= */

/* The Image Trigger (Just a subtle hover now) */
.zoomable-image {
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
}

.zoomable-image:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

/* The Modal Overlay System */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 18, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 50000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* FIX: Prevents the invisible shield bug */
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto; /* Re-enables clicking when open */
}

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: modalScale 0.3s cubic-bezier(0.25,0.8,0.25,1);
}

@keyframes modalScale {
    from { transform: scale(0.9); }
    to   { transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 2rem;
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    opacity: 1;
    color: var(--brand-danger);
    transform: scale(1.1);
}

body.modal-open {
    overflow: hidden;
}

/* --- Lesson Subtitles & Padding Utilities --- */
.scouting-card-padding {
    padding-bottom: 10px;
}

.lesson-subtitle {
    color: var(--theme-color);
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* --- Text & Spacing Utilities --- */
.lesson-subheader {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.tight-paragraph {
    margin-top: 10px;
    margin-bottom: 0;
}

.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

/* --- Button Variants & Icons --- */
.next-btn-danger {
    background: var(--brand-danger);
    border-color: var(--brand-danger);
    color: #ffffff;
}

/* --- Premium Secondary Button (Rules/Briefing) --- */
.briefing-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.briefing-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* --- Button Icon Utility --- */
.btn-icon {
    font-size: 1.2rem;
    margin-right: 8px;
    vertical-align: middle;
}

/* --- Accessibility Utilities --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   GRID UTILITIES
   ============================================================ */
.span-2 {
    grid-column: 1 / -1;
}

/* --- Table & Typography Utilities --- */
.elite-table-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    margin: 20px 0;
}
.elite-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--neutral-100);
    text-align: left;
}
.elite-table th {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--theme-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--theme-color);
}
.elite-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-subtle);
}
.elite-table tr:last-child td {
    border-bottom: none;
}

/* Color Helpers */
.text-success { color: var(--brand-success); }
.text-warning { color: var(--brand-tactician); }
.text-danger { color: var(--brand-danger); }
.text-bold { font-weight: 900; }
.mb-20 { margin-bottom: 20px; }

/* --- Table Row Highlights & Interactions --- */
.elite-table tbody tr {
    transition: background 0.25s ease, transform 0.15s ease;
}

.elite-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.01);
}

/* 1. Champion Row (Gold) */
.elite-table tbody tr.row-champion {
    background: rgba(255, 204, 0, 0.15);
}
.elite-table tbody tr.row-champion:hover {
    background: rgba(255, 204, 0, 0.25);
}
.elite-table tbody tr.row-champion td:first-child {
    color: var(--brand-tactician); /* Gold position number */
    font-weight: 900;
}
/* Premium Gold Glow for the Champions text */
.text-champion {
    color: var(--brand-tactician); 
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
    letter-spacing: 1px;
}

/* 2. Qualified Row (Green) */
.elite-table tbody tr.row-qualified {
    background: rgba(0, 255, 136, 0.15);
}
.elite-table tbody tr.row-qualified:hover {
    background: rgba(0, 255, 136, 0.25);
}
.elite-table tbody tr.row-qualified td:first-child,
.elite-table tbody tr.row-qualified td:last-child {
    color: var(--brand-success); /* Auto-colors the rank and status */
    font-weight: 700;
}

/* 3. Relegated Row (Red) */
.elite-table tbody tr.row-relegated {
    background: rgba(255, 68, 68, 0.15);
}
.elite-table tbody tr.row-relegated:hover {
    background: rgba(255, 68, 68, 0.25);
}
.elite-table tbody tr.row-relegated td:first-child,
.elite-table tbody tr.row-relegated td:last-child {
    color: var(--brand-danger); /* Auto-colors the rank and status */
    font-weight: 700;
}

/* --- Keyboard Focus State (Accessibility) --- */
.deep-dive-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--neutral-100), 0 0 20px var(--theme-glow), inset 15px 0 30px -15px var(--theme-bg) !important;
    border-radius: 8px;
}

.deep-dive-trigger:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* =========================================================
   INTERACTIVE DEEP DIVES & SCOUTING DOSSIER
   ========================================================= */

/* --- 1. The Trigger Card --- */
.accent-card.deep-dive-trigger {
    cursor: pointer;
    position: relative;
    padding-right: 60px; 
}
.deep-dive-trigger::after {
    content: '\f05a'; /* Info Circle FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color);
    font-size: 1.2rem;
    opacity: 0.3;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.deep-dive-trigger:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* --- Keyboard Focus State (Accessibility) --- */
.deep-dive-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--neutral-100), 0 0 20px var(--theme-glow), inset 15px 0 30px -15px var(--theme-bg) !important;
    border-radius: 8px;
}
.deep-dive-trigger:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
}

/* --- 2. Inside the Modal (The Scouting Dossier) --- */
.deep-dive-body {
    position: relative;
    background: var(--surface-glass-heavy);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--theme-color);
    border-top: 4px solid var(--theme-color);
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box; /* <--- CRITICAL FIX */
    margin: 0 auto;
    
    /* Defensive Scrolling */
    max-height: 75vh;
    overflow-y: auto;
    
    color: var(--neutral-200);
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 30px var(--theme-bg);
}

/* Custom Scrollbar for the Dossier */
.deep-dive-body::-webkit-scrollbar {
    width: 8px;
}
.deep-dive-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.deep-dive-body::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 8px;
    opacity: 0.5;
}

/* The Classified Intel Watermark */
.deep-dive-body::before {
    content: '\f2b5'; /* Handshake/Deal icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18rem;
    color: var(--theme-color);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Bring text layer above the watermark */
.deep-dive-body h4, 
.deep-dive-body p, 
.deep-dive-body ul, 
.deep-dive-body hr {
    position: relative;
    z-index: 1;
}

.deep-dive-body h4 {
    color: var(--theme-color);
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 15px var(--theme-glow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.deep-dive-body p {
    margin-bottom: 15px;
}

.deep-dive-body ul {
    margin: 15px 0 15px 25px;
    padding: 0;
}

.deep-dive-body li {
    margin-bottom: 8px;
}

.deep-dive-body hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 25px 0;
}

/* =========================================================
   ELITE DOSSIER INTERNAL UI COMPONENTS
   ========================================================= */

.dossier-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.dossier-tag {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    /* Enterprise Fallback for older browsers */
    background: rgba(255, 255, 255, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern CSS Support */
@supports (color: color-mix(in srgb, red, white)) {
    .dossier-tag {
        background: color-mix(in srgb, var(--theme-color) 15%, transparent);
        color: var(--theme-color);
        border: 1px solid color-mix(in srgb, var(--theme-color) 40%, transparent);
    }
}

.deep-dive-body ul.dossier-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 0.85rem;
}

.deep-dive-body .dossier-meta li {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--theme-color);
    margin: 0; /* Overrides default spacing */
}

.deep-dive-body .dossier-meta li strong {
    color: var(--theme-color); /* Upgraded from gray to pure Theme Color */
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.dossier-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
    opacity: 0.3;
    margin: 25px 0;
}

/* --- UPGRADED TROPHY CABINET --- */
.dossier-trophies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    background: transparent;
    padding: 0;
    border: none;
    margin-bottom: 25px;
}

.dossier-trophies span {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid var(--theme-color);
    border-radius: 8px;
    padding: 15px 5px;
    font-weight: 900;
    font-size: 0.85rem;
    color: var(--neutral-100);
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.dossier-trophies span:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--neutral-100);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 0 15px var(--theme-bg);
}

.dossier-insight {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Automatically themes the first bolded word in top-level dossier paragraphs */
.deep-dive-content > p > strong:first-child,
.dossier-insight strong {
    color: var(--theme-color);
}

/* Mobile Data Grid Adjustment */
@media (max-width: 600px) {
    .deep-dive-body ul.dossier-meta { grid-template-columns: 1fr; }
    .dossier-trophies { grid-template-columns: 1fr; } /* Stacks trophies on tiny phones */
}

/* --- UPGRADED DUAL-STAT RECORDS HUD --- */
.dossier-records {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    margin: 15px 0;
}

.dossier-records-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    text-align: center !important; /* Safely overrides the old inline right-align */
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.dossier-records-item:hover {
    transform: translateY(-2px);
    border-color: var(--theme-color);
}

.dossier-records-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--theme-color); /* Upgraded to Theme Color */
    letter-spacing: 1px;
    font-weight: 900;
    opacity: 0.9;
}

.dossier-records-value {
    color: var(--neutral-100);
    font-weight: 900;
    font-size: 1.15rem;
}

/* --- NATIVE TOOLTIPS FOR ACRONYMS --- */
abbr[title] {
    text-decoration: underline dotted var(--theme-color);
    text-underline-offset: 3px;
    cursor: help;
    font-weight: 900;
}
/* ============================================================
   MODULE 3 & 4 UTILITY CLASSES (NO INLINE STYLES)
   ============================================================ */

/* --- Manager Database Utilities --- */
.manager-dossier-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.manager-flag {
    width: 20px; /* NEW: Centralized sizing control */
    vertical-align: middle;
    border-radius: 2px;
    margin-bottom: 2px;
    margin-right: 4px;
}   

.insight-heading {
    color: var(--theme-color);
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 900;
}
.insight-list {
    margin-top: 10px;
    padding-left: 20px;
    color: #fff;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gap-10 {
    gap: 10px;
}
.half-width {
    max-width: 45%;
}
.accent-text {
    flex: 1;
    font-size: 0.95rem;
}
.warning-box {
    border-left-color: var(--brand-danger) !important;
    background: rgba(255, 68, 68, 0.05) !important;
}
.highlight-box {
    border-left-color: var(--brand-tactician) !important;
    background: rgba(255, 204, 0, 0.1) !important;
}
.table-caption {
    width: 100%;
    text-align: center;
    background: rgba(20, 22, 30, 1);
    color: var(--theme-color);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    padding: 15px;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   MODULE UTILITY ENGINE V3.3 - DO NOT EDIT ABOVE THIS LINE
   ============================================================ */
.insight-heading {
    color: var(--theme-color);
    display: block;
    margin-bottom: 8px;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 900;
}
.insight-list {
    margin-top: 10px;
    padding-left: 20px;
    color: #fff;
}
.insight-list li {
    margin-bottom: 8px;
}
.scouting-card h3 {
    color: var(--theme-color);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 15px var(--theme-glow);
    margin-top: 10px;
    margin-bottom: 20px;
}
.checkpoint-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    margin-top: 25px;
    width: 100%;
    box-sizing: border-box;
}
.accent-text {
    flex: 1;
    font-size: 0.95rem;
}
.theme-text {
    color: var(--theme-color);
}
.text-right { text-align: right; }
.text-success { color: var(--brand-success); }
.text-danger { color: var(--brand-danger); }
.text-warning { color: var(--brand-tactician); }
.border-danger { border-color: var(--brand-danger) !important; }

/* --- Insight Boxes with Legacy Browser Fallbacks --- */
.warning-box {
    border-left-color: var(--brand-danger) !important;
    background: rgba(255, 68, 68, 0.05) !important; /* Fallback */
    background: color-mix(in srgb, var(--brand-danger) 5%, transparent) !important;
}
.highlight-box {
    border-left-color: var(--brand-tactician) !important;
    background: rgba(255, 204, 0, 0.1) !important; /* Fallback */
    background: color-mix(in srgb, var(--brand-tactician) 10%, transparent) !important;
}
.mogul-box {
    border-left-color: var(--brand-mogul) !important;
    background: rgba(255, 0, 255, 0.05) !important; /* Fallback */
    background: color-mix(in srgb, var(--brand-mogul) 5%, transparent) !important;
}

.table-caption {
    width: 100%;
    text-align: center;
    background: rgba(20, 22, 30, 1);
    color: var(--theme-color);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    padding: 15px;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gap-10 {
    gap: 10px;
}
.half-width {
    max-width: 45%;
}
.text-italic {
    font-style: italic;
}
.quote-subtext {
    font-style: normal;
    font-size: 0.9rem;
    opacity: 0.8;
}
/* --- Core Layout & Flex Utilities --- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* --- Spacing Utilities (100% Token Driven) --- */
.m-0 { margin: 0; }
.mt-10 { margin-top: var(--space-2); }
.mb-10 { margin-bottom: var(--space-2); }
.mb-20 { margin-bottom: var(--space-4); }
.mt-20 { margin-top: var(--space-4); }
.p-10 { padding: var(--space-2); }
.p-20 { padding: var(--space-4); }

/* --- Sizing --- */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* --- Module 4 Specific Utilities --- */
.quota-container {
    margin: 20px 0;
    padding: 20px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--theme-color);
    border-radius: 12px;
}
.quota-bar-flex {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.quota-open {
    flex: 17;
    height: 12px;
    background: var(--brand-success);
    border-radius: 4px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-success) 50%, transparent);
}
.quota-restricted {
    flex: 8;
    height: 12px;
    background: var(--brand-danger);
    border-radius: 4px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-danger) 50%, transparent);
}
.quota-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}
.golden-rule-box {
    margin-top: 25px;
    padding: 20px;
    background: var(--gradient-exam);
    border: 2px solid var(--brand-danger);
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 20px color-mix(in srgb, var(--brand-danger) 20%, transparent);
}
.golden-rule-title {
    color: var(--brand-danger);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.golden-rule-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    font-style: italic;
}

.mogul-formula {
    font-size: 1.1rem;
    letter-spacing: 1px;
}


/* ============================================================
   END OF MODULE UTILITY ENGINE
   ============================================================ */

   /* ============================================================
   REFACTORED MODAL & REFEREE UI CLASSES
   ============================================================ */

/* --- Reset Modal --- */
.modal-icon { font-size: 3rem; margin-bottom: 20px; }
.modal-title { color: var(--brand-danger); font-size: 1.8rem; margin: 0 0 10px 0; text-transform: uppercase; }
.modal-text { color: var(--neutral-300); font-size: 1rem; line-height: 1.5; margin-bottom: 30px; }
.modal-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 10px; }

.modal-button {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    border: 2px solid transparent; /* Prevents size jumping */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    min-width: 170px; /* Forces exact equal width */
}
.modal-button:hover { transform: translateY(-2px); }

/* Cancel button modifier */
.modal-button.cancel-btn {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.modal-button.cancel-btn:hover {
    background: #fff;
    color: #000; /* Fixes disappearing text */
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

/* Confirm button modifier */
.modal-button.confirm-btn {
    background: var(--brand-danger);
    color: #fff;
    border-color: var(--brand-danger);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
}
.modal-button.confirm-btn:hover {
    background: #ff2a2a;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.7);
}

/* --- Referee Discipline: Base & Warning (Strike 1) --- */
.flag-assembly-wrapper { margin: 0 auto; transform: scale(0.8); }
.referee-warning-title { font-size: 1.5rem; color: #ffcc00; margin-top: 10px; font-weight: 900; }
.referee-warning-text { font-size: 1.1rem; font-weight: 800; color: var(--neutral-300); margin: 15px auto; max-width: 80%; line-height: 1.5; }
.referee-warning-subtext { font-size: 0.8rem; color: #fff; }

/* --- Referee Discipline: Yellow Card Modifiers (Strike 2) --- */
.referee-yellow-title { font-size: 1.5rem; color: #ffcc00; margin-top: 20px; font-weight: 900; }
.referee-yellow-text { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 15px auto; max-width: 80%; line-height: 1.5; }
.referee-yellow-subtext { font-size: 0.8rem; color: #ff4444; }

/* --- Second Yellow (Strike 3) --- */
.second-yellow-cards { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.second-yellow-card-item { width: 60px; height: 90px; background: #ffcc00; box-shadow: 0 0 20px rgba(255, 204, 0, 0.4); border-radius: 6px; }
.second-yellow-title { font-size: 2rem; color: #ffcc00; font-weight: 900; }
.second-yellow-subtext { font-size: 1rem; color: #fff; margin-top: 10px; }

/* ============================================================
   FINAL OVERLAY & CEREMONY CLASSES (100% Inline-Free)
   ============================================================ */

/* ============================================================
   VAR OVERLAY LOGIC (CINEMATIC BROADCAST UPGRADE)
   ============================================================ */
#var-overlay { 
    display: none; 
    position: fixed; 
    inset: 0;
    background: rgba(10, 12, 18, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 20000; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    transition: background 0.1s ease;
    will-change: transform, filter; /* PERFORMANCE MICRO-OPTIMIZATION */
}
#var-overlay.active { display: flex; }

/* Keep text safely above the HUD ring */
#var-overlay h1,
#var-overlay p {
    position: relative;
    z-index: 2;
}

/* AAA Text Scanning & Typing Animation */
@keyframes varTextScan {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)); }
    50% { opacity: 0.4; filter: none; }
}
@keyframes varTypewriter {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
/* Run typewriter once, then loop the scan pulse AFTER a 0.5s delay */
#var-overlay.active:not(.var-approved) p {
    overflow: hidden;
    white-space: nowrap;
    animation: 
        varTypewriter 0.5s steps(20) forwards,
        varTextScan 1.5s infinite 0.5s;
}

/* Broadcast HUD Ring Animation */
@keyframes varRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* AAA Internal Scan Glow */
@keyframes varScanSweep {
    0% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
    50% { box-shadow: inset 0 0 25px rgba(255,255,255,0.35); }
    100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
}

#var-overlay::before {
    content: "";
    position: absolute;
    width: min(320px, 70vw);
    height: min(320px, 70vw);
    max-width: 320px;
    border-radius: 50%;
    /* Proportional clamp border for mobile */
    border: clamp(2px, 0.4vw, 3px) solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.6);
    animation: varRotate 6s linear infinite, varScanSweep 2.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none; /* Prevents interaction blocking */
}

/* Phase 2: The Decision Flash & Pulse (Stadium Floodlights) */
@keyframes varPulse {
    0%   { filter: brightness(1) saturate(1); }
    35%  { filter: brightness(1.6) saturate(1.4); }
    65%  { filter: brightness(1.25) saturate(1.15); }
    100% { filter: brightness(1) saturate(1); }
}
#var-overlay.var-approved {
    background: radial-gradient(circle at center, #00e676 0%, #008b32 100%);
    animation: varPulse 0.9s ease-in-out 2;
    box-shadow: 0 0 120px rgba(0, 255, 100, 0.6) inset;
}

/* Phase 2: Ring Lock-On & Collapse Transition */
@keyframes varLockOn {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0; }
}
/* Animate the HUD ring away smoothly on approval */
#var-overlay.var-approved::before {
    animation: varLockOn 0.35s ease-out forwards;
}

/* Phase 2: The Verdict Stamp Animation */
@keyframes varVerdictStamp {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
#var-overlay.var-approved p {
    animation: varVerdictStamp 0.35s ease-out forwards;
}

/* --- Celebration Overlay --- */
.celeb-icon { font-size: 4rem; margin-bottom: 20px; animation: pulseVar 0.5s infinite; }
.celeb-title { font-size: 3.5rem; color: #fff; font-weight: 900; }
.celeb-subtitle { font-size: 1.2rem; color: #fff; margin-top: 10px; }

/* --- Graduation Ceremony --- */
.grad-animation-wrapper { animation: pulseVar 2s infinite; }
.grad-icon { font-size: 5rem; margin-bottom: 20px; }
.grad-title { font-size: 2.5rem; font-weight: 900; color: #fff; text-shadow: 0 0 30px #ff00ff; }
.grad-subtitle { font-size: 1.2rem; color: #fff; margin: 20px 0; }
.grad-status-box { 
    background: rgba(255,255,255,0.1); 
    border: 1px solid #ff00ff; 
    padding: 15px; 
    border-radius: 8px; 
    margin-top: 20px; 
    font-family: monospace; 
    color: #ff00ff; 
    font-weight: bold; 
}
.grad-claim-btn { 
    margin-top: 30px; 
    padding: 15px 30px; 
    background: #ff00ff; 
    color: #fff; 
    border: none; 
    border-radius: 50px; 
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 0 0 20px rgba(255,0,255,0.5); 
    transition: all 0.3s ease;
}
.grad-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255,0,255,0.8);
}

/* =========================================================
   PREMIUM ACCENT CARDS (GLASS + INNER TRANSFORM ARCHITECTURE)
   ========================================================= */
.accent-card {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03); 
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 4px solid var(--theme-color);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--neutral-100);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),       
        0 10px 25px rgba(0,0,0,0.4),       
        inset 0 0 25px rgba(255,255,255,0.04), 
        0 0 12px color-mix(in srgb, var(--theme-color) 25%, transparent); 
        
    cursor: pointer;
    position: relative;
    overflow: hidden;

    transition: 
        box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-left-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        background 0.3s ease,
        filter 0.3s ease;
}

/* THE NEW ANIMATION LAYER */
.accent-card-inner {
    position: relative;
    z-index: 2;
    pointer-events: none; 
    transition: transform 0.1s linear; 
}

.accent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.15), transparent 40%); 
    transition: opacity 0.25s ease;
    z-index: 1;
}

.accent-card:hover::before,
.accent-card:focus-visible::before {
    opacity: 1;
}

.accent-card:hover {
    /* V6.1 Clean Theme Tint on Hover */
    background: var(--theme-bg); 
    border-left-width: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 0 20px var(--theme-bg); 
    filter: brightness(1.1); 
    z-index: 2;
}

.accent-card:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 3px;
}

/* Modern Theme Color Blending */
@supports (color: color-mix(in srgb, red, white)) {
    .accent-card::before {
        background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--theme-color) 35%, transparent), transparent 40%);
    }
    .accent-card:hover {
        /* FIX: Strict background-color to preserve gradient and stop flashing */
        background-color: color-mix(in srgb, var(--theme-color) 12%, rgba(255, 255, 255, 0.05));
        box-shadow: 0 15px 35px rgba(0,0,0,0.4), 
                    inset 0 0 30px color-mix(in srgb, var(--theme-color) 25%, transparent);
    }
    .pro-insight-box {
        /* Clear base with vivid neon aura */
        background-color: color-mix(in srgb, var(--theme-color) 10%, rgba(255, 255, 255, 0.03)) !important;
        border: 1px solid color-mix(in srgb, var(--theme-color) 50%, transparent) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), 
                    0 0 30px color-mix(in srgb, var(--theme-color) 40%, transparent), 
                    inset 0 0 20px color-mix(in srgb, var(--theme-color) 20%, transparent) !important;
    }
}

/* =========================================================
   TACTICAL GRID AMBIENT PULSE
   ========================================================= */
@keyframes gridPulse {
    0% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.08) saturate(1.15);
    }
    100% {
        filter: brightness(1) saturate(1);
    }
}

@keyframes scanSweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* ============================================================
   PREMIUM TOOLTIP ENGINE (GLASS + SMART SHIFT + LIQUID GLOW)
   ============================================================ */

abbr[data-tooltip] {
    position: relative;
    display: inline-block;
    text-decoration: underline dotted var(--theme-color);
    text-underline-offset: 3px;
    cursor: pointer;
    font-weight: 900;
}
/* Tooltip Box */
abbr[data-tooltip]::after, 
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;

    transform:
        translateX(calc(-50% + var(--tooltip-shift-x,0px) + var(--tooltip-parallax,0px)))
        translateY(12px)
        scale(0.92);

    opacity: 0;
    visibility: hidden;

    background:
        radial-gradient(
            circle at var(--tooltip-glow-x,50%) var(--tooltip-glow-y,50%),
            rgba(255,255,255,0.08),
            transparent 60%
        ),
        var(--surface-glass-heavy);

    backdrop-filter: var(--blur-xs);
    -webkit-backdrop-filter: var(--blur-xs);

    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 6px;

    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* --- THE ELITE WRAPPING UPGRADE --- */
    display: inline-block;
    white-space: normal;
    max-width: 260px;
    width: fit-content;
    line-height: 1.4;
    text-align: center;
    padding: 8px 12px;
    overflow-wrap: break-word;
    box-sizing: border-box;
    /* ---------------------------------- */

    pointer-events: none;
    will-change: transform, opacity, box-shadow;

    transition:
        opacity 0.25s ease,
        transform 0.28s cubic-bezier(.22,.61,.36,1),
        visibility 0.25s;

    z-index: 99999;
}

/* Tooltip Pointer */
abbr[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 150%;
    left: 50%;

    transform:
        translateX(calc(-50% + var(--tooltip-parallax,0px)))
        translateY(16px);

    border: 6px solid transparent;
    border-top-color: var(--theme-color);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.28s cubic-bezier(.22,.61,.36,1);

    z-index: 99999;
}

/* Neon Signal Pulse */
@keyframes tooltipSignalPulse {
    0% { box-shadow: 0 10px 25px rgba(0,0,0,0.8), 0 0 0px var(--theme-bg); }
    50% { box-shadow: 0 12px 30px rgba(0,0,0,0.9), 0 0 25px var(--theme-bg); }
    100% { box-shadow: 0 10px 25px rgba(0,0,0,0.8), 0 0 15px var(--theme-bg); }
}

/* Reveal states */
abbr[data-tooltip]:hover::after,
abbr[data-tooltip]:focus::after,
abbr[data-tooltip]:active::after {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(calc(-50% + var(--tooltip-shift-x,0px) + var(--tooltip-parallax,0px)))
        translateY(0)
        scale(1);

    animation: tooltipSignalPulse 0.6s ease-out forwards;
}

abbr[data-tooltip]:hover::before,
abbr[data-tooltip]:focus::before,
abbr[data-tooltip]:active::before {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(calc(-50% + var(--tooltip-parallax,0px)))
        translateY(6px);
}

/* Top flip */
abbr.tooltip-flip::after {
    bottom: auto;
    top: 150%;

    transform:
        translateX(calc(-50% + var(--tooltip-shift-x,0px) + var(--tooltip-parallax,0px)))
        translateY(-12px)
        scale(0.92);
}

abbr.tooltip-flip:hover::after,
abbr.tooltip-flip:focus::after,
abbr.tooltip-flip:active::after {
    transform:
        translateX(calc(-50% + var(--tooltip-shift-x,0px) + var(--tooltip-parallax,0px)))
        translateY(0)
        scale(1);
}

abbr.tooltip-flip::before {
    bottom: auto;
    top: 150%;

    border-top-color: transparent;
    border-bottom-color: var(--theme-color);

    transform:
        translateX(calc(-50% + var(--tooltip-parallax,0px)))
        translateY(-16px);
}

abbr.tooltip-flip:hover::before,
abbr.tooltip-flip:focus::before,
abbr.tooltip-flip:active::before {
    transform:
        translateX(calc(-50% + var(--tooltip-parallax,0px)))
        translateY(-6px);
}

/* =========================
   ACCESSIBILITY UTILITIES
   ========================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================
   CUSTOM COMPONENT WRAPPERS
   ========================= */
.scoreboard-wrapper {
    background: #0a1128;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 217, 255, 0.3);
    margin-bottom: 20px;
}

/* ============================================================
   ENTERPRISE UI: SCOREBOARD & ELITE TABLE SYSTEM 
   ============================================================ */

/* --- TEXT STATE UTILITIES --- */
.text-warning { color: var(--brand-tactician, #ffcc00); }
.text-danger { color: var(--brand-danger, #ff4444); }
.text-success { color: var(--brand-success, #00ff88); }
.text-neutral { color: var(--text-muted, rgba(255,255,255,0.6)); }
.text-champion { 
    color: var(--brand-tactician, #ffcc00); 
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
}

/* --- SCOREBOARD UI SYSTEM --- */
.scoreboard-wrapper {
    background: var(--bg-primary, #0a1128); 
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(0, 217, 255, 0.3);
    overflow: hidden;
    margin-bottom: var(--space-4, 20px);
}

.scoreboard-header {
    background: linear-gradient(180deg, #102a43 0%, #06142e 100%);
    padding: var(--space-4, 20px);
    text-align: center;
    border-bottom: 1px solid rgba(0, 217, 255, 0.2);
}

.scoreboard-title {
    margin: 0; 
    color: var(--text-primary, #ffffff); 
    letter-spacing: 2px; 
    font-weight: 300; 
    text-transform: uppercase; 
    font-size: 1.8rem;
}

.scoreboard-subtitle {
    margin: 5px 0 0 0; 
    color: var(--text-muted, rgba(255,255,255,0.6)); 
    font-size: 0.8rem; 
    letter-spacing: 1px; 
    text-transform: uppercase;
}

.scoreboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(255,255,255,0.1); 
    padding: 2px;
}

.scoreboard-column {
    background: #06142e;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .scoreboard-grid { grid-template-columns: 1fr; }
}

/* =========================
   ELITE TABLE SYSTEM CORE
   ========================= */
.elite-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: var(--text-primary, #ffffff);
}

.elite-table thead th {
    color: var(--theme-color);
    border-bottom: 2px solid var(--theme-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 14px;
}

.elite-table tbody td,
.elite-table tbody th {
    padding: 10px 12px;
    vertical-align: middle;
}

.elite-table tbody th {
    color: var(--text-primary, #ffffff);
    border-bottom: none;
    font-weight: 700;
}

.elite-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.25s ease, transform 0.15s ease;
}

.elite-table tbody tr:last-child {
    border-bottom: none;
}

.elite-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

/* Table container */
.elite-table-wrapper {
    background: rgba(255, 255, 255, 0.03); 
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    margin: 20px 0;
}

/* =========================
   GLOBAL DATA EMPHASIS
   ========================= */

/* Bold only core data columns (safe + scoped to elite tables only) */
.elite-table tbody td:nth-child(2),
.elite-table tbody td:nth-child(3) {
    font-weight: 900;
}

/* =========================
   ELITE ROW STATES
   ========================= */

/* Champion row base */
.elite-table tbody tr.row-champion {
    background: rgba(255, 204, 0, 0.15);
    transition: background 0.25s ease, transform 0.15s ease;
}

.elite-table tbody tr.row-champion:hover {
    background: rgba(255, 204, 0, 0.25);
    transform: translateY(-1px);
}

/* Gold highlight ONLY for Rank (1), Club (2), and Points (3) - Safe and scoped! */
.elite-table tbody tr.row-champion th:first-child,
.elite-table tbody tr.row-champion td:nth-child(2),
.elite-table tbody tr.row-champion td:nth-child(3) {
    color: var(--brand-tactician, #ffcc00);
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.6);
}

/* Ensure nested elements inherit correctly without overreach */
.elite-table tbody tr.row-champion th:first-child *,
.elite-table tbody tr.row-champion td:nth-child(2) *,
.elite-table tbody tr.row-champion td:nth-child(3) * {
    color: inherit;
}

/* Qualified */
.elite-table tbody tr.row-qualified {
    background: rgba(0, 255, 136, 0.15);
    transition: background 0.25s ease;
}

.elite-table tbody tr.row-qualified:hover {
    background: rgba(0, 255, 136, 0.25);
}

/* Relegated */
.elite-table tbody tr.row-relegated {
    background: rgba(255, 68, 68, 0.15);
    transition: background 0.25s ease;
}

.elite-table tbody tr.row-relegated:hover {
    background: rgba(255, 68, 68, 0.25);
}

/* =========================
   ELITE TABLE VARIANTS 
   ========================= */

.elite-table-wrapper--bare {
    background: transparent;
    border: none;
    padding: 10px;
    margin: 0;
}

/* Scoreboard variant */
.elite-table--scoreboard {
    table-layout: auto; /* ✅ FIX: avoids colspan conflict */
    width: 100%;
    font-size: 0.8rem;
}

/* Header styling */
.elite-table--scoreboard thead th {
    border-bottom: none;
    color: var(--text-primary, #ffffff);
    padding: 10px 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Cell spacing */
.elite-table--scoreboard tbody td,
.elite-table--scoreboard tbody th {
    padding: 8px 6px;
}

/* Subtle row interaction polish */
.elite-table--scoreboard tbody tr {
    transition: background 0.2s ease, transform 0.15s ease;
}

.elite-table--scoreboard tbody tr:hover {
    transform: translateY(-1px);
}

/* =========================
   COLUMN WIDTH SYSTEM (FINAL FIX)
   ========================= */

/* Column 1: Rank (true shrink-wrap) */
.elite-table--scoreboard tbody tr:not(.row-divider-none) th:first-child {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Column 3: Points (true shrink-wrap) */
.elite-table--scoreboard tbody tr:not(.row-divider-none) td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Column 2: Club (takes all remaining space safely) */
.elite-table--scoreboard tbody tr:not(.row-divider-none) td:nth-child(2) {
    width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* ✅ critical for ellipsis in auto layout */
}

/* Divider control */
.elite-table--scoreboard tbody tr.row-divider-none {
    border-bottom: none;
}

/* =========================
   HEADER COLOR UTILITIES
   ========================= */

.elite-table--scoreboard thead th.bg-purple { 
    background-color: #a855f7; 
    color: #ffffff; 
}

.elite-table--scoreboard thead th.bg-navy { 
    background-color: #0f172a; 
    color: #ffffff; 
}

.elite-table--scoreboard thead th.bg-red { 
    background-color: #dc2626; 
    color: #ffffff; 
}

/* ============================================================
   MICRO-ANIMATION POLISH (SUBTLE + PREMIUM)
   ============================================================ */

/* --- ROW HOVER GLOWS (100% SAFE & SCOPED) --- */
/* By applying the transition directly to the state classes, we avoid global overrides 
   while ensuring the glow fades smoothly on EVERY table in the app. */
.elite-table tbody tr.row-champion,
.elite-table tbody tr.row-qualified,
.elite-table tbody tr.row-relegated {
    transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.elite-table tbody tr.row-champion:hover {
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.25);
}

.elite-table tbody tr.row-qualified:hover {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
}

.elite-table tbody tr.row-relegated:hover {
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
}

/* --- HEADER: SUBTLE SHEEN EFFECT --- */
.elite-table--scoreboard thead th {
    position: relative;
    overflow: hidden;
}

/* GPU-friendly sheen (transform-only animation) */
.elite-table--scoreboard thead th::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transform: translateX(-150%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

/* Trigger sweep */
.elite-table--scoreboard thead th:hover::after {
    transform: translateX(250%);
}

/* ============================================================
   MOBILE MASTER OVERRIDE (FINAL – CLEAN & STABLE)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Grid Override */
    body .home-grid,
    body .home-grid.grid,
    body [id$="-hub"] .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        overflow: visible; /* Prevents glow clipping */
        box-sizing: border-box;
    }

    body .home-grid > *,
    body [id$="-hub"] .grid > * {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }

    /* 2. Badge Bar Wrap Fix */
    body .badge-pill-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 15px;
        height: auto;
        box-sizing: border-box;
        width: 100%;
    }

    body .badge-item {
        font-size: 0.75rem;
        padding: 6px 10px;
        white-space: nowrap;
        max-width: 100%;
    }

    /* 3. Typography Clamps */
    body .brand-title-stacked,
    body .celeb-title,
    body .grad-title,
    body .own-goal-title {
        font-size: clamp(1.8rem, 8vw, 3.5rem); 
        text-align: center;
        white-space: normal; 
        word-break: break-word;
        line-height: 1.1;
    }

    body .home-header-grid { padding-top: 20px; }

    body .live-intel-banner {
        margin: 10px 0 20px;
        padding: 8px 12px;
        box-sizing: border-box;
        max-width: 100%;
    }

    body .header-subtitle { font-size: 0.7rem; letter-spacing: 2px; }

    /* 4. Container Spacing & Table Swiping */
    body .scouting-report-container {
        padding: 20px 15px;
        width: 100%;
        box-sizing: border-box;
        margin-top: 55px;
    }

    body .scouting-report-header {
        box-sizing: border-box;
        width: 100%;
        margin-top: 50px; 
        padding: 25px 20px; 
    }

    body .elite-table-wrapper {
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }

    /* 5. Cards */
    body .topic-card {
        min-width: 0;
        width: 100%;
        overflow: hidden;
        padding: 15px;
        min-height: 140px;
        box-sizing: border-box;
    }

    body .topic-card.home-variant h3, 
    body .topic-card.standard h3, 
    body .topic-card.exam-option h3 {
        font-size: 1rem;
        line-height: 1.2;
        word-break: break-word;
    }

    body .topic-card p { font-size: 0.75rem; }

    body .card-badge {
        font-size: 0.6rem;
        padding: 4px 8px;
        margin-bottom: 10px;
        max-width: calc(100% - 40px);
    }

    body .topic-card.locked::before { top: 12px; right: 12px; font-size: 1.2rem; }

    /* 6. Navigation Hub Header Fixes */
    body .lesson-header-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    body .lesson-header-flex .nav-group-left {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    body .back-btn { padding: 0 12px; font-size: 0.65rem; height: 36px; }
    body .module-badge { font-size: 0.65rem; padding: 6px 12px; }

    body .lesson-bottom-nav {
        overflow: visible; 
        padding-bottom: 20px;
    }

    body #univ-next-btn { flex: 1 1 100%; justify-content: center; margin-top: 5px; }
    body .lesson-title-text { text-align: center; font-size: 1rem; width: 100%; }

    /* 7. Exam Arena Architecture (Stable Scroll Fix) */
    body .exam-arena-container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 15px 15px 0 15px;
        box-sizing: border-box;
        overflow: hidden; 
    }

    body #question-container {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 40px;
        -webkit-overflow-scrolling: touch;
    }

    body .exam-top-cluster {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 15px;
    }

    body .exam-forfeit-btn { 
        justify-self: start; 
        margin: 0; 
        height: 32px; 
        padding: 0 12px; 
        font-size: 0.65rem; 
        box-sizing: border-box;
    }

    body .exam-shot-clock { 
        position: relative; 
        justify-self: center; 
        left: auto; 
        transform: none; 
    }

    body .live-tag-wrapper { justify-self: end; margin: 0; }

    body .exam-live-badge {
        height: 32px;
        padding: 0 12px;
        font-size: 0.65rem;
        box-sizing: border-box;
        margin: 0;
    }

    /* 8. Global Overlay Centering */
    /* Only apply styling when active */
body #booking-overlay.active,
body #offside-overlay.active,
body #graduation-overlay.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

body #booking-overlay.active *,
body #offside-overlay.active *,
body #graduation-overlay.active * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}}

/* ============================================================
   GRADUATION CEREMONY OVERLAY (100% CLEAN & FULLSCREEN)
   ============================================================ */

#graduation-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;  /* FIX: 100% prevents horizontal scrollbars */
    height: 100% !important; /* FIX: 100% prevents vertical scrollbars */
    background: #b500b5 !important; /* Vibrant Mogul Purple */
    z-index: 49999 !important; /* Forces it over all page content */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    opacity: 0;
    pointer-events: none;
    
    /* Performance Tweaks */
    overflow: hidden;
    will-change: opacity;
    transition: opacity 0.5s ease;
}

#graduation-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#graduation-overlay > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   MOGUL GRADUATION: HIGH-VOLTAGE GLOW (VIBRANT EDITION)
   ============================================================ */

/* 1. The Light-Emitting Header */
.mogul-title-massive {
    color: #ffffff;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px 0 10px 0;
    font-weight: 900;

    /* Layered Glow: White core -> Pink mid -> Magenta aura */
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff,
        0 0 80px #ff00ff;

    will-change: transform, text-shadow;
}

/* 2. The Backlit Status Box */
.mogul-status-box {
    background: rgba(255, 0, 255, 0.15);
    border: 2px solid #ff00ff;
    padding: 15px 45px;
    border-radius: 12px;
    margin-bottom: 30px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;

    /* Stable base glow */
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.6), 
        inset 0 0 20px rgba(255, 0, 255, 0.4);

    text-shadow: 0 0 15px #ff00ff;

    animation: boxBreathing 3s ease-in-out infinite;
    will-change: box-shadow, border-color;
}

/* 3. Intensified Cap Glow */
.mogul-cap-icon {
    font-size: 6.5rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.8));
    animation: mogulPulse 2s infinite alternate;

    will-change: transform, filter;
}

/* 4. Keyframes (Smoothed + Layer-Safe) */
@keyframes mogulPulse {
    from { 
        transform: scale(1); 
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); 
    }
    to { 
        transform: scale(1.15); 
        filter: drop-shadow(0 0 40px #ff00ff); 
    }
}

@keyframes boxBreathing {
    0%, 100% { 
        border-color: #ff00ff; 
        box-shadow: 
            0 0 20px rgba(255, 0, 255, 0.6),
            inset 0 0 15px rgba(255, 0, 255, 0.4);
    }
    50% { 
        border-color: #ffffff; 
        box-shadow: 
            0 0 40px rgba(255, 0, 255, 0.9),
            inset 0 0 25px rgba(255, 0, 255, 0.6);
    }
}

/* ============================================================
   MOGUL CONFETTI ENGINE
   ============================================================ */
.ikb-confetti {
    position: fixed; /* More reliable than absolute */
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #ff00ff; /* Magenta */
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    animation: confettiFall linear forwards;
    will-change: transform, opacity; /* Performance hint */
}

.ikb-confetti.gold {
    background-color: #ffcc00;
}

.ikb-confetti.white {
    background-color: #ffffff;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10vh) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* ============================================================
   MOGUL GLOW: PERMANENT AURA SYSTEM
   ============================================================ */

/* 1. The Pulse Badge */
.badge-item.mogul-verified {
    background: var(--brand-mogul) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 20px var(--brand-mogul), inset 0 0 10px rgba(255,255,255,0.5);
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: mogulGlowPulse 2s infinite alternate;
}

/* 2. The Liquid Neon Header (Master State) */
.body-mogul-active .brand-title-stacked {
    /* High-contrast White/Magenta/White flow */
    background: linear-gradient(
        90deg,
        #ffffff,
        #ff00ff,
        #ffffff,
        #ff00ff,
        #ffffff
    ) !important;

    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    animation: liquidNeon 2s linear infinite !important; /* Faster energy */

    /* Maximum Aura Drop Shadow */
    filter: drop-shadow(0 0 20px rgba(255, 0, 255, 1)) !important;
}

/* 3. Keyframes */
@keyframes mogulGlowPulse {
    from { box-shadow: 0 0 10px var(--brand-mogul); transform: scale(1); }
    to { box-shadow: 0 0 30px var(--brand-mogul), 0 0 50px rgba(255, 0, 255, 0.3); transform: scale(1.05); }
}

@keyframes liquidNeon {
    to { background-position: 200% center; }
}

/* 4. Full Hub Illumination (Scoped) */
.body-mogul-active .scouting-report-container {
    /* Explicitly removed border-color override so modules keep their identity */
    box-shadow: 0 0 60px rgba(255, 0, 255, 0.15);
}

/* 5. Accessibility: Motion Reduction */
@media (prefers-reduced-motion: reduce) {
    .badge-item.mogul-verified,
    .body-mogul-active .brand-title-stacked {
        animation: none;
    }
}

/* ============================================================
   PROGRESSION FX: BADGE UNLOCK PULSE
   ============================================================ */

.badge-item.just-unlocked {
    animation: badgeUnlockPulse 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes badgeUnlockPulse {
    0% { 
        transform: scale(1); 
        background: rgba(255, 255, 255, 0.5); 
        box-shadow: 0 0 40px #ffffff; 
    }
    50% { 
        transform: scale(1.15); 
        box-shadow: 0 0 30px var(--theme-color); 
    }
    100% { 
        /* 🔥 Removed the background color here so it naturally accepts the Green/Blue/Gold colors from above! */
        transform: scale(1); 
    }
}

/* ============================================================
   MODULE COMPLETION FX (ELITE FINISH STATE)
   ============================================================ */

.progress-bar-fill.complete {
    position: relative;
    overflow: hidden; /* 🔥 Prevents the energy sweep from bleeding outside rounded corners */
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.6);
    filter: brightness(1.2);
    animation: completionPulse 0.6s ease-out;
}

/* Subtle "energy sweep" across completed bar */
.progress-bar-fill.complete::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 45%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.35) 55%,
        transparent 100%
    );
    animation: completionSweep 1.1s ease-out forwards;
    pointer-events: none;
}

/* Soft pulse ring (subtle, premium—not arcade) */
@keyframes completionSweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Gentle settle pulse (feels “confirmed”) */
@keyframes completionPulse {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1.05); }
    100% { transform: scaleY(1); }
}