/* =========================================
   MODULE 2: PREDICTION ENGINE (VS MODE)
   ========================================= */

/* --- 1. SECTION BACKGROUND --- */
/* Темніший фон для візуального ритму */
.deep-dive-section.alt-bg {
    background-color: #0b1120; /* Darker Slate */
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: relative;
    z-index: 5;
}

/* --- 2. CARD CONTAINER --- */
.prediction-card {
    background-color: #1e293b; /* Slate-800 */
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    max-width: 550px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 10;
}

/* --- 3. HEADER (VS MODE) --- */
.pc-header {
    background: #0f172a; /* Slate-900 */
    padding: 15px 25px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-player-vs {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Avatar Group (Overlapping) */
.avatar-group {
    position: relative;
    width: 60px; 
    height: 40px;
}

.pc-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #fff;
    border: 2px solid #0f172a; /* Border matching header bg */
    position: absolute;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.pc-avatar.hero {
    background: #eab308; /* Gold/Yellow for Hero */
    left: 0; 
    z-index: 2;
}

.pc-avatar.rival {
    background: #3b82f6; /* Blue for Rival */
    right: 0; 
    z-index: 1; 
    opacity: 0.9;
}

/* Text Info */
.vs-info {

    flex-direction: column; 
    line-height: 1.2;
}

.p-hero { 
    font-size: 0.9rem; font-weight: 700; color: #fff; 
}
.vs-label { 
    font-size: 0.65rem; color: #64748b; font-style: italic; margin-left: 2px;
}
.p-rival { 
    font-size: 0.75rem; color: #3b82f6; font-weight: 600; 
}

/* Metric Tag */
.pc-metric-tag {
    background: #1e293b; 
    border: 1px solid #334155; 
    color: #94a3b8;
    padding: 5px 10px; 
    border-radius: 6px; 
    font-size: 0.7rem; 
    font-weight: 700;
    text-transform: uppercase;
}


/* --- 4. TOP SECTION: COMPARISON (Full Width) --- */
.pc-top-section {
    padding: 25px 25px 0 25px; 
}

.stat-comparison-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px 20px;
    border-radius: 12px;
}

.stat-point .lbl { 
    font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; 
}
.stat-point .val { 
    font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1; 
}
.stat-point .val small { 
    font-size: 0.9rem; color: #64748b; margin-left: 2px; font-weight: 500;
}
.stat-point .val.target { 
    color: #3b82f6; /* Blue Target Color */
}
.right-align { text-align: right; }

/* Connector Line & Badge */
.stat-connector {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.gap-pill {
    font-size: 0.7rem; font-weight: 700; 
    padding: 3px 10px; border-radius: 12px;
    margin-bottom: -9px; 
    z-index: 2;
}
.gap-pill.red {
    background: rgba(239, 68, 68, 0.15); 
    color: #f87171; 
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.conn-line {
    width: 100%; height: 2px; 
    background: #334155;
    position: relative; z-index: 1;
    border-radius: 2px;
}


/* --- 5. BOTTOM SECTION: LOGIC & GRAPH --- */
.pc-bottom-section {
    display: flex;
    padding: 25px;
    gap: 20px;
    align-items: center;
}

/* Left Column: Abench Conclusion */
.pc-logic-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abench-conclusion {
    background: rgba(30, 41, 59, 0.5); /* Slightly transparent dark */
    border-left: 3px solid #eab308; /* Gold border for "Insight" */
    padding: 15px;
    border-radius: 0 8px 8px 0;
    display: flex; 
    gap: 12px;
}

.ac-icon { 
    font-size: 1.4rem; 
}

.ac-content strong {
    display: block; 
    color: #eab308; 
    font-size: 0.75rem; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.ac-content p {
    font-size: 0.85rem; 
    color: #cbd5e1; 
    line-height: 1.5; 
    margin: 0;
}

.highlight {
    color: #eab308; 
    font-weight: 800; 
    border-bottom: 1px dashed rgba(234, 179, 8, 0.5);
}

.rival-text {
    color: #3b82f6; 
    font-weight: 600;
}


/* Right Column: Graph */
.pc-graph-col {
    flex: 1;
    display: flex; 
    align-items: center;
    justify-content: center;
    background: none !important;
}

/* --- 6. GRAPH SVG STYLES --- */
.graph-svg { 
    width: 100%; 
    height: auto; 
    overflow: visible; 
    background: transparent !important;
}

/* Grid */
.g-grid { 
    stroke: #334155; stroke-width: 1; opacity: 0.3; 
}

/* Target Line (Eddy - Blue Dashed) */
.line-target-eddy {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-dasharray: 4 3;
    opacity: 0.8;
}
.label-eddy {
    fill: #3b82f6; font-size: 8px; font-weight: 700; font-family: 'Montserrat', sans-serif;
}

/* Hero Line (Lucas - Gold Solid) */
.line-hero-growth {
    fill: none;
    stroke: #eab308; /* Gold */
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.3));
}

.dot-current { 
    fill: #1e293b; stroke: #eab308; stroke-width: 2; 
}

/* Intersection Point */
.dot-intersect { 
    fill: #22c55e; stroke: #fff; stroke-width: 2; 
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { r: 4; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { r: 5; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
    100% { r: 4; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Axis Labels */
.axis-txt { 
    font-size: 9px; fill: #64748b; text-anchor: middle; font-family: 'Montserrat', sans-serif; 
}
.axis-txt.active { fill: #fff; font-weight: 700; }
.axis-txt.future { fill: #22c55e; font-weight: 700; }


/* --- 7. RESPONSIVE --- */
@media (max-width: 600px) {
    .pc-bottom-section { 
        flex-direction: column; 
    }
    .pc-logic-col { 
        width: 100%; 
        border-bottom: 1px solid rgba(255,255,255,0.05); 
        padding-bottom: 20px; 
    }
    .abench-conclusion {
        border-radius: 8px; /* Rounded corners on mobile */
    }
    .stat-comparison-full {
        padding: 10px;
    }
    .stat-point .val { font-size: 1.3rem; }
}