/* === MODULE 6.4: TACTICS EFFICIENCY === */

.tactics-efficiency-block {
    display: flex;
    flex-direction: row; /* Text Left */
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

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

/* Header */
.te-header {
    padding: 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}
.te-title-group { display: flex; gap: 12px; align-items: center; }
.te-title-group .icon { 
    background: #ecfdf5; color: #10b981; width: 36px; height: 36px; 
    border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.te-title { font-size: 1rem; font-weight: 800; color: #1e293b; }

/* List */
.te-list {
    padding: 10px 20px 20px 20px;
}

/* Item */
.te-item {
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}
.te-item:last-child { border-bottom: none; }

/* Rows */
.te-row-top {
    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px;
}
.t-name { font-weight: 700; color: #0f172a; font-size: 0.95rem; }

.t-percent { text-align: right; line-height: 1; }
.t-percent .val { display: block; font-size: 1.1rem; font-weight: 800; color: #334155; }
.t-percent .lbl { font-size: 0.6rem; color: #94a3b8; font-weight: 700; }

.te-row-mid {
    display: flex; align-items: center; gap: 15px; margin-bottom: 10px;
}
.t-badge {
    background: #f1f5f9; color: #64748b; font-size: 0.75rem; font-weight: 700;
    padding: 2px 8px; border-radius: 4px; border: 1px solid #e2e8f0;
}

/* Progress Bar */
.progress-track {
    flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 3px; }
.progress-fill.yellow { background: #eab308; }
.progress-fill.red { background: #ef4444; }

.te-row-bot {
    display: flex; justify-content: space-between; align-items: center;
}
.match-count { font-size: 0.75rem; color: #64748b; font-weight: 600; }

.wdl-stats { font-size: 0.75rem; font-weight: 700; display: flex; gap: 10px; }
.wdl-stats .w { color: #16a34a; }
.wdl-stats .d { color: #94a3b8; }
.wdl-stats .l { color: #ef4444; }


/* Responsive */
@media (max-width: 900px) {
    .tactics-efficiency-block { flex-direction: column; gap: 30px; }
    .feature-visual { width: 100%; }
}