/**
 * RADIANT REVIEW // v27.0 STABLE [FRONTEND] // Patch 16: Authentication Styling
 */
:root { 
    --v-green: #2ff472; 
    --v-midnight: #060e14; 
    --v-border: rgba(47, 244, 114, 0.3); 
    --v-red: #ff4655;
    --v-gold: #ffb800;
}
body { 
    background-color: var(--v-midnight); 
    color: #ffffff; 
    margin: 0; 
    overflow-x: hidden; 
    position: relative;
}

/* Ambient Video Background Layer (Replaces static bg.jpg) */
#ambient-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    opacity: 0.5; /* <-- Adjust this decimal value to change your opacity */
}

.font-v { font-family: 'Orbitron', sans-serif; }

/* --- PREMIUM AGENT WAR ROOM ARCHITECTURE --- */
#awr-carousel-stage {
    perspective: 1200px;
    overflow: hidden;
}

#awr-carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Continuous Subtle Ambient Background for the Modal */
.awr-modal-ambient-glow {
    background: radial-gradient(circle at 50% 50%, #0c1a24 0%, #050b0f 100%);
    z-index: 0;
}

/* Premium Card Silhouette & Layer Structure */
.awr-premium-card {
    position: absolute;
    width: 380px; /* Adjusted wider for collectible dossier proportion */
    height: 500px; /* Reduced height to remove vertical banner feel */
    background: rgba(10, 20, 27, 0.3);
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.6s ease,
                box-shadow 0.6s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

/* Premium SVG Vector Frame - Mathematically perfect continuous trace */
.awr-premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.15); /* Base frame color */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 500' preserveAspectRatio='none'%3E%3Cpolygon points='20,1 379,1 379,479 359,499 1,499 1,20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 500' preserveAspectRatio='none'%3E%3Cpolygon points='20,1 379,1 379,479 359,499 1,499 1,20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    transition: background 0.6s ease;
    clip-path: none; /* Overriding old logic */
}

.awr-premium-card.active-center::before {
    background: var(--agent-color, rgba(0, 242, 255, 0.6));
}

/* Layer 1: Agent Atmosphere Backdrop */
.awr-card-atmosphere {
    position: absolute;
    inset: 0;
    background: var(--agent-glow, radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.08) 0%, transparent 60%));
    opacity: 0.35; /* Subdued to keep portrait as hero */
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Layer 2 & 3: Custom Glass Frame Panel - Luxury Tactical Frosted Glass */
.awr-card-glass {
    position: absolute;
    inset: 0; /* Expanded to fill since border is handled by pseudo-element */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 40%, rgba(255, 255, 255, 0.04) 100%);
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
    backdrop-filter: blur(18px); /* Refined blur for proper texture bleed */
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.1), inset -2px -2px 12px rgba(0, 0, 0, 0.8); /* Refraction and edge depth */
    z-index: 2;
}

/* Layer 4: Portrait Hero Wrapper */
.awr-card-portrait-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%; /* Slightly expanded to prevent early mask cutoffs */
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000000 85%, transparent 100%);
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px);
    -webkit-mask-image: linear-gradient(to bottom, #000000 85%, transparent 100%);
    z-index: 3;
}

.awr-card-portrait {
    width: auto;
    height: 100%; /* Normalized for consistent baseline */
    object-fit: contain;
    object-position: top center;
    position: absolute;
    top: 4%; /* Add consistent breathing room */
    left: 50%;
    transform: translateX(-50%) scale(1); /* Strictly centered */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

/* Layer 5, 6 & 7: Intelligence Data Overlay Container */
.awr-card-data-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 4;
    transform: translateZ(20px);
}

/* Premium External Glow Engine & Matte Glass */
.awr-premium-card.active-center {
    background: linear-gradient(180deg, rgba(15, 25, 35, 0.96) 0%, rgba(6, 14, 20, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    opacity: 1;
    z-index: 10;
    /* Downward anchor shadow + thematic glow */
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.95), 0 0 45px -15px var(--agent-shadow-glow, rgba(0, 242, 255, 0.2)), inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
    transform: translateZ(40px); /* Premium physical z-axis lift */
    animation: premiumExternalUnderglow 4.5s ease-in-out infinite;
}

@keyframes premiumExternalUnderglow {
    0%, 100% {
        filter: drop-shadow(0 40px 30px rgba(0, 0, 0, 0.9)) /* Strong environmental grounding */
                drop-shadow(0 0 25px var(--agent-shadow-glow)); /* Subdued ambient footprint */
    }
    50% {
        filter: drop-shadow(0 45px 40px rgba(0, 0, 0, 0.95)) 
                drop-shadow(0 0 45px var(--agent-shadow-glow)); /* Controlled aura escape */
    }
}

.awr-premium-card.active-center .awr-card-atmosphere {
    opacity: 0.6; /* Reduced from 1 to keep portrait primary */
}

.awr-premium-card.active-center .awr-card-portrait {
    transform: translateX(-50%) scale(1.15); /* Normalized active scale */
}

.awr-premium-card.side-left, .awr-premium-card.side-right {
    opacity: 0.35; /* Push further into background to prevent competition */
    filter: brightness(0.4) contrast(0.8) blur(4px); /* Heavy fade to elevate active dossier */
    z-index: 5;
    pointer-events: auto; 
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.awr-premium-card.side-left:hover, .awr-premium-card.side-right:hover {
    opacity: 0.6; 
    filter: brightness(0.6) contrast(0.9) blur(2px);
    cursor: pointer;
}

/* --- REDUCE SIDE-CARD BLEED-THROUGH (NEIGHBORING PREVIEWS ONLY) --- */
/* UPGRADE 4: SIDE DOSSIER PREVIEW IMPROVEMENTS */
.awr-premium-card:not(.active-center) .awr-card-data-overlay h3,
.awr-premium-card:not(.active-center) .awr-card-data-overlay p:not(:first-child),
.awr-premium-card:not(.active-center) .awr-card-data-overlay div,
.awr-carousel-card:not(.active-center-card) .awr-card-content {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Keep Agent Name and Role visible but dimmed to encourage exploration */
.awr-premium-card:not(.active-center) .awr-card-header {
    opacity: 0.35 !important;
    transform: translateY(10px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.awr-premium-card:not(.active-center) .awr-card-data-overlay {
    opacity: 1 !important;
    pointer-events: none;
}
.awr-premium-card:not(.active-center) .awr-card-data-overlay p:first-child {
    opacity: 0.35 !important;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.awr-premium-card.hidden-out {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7) translateZ(-200px);
    z-index: 1;
}

/* Micro-Animations & Scanners */
.awr-card-breathing-accent {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--agent-color, #00f2ff);
    animation: awrPulse 2s infinite ease-in-out;
    z-index: 5;
}

@keyframes awrPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 8px var(--agent-color, #00f2ff)); }
}

/* Demote the container frame to a subtle structural stage */
.awr-perimeter-scan {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important; /* Kill the arcade sweeping animation */
    pointer-events: none;
    z-index: 50; 
}

/* Premium classified corner brackets for the modal environment */
.awr-perimeter-scan::before,
.awr-perimeter-scan::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-color: rgba(255, 255, 255, 0.1); /* Subtle architectural white */
    pointer-events: none;
}
.awr-perimeter-scan::before {
    top: 25px; left: 25px;
    border-top: 1px solid; border-left: 1px solid;
}
.awr-perimeter-scan::after {
    bottom: 25px; right: 25px;
    border-bottom: 1px solid; border-right: 1px solid;
}

.scanline {
    width: 100%; height: 2px; position: fixed; top: 0;
    background: linear-gradient(to right, transparent, var(--v-green), transparent);
    box-shadow: 0 0 15px var(--v-green); z-index: 100;
    pointer-events: none; opacity: 0.3; animation: dataSweep 4s linear infinite;
}
@keyframes dataSweep { 0% { top: -5%; } 100% { top: 105%; } }

.hud-container { 
    background: rgba(10, 20, 25, 0.85); 
    backdrop-filter: blur(20px); 
    border: 1px solid var(--v-border); 
    border-radius: 1rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

/* Precise Capsule Styling - Updated for Professional Elegance */
.hud-auth-capsule {
    position: relative;
    background: #2C5F78;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.hud-auth-capsule:hover {
    background: #3a7ca0;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

#g_logo_placeholder {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#user-profile-display {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    padding: 3px 12px 3px 4px;
    gap: 8px;
}

/* Removed border from the profile picture for a cleaner aesthetic */
#user-profile-pic {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
}

input, select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--v-green); outline: none; }

.v-btn { 
    font-family: 'Orbitron', sans-serif; 
    font-weight: 900; 
    transition: 0.4s all; 
    cursor: pointer; 
}

/* Static brightness enforcement */
.v-btn:hover {
    filter: brightness(1) !important;
}

.profile-card-circle {
    width: 100px; height: 100px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--v-green); box-shadow: 0 0 20px rgba(47, 244, 114, 0.4); background: #000;
    transition: all 0.3s ease;
}
.profile-card-circle img { width: 100%; height: 100%; object-fit: cover; }

.profile-loaded .profile-card-circle {
    animation: breathingCard 4s ease-in-out infinite;
}

@keyframes breathingCard {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(47, 244, 114, 0.4); border-color: var(--v-green); }
    50% { transform: scale(1.08); box-shadow: 0 0 35px rgba(47, 244, 114, 0.7); border-color: #ffffff; }
}

.is-loading .profile-card-circle {
    animation: profilePulse 1.5s ease-in-out infinite;
    border-color: rgba(47, 244, 114, 0.5);
}

.is-loading .hud-container {
    position: relative;
    overflow: hidden;
}

.is-loading .hud-container::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(47, 244, 114, 0.05), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes profilePulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(47, 244, 114, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(47, 244, 114, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(47, 244, 114, 0.2); }
}

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

#search-history-hero, #search-history-footer { max-height: 250px; overflow-y: auto; }
#search-history-hero::-webkit-scrollbar, #search-history-footer::-webkit-scrollbar { width: 4px; }
#search-history-hero::-webkit-scrollbar-thumb, #search-history-footer::-webkit-scrollbar-thumb { background: var(--v-green); border-radius: 10px; }

.mask-map {
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

#best-map-container, #best-agent-container {
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

#best-map-container:hover, #best-agent-container:hover {
    background: rgba(47, 244, 114, 0.05);
    border-color: var(--v-green);
    transform: translateY(-2px);
}

#best-map-img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.3;
    transition: opacity 0.3s;
    z-index: 0;
    pointer-events: none;
}

#best-map-container:hover #best-map-img {
    opacity: 0.6;
}

.match-card { 
    position: relative; 
    margin-bottom: 4px; 
    cursor: pointer; 
    overflow: hidden; 
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}

.match-card:hover { transform: scale(1.005); filter: brightness(1.2); }

.match-card.victory { 
    border-left-color: var(--v-green);
    background: linear-gradient(90deg, rgba(47, 244, 114, 0.15) 0%, rgba(6, 14, 20, 1) 100%); 
}
.match-card.defeat { 
    border-left-color: var(--v-red);
    background: linear-gradient(90deg, rgba(255, 70, 85, 0.15) 0%, rgba(6, 14, 20, 1) 100%); 
}

.match-overlay { 
    display: grid;
    grid-template-columns: 70px 80px 140px 1fr 120px 180px;
    align-items: center;
    min-height: 75px;
}

.agent-thumb { 
    width: 55px; 
    height: 55px; 
    object-fit: cover; 
    border-radius: 4px; 
    border: 1px solid rgba(255,255,255,0.1);
    margin-left: 10px;
    background: rgba(0,0,0,0.3);
}

.rr-indicator { text-align: center; }
.rr-value { font-family: 'Orbitron'; font-weight: 900; font-size: 13px; margin-top: 2px; display: block; }
.rank-mini { width: 30px; height: 30px; margin: 0 auto; }

.kda-block { padding-left: 15px; }
.kda-text { font-family: 'Orbitron'; font-size: 16px; font-weight: 700; letter-spacing: -0.5px; }
.score-text { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.4); text-transform: uppercase; }

.mvp-badge { 
    font-family: 'Orbitron'; 
    font-size: 9px; 
    font-weight: 900; 
    color: var(--v-gold); 
    border: 1px solid var(--v-gold); 
    padding: 2px 6px; 
    border-radius: 2px;
}

.r-rating-badge {
    width: 105px;
    display: inline-block;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.result-block { text-align: center; }
.result-status { font-family: 'Orbitron'; font-size: 18px; font-weight: 900; font-style: italic; line-height: 1; }
.result-score { font-family: 'Orbitron'; font-size: 13px; opacity: 0.8; margin-top: 2px; }

.map-splash-container {
    position: relative;
    height: 75px;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.map-splash-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.75; 
    transition: opacity 0.3s; 
}

.round-pip {
    width: 14px; height: 14px; border-radius: 2px; position: relative; border: 1px solid rgba(255,255,255,0.1);
}
.round-pip.win { background-color: var(--v-green); box-shadow: 0 0 5px rgba(47, 244, 114, 0.3); }
.round-pip.loss { background-color: var(--v-red); box-shadow: 0 0 5px rgba(255, 70, 85, 0.3); }

.round-popover {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
    background: #000; color: #fff; font-size: 8px; font-weight: 900; padding: 2px 4px;
    border-radius: 2px; border: 1px solid var(--v-border); opacity: 0; pointer-events: none;
    transition: all 0.2s ease; white-space: nowrap; z-index: 20;
}
.round-pip:hover .round-popover { opacity: 1; transform: translateX(-50%) translateY(-10px); }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tactical Intel Carousel Card Logic */
.intel-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(145deg, rgba(10, 20, 25, 0.9) 0%, rgba(6, 14, 20, 0.95) 100%);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.intel-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--card-color);
    opacity: 0.6;
    transition: opacity 0.4s ease, width 0.4s ease, box-shadow 0.4s ease;
}

.intel-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 30px -15px var(--card-color);
    transform: translateY(-4px);
}

.intel-card:hover::before {
    opacity: 1;
    width: 5px;
    box-shadow: 0 0 15px var(--card-color);
}

.intel-card > p {
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    transition: color 0.4s ease;
}

.intel-card:hover > p {
    color: rgba(255, 255, 255, 0.9);
}

.mask-carousel {
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}

.section-divider {
    height: 1px; background: linear-gradient(90deg, transparent, var(--v-green), transparent);
    opacity: 0.4; position: relative; box-shadow: 0 0 10px var(--v-green); margin-bottom: 30px;
}

/* Visual Lock Logic */
.data-locked {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(47, 244, 114, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}
.data-locked:hover {
    border-color: #2ff472 !important;
    box-shadow: 0 0 20px rgba(47, 244, 114, 0.2) !important;
}
.data-locked > *:not(.lock-overlay-element):not(.inline-lock-popup) {
    filter: blur(6px);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}
.lock-overlay-element {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.lock-overlay-element .help-trigger {
    pointer-events: auto;
}

@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(47, 244, 114, 0.3); border-color: #2ff472; background: rgba(47, 244, 114, 0.1); }
    50% { box-shadow: 0 0 30px rgba(47, 244, 114, 0.8); border-color: #fff; background: rgba(47, 244, 114, 0.3); }
}
.pulse-highlight {
    animation: highlightPulse 1s ease-in-out 2 !important;
}

@keyframes elasticPop {
    0% { transform: scale(0) translateY(50px); opacity: 0; }
    60% { transform: scale(1.15) translateY(-10px); opacity: 1; }
    80% { transform: scale(0.95) translateY(5px); }
    100% { transform: scale(1) translateY(0); }
}

.elastic-enter {
    animation: elasticPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Holographic Sub-menus */
#ai-speed-dial.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.holo-card {
    background: linear-gradient(135deg, rgba(6, 14, 20, 0.9) 0%, rgba(10, 20, 25, 0.95) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-right: 3px solid transparent;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.holo-card:hover {
    border-color: rgba(0, 242, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 242, 255, 0.1) 0%, rgba(6, 14, 20, 0.95) 100%);
    transform: translateX(-4px);
}

.holo-card.red-accent:hover {
    border-color: rgba(255, 70, 85, 0.4);
    background: linear-gradient(135deg, rgba(255, 70, 85, 0.1) 0%, rgba(6, 14, 20, 0.95) 100%);
}

/* Radiant AI Core Base */
.radiant-fab-wrapper {
    position: relative;
    padding: 2px;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    background: rgba(255, 255, 255, 0.1);
    overflow: visible; /* Changed from hidden to allow tooltip overflow */
    cursor: pointer;
    display: inline-flex;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.15), 0 10px 25px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
}

.radiant-fab-glow {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(from 0deg, rgba(0, 242, 255, 0.2) 0%, rgba(0, 242, 255, 0.2) 50%, #ffb800 75%, #2ff472 90%, #00f2ff 100%);
    animation: perimeter-scan 4s linear infinite;
    z-index: -1; /* Ensuring glow remains behind inner content */
}

.radiant-fab-wrapper:hover .radiant-fab-glow {
    animation-duration: 2.66s;
}

/* --- ABORT BUTTON RED GLOW OVERRIDE --- */
.red-glow {
    background: conic-gradient(from 0deg, rgba(255, 70, 85, 0.1) 0%, rgba(255, 70, 85, 0.1) 50%, rgba(255, 70, 85, 0.5) 75%, #cc0000 90%, #ff4655 100%);
    animation: perimeter-scan 4s linear infinite;
}

.abort-analysis-btn:hover .red-glow {
    animation-duration: 2s; /* 50% Speed Increase from 4s */
}

.abort-analysis-btn .radiant-fab-inner::before {
    background: conic-gradient(from 0deg, transparent 70%, rgba(255, 70, 85, 0.15) 85%, rgba(255, 70, 85, 0.4) 95%, #ff4655 100%);
}

.abort-analysis-btn:hover .radiant-fab-inner::before {
    animation: perimeter-scan 2s linear infinite;
}
/* --------------------------------------- */

.radiant-fab-inner {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #122530 0%, #060e14 100%);
    clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 24px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
}

.radiant-fab-inner::before {
    content: '';
    position: absolute;
    width: 250%;
    height: 250%;
    top: -75%;
    left: -75%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(255, 184, 0, 0.15) 85%, rgba(47, 244, 114, 0.25) 95%, rgba(0, 242, 255, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.radiant-fab-wrapper:hover .radiant-fab-inner::before {
    opacity: 1;
    animation: perimeter-scan 2.66s linear infinite;
}

.levitate-icon {
    animation: levitate 3s ease-in-out infinite;
    filter: drop-shadow(0 5px 5px rgba(0,242,255,0.4));
}

.glitch-text {
    position: relative;
    color: #fff;
    transition: color 0.3s ease;
}

.radiant-fab-wrapper:hover .glitch-text {
    color: #ffffff;
}

@keyframes perimeter-scan { 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}

@keyframes levitate { 
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 5px 5px rgba(0,242,255,0.4)); } 
    50% { transform: translateY(-4px); filter: drop-shadow(0 10px 8px rgba(0,242,255,0.2)); } 
}

/* Radiant AI Core - Active State (Fixed Close Node) */
#ai-fab-btn.active .radiant-fab-inner {
    background: #0a1419; 
    padding: 14px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border: 1px solid var(--v-red); 
}

#ai-fab-btn.active {
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    background: var(--v-red); 
}

#ai-fab-btn.active .radiant-fab-glow {
    display: none; 
}

#ai-fab-btn.active #ai-fab-icon-core { display: none; }
#ai-fab-btn.active #ai-fab-text { display: none; }
#ai-fab-btn.active #ai-fab-icon-close {
    display: block;
    transform: rotate(0deg);
}

/* Start AI Analysis Button Modifier */
.start-analysis-btn {
    width: 260px;
    margin: 0 auto;
}

/* --- TACTICAL DOSSIER STYLES --- */
.hud-bracket {
    position: relative;
}
.hud-bracket::before, .hud-bracket::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(0, 242, 255, 0.8);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 50;
}
.hud-bracket::before {
    top: 0; left: 0;
    border-top: 2px solid; border-left: 2px solid;
    border-top-left-radius: 12px;
}
.hud-bracket::after {
    bottom: 0; right: 0;
    border-bottom: 2px solid; border-right: 2px solid;
    border-bottom-right-radius: 12px;
}

/* --- AI TRAINING ACCORDION SYSTEM --- */
.drill-accordion {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.drill-accordion:last-child {
    margin-bottom: 0;
}
.drill-accordion.open {
    border-color: rgba(0, 242, 255, 0.3);
    background: rgba(0, 242, 255, 0.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.drill-header {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background 0.2s ease;
}
.drill-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.drill-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: #00f2ff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drill-toggle-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    transition: transform 0.3s ease;
}
.drill-accordion.open .drill-toggle-icon {
    transform: rotate(180deg);
    color: #00f2ff;
}

.drill-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 16px;
    opacity: 0;
}
.drill-accordion.open .drill-content {
    max-height: 1200px; /* Allows smooth expansion */
    padding-bottom: 16px;
    opacity: 1;
}

/* Tactical Pills */
.tactical-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tactical-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tactical-pill.highlight {
    border-color: rgba(0, 242, 255, 0.4);
    color: #00f2ff;
    background: rgba(0, 242, 255, 0.05);
}
.tactical-pill.warning {
    border-color: rgba(255, 70, 85, 0.4);
    color: #ff4655;
    background: rgba(255, 70, 85, 0.05);
}

/* --- PDF PRINT MODE OVERRIDES --- */
.pdf-print-mode {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 20px !important;
}
.pdf-print-mode * {
    color: #000000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: #bbbbbb !important;
    background: transparent !important;
}
.pdf-print-mode span {
    border: 1px solid #cccccc !important;
    color: #000000 !important;
}
.pdf-print-mode h3, .pdf-print-mode h4, .pdf-print-mode p {
    color: #000000 !important;
}
.pdf-print-mode .drill-content {
    max-height: none !important;
    opacity: 1 !important;
    padding-bottom: 16px !important;
}
.pdf-print-mode .drill-toggle-icon {
    display: none !important;
}

/* Custom Scrollbar for Info Modals */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 255, 0.3);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 255, 0.6);
}

/* Holographic Neural Levitation Animation for wire.svg */
@keyframes holo-levitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes holo-pulse {
    /* Using invert(1) + brightness(1.2) to flip the dark SVG into a bright white core, allowing the cyan drop-shadow to glow brilliantly */
    0%, 100% { filter: invert(1) brightness(1.2) drop-shadow(0 0 8px rgba(0, 242, 255, 0.4)); }
    50% { filter: invert(1) brightness(1.2) drop-shadow(0 0 20px rgba(0, 242, 255, 0.8)); }
}

@keyframes holo-flicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
    75% { opacity: 0.8; }
}

.holo-wireframe-anim {
    animation: 
        holo-levitate 4s ease-in-out infinite,
        holo-pulse 3s ease-in-out infinite,
        holo-flicker 4s infinite alternate;
    opacity: 0.9;
}

/* --- AI Button Locked State --- */
.radiant-fab-wrapper.ai-locked {
    border-color: rgba(255, 215, 0, 0.3);
}

.radiant-fab-wrapper.ai-locked .radiant-fab-inner #ai-fab-icon-core,
.radiant-fab-wrapper.ai-locked .radiant-fab-inner #ai-fab-text {
    filter: blur(4px);
    opacity: 0.3;
}

.radiant-fab-wrapper.ai-locked #ai-fab-lock-icon {
    display: block;
}

/* AI Lock Popup Animation */
#ai-lock-popup {
    opacity: 0;
    transform: translate(-50%, 10px);
}

#ai-lock-popup.show-popup {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes lock-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.radiant-fab-wrapper.lock-shake-anim {
    animation: lock-shake 0.4s ease-in-out;
}

/* --- VOD UPLOAD INTERFACE STYLES --- */
.vod-action-btn {
    background: transparent;
    position: relative;
    z-index: 1;
}

.vod-action-btn .vod-btn-inner {
    background: linear-gradient(180deg, #1a2a30 0%, #060e14 100%);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.vod-action-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: rgba(255,255,255,0.1);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    z-index: -1;
    transition: all 0.3s ease;
}

/* Inactive State */
.vod-action-btn.inactive {
    cursor: not-allowed;
}
.vod-action-btn.inactive .vod-btn-inner {
    background: #0a1419;
}

/* Active State */
.vod-action-btn.active {
    cursor: pointer;
}
.vod-action-btn.active .vod-btn-inner {
    background: linear-gradient(180deg, #122530 0%, #060e14 100%);
}
.vod-action-btn.active #vod-btn-text {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Breathing Animation for Active State */
.vod-action-btn.active::before {
    background: #00f2ff;
    animation: vod-breath 2.5s ease-in-out infinite;
}

@keyframes vod-breath {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(0,242,255,0.3)); opacity: 0.6; }
    50% { filter: drop-shadow(0 0 20px rgba(0,242,255,0.9)); opacity: 1; }
}

/* Dropzone Hover State */
#vod-dropzone.dragover {
    border-color: #00f2ff;
    background: rgba(0, 242, 255, 0.05);
}

#dossier-capture-area {
    /* Subtle inner glow to frame the modal without overpowering the waveform */
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
}

/* --- AI DOSSIER LOADING: PROGRESSION & TEXT FADES --- */
#ai-stage-text, #ai-micro-feed {
    will-change: opacity;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#ai-progress-bar {
    position: relative;
    overflow: visible;
}

/* Adds a bright leading edge "spark" to the progress bar */
#ai-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 0 10px #ffffff, 0 0 20px #2ff472;
    border-radius: 50%;
    transform: translateX(50%);
}

/* --- AI DOSSIER LOADING: MUTED ABORT ACTION --- */
.abort-muted {
    opacity: 0.5;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.abort-muted:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 70, 85, 0.15), inset 0 0 10px rgba(255, 70, 85, 0.1);
    letter-spacing: 0.15em; /* Subtle expansion on hover */
}

.abort-muted:active {
    transform: translateY(1px);
    opacity: 0.8;
}

/* =========================================================================
   AI DOSSIER LOADING: MODAL & VIDEO Z-INDEX FIX 
   (These override previous logic to ensure no bleed and correct dimming)
========================================================================= */

/* 1. Force the video to be 100% solid to block the dashboard, but use filter to dim it */
#modal-ambient-video {
    opacity: 1 !important;
    filter: brightness(0.7) blur(2px) !important; /* Natively dims without making it transparent */
    z-index: 290 !important; /* Sits right behind the modal (300) */
}

/* 2. Make the modal background sheer so you can see the video through it */
#ai-report-modal {
    background: radial-gradient(circle at center, rgba(6, 14, 20, 0.1) 0%, rgba(2, 5, 8, 0.7) 100%) !important;
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
}

#ai-report-modal::before,
#ai-report-modal::after {
    display: none !important; /* Clean up old experimental layers */
}

/* --- TACTICAL OBJECTIVES STYLES --- */
.objective-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.objective-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--v-green);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.objective-card.status-stabilizing::before { background: var(--v-gold); box-shadow: 0 0 10px var(--v-gold); }
.objective-card.status-regressing::before { background: var(--v-red); box-shadow: 0 0 10px var(--v-red); }
.objective-card.status-completed::before { background: var(--v-green); box-shadow: 0 0 10px var(--v-green); }

.objective-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 242, 255, 0.3);
    transform: translateY(-2px);
}

@keyframes subtle-pulse-warning {
    0%, 100% { box-shadow: inset 0 0 0 rgba(255, 70, 85, 0); }
    50% { box-shadow: inset 0 0 20px rgba(255, 70, 85, 0.15); }
}

@keyframes subtle-pulse-stabilizing {
    0%, 100% { box-shadow: inset 0 0 0 rgba(255, 184, 0, 0); }
    50% { box-shadow: inset 0 0 20px rgba(255, 184, 0, 0.15); }
}

.objective-card.status-regressing { animation: subtle-pulse-warning 2s infinite; }
.objective-card.status-stabilizing { animation: subtle-pulse-stabilizing 2.5s infinite; }


/* =========================================================================
   PERFORMANCE HEARTBEAT - ENVIRONMENTAL STATE ENGINE
========================================================================= */

/* Global Heartbeat Layer */
#heartbeat-ambient {
    background: radial-gradient(circle at center, var(--hb-color) 0%, transparent 70%);
    mix-blend-mode: screen;
}

/* Base Body Application */
body.hb-active #heartbeat-ambient {
    animation: hb-pulse-ambient var(--hb-duration) var(--hb-easing) infinite;
}

body.hb-active .hud-container {
    animation: hb-border-pulse var(--hb-duration) var(--hb-easing) infinite;
}

body.hb-active .scanline {
    animation: hb-scan-sweep var(--hb-scan-speed) var(--hb-easing) infinite;
}

/* --- STATE: ELITE STABILIZED --- */
body.hb-stabilized {
    --hb-color: rgba(0, 242, 255, 0.05);
    --hb-border-color: rgba(0, 242, 255, 0.15);
    --hb-duration: 4s;
    --hb-scan-speed: 4s;
    --hb-easing: ease-in-out;
}

/* --- STATE: HIGH IMPACT CARRIER --- */
body.hb-carrier {
    --hb-color: rgba(255, 184, 0, 0.08);
    --hb-border-color: rgba(255, 184, 0, 0.2);
    --hb-duration: 2s;
    --hb-scan-speed: 2.5s;
    --hb-easing: ease-in-out;
}

/* --- STATE: ASCENDING --- */
body.hb-ascending {
    --hb-color: rgba(47, 244, 114, 0.08);
    --hb-border-color: rgba(47, 244, 114, 0.2);
    --hb-duration: 2.5s;
    --hb-scan-speed: 3s;
    --hb-easing: ease-in-out;
}

/* --- STATE: RECOVERING --- */
body.hb-recovering {
    --hb-color: rgba(138, 255, 193, 0.05);
    --hb-border-color: rgba(138, 255, 193, 0.15);
    --hb-duration: 3.5s;
    --hb-scan-speed: 4s;
    --hb-easing: ease-in-out;
}

/* --- STATE: VOLATILE --- */
body.hb-volatile {
    --hb-color: rgba(255, 123, 0, 0.08);
    --hb-border-color: rgba(255, 123, 0, 0.2);
    --hb-duration: 1.2s;
    --hb-scan-speed: 2s;
    --hb-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- STATE: COLLAPSING / FRACTURED --- */
body.hb-fractured {
    --hb-color: rgba(255, 70, 85, 0.09);
    --hb-border-color: rgba(255, 70, 85, 0.25);
    --hb-duration: 5s; /* Slow, heavy failing heartbeat */
    --hb-scan-speed: 5s;
    --hb-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Erratic stutter easing */
}

/* Keyframes */
@keyframes hb-pulse-ambient {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes hb-border-pulse {
    0%, 100% { box-shadow: inset 0 0 0 transparent; border-color: rgba(255, 255, 255, 0.1); }
    50% { box-shadow: inset 0 0 20px var(--hb-border-color); border-color: var(--hb-border-color); }
}

@keyframes hb-scan-sweep {
    0% { top: -5%; opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { top: 105%; opacity: 0.1; }
}

/* =========================================================================
   LIVE TELEMETRY RECONSTRUCTION ENGINE
========================================================================= */

/* HUD Skeleton Boot Flash */
@keyframes skeleton-boot {
    0% { border-color: rgba(0, 242, 255, 0.8); box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.2); transform: scale(0.98); opacity: 0; }
    20% { opacity: 1; border-color: rgba(255, 255, 255, 0.4); transform: scale(1.02); }
    100% { border-color: rgba(255, 255, 255, 0.1); transform: scale(1); }
}
.skeleton-flash {
    animation: skeleton-boot 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Text Decoding Glitch State */
.decoding-active {
    font-family: 'Orbitron', monospace !important;
    color: #00f2ff !important;
    opacity: 0.8;
    filter: drop-shadow(0 0 5px rgba(0,242,255,0.6));
}

/* Staggered Node Reconstruction (Match Cards, etc.) */
@keyframes node-reveal {
    0% { opacity: 0; transform: translateX(-20px); filter: blur(5px); }
    100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.node-reconstruct {
    animation: node-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* SVG/Canvas Chart Path Tracing Reveal */
@keyframes chart-trace {
    0% { clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); opacity: 0; filter: contrast(2) brightness(1.5); }
    10% { opacity: 1; }
    100% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); filter: contrast(1) brightness(1); }
}
.chart-reveal-anim {
    animation: chart-trace 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Scanline Overdrive during Reconstruction */
body.reconstructing .scanline {
    animation: dataSweep 1.5s linear infinite;
    opacity: 0.6;
    height: 3px;
    background: linear-gradient(to right, transparent, #00f2ff, transparent);
    box-shadow: 0 0 25px #00f2ff;
}

/* Profile Image Assembly */
@keyframes profile-assemble {
    0% { opacity: 0; filter: grayscale(100%) blur(10px); transform: scale(1.1); }
    50% { filter: grayscale(50%) blur(2px) drop-shadow(0 0 20px #00f2ff); }
    100% { opacity: 1; filter: grayscale(0) blur(0); transform: scale(1); }
}
.profile-assemble-anim {
    animation: profile-assemble 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}



/* --- PATCH: RANK PRESSURE SYSTEM (CINEMATIC BEHAVIOR) --- */

/* 1. Stable State: Calm, composed, in control (REVISED FOR VISIBILITY) */
@keyframes rp-breathe {
    0%, 100% { opacity: 0.5; transform: scale(1); filter: drop-shadow(0 0 10px #00f2ff); }
    50% { opacity: 0.9; transform: scale(1.15); filter: drop-shadow(0 0 25px #00f2ff); }
}
.rp-stable .rp-aura {
    background: radial-gradient(circle, rgba(0,242,255,0.6) 0%, transparent 70%);
    animation: rp-breathe 4s ease-in-out infinite;
}
.rp-stable #api-rank, .rp-stable #api-rr { 
    color: #00f2ff; 
    text-shadow: 0 0 8px rgba(0,242,255,0.5);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* 2. Promotion State: Climbing tension, ascending surge (REVISED FOR VISIBILITY) */
@keyframes rp-surge {
    0% { opacity: 0.6; transform: scale(1) translateY(0); filter: drop-shadow(0 0 15px #2ff472); }
    50% { opacity: 1; transform: scale(1.15) translateY(-3px); filter: drop-shadow(0 -5px 30px #2ff472); }
    100% { opacity: 0.6; transform: scale(1) translateY(0); filter: drop-shadow(0 0 15px #2ff472); }
}
.rp-promotion .rp-aura {
    background: radial-gradient(circle, rgba(47,244,114,0.7) 0%, transparent 75%);
    animation: rp-surge 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.rp-promotion #api-rank, .rp-promotion #api-rr { 
    color: #2ff472; 
    text-shadow: 0 0 15px rgba(47,244,114,0.9); 
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* 3. Derank State: Stress, signal tearing, vulnerability (REVISED FOR VISIBILITY) */
@keyframes rp-instability {
    0%, 100% { opacity: 0.9; transform: translateX(0); filter: drop-shadow(0 0 10px #ff4655); }
    10% { opacity: 0.4; transform: translateX(-2px); }
    20% { opacity: 1.0; transform: translateX(2px); filter: drop-shadow(0 0 30px #ff4655); }
    30% { opacity: 0.5; transform: translateX(0); }
    80% { opacity: 0.8; transform: translateX(1px); }
}
.rp-derank .rp-aura {
    background: radial-gradient(circle, rgba(255,70,85,0.7) 0%, transparent 70%);
    animation: rp-instability 2.5s infinite step-end;
}
.rp-derank #api-rank, .rp-derank #api-rr { 
    color: #ff4655; 
    text-shadow: 0 0 15px rgba(255,70,85,0.9); 
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
/* 4. Ascending Dominance: Elite consistency, tactical targeting */
@keyframes rp-spin {
    0% { transform: rotate(0deg) scale(1.1); border-color: rgba(47,244,114,0.1); box-shadow: 0 0 10px rgba(47,244,114,0.2); }
    50% { transform: rotate(180deg) scale(1.2); border-color: rgba(47,244,114,0.6); box-shadow: inset 0 0 15px rgba(47,244,114,0.3); }
    100% { transform: rotate(360deg) scale(1.1); border-color: rgba(47,244,114,0.1); box-shadow: 0 0 10px rgba(47,244,114,0.2); }
}
.rp-ascending .rp-pulse-ring {
    border-top-color: #2ff472;
    border-bottom-color: #2ff472;
    border-style: dashed;
    opacity: 1;
    animation: rp-spin 4s linear infinite;
}
.rp-ascending .rp-aura {
    background: radial-gradient(circle, rgba(47,244,114,0.2) 0%, transparent 80%);
}
.rp-ascending #api-rank { color: #2ff472; text-shadow: 0 0 15px rgba(47,244,114,0.8); font-weight: 900; }
.rp-ascending #api-rr { color: #2ff472; }

/* 5. Fractured State: Collapsing tactical integrity (REVISED) */
@keyframes rp-aura-collapse {
    0%, 100% { opacity: 0.1; transform: scale(0.95); }
    50% { opacity: 0.5; transform: scale(1); }
}

@keyframes rp-emblem-fracture {
    0%, 100% { filter: grayscale(75%) brightness(0.6); opacity: 0.85; transform: translateY(1px); }
    50% { filter: grayscale(40%) brightness(0.9); opacity: 1; transform: translateY(0); }
}

.rp-fractured .rp-aura {
    background: radial-gradient(circle, rgba(200,50,50,0.4) 0%, transparent 70%);
    animation: rp-aura-collapse 3s ease-in-out infinite;
}

.rp-fractured #rank-icon {
    /* Emblem remains visible (85-100% opacity) but feels drained of energy */
    animation: rp-emblem-fracture 3.5s ease-in-out infinite;
}

.rp-fractured #api-rank, .rp-fractured #api-rr { 
    color: #d15a5a; 
    opacity: 0.85; 
}

/* =========================================================================
   DYNAMIC BACKGROUND REACTION SYSTEM
   Extends existing heartbeat states to environmental video and scanlines
========================================================================= */

/* --- Base Video Environmental Hook --- */
#ambient-bg-video {
    transition: filter 2s ease, opacity 2s ease;
}

/* 1. STABLE / RECOVERING (Calm, composed environmental breathing) */
body.hb-stabilized #ambient-bg-video,
body.hb-recovering #ambient-bg-video {
    animation: video-breathe-stable 8s ease-in-out infinite;
}
@keyframes video-breathe-stable {
    0%, 100% { opacity: 0.25; filter: contrast(1) brightness(1); }
    50% { opacity: 0.35; filter: contrast(1.05) brightness(1.1); }
}

/* 2. AGGRESSIVE / CARRIER (Focused intensity, sharper luminance rhythm) */
body.hb-carrier #ambient-bg-video {
    animation: video-pulse-aggressive 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes video-pulse-aggressive {
    0%, 100% { opacity: 0.3; filter: contrast(1.1) brightness(1); }
    50% { opacity: 0.45; filter: contrast(1.25) brightness(1.15); }
}

/* 3. ASCENDING (Momentum building, cleaner environmental energy) */
body.hb-ascending #ambient-bg-video {
    animation: video-ascend-momentum 6s ease-out infinite;
}
@keyframes video-ascend-momentum {
    0%, 100% { opacity: 0.25; filter: contrast(1.05) saturate(1.1); }
    50% { opacity: 0.42; filter: contrast(1.15) saturate(1.3); }
}

/* 4. VOLATILE (Intermittent signal instability, subtle distortion) */
body.hb-volatile #ambient-bg-video {
    animation: video-distort-volatile 5s infinite;
}
@keyframes video-distort-volatile {
    0%, 100% { opacity: 0.3; filter: contrast(1) brightness(1) hue-rotate(0deg); }
    48% { opacity: 0.3; filter: contrast(1) brightness(1); }
    50% { opacity: 0.2; filter: contrast(1.2) brightness(0.9) hue-rotate(-5deg); } /* Subtle tactical dropout */
    52% { opacity: 0.35; filter: contrast(1) brightness(1.1); }
    80% { opacity: 0.3; filter: contrast(1) brightness(1); }
}

/* 5. FRACTURED (Degraded atmosphere, fading coherence - VISIBILITY INCREASED) */
body.hb-fractured #ambient-bg-video {
    animation: video-fade-fractured 6s ease-in-out infinite;
}
@keyframes video-fade-fractured {
    0%, 100% { 
        opacity: 0.55; 
        filter: grayscale(80%) contrast(1.2); 
    }
    50% { 
        opacity: 0.40; 
        filter: grayscale(100%) contrast(1.5) brightness(0.8); 
    }
}

/* --- Scanline Reaction Overrides --- */
body.hb-stabilized .scanline, body.hb-recovering .scanline { animation-timing-function: linear; opacity: 0.25; }
body.hb-carrier .scanline { animation-duration: 2.5s; opacity: 0.4; box-shadow: 0 0 25px var(--v-green); }
body.hb-ascending .scanline { animation-timing-function: ease-in-out; opacity: 0.35; }
body.hb-volatile .scanline { animation: hb-scan-sweep 2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite, scanline-jitter 3s infinite; }
body.hb-fractured .scanline { animation-duration: 6s; opacity: 0.15; box-shadow: 0 0 5px var(--v-red); }

@keyframes scanline-jitter {
    0%, 95%, 100% { opacity: 0.3; transform: scaleY(1); }
    96% { opacity: 0.1; transform: scaleY(0.5); }
    98% { opacity: 0.5; transform: scaleY(1.5); }
}


/* ========================================== */
/* TACTICAL DOSSIER PANEL // CLASSIFIED INTEL */
/* ========================================== */

.dossier-reveal {
    opacity: 0;
    transform: translateY(15px);
    animation: dossier-sweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dossier-sweep {
    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.dossier-card {
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: crosshair;
}

.dossier-card:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Subtle scanning line effect on hover */
.dossier-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dossier-card:hover::after {
    opacity: 1;
    background: #2ff472;
    box-shadow: 0 0 10px rgba(47, 244, 114, 0.3);
}

/* ========================================== */
/* DOSSIER VISUAL HIERARCHY & TELEMETRY */
/* ========================================== */
.primary-intelligence-cell {
    border-color: rgba(47, 244, 114, 0.4) !important;
    box-shadow: inset 0 0 15px rgba(47, 244, 114, 0.05) !important;
    background: linear-gradient(180deg, rgba(47, 244, 114, 0.05) 0%, #060e14 100%) !important;
}

/* Dossier Wide Telemetry Strip */
.dossier-telemetry-strip {
    width: 100%;
    height: 2px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}
.telemetry-signal {
    position: absolute;
    top: 0; left: 0; height: 100%; width: 30%;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.8;
}

/* Strip States */
.strip-smooth .telemetry-signal { animation: telemetry-scan 3s ease-in-out infinite; color: #00f2ff; width: 40%; }
.strip-irregular .telemetry-signal { animation: telemetry-scan 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; color: #ffb800; width: 20%; }
.strip-fragmented .telemetry-signal { animation: telemetry-fragmented 2s steps(4, end) infinite; color: #ff4655; width: 15%; }
.strip-drift-up .telemetry-signal { animation: telemetry-scan 2.5s ease-out infinite; color: #2ff472; width: 35%; }

@keyframes telemetry-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
@keyframes telemetry-fragmented {
    0%, 100% { transform: translateX(-50%); opacity: 1; }
    25% { transform: translateX(100%); opacity: 0; }
    50% { transform: translateX(200%); opacity: 0.8; }
    75% { transform: translateX(350%); opacity: 0.2; }
}

/* Micro-Telemetry (Cell Liveliness) */
.micro-telemetry-container {
    width: 100%;
    height: 12px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    margin-top: 8px;
    opacity: 0.7;
}
.micro-bar {
    flex: 1;
    background-color: currentColor;
    border-radius: 1px;
    transform-origin: bottom;
}

/* Micro States */
.micro-smooth .micro-bar { animation: micro-wave 2s ease-in-out infinite alternate; color: #00f2ff; }
.micro-smooth .micro-bar:nth-child(2) { animation-delay: 0.2s; }
.micro-smooth .micro-bar:nth-child(3) { animation-delay: 0.4s; }

.micro-spiky .micro-bar { animation: micro-spike 0.8s ease-in-out infinite alternate; color: #ffb800; }
.micro-spiky .micro-bar:nth-child(2) { animation-delay: 0.1s; animation-duration: 0.5s; }
.micro-spiky .micro-bar:nth-child(3) { animation-delay: 0.3s; animation-duration: 0.9s; }

.micro-broken .micro-bar { animation: micro-glitch 1.5s steps(2, end) infinite; color: #ff4655; }
.micro-broken .micro-bar:nth-child(2) { animation-delay: 0.5s; }
.micro-broken .micro-bar:nth-child(3) { animation-delay: 0.2s; }

.micro-drift-up .micro-bar { animation: micro-ascend 1.5s ease-out infinite; color: #2ff472; }
.micro-drift-up .micro-bar:nth-child(1) { height: 30%; }
.micro-drift-up .micro-bar:nth-child(2) { height: 60%; }
.micro-drift-up .micro-bar:nth-child(3) { height: 100%; }

@keyframes micro-wave { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }
@keyframes micro-spike { 0% { transform: scaleY(0.1); } 100% { transform: scaleY(1.2); } }
@keyframes micro-glitch { 0%, 100% { transform: scaleY(0.8); opacity: 1; } 50% { transform: scaleY(0.2); opacity: 0.2; } }
@keyframes micro-ascend { 0% { opacity: 0.3; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(-2px); } }

/* ========================================== */
/* DOSSIER SEMANTIC DOT SYSTEM (PHASE 4) */
/* ========================================== */
.intel-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}

/* 1. GREEN (Healthy, Stable, Approved) */
.dot-pulse-green {
    background-color: #2ff472;
    animation: dot-breath-green 3.2s ease-in-out infinite;
}
@keyframes dot-breath-green {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 2px rgba(47, 244, 114, 0.2); transform: scale(1); }
    50% { opacity: 1; box-shadow: 0 0 8px rgba(47, 244, 114, 0.8); transform: scale(1.1); }
}

/* 2. AMBER (Caution, Instability) */
.dot-pulse-amber {
    background-color: #ffb800;
    animation: dot-rhythm-amber 2.1s ease-in-out infinite;
}
@keyframes dot-rhythm-amber {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 2px rgba(255, 184, 0, 0.3); transform: scale(0.95); }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(255, 184, 0, 0.8); transform: scale(1.05); }
}

/* 3. RED (Critical, Collapsing) */
.dot-pulse-red {
    background-color: #ff4655;
    animation: dot-irregular-red 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes dot-irregular-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(255, 70, 85, 0.9); transform: scale(1.1); }
    30% { opacity: 0.3; box-shadow: none; transform: scale(0.9); }
    50% { opacity: 0.9; box-shadow: 0 0 8px rgba(255, 70, 85, 0.7); transform: scale(1.05); }
    70% { opacity: 0.2; box-shadow: none; transform: scale(0.95); }
}

/* 4. CYAN (Classifications, Neutral Intel) */
.dot-pulse-cyan {
    background-color: #00f2ff;
    animation: dot-stabilize-cyan 4.5s ease-in-out infinite;
}
@keyframes dot-stabilize-cyan {
    0%, 100% { opacity: 0.3; box-shadow: 0 0 2px rgba(0, 242, 255, 0.2); }
    50% { opacity: 0.8; box-shadow: 0 0 6px rgba(0, 242, 255, 0.6); }
}

/* Dossier Card Subtlety Override */
.dossier-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: crosshair;
}
.dossier-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* =========================================
   PLAYER TITLE SYSTEM
   ========================================= */
.title-unlocked {
    animation: title-materialize 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
               title-glow-pulse 1.5s ease-in-out forwards;
}

.title-accent-unlocked {
    animation: accent-expand 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes title-materialize {
    0% { opacity: 0; transform: translateY(-5px) scale(0.98); letter-spacing: 0.1em; filter: blur(4px); }
    50% { filter: blur(0px); }
    100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.25em; }
}

@keyframes title-glow-pulse {
    0% { text-shadow: 0 0 0px rgba(0, 242, 255, 0); color: rgba(255,255,255,0.8); }
    30% { text-shadow: 0 0 20px rgba(0, 242, 255, 0.8), 0 0 40px rgba(0, 242, 255, 0.4); color: #00f2ff; }
    100% { text-shadow: 0 0 8px rgba(0, 242, 255, 0.2); color: rgba(255,255,255,0.8); }
}

@keyframes accent-expand {
    0% { width: 0; background-color: #00f2ff; box-shadow: 0 0 10px #00f2ff; }
    100% { width: 2rem; background-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
}

/* =========================================
   NEURAL RECONSTRUCTION MODE (FEATURE)
   ========================================= */

/* Terminal Animations */
.terminal-pulse-bg {
    animation: terminalPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes terminalPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1.05); }
}



.terminal-tracer {
    animation: terminalTrace 1.5s ease-in-out infinite;
}

@keyframes terminalTrace {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(300%); opacity: 0; }
}

/* Background Intensification State */
.neural-intensified {
    opacity: 0.7 !important;
    filter: brightness(1.3) contrast(1.2) sepia(0.2) hue-rotate(-10deg);
    transition: all 0.5s ease-in-out;
}

/* Sequential Reveal Logic for Cards */
.reconstruction-hidden {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    pointer-events: none !important;
    transition: none !important;
    animation: none !important;
}

.reveal-seq-1 { animation: reconReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; }
.reveal-seq-2 { animation: reconReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards !important; }
.reveal-seq-3 { animation: reconReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards !important; }
.reveal-seq-4 { animation: reconReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s forwards !important; }

@keyframes reconReveal {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* Reconstruction Modal Overrides */
.modal-transparent-override {
    background: transparent !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.hide-temporarily {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   NEURAL RECONSTRUCTION TERMINAL - DNA HELIX LOADER
   ========================================================================== */
.dna-spiral-loader {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.dna-strand {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00f2ff;
    animation: helixA 1.6s infinite ease-in-out;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.8);
}

.dna-strand.strand-b {
    background: #2ff472;
    animation: helixB 1.6s infinite ease-in-out;
    box-shadow: 0 0 15px rgba(47, 244, 114, 0.8);
}

.dna-strand.delay-1 { 
    animation-delay: -0.53s; 
}

.dna-strand.delay-2 { 
    animation-delay: -1.06s; 
}

@keyframes helixA {
    0%, 100% { transform: translateX(-25px) scale(1); opacity: 1; z-index: 2; }
    25% { transform: translateX(0) scale(1.5); opacity: 1; z-index: 3; }
    50% { transform: translateX(25px) scale(1); opacity: 0.5; z-index: 2; }
    75% { transform: translateX(0) scale(0.5); opacity: 0.2; z-index: 1; }
}

@keyframes helixB {
    0%, 100% { transform: translateX(25px) scale(1); opacity: 0.5; z-index: 2; }
    25% { transform: translateX(0) scale(0.5); opacity: 0.2; z-index: 1; }
    50% { transform: translateX(-25px) scale(1); opacity: 1; z-index: 2; }
    75% { transform: translateX(0) scale(1.5); opacity: 1; z-index: 3; }
}

/* ==========================================================================
   RANK ASCENSION SIMULATOR
   ========================================================================== */

#rank-ascension-simulator {
    --asc-color: #00f2ff; /* Default Cyan / Ascending */
    --asc-color-muted: rgba(0, 242, 255, 0.5);
}

/* Intelligence Threat States */
#rank-ascension-simulator.state-stabilized { --asc-color: #4285F4; --asc-color-muted: rgba(66, 133, 244, 0.5); }
#rank-ascension-simulator.state-recovering { --asc-color: #2ff472; --asc-color-muted: rgba(47, 244, 114, 0.5); }
#rank-ascension-simulator.state-volatile { --asc-color: #ffd700; --asc-color-muted: rgba(255, 215, 0, 0.5); }
#rank-ascension-simulator.state-fractured { --asc-color: #ff4655; --asc-color-muted: rgba(255, 70, 85, 0.5); }

/* Text & Foreground Synchronization */
p.asc-color-sync, span.asc-color-sync { color: var(--asc-color) !important; }
.asc-color-text-sync { color: var(--asc-color) !important; }

/* Node & Progress Bar Synchronization */
div.asc-color-sync {
    background-color: var(--asc-color) !important;
    box-shadow: 0 0 10px var(--asc-color) !important;
}

/* Tactical Timeline Gradient Connectors */
.asc-color-grad-1 { background: linear-gradient(to bottom, rgba(255,255,255,0.2), var(--asc-color-muted)) !important; }
.asc-color-grad-2 { background: linear-gradient(to bottom, var(--asc-color-muted), var(--asc-color)) !important; }
.asc-color-grad-3 { background: linear-gradient(to bottom, var(--asc-color), rgba(47,244,114,0.5)) !important; }
.asc-color-grad-4 { background: linear-gradient(to bottom, rgba(47,244,114,0.5), #2ff472) !important; }

/* Animations: Forecast Sweep */
.ascension-sweep-line {
    animation: ascension-sweep 3s ease-in-out infinite;
}

@keyframes ascension-sweep {
    0% { left: -100%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Animations: Tactical Route Nodes Pulse */
.asc-route-pulse {
    animation: asc-node-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.asc-route-pulse-mid {
    animation: asc-node-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.5s;
}

@keyframes asc-node-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ==========================================================================
   RANK ASCENSION SIMULATOR: TACTICAL ROUTE ANIMATIONS
   ========================================================================== */

/* 1. Sequential Reveal Keyframes */
@keyframes routeNodeReveal {
    0% { 
        opacity: 0; 
        transform: translateY(-5px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 2. Staggered Delay Classes */
.route-reveal-1 { animation: routeNodeReveal 0.6s ease-out forwards; animation-delay: 0.10s; }
.route-reveal-2 { animation: routeNodeReveal 0.6s ease-out forwards; animation-delay: 0.25s; }
.route-reveal-3 { animation: routeNodeReveal 0.6s ease-out forwards; animation-delay: 0.40s; }
.route-reveal-4 { animation: routeNodeReveal 0.6s ease-out forwards; animation-delay: 0.55s; }
.route-reveal-5 { animation: routeNodeReveal 0.6s ease-out forwards; animation-delay: 0.70s; }

/* 3. Active Trajectory Node (Cyan Pulse) */
.asc-route-pulse-mid {
    animation: pulseMidCyan 2s infinite ease-in-out;
}
@keyframes pulseMidCyan {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 242, 255, 0.4); }
    50% { box-shadow: 0 0 15px rgba(0, 242, 255, 0.8); }
}

/* 4. Destination Milestone Node (Hyper-Green Glow) */
.asc-route-pulse-glow {
    animation: pulseMajorGreen 2.5s infinite ease-in-out;
}
@keyframes pulseMajorGreen {
    0%, 100% { box-shadow: 0 0 12px rgba(47, 244, 114, 0.5); }
    50% { box-shadow: 0 0 25px rgba(47, 244, 114, 0.9); }
}

/* ==========================================================================
   RADIANT REVIEW // RANK ASCENSION SIMULATOR (HORIZONTAL REWORK)
   ========================================================================== */

/* --- Layout & Containers --- */
#asc-horizontal-path-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    padding: 20px 0;
}

.asc-node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    opacity: 0;
    animation: ascRevealNode 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Node Visual Hierarchy --- */
.asc-icon-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.asc-rank-icon {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 5;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
    transition: filter 0.3s ease;
}

/* 1. Current Node */
.node-current .asc-rank-icon {
    opacity: 0.8;
}
.node-current .holo-ring {
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: ascHeartbeat 2s infinite ease-in-out;
}

/* 2. Intermediate/Next Nodes */
.node-next .asc-rank-icon {
    filter: drop-shadow(0 0 12px rgba(0, 242, 255, 0.5));
}
.node-next .node-aura {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: ascBreathe 3s infinite alternate ease-in-out;
}

/* 3. Projected Ceiling (Final) Node */
.node-ceiling .asc-rank-icon {
    filter: drop-shadow(0 0 20px rgba(47, 244, 114, 0.6));
}
.node-ceiling .node-aura {
    position: absolute;
    inset: -14px;
    background: radial-gradient(circle, rgba(47, 244, 114, 0.25) 0%, transparent 75%);
    border-radius: 50%;
    animation: ascPulseStrong 2.5s infinite ease-in-out;
}

/* 4. Derank Risk Node (Declining) */
.node-derank .asc-rank-icon {
    filter: drop-shadow(0 0 10px rgba(255, 70, 85, 0.3));
}
.node-derank .node-aura {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(255, 70, 85, 0.10) 0%, transparent 65%);
    border-radius: 50%;
    animation: ascBreathe 3s infinite alternate ease-in-out;
}
/* --- Typography --- */
.asc-node-label {
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.asc-node-title {
    font-family: 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
    margin: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.asc-node-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
    margin: 0;
}

/* --- Ascension Beams (Connectors) --- */
.asc-connector {
    flex-grow: 1;
    height: 2px;
    margin: 0 16px;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-16px); /* Align with centers of icons */
    overflow: hidden;
    opacity: 0;
    animation: ascRevealBeam 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.asc-connector::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.8), transparent);
    animation: ascFlowRight 2s linear infinite;
}

/* --- Atmospherics --- */
.asc-scanlines {
    animation: ascScanMove 10s linear infinite;
}
#asc-neural-particles {
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
}

/* --- Keyframes --- */
@keyframes ascRevealNode {
    0% { opacity: 0; transform: scale(0.8) translateY(10px); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes ascRevealBeam {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ascHeartbeat {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; border-color: rgba(0, 242, 255, 0.6); }
}

@keyframes ascBreathe {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 1; }
}

@keyframes ascPulseStrong {
    0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 20px rgba(47, 244, 114, 0.2); }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 40px rgba(47, 244, 114, 0.6); }
}

@keyframes ascFlowRight {
    0% { left: -50%; }
    100% { left: 100%; }
}

@keyframes ascScanMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

/* Staggered Animation Variables (Injected via JS inline styles) */
.asc-delay-1 { animation-delay: 0.2s; }
.asc-delay-2 { animation-delay: 0.4s; }
.asc-delay-3 { animation-delay: 0.6s; }
.asc-delay-4 { animation-delay: 0.8s; }
.asc-delay-5 { animation-delay: 1.0s; }

/* ==========================================================================
   [NEW] COMPETITIVE OUTCOME FORECAST MODE STYLES
   ========================================================================== */

/* Container Adjustments */
.forecast-dual-path {
    min-height: 120px;
}

/* Threat State Container Overrides */
.state-fractured { border-color: rgba(255, 70, 85, 0.4) !important; box-shadow: 0 0 30px rgba(255, 70, 85, 0.1); }
.state-volatile { border-color: rgba(255, 184, 0, 0.3) !important; box-shadow: 0 0 20px rgba(255, 184, 0, 0.05); }
.state-declining { border-color: rgba(255, 123, 0, 0.3) !important; box-shadow: 0 0 20px rgba(255, 123, 0, 0.05); }

/* Animated Holographic Energy Beams (Modifiers for .asc-connector) */
.asc-connector.forecast-beam-derank,
.asc-connector.forecast-beam-recovery {
    transform: translateY(-27px); /* Counters the lowered flex-axis caused by the 3rd text line */
}

.asc-connector.forecast-beam-derank::before {
    background: linear-gradient(270deg, transparent, rgba(255, 70, 85, 0.9), transparent);
    box-shadow: 0 0 8px rgba(255, 70, 85, 0.5);
    animation: beamFlowLeft 2s linear infinite;
}

.asc-connector.forecast-beam-recovery::before {
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.9), transparent);
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
    animation: beamFlowRight 2s linear infinite;
}

@keyframes beamFlowLeft {
    0% { left: 100%; }
    100% { left: -100%; }
}

@keyframes beamFlowRight {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ==========================================================================
   AGENT WAR ROOM // FLAGSHIP FEATURE (VISUAL RECONSTRUCTION)
   ========================================================================== */

/* --- Modal Atmosphere & Background Artwork --- */
#war-room-modal {
    /* Calibrated to strictly 60% darkness / 40% atmosphere for rich environmental depth */
    background: 
        linear-gradient(rgba(6, 14, 20, 0.6), rgba(6, 14, 20, 0.6)), 
        url('bg.jpg') center/cover no-repeat !important;
    backdrop-filter: blur(8px) !important;
    position: relative;
    overflow: hidden;
}

/* Ensures bg.jpg (Layer 1) base visibility */
#war-room-modal {
    background-color: rgba(0, 0, 0, 0.85); /* Fallback */
}

#war-room-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Subtle structural grid layer separating background from cards */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
}

#war-room-modal::after {
    content: '';
    position: absolute;
    top: -50%; left: 0; width: 100%; height: 200%;
    background: linear-gradient(to bottom, transparent 45%, rgba(0, 242, 255, 0.02) 50%, transparent 55%);
    animation: tactical-module-scan 10s linear infinite;
    z-index: 1;
    pointer-events: none;
}

/* --- Premium Initialization Sequence --- */
#awr-init-sequence {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #060e14;
    z-index: 100;
    font-family: 'Orbitron', monospace;
    color: #00f2ff;
    text-align: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}
.awr-init-line {
    opacity: 0;
    transform: translateY(10px);
    margin: 6px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
    transition: all 0.4s ease;
}
.awr-init-line.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- Launch Card Overhaul --- */
.awr-launch-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #060e14;
    cursor: pointer;
}
.awr-perimeter-scan {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 60%, rgba(0, 242, 255, 0.2) 80%, rgba(0, 242, 255, 0.8) 100%);
    animation: awr-scan 1.5s linear infinite; /* 40% Faster */
    z-index: 0;
    pointer-events: none;
}

.awr-launch-card:hover .awr-perimeter-scan {
    animation: awr-scan 0.8s linear infinite; /* Accelerated on hover */
    background: conic-gradient(from 0deg, transparent 50%, rgba(0, 242, 255, 0.5) 80%, #00f2ff 100%);
}

.awr-internal-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 0%, rgba(0, 242, 255, 0.15) 50%, transparent 100%);
    width: 50%;
    height: 100%;
    animation: internal-sweep 2.5s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
    transform: skewX(-20deg);
}

@keyframes internal-sweep {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

.awr-launch-inner {
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, #0a1118 0%, #060e14 100%);
    border-radius: 6px;
    z-index: 1;
    transition: background 0.3s ease;
}
.awr-launch-card:hover .awr-launch-inner {
    background: linear-gradient(135deg, #0f1a24 0%, #060e14 100%);
}
/* Animated Corner Brackets */
.awr-launch-card::before, .awr-launch-card::after {
    content: ''; position: absolute; width: 25px; height: 25px; border-color: rgba(0, 242, 255, 0.5); z-index: 5; pointer-events: none; transition: all 0.3s ease;
}
.awr-launch-card::before { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 8px; }
.awr-launch-card::after { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 8px; }
.awr-launch-card:hover::before, .awr-launch-card:hover::after { width: 45px; height: 45px; border-color: #00f2ff; box-shadow: 0 0 20px rgba(0, 242, 255, 0.5); }

@keyframes awr-scan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Modal & Carousel Base --- */
#awr-carousel-track {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    display: flex;
    align-items: center;
    padding: 40px calc(50vw - 140px); /* 140px is half of 280px card width, perfectly centers first/last items */
    gap: 20px;
    z-index: 10;
}
#awr-carousel-track::-webkit-scrollbar { display: none; }

/* --- Agent Operator Cards (Tactical Dossier Silhouette) --- */
.awr-carousel-card {
    width: 280px;
    height: 520px;
    flex-shrink: 0;
    scroll-snap-align: center;
    border: none; 
    clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
    background: linear-gradient(180deg, rgba(15, 25, 35, 0.85) 0%, rgba(6, 14, 20, 0.95) 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    filter: brightness(0.75) saturate(0.95); /* Increased 10-15% for dormant but readable silhouette presence */
    z-index: 5;
}


/* Carousel SVG Vector Frame - Mathematically perfect continuous trace */
.awr-carousel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.15); /* Base frame color */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 520' preserveAspectRatio='none'%3E%3Cpolygon points='25,1 279,1 279,495 254,519 1,519 1,25' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 520' preserveAspectRatio='none'%3E%3Cpolygon points='25,1 279,1 279,495 254,519 1,519 1,25' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    transition: background 0.5s ease;
    clip-path: none; /* Overriding old logic */
}

.awr-carousel-card.active-center-card::after {
    background: var(--agent-color, rgba(0, 242, 255, 0.6));
}

/* Base Atmosphere Layer */
.awr-carousel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--agent-glow, rgba(255,255,255,0.05));
    opacity: 0.1;
    transition: opacity 0.5s ease;
    mix-blend-mode: color-dodge;
    z-index: 0;
    pointer-events: none;
}

.awr-carousel-card.active-center-card::before,
.awr-carousel-card:hover::before {
    opacity: 0.5;
}

/* Ghost Silhouette Depth Layer */
.awr-card-ghost {
    width: auto;
    height: 95%;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%) scale(1.3);
    z-index: 5;
    opacity: 0.05;
    pointer-events: none;
    filter: blur(2px) grayscale(100%) contrast(150%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.awr-carousel-card.active-center-card .awr-card-ghost {
    opacity: 0.06; /* Reduced to act as subconscious atmosphere */
    transform: translateX(-50%) scale(1.4);
    filter: blur(1px) grayscale(50%) contrast(150%);
}

/* Active Card Subtly Scanning Micro-Animation */
.awr-subtle-scan {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 1px; /* Made softer and tactical */
    background: linear-gradient(90deg, transparent, var(--agent-color, rgba(255,255,255,0.3)), transparent);
    box-shadow: 0 2px 15px var(--agent-shadow-glow, rgba(255,255,255,0.1));
    opacity: 0;
    z-index: 25;
    pointer-events: none;
}

/* UPGRADE 4: Intelligence Scan Pass */
.awr-carousel-card.active-center-card .awr-subtle-scan {
    animation: awrDeepScan 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes awrDeepScan {
    0% { top: -10%; opacity: 0; }
    5% { opacity: 0.8; height: 2px; }
    45% { top: 110%; opacity: 0.5; height: 1px; }
    50% { opacity: 0; top: 110%; }
    100% { opacity: 0; top: -10%; }
}

/* UPGRADE 3: Active Dossier Energy Traversal */
.awr-carousel-card.active-center-card .awr-card-atmosphere::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 75%, var(--agent-color, rgba(0,242,255,0.4)) 95%, transparent 100%);
    animation: awrEnergySweep 8s linear infinite;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes awrEnergySweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.awr-card-portrait {
    width: auto;
    height: 75%; /* Scaled up to dominate */
    position: absolute;
    top: calc(15% - 12px); /* Shifted upward to clear data stats */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
    pointer-events: none;
    /* transition removed to prevent positional snapping during carousel rotation */
}

/* Enforce absolute invisibility on non-active cards */
.awr-premium-card:not(.active-center) .awr-card-portrait {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
}

/* Active Card Portrait Scale */
.awr-premium-card.active-center .awr-card-portrait,
.awr-premium-card:hover .awr-card-portrait {
    height: 80%;
    top: calc(12% - 12px);
    filter: drop-shadow(0 10px 30px var(--agent-color, rgba(255,255,255,0.2)));
}

/* TACTICAL PORTRAIT REVEAL ANIMATION */
.portrait-tactical-reveal {
    animation: tacticalPortraitFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes tacticalPortraitFade {
    0% { opacity: 0; filter: drop-shadow(0 10px 30px var(--agent-color, rgba(255,255,255,0.2))) blur(2px); }
    100% { opacity: 1; filter: drop-shadow(0 10px 30px var(--agent-color, rgba(255,255,255,0.2))) blur(0px); }
}

@keyframes sideSilhouetteDrift {
    0% { transform: translateX(-50%) translateY(0px); }
    100% { transform: translateX(-50%) translateY(2px); }
}

/* UPGRADE 6: Side Silhouette Ambient Life */
.awr-carousel-card:not(.active-center-card) .awr-card-portrait {
    animation: sideSilhouetteDrift 15s ease-in-out infinite alternate;
}

@keyframes sideSilhouetteDrift {
    0% { transform: translateX(-50%) translateY(0px); }
    100% { transform: translateX(-50%) translateY(2px); }
}

.awr-carousel-card.active-center-card .awr-card-portrait,
.awr-carousel-card:hover .awr-card-portrait {
    height: 80%; /* Extended scale constraint */
    top: calc(12% - 12px); /* Shifted upward while remaining securely below Agent name */
    filter: drop-shadow(0 10px 30px var(--agent-color, rgba(255,255,255,0.2)));
}

.awr-card-header {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;
    font-family: 'Orbitron', sans-serif;
    font-size: 24px; /* Subtly reduced to enforce hierarchy (was 26px) */
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px var(--agent-shadow-glow, rgba(0,0,0,0.5));
    opacity: 0.7; 
    transition: all 0.3s ease;
}

.awr-carousel-card.active-center-card .awr-card-header {
    opacity: 1;
    font-size: 28px; /* Reduced to ensure portrait dominance (was 30px) */
    text-shadow: 0 2px 15px rgba(0,0,0,1), 0 0 35px var(--agent-color, rgba(0,242,255,0.5));
}

/* Tighter visual flow for stats */
.awr-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(0deg, rgba(6,14,20,1) 0%, rgba(6,14,20,0.9) 40%, transparent 100%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(0);
}

/* --- AGENT THEMES EXTENSION PROTOTYPES --- */
.agent-theme-reyna { --agent-color: #c026d3; --agent-glow: radial-gradient(circle at 50% 40%, rgba(192,38,211,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(192,38,211,0.3); }
.agent-theme-jett { --agent-color: #06b6d4; --agent-glow: radial-gradient(circle at 50% 40%, rgba(6,182,212,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(6,182,212,0.3); }
.agent-theme-killjoy { --agent-color: #eab308; --agent-glow: radial-gradient(circle at 50% 40%, rgba(234,179,8,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(234,179,8,0.3); }
.agent-theme-omen { --agent-color: #4c1d95; --agent-glow: radial-gradient(circle at 50% 40%, rgba(76,29,149,0.5) 0%, transparent 75%); --agent-shadow-glow: rgba(76,29,149,0.35); }
.agent-theme-sage { --agent-color: #2ff472; --agent-glow: radial-gradient(circle at 50% 40%, rgba(47,244,114,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(47,244,114,0.3); }
.agent-theme-sova { --agent-color: #2563eb; --agent-glow: radial-gradient(circle at 50% 40%, rgba(37,99,235,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(37,99,235,0.3); }
.agent-theme-viper { --agent-color: #16a34a; --agent-glow: radial-gradient(circle at 50% 40%, rgba(22,163,74,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(22,163,74,0.3); }
.agent-theme-skye { --agent-color: #4ade80; --agent-glow: radial-gradient(circle at 50% 40%, rgba(74,222,128,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(74,222,128,0.3); }
.agent-theme-fade { --agent-color: #6366f1; --agent-glow: radial-gradient(circle at 50% 40%, rgba(99,102,241,0.5) 0%, transparent 75%); --agent-shadow-glow: rgba(99,102,241,0.35); }
.agent-theme-phoenix { --agent-color: #f97316; --agent-glow: radial-gradient(circle at 50% 40%, rgba(249,115,22,0.45) 0%, transparent 75%); --agent-shadow-glow: rgba(249,115,22,0.3); }

/* --- Interaction Hint Fade Out --- */
.fade-out {
    opacity: 0 !important;
}

/* --- Dossier View Transitions --- */
.awr-view-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
    position: absolute;
    z-index: -1;
}

.awr-view-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    position: relative;
    z-index: 10;
}

#awr-dossier-bg {
    filter: blur(20px) saturate(1.5);
    background-size: cover;
}

/* ==========================================================================
   AGENT WAR ROOM // PREMIUM INTELLIGENCE DATABASE UPGRADES
   ========================================================================== */

/* UPGRADE 1 & 7: ENVIRONMENTAL OWNERSHIP & ACTIVE DOSSIER IMPORTANCE */
#war-room-modal {
    transition: box-shadow 0.8s ease, border-color 0.8s ease;
}
.awr-modal-ambient-glow {
    background: radial-gradient(circle at 50% 50%, var(--modal-agent-glow, rgba(0, 242, 255, 0.05)) 0%, transparent 80%);
    opacity: 0.8;
    transition: background 0.8s ease;
    animation: environmentalPulse 4s infinite alternate ease-in-out;
}
/* UPGRADE 5: Environmental Atmosphere Drift */
@keyframes environmentalPulse {
    0% { opacity: 0.5; transform: scale(0.98) translate(-0.5%, 0.5%); }
    50% { opacity: 0.8; transform: scale(1.02) translate(0.5%, -0.5%); }
    100% { opacity: 0.5; transform: scale(0.98) translate(-0.5%, 0.5%); }
}

/* UPGRADE 2: Agent Activation Environmental Pulse */
.awr-modal-ambient-glow.env-activation-flash {
    animation: envPulseFlash 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes envPulseFlash {
    0% { opacity: 1; filter: brightness(1.8) saturate(1.5); transform: scale(1.08); }
    100% { opacity: 0.5; filter: brightness(1) saturate(1); transform: scale(0.98); }
}

/* UPGRADE 1: Dossier Reconstruction Transitions */
.dossier-reconstructing-out {
    animation: dossierWipeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none;
}

.dossier-reconstructing-in {
    animation: dossierWipeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes dossierWipeOut {
    0% { filter: blur(0); opacity: 1; transform: scale(1); clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px); }
    100% { filter: blur(4px) brightness(1.5) sepia(0.5); opacity: 0; transform: scale(0.95); clip-path: polygon(25px 100%, 100% 100%, 100% 100%, 75% 100%, 0 100%, 0 100%); }
}

@keyframes dossierWipeIn {
    0% { filter: blur(6px) brightness(2) saturate(0); opacity: 0; transform: scale(1.05); clip-path: polygon(25px 0%, 100% 0%, 100% 0%, 25% 0%, 0% 0%, 0% 0%); }
    100% { filter: blur(0) brightness(1) saturate(1); opacity: 1; transform: scale(1); clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px); }
}

/* UPGRADE 8: Header Telemetry Activity */
.awr-telemetry-flicker {
    animation: telemetryPulseFlicker 6s infinite;
}

@keyframes telemetryPulseFlicker {
    0%, 94%, 98%, 100% { opacity: 0.8; }
    95% { opacity: 0.3; }
    96% { opacity: 0.9; filter: drop-shadow(0 0 5px var(--agent-color, rgba(0,242,255,0.6))); }
    97% { opacity: 0.4; }
}

/* UPGRADE 2: LIVING INTELLIGENCE LAYER (ISSUE #4 - Persistent Intelligence Processing) */
.awr-living-intel-layer {
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    position: absolute; 
    inset: 0; 
    pointer-events: none; 
    z-index: 1;
}

.awr-telemetry-packets {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    opacity: 0.2; /* Subtler base static grid */
}

/* New: Persistent, non-distracting intelligence routing layer */
.awr-telemetry-packets::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(0, 242, 255, 0.04) 50%, transparent 100%),
        linear-gradient(90deg, transparent 0%, rgba(47, 244, 114, 0.02) 50%, transparent 100%);
    background-size: 200% 200%;
    animation: intelligenceSync 15s linear infinite;
    opacity: 0.5;
    mix-blend-mode: screen;
}

@keyframes intelligenceSync {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* UPGRADE 3: DOSSIER RECONSTRUCTION TRANSITIONS */
.awr-premium-card.active-center {
    animation: dossierMaterialize 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               premiumExternalUnderglow 4.5s ease-in-out infinite 0.6s !important;
}
@keyframes dossierMaterialize {
    0% { filter: blur(8px) brightness(2); clip-path: polygon(15px 0%, 100% 0%, 100% 0%, 0% 0%, 0% 0%, 0% 15px); }
    100% { filter: blur(0) brightness(1); clip-path: polygon(15px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 15px); }
}

.awr-premium-card.side-left, .awr-premium-card.side-right {
    animation: dossierFragment 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dossierFragment {
    0% { filter: blur(0) brightness(1.5); }
    50% { filter: blur(4px) brightness(0.8) contrast(1.2); }
    100% { filter: brightness(0.8) saturate(0.95); }
}

/* ==========================================================================
   ISSUE #3: AGENT ENVIRONMENTAL OWNERSHIP (ENVIRONMENTAL PROFILES)
   Dynamically applied to the master wrapper via app.js
   ========================================================================== */

/* SKYE: Organic pulse patterns / nature-inspired */
.env-skye .awr-modal-ambient-glow {
    background: radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 80%);
    animation: envPulseOrganic 6s ease-in-out infinite alternate;
}
@keyframes envPulseOrganic { 
    0% { transform: scale(0.98); opacity: 0.7; } 
    100% { transform: scale(1.02); opacity: 1; } 
}

/* OMEN: Shadow drift / void particles */
.env-omen .awr-modal-ambient-glow {
    background: radial-gradient(circle at 50% 50%, rgba(76, 29, 149, 0.1) 0%, transparent 80%);
    animation: envShadowDrift 8s linear infinite;
}
@keyframes envShadowDrift { 
    0% { transform: translate(0,0) scale(1); opacity: 0.8; } 
    50% { transform: translate(-10px, 10px) scale(1.05); opacity: 0.5; } 
    100% { transform: translate(0,0) scale(1); opacity: 0.8; } 
}

/* PHOENIX: Warm environmental highlights / heat distortion */
.env-phoenix .awr-modal-ambient-glow {
    background: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.08) 0%, transparent 80%);
    animation: envHeatDistortion 4s ease-in-out infinite alternate;
}
@keyframes envHeatDistortion { 
    0% { filter: blur(0px); opacity: 0.7; } 
    100% { filter: blur(2px); opacity: 1; transform: scale(1.02); } 
}

/* JETT: Directional wind streaks */
.env-jett .awr-telemetry-packets::after {
    background: linear-gradient(135deg, transparent 40%, rgba(6, 182, 212, 0.06) 50%, transparent 60%);
    background-size: 300% 300%;
    animation: envWindStreaks 3s linear infinite;
}
@keyframes envWindStreaks { 
    0% { background-position: 200% 200%; } 
    100% { background-position: -100% -100%; } 
}

/* CYPHER: Surveillance grid enhancement */
.env-cypher .awr-telemetry-packets {
    background-size: 20px 20px; 
    opacity: 0.35;
    border: 1px solid rgba(255,255,255,0.02);
}

/* KILLJOY: Holographic circuitry / digital scan layers */
.env-killjoy .awr-telemetry-packets::after {
    background: linear-gradient(90deg, transparent 48%, rgba(234, 179, 8, 0.08) 50%, transparent 52%);
    background-size: 100% 10px;
    animation: envDigitalScan 2.5s steps(20) infinite;
}
@keyframes envDigitalScan { 
    0% { background-position: 0 0; } 
    100% { background-position: 0 100%; } 
}

/* SOVA: Recon sweep effects / tactical radar pulses */
.env-sova .awr-modal-ambient-glow::after {
    content: ''; 
    position: absolute; 
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.1);
    animation: envRadarPulse 5s ease-out infinite;
}
@keyframes envRadarPulse { 
    0% { transform: scale(0.5); opacity: 1; } 
    100% { transform: scale(2.5); opacity: 0; } 
}

/* ==========================================================================
   RADIANT REVIEW v27.0 - AGENT WAR ROOM REFINEMENT PASS v3 OVERRIDES
   ========================================================================== */

/* 1. Fix Dossier Corner Artifacts (Synchronized Geometry) */
.awr-premium-card,
.awr-card-glass,
.awr-card-portrait-wrapper {
    clip-path: polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px) !important;
}

/* 2. Increase Agent Portrait Clarity (Active State) */
.active-center .awr-card-portrait {
    filter: brightness(1.05) contrast(1.05) saturate(1.05) drop-shadow(0 15px 25px rgba(0,0,0,0.7)) !important;
    opacity: 1 !important;
}

/* 3. Add Subtle Active Dossier Spotlight (Environmental Connection) */
.active-center .awr-premium-card::after {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at center, var(--agent-color, rgba(0, 242, 255, 0.1)) 0%, transparent 70%);
    opacity: 0.08; /* Softened integration into environment */
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: screen; 
    transition: opacity 0.7s ease;
}

/* 4. Reduce Silhouette Dominance */
.awr-card-ghost {
    opacity: 0.02 !important; /* Pushed almost completely into background */
    filter: grayscale(100%) brightness(0.6) blur(2px) !important;
}

.active-center .awr-card-ghost {
    opacity: 0.03 !important;
}

/* 5. Strengthen Agent Environmental Ownership */
.active-center .awr-env-layer {
    opacity: 0.65 !important;
    filter: saturate(1.2) brightness(1.1) !important;
    transform: scale(1.05) !important;
}


/* ==========================================================================
   RADIANT REVIEW v27.0 // TACTICAL DOSSIER PRESENTATION FIXES
   ========================================================================== */

/* ISSUE #4: Active Dossier Feedback */
.dossier-card {
    border: 1px solid transparent; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dossier-card.active-dossier {
    background: rgba(10, 20, 25, 0.95) !important;
    border-color: rgba(0, 242, 255, 0.5) !important;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.15), inset 0 0 20px rgba(0, 242, 255, 0.05) !important;
    transform: translateY(-2px);
    z-index: 10;
}

/* Active State Indicator line on the bottom edge */
.dossier-card.active-dossier::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #00f2ff;
    box-shadow: 0 0 12px #00f2ff;
    border-radius: 2px 2px 0 0;
}

/* Ensure the active dot glows */
.dossier-card.active-dossier .intel-dot {
    background: #00f2ff;
    box-shadow: 0 0 10px #00f2ff;
}

/* ISSUE #3: Progressive Reveal Animations */
.console-fade-in {
    animation: intelConsoleFade 0.4s ease-out forwards;
}

@keyframes intelConsoleFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

/* ==========================================================================
   RADIANT REVIEW // INTELLIGENCE CONSOLE PRESENTATION UPGRADE
   ========================================================================== */

/* Compact Tactical Grid Restraints */
#intel-console-content .grid {
    align-items: start;
    align-content: start;
}

/* Tactical Block Hover States */
.intel-report-block {
    transition: all 0.3s ease;
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.03) 0%, transparent 100%);
}

.intel-report-block:hover {
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.08) 0%, transparent 100%);
    border-left-color: rgba(0, 242, 255, 0.6) !important;
}

/* Label Typography (Orbitron Enforcement) */
.intel-console-label {
    font-family: 'Orbitron', sans-serif !important;
    opacity: 0.75;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.3);
}

/* Value Typography (Premium Contrast & Visibility) */
.tactical-type-value {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    position: relative;
}

/* Tactical Blinking Cursor for the active typing effect */
.tactical-type-value::after {
    content: '_';
    position: absolute;
    opacity: 0;
    color: #00f2ff;
    animation: tacticalBlink 0.8s infinite;
    margin-left: 2px;
}

@keyframes tacticalBlink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Once the console is fully faded in, we can hide the typing cursor if desired, 
   or let it persist. Let's keep it subtle. */
.console-fade-in .tactical-type-value::after {
    display: none; 
}

/* ==========================================================================
   TACTICAL FINGERPRINT™ SYSTEM
   ========================================================================== */

#tactical-fingerprint-section {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

#tactical-fingerprint-container {
    /* Hardware Acceleration to maintain strict 60fps global target */
    transform: translateZ(0);
    will-change: transform, opacity;
    
    /* Sub-pixel antialiasing for crisp neural canvas lines */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Center canvas elements perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
}

#fingerprint-canvas {
    /* Absolute containment to prevent mobile layout shifting */
    display: block;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    
    /* Enforce crisp edge rendering on high-DPI/Retina screens */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================================================
   ROUND LOSS FORENSICS SYSTEM
   ========================================================================== */

@keyframes scanline {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(300px); opacity: 0; }
}

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

/* Base card layout */
.forensic-card {
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hardware-accelerated CSS Grid Accordion */
.forensic-card .drill-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.forensic-card.open .drill-wrapper {
    grid-template-rows: 1fr;
}

.forensic-card .drill-inner {
    overflow: hidden;
}

/* Delay content fade-in until expansion begins */
.forensic-card.open .inner-content-fade {
    opacity: 1;
    transition-delay: 0.15s;
}

/* Active Premium State - Focus elevation */
.forensic-card.open {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    filter: brightness(1.1);
    transform: scale(1.01);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 20;
    position: relative;
}

/* ==========================================================================
   GLOBAL SCANLINE STATE CONTROLLER
   ========================================================================== */

.scanline {
    /* Ensures the JavaScript fade logic is hardware-accelerated and smooth */
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.scanline-dormant {
    /* Forces the visual fade-out prior to the JS culling the render loop */
    opacity: 0 !important;
}

/* ==========================================================================
   DEATHMATCH TACTICAL SCOREBOARD AMBIENT ENHANCEMENTS
   ========================================================================== */

/* Ambient background smooth visibility transition */
#dm-ambient-bg {
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-image 0.5s ease;
}

/* Glass-morphism and elevation strictly isolated to Deathmatch specific containers */
#dm-content-leaderboard .bg-white\/5,
#dm-content-matrix .bg-black\/40,
#dm-content-matrix .bg-white\/5,
#dm-content-multikills .bg-black\/40 {
    background-color: rgba(10, 15, 20, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Leaderboard row interaction physics */
#dm-content-leaderboard .bg-white\/5 {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#dm-content-leaderboard .bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateX(2px);
}

/* ==========================================================================
   COMPETITIVE TACTICAL SCOREBOARD // VISUAL PARITY UPGRADE
   ========================================================================== */

/* 1. Modal Container Ambient Integration */
#scoreboard-modal > .relative.w-full.max-w-2xl {
    background-color: rgba(10, 15, 20, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* 2. World Bleed-Through Backdrop */
#scoreboard-modal > .bg-black\/90 {
    background-color: rgba(6, 14, 20, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* 3. Interior Panels & Stat Rows Glassmorphism */
#scoreboard-content > div.bg-black\/60,
#scoreboard-content > div.bg-black\/40,
#scoreboard-content .bg-white\/5 {
    background-color: rgba(10, 15, 20, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 4. Player Row Interaction Physics */
#scoreboard-content .bg-white\/5 {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#scoreboard-content .bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateX(2px);
}

/* ==========================================================================
   COMPETITIVE TACTICAL SCOREBOARD // LAYER #3 PANEL GLASSMORPHISM
   ========================================================================== */

/* 1. Neutralize the hardcoded opaque background of the Modal Wrapper (Layer #2) 
   so the background video can successfully bleed through to the Content Panel */
#scoreboard-modal > .bg-\[\#0a1419\] {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* 2. Apply Premium Deathmatch Glassmorphism directly to the Tactical Content Container (Layer #3) and Top Header */
#scoreboard-content,
#scoreboard-modal .border-b.bg-black\/40 {
    background-color: rgba(10, 15, 20, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}

/* 3. Strip opaque backgrounds from inner competitive data blocks (Status Row, Timeline, Stats) 
   to allow the Layer #3 glassmorphism to remain visible */
#scoreboard-content .bg-black\/60,
#scoreboard-content .bg-black\/40 {
    background-color: rgba(10, 15, 20, 0.3) !important;
    backdrop-filter: none !important; /* Prevent double-blurring performance hits */
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   SPATIAL IMPACT MATRIX — TACTICAL CLASSIFICATION TIERS
   ========================================================================== */
.tactical-badge {
    transition: all 0.4s ease;
    text-shadow: 0 0 10px currentColor;
    font-weight: 900;
}

.sim-elite {
    color: #2ff472;
    border-color: rgba(47, 244, 114, 0.4);
    background-color: rgba(47, 244, 114, 0.05);
    box-shadow: inset 0 0 15px rgba(47, 244, 114, 0.1), 0 0 10px rgba(47, 244, 114, 0.2);
}

.sim-strong {
    color: #00f2ff;
    border-color: rgba(0, 242, 255, 0.4);
    background-color: rgba(0, 242, 255, 0.05);
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.1), 0 0 10px rgba(0, 242, 255, 0.2);
}

.sim-stable {
    color: #4da8da; /* Blue-Cyan */
    border-color: rgba(77, 168, 218, 0.4);
    background-color: rgba(77, 168, 218, 0.05);
    box-shadow: inset 0 0 15px rgba(77, 168, 218, 0.1), 0 0 10px rgba(77, 168, 218, 0.2);
}

.sim-leakage {
    color: #ffb800;
    border-color: rgba(255, 184, 0, 0.4);
    background-color: rgba(255, 184, 0, 0.05);
    box-shadow: inset 0 0 15px rgba(255, 184, 0, 0.1), 0 0 10px rgba(255, 184, 0, 0.2);
}

.sim-critical {
    color: #ff4655;
    border-color: rgba(255, 70, 85, 0.4);
    background-color: rgba(255, 70, 85, 0.05);
    box-shadow: inset 0 0 15px rgba(255, 70, 85, 0.1), 0 0 10px rgba(255, 70, 85, 0.2);
}

/* ==========================================================================
   SIDEARM ECO-EFFICIENCY INDEX // ARCHETYPE PRESENTATION TREATMENTS
   ========================================================================== */

/* Archetype discovery panel entry transition */
#sidearm-identity-container {
    animation: reconReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.04), 0 4px 15px rgba(0,0,0,0.4);
}

/* Subtle holographic target tag focus pulse matching core identity engines */
#sidearm-identity-label {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

/* Runtime premium selection indicator frame applied via JavaScript controller */
.eco-weapon-card.weapon-card-emphasized {
    background-color: rgba(0, 242, 255, 0.04) !important;
    border-color: rgba(0, 242, 255, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.1), inset 0 0 10px rgba(0, 242, 255, 0.05);
    transform: translateY(-2px);
}

/* Enhanced visibility for weapon counter text under active profile context */
.eco-weapon-card.weapon-card-emphasized span[id$="-kills"] {
    color: #00f2ff !important;
    border-color: rgba(0, 242, 255, 0.3) !important;
    background-color: rgba(0, 242, 255, 0.08) !important;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
}

/* ==========================================================================
   UTILITY-TO-DAMAGE CONVERSION // INTELLIGENCE ENHANCEMENT
   ========================================================================== */

/* Utility identity discovery panel entry transition */
#udc-identity-container {
    animation: reconReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.04), 0 4px 15px rgba(0,0,0,0.4);
}

/* Subtle holographic target tag focus pulse matching core identity engines */
#udc-contribution-title, #udc-identity-title {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

/* ==========================================================================
   TRADE MECHANICS & SPACING // INTELLIGENCE ENHANCEMENT
   ========================================================================== */

/* Teamplay identity discovery panel entry transition */
#trade-identity-container {
    animation: reconReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.04), 0 4px 15px rgba(0,0,0,0.4);
}

/* Subtle holographic target tag focus pulse matching core identity engines */
#trade-failure-title, #trade-identity-title {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
}

/* ==========================================================================
   AI REPORT MODAL // HEADER TEXT STYLES (RESTORED)
   ========================================================================== */

.console-status {
    margin-left: auto;
    
    /* CHANGE YOUR FONT HERE: */
    font-family: 'Orbitron', sans-serif; 
    
    /* CHANGE YOUR FONT SIZE HERE: */
    font-size: 10px;                      
    
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(47, 244, 114, 0.8);
    text-transform: uppercase;
}

/* If you also want to change the left-side text ("INTELLIGENCE CONSOLE"): */
.console-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 800;
    color: #00f2ff;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.4);
}

/* ==========================================================================
   ASCENSION OBJECTIVES // TIMELINE & STATE ANIMATIONS
   ========================================================================== */

/* State: COMPLETE (Subtle Neon Pulse) */
@keyframes objectiveCompletePulse {
    0% { box-shadow: 0 0 5px rgba(47, 244, 114, 0.4); }
    50% { box-shadow: 0 0 15px rgba(47, 244, 114, 0.8), 0 0 30px rgba(47, 244, 114, 0.2); }
    100% { box-shadow: 0 0 5px rgba(47, 244, 114, 0.4); }
}

/* State: REINSTATED (Amber Warning Flicker) */
@keyframes objectiveReinstatedFlicker {
    0%, 100% { 
        border-color: rgba(255, 184, 0, 0.4); 
        background: rgba(255, 184, 0, 0.05);
    }
    50% { 
        border-color: rgba(255, 184, 0, 0.8); 
        background: rgba(255, 184, 0, 0.15);
    }
}

/* Timeline Marker Dynamics */
.ascension-marker.state-complete {
    animation: objectiveCompletePulse 2.5s infinite ease-in-out;
}

.ascension-badge.state-reinstated {
    animation: objectiveReinstatedFlicker 3s infinite ease-in-out;
}

/* Lightweight Track Smoothing */
.ascension-track-fill {
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* ==========================================================================
   RADIANT REVIEW CONTAINER MAPPER (DEV TOOLS) // ISOLATED SUBSYSTEM
   v25.0 STABLE
   ========================================================================== */

.rr-mapper-hidden {
    display: none !important;
}

/* Lightweight Hover Overlay */
#rr-mapper-hover-overlay {
    position: fixed;
    pointer-events: none; /* Crucial: Allows clicks to pass through to the container */
    z-index: 9998;
    border: 2px dashed #00f2ff;
    background: rgba(0, 242, 255, 0.05);
    border-radius: 4px;
    padding: -2px;
    transition: width 0.1s ease, height 0.1s ease, top 0.1s ease, left 0.1s ease;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#rr-mapper-hover-id, #rr-mapper-hover-renderer {
    background: rgba(6, 14, 20, 0.9);
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid rgba(0, 242, 255, 0.3);
    white-space: nowrap;
}

/* Main Inspection Panel */
#rr-mapper-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 340px;
    background: rgba(6, 14, 20, 0.95); /* Inherits var(--v-midnight) aesthetics */
    border: 1px solid var(--v-border);
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 15px rgba(47, 244, 114, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.rr-mapper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(47, 244, 114, 0.05);
    border-bottom: 1px solid rgba(47, 244, 114, 0.2);
}

.rr-mapper-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
}

.rr-mapper-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.rr-mapper-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

.rr-mapper-section-title {
    color: var(--v-green);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    margin-top: 12px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rr-mapper-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rr-mapper-list li {
    position: relative;
    padding-left: 12px;
}

.rr-mapper-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--v-green);
    opacity: 0.7;
}

.rr-mapper-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 8px 0;
}

/* Custom Scrollbar for Mapper Panel */
.rr-mapper-content::-webkit-scrollbar {
    width: 4px;
}
.rr-mapper-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}
.rr-mapper-content::-webkit-scrollbar-thumb {
    background: var(--v-border);
    border-radius: 4px;
}

/* ==========================================================================
   START: DEV TOOLS SAFE MODE // ISOLATED SUBSYSTEM OVERRIDES
   ========================================================================== */

/* 1. Aggressively disable all CSS animations and transitions globally */
.rr-safe-mode-active * {
    animation: none !important;
    transition: none !important;
}

/* 2. Hide heavy ambient layers, scanlines, and particle effects */
.rr-safe-mode-active #ambient-bg-video,
.rr-safe-mode-active #modal-ambient-video,
.rr-safe-mode-active .scanline,
.rr-safe-mode-active #heartbeat-ambient,
.rr-safe-mode-active .awr-modal-ambient-glow,
.rr-safe-mode-active .terminal-pulse-bg,
.rr-safe-mode-active .terminal-tracer,
.rr-safe-mode-active .dna-spiral-loader,
.rr-safe-mode-active .rp-aura,
.rr-safe-mode-active .rp-pulse-ring,
.rr-safe-mode-active .awr-perimeter-scan,
.rr-safe-mode-active .awr-internal-sweep,
.rr-safe-mode-active .telemetry-signal,
.rr-safe-mode-active .micro-bar {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* 3. Ensure the main body background remains solid and intact */
.rr-safe-mode-active body {
    background-color: #060e14 !important;
}

/* 4. Dev Tools toggle button active state (Green when enabled) */
.rr-safe-mode-active #rr-safe-mode-toggle {
    background-color: rgba(47, 244, 114, 0.15) !important;
    border-color: #2ff472 !important;
    color: #2ff472 !important;
    box-shadow: inset 0 0 10px rgba(47, 244, 114, 0.2) !important;
}

/* ==========================================================================
   END: DEV TOOLS SAFE MODE
   ========================================================================== */

   /* ==========================================================================
   SESSION INTELLIGENCE ENGINE (RADIANT REVIEW v27.0 STABLE)
   ========================================================================== */

/* Hardware-Accelerated Reveal Sequence */
@keyframes session-sweep-reveal {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
        filter: brightness(0.5);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

.session-sweep-anim {
    animation: session-sweep-reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Telemetry Pulse for Active Thresholds */
@keyframes session-telemetry-pulse {
    0% { box-shadow: inset 0 0 0px rgba(255, 70, 85, 0); }
    50% { box-shadow: inset 0 0 15px rgba(255, 70, 85, 0.15); }
    100% { box-shadow: inset 0 0 0px rgba(255, 70, 85, 0); }
}

.session-alert-pulse {
    animation: session-telemetry-pulse 2.5s infinite ease-in-out;
}

/* Premium Hover States for Session UI */
.session-intel-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.session-intel-card:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(0, 242, 255, 0.3);
}

/* Smooth Accordion Expansion (Dossier) */
.dossier-grid-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dossier-grid-wrapper.expanded {
    grid-template-rows: 1fr;
}

.dossier-grid-inner {
    overflow: hidden;
}

/* ==========================================================================
   FIRST-TIME USER WELCOME MODAL (ONBOARDING)
   ========================================================================== */
#welcome-modal {
    transition: opacity 0.45s ease-out !important;
}

#welcome-modal.active {
    display: flex !important;
    opacity: 1 !important;
}

/* Premium Entrance Scale Animation */
.welcome-modal-content {
    opacity: 0;
    transform: scale(0.95);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease-out !important;
}

#welcome-modal.active .welcome-modal-content {
    opacity: 1;
    transform: scale(1) !important;
}