/* === MODULE 6.3: GAME DYNAMICS === */

.game-dynamics-block {
    display: flex;
    flex-direction: row; /* Visual Left */
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

/* Card Container */
.dynamics-card {
    background: #fff; /* White bg inside dark theme for contrast, like screenshot */
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); /* Softer shadow */
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    font-family: 'Montserrat', sans-serif;
}

/* Header */
.dc-header {
    padding: 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: flex-start;
}
.dc-title-group { display: flex; gap: 12px; }
.dc-title-group .icon { 
    background: #eff6ff; color: #3b82f6; width: 40px; height: 40px; 
    border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.dc-title { font-size: 1.1rem; font-weight: 800; color: #1e293b; margin-bottom: 2px; }
.dc-sub { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }

.year-badge {
    background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b;
    padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}

/* Chart Area */
.dc-chart-container {
    padding: 20px 20px 0 20px;
    position: relative;
}
.dc-svg { width: 100%; height: 220px; overflow: visible; }
.grid-line { stroke: #f1f5f9; stroke-width: 1; }

.bar-green { fill: #4ade80; transition: height 0.5s; } /* Green */
.bar-red { fill: #f87171; transition: height 0.5s; } /* Red */
.bar-green:hover, .bar-red:hover { opacity: 0.8; }

.legend-text { font-size: 10px; fill: #64748b; font-weight: 600; }

.chart-x-labels {
    display: flex; justify-content: space-between; padding: 0 20px;
    margin-top: 5px;
}
.chart-x-labels span {
    font-size: 0.7rem; color: #94a3b8; width: 30px; text-align: center;
}


/* Footer (Insight) */
.dc-footer {
    padding: 20px;
}
.insight-card {
    background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px; padding: 15px;
    border-left: 4px solid #64748b; /* Neutral gray border */
}

.ic-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ic-icon { font-size: 1.2rem; }
.ic-title { font-size: 0.95rem; font-weight: 800; color: #1e293b; }

.ic-text { font-size: 0.85rem; color: #64748b; margin-bottom: 15px; line-height: 1.5; }

/* Coach Tip Box */
.coach-tip {
    background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.tip-label {
    font-size: 0.7rem; color: #eab308; /* Yellow */
    font-weight: 800; text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; gap: 5px;
}
.tip-content {
    font-size: 0.85rem; color: #1e293b; font-style: italic;
}
.tip-content strong { color: #0f172a; font-weight: 700; }


/* Responsive */
@media (max-width: 900px) {
    .game-dynamics-block { flex-direction: column-reverse; gap: 30px; }
    .dc-svg { height: 180px; }
    .chart-x-labels span { font-size: 0.6rem; }
}