/* ============================================
   CWL CLEAN MODERN STYLING
   Same Data Structure, Better Visual Design
   ============================================ */

/* ============================================
   🔴 LAYER 1: LIVE STATUS STRIP
   Always visible — at-a-glance war intelligence
   ============================================ */

.cwl-live-strip {
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 40, 80, 0.7) 100%);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.cwl-live-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00D4FF, #FFD700, #00D4FF, transparent);
    animation: stripShimmer 3s linear infinite;
}

@keyframes stripShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.live-strip-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.live-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 4px 0;
}

.live-metric .metric-icon {
    font-size: 1rem;
    line-height: 1;
}

.live-metric .metric-value {
    font-family: 'ClashBold', 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.2;
    white-space: nowrap;
}

.live-metric .metric-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Color coding for star diff */
.live-metric.positive .metric-value {
    color: #4ADE80;
}

.live-metric.negative .metric-value {
    color: #EF4444;
}

.live-metric.neutral .metric-value {
    color: #FFD700;
}

/* Zone colors */
.live-metric.zone-promotion .metric-value {
    color: #4ADE80;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.live-metric.zone-relegation .metric-value {
    color: #EF4444;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.live-metric.zone-mid .metric-value {
    color: #FBBF24;
}

/* ============================================
   DYNAMIC ALERTS
   ============================================ */

.cwl-alerts-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cwl-alerts-container:empty {
    display: none;
}

.cwl-alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: alertSlideIn 0.3s ease-out;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwl-alert-banner .alert-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cwl-alert-banner .alert-text {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
}

.cwl-alert-banner .alert-detail {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
    white-space: nowrap;
}

/* Severity variants */
.cwl-alert-banner.critical {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.cwl-alert-banner.warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.cwl-alert-banner.positive {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.cwl-alert-banner.info {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 150, 200, 0.06));
    border: 1px solid rgba(0, 212, 255, 0.25);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .live-strip-metrics {
        gap: 4px;
    }

    .live-metric .metric-value {
        font-size: 0.95rem;
    }

    .live-metric .metric-label {
        font-size: 0.55rem;
    }
}

/* ============================================
   📊 LAYER 2: EXPANDABLE PANEL + PERF TABLE
   ============================================ */

.cwl-expandable-panel {
    background: rgba(0, 15, 30, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.cwl-expandable-panel .panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}

.cwl-expandable-panel .panel-header:hover {
    background: rgba(0, 212, 255, 0.06);
}

.panel-icon {
    font-size: 1.1rem;
}

.panel-title {
    font-family: 'ClashBold', 'Impact', sans-serif;
    font-size: 0.9rem;
    color: #FFD700;
    flex: 1;
}

.panel-badge {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 8px;
}

.panel-chevron {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.cwl-expandable-panel.expanded .panel-chevron {
    transform: rotate(180deg);
}

.cwl-expandable-panel .panel-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.cwl-expandable-panel.expanded .panel-content {
    max-height: 600px;
    overflow-y: auto;
}

/* Performance Table */
.perf-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cwl-perf-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 450px;
}

.cwl-perf-table thead {
    background: rgba(0, 212, 255, 0.08);
}

.cwl-perf-table th {
    padding: 8px 6px;
    text-align: center;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #00D4FF;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cwl-perf-table th:nth-child(2) {
    text-align: left;
}

.cwl-perf-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.cwl-perf-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cwl-perf-table td {
    padding: 8px 6px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.cwl-perf-table td:nth-child(2) {
    text-align: left;
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cwl-perf-table td:nth-child(1) {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

/* Star column gold */
.cwl-perf-table td:nth-child(4) {
    color: #FFD700;
    font-weight: 700;
}

/* Risk badges */
.risk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.risk-badge.low {
    background: rgba(74, 222, 128, 0.2);
    color: #4ADE80;
}

.risk-badge.medium {
    background: rgba(251, 191, 36, 0.2);
    color: #FBBF24;
}

.risk-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

/* Triple rate color coding */
.triple-good {
    color: #4ADE80;
}

.triple-ok {
    color: #FBBF24;
}

.triple-bad {
    color: #EF4444;
}

/* ============================================
   ⭐ STAR PROJECTION CARD
   ============================================ */

.cwl-projection-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(0, 20, 40, 0.85) 100%);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.projection-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.projection-icon {
    font-size: 1.1rem;
}

.projection-title {
    font-family: 'ClashBold', 'Impact', sans-serif;
    font-size: 0.9rem;
    color: #FFD700;
}

.projection-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.projection-current,
.projection-range,
.projection-confidence {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.proj-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.proj-value {
    font-family: 'ClashBold', 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 900;
    color: #FFD700;
}

.projection-range .proj-value {
    color: #4ADE80;
}

.projection-confidence .proj-value {
    font-size: 1rem;
    color: #00D4FF;
}

.projection-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.projection-remaining {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
}

/* ============================================
   🏆 PROMOTION SIMULATION
   ============================================ */

.promo-sim-body {
    padding: 12px 16px 16px;
}

.promo-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.promo-label {
    font-size: 0.75rem;
    font-weight: 600;
    width: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

.promo-label.promote {
    color: #4ADE80;
}

.promo-label.mid {
    color: #FBBF24;
}

.promo-label.relegate {
    color: #EF4444;
}

.promo-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
}

.promo-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.promo-bar-fill.promote {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.promo-bar-fill.mid {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.promo-bar-fill.relegate {
    background: linear-gradient(90deg, #DC2626, #EF4444);
}

.promo-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    width: 42px;
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
}

.promo-position-grid {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.promo-pos-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.promo-pos-rank {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.promo-pos-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.promo-pos-item.top-2 .promo-pos-pct {
    color: #4ADE80;
}

.promo-pos-item.bottom-2 .promo-pos-pct {
    color: #EF4444;
}


/* Container */
.cwl-container-clean {
    background: linear-gradient(180deg, rgba(10, 15, 30, 0.98) 0%, rgba(8, 12, 25, 0.99) 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================
   CWL TAB NAVIGATION SYSTEM
   ============================================ */

.cwl-tab-bar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 14px;
    margin-bottom: 20px;
    position: sticky;
    top: 60px;
    z-index: 100;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cwl-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #888;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cwl-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
}

.cwl-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 150, 200, 0.15));
    color: #00D4FF;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.cwl-tab-btn .tab-icon {
    font-size: 1.1rem;
}

.cwl-tab-btn .tab-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tab Panels */
.cwl-tab-panel {
    display: none;
    animation: tabFadeIn 0.3s ease;
}

.cwl-tab-panel.active {
    display: block;
}

/* Override war-modern.css .warroom-panel {display:none} inside CWL tabs */
.cwl-tab-panel .warroom-panel {
    display: block !important;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Tab Responsiveness */
@media (max-width: 480px) {
    .cwl-tab-bar {
        padding: 4px;
        gap: 2px;
    }

    .cwl-tab-btn {
        flex-direction: column;
        gap: 2px;
        padding: 10px 8px;
    }

    .cwl-tab-btn .tab-icon {
        font-size: 1.2rem;
    }

    .cwl-tab-btn .tab-label {
        font-size: 0.65rem;
    }
}

/* Header */
.cwl-header-clean {
    text-align: center;
    margin-bottom: 28px;
}

.cwl-title {
    color: #00D4FF;
    font-size: 1.4rem;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    margin-bottom: 16px;
}

.cwl-search-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cwl-input-clean {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 20px;
    color: #FFD700;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 1rem;
    min-width: 220px;
    outline: none;
    transition: all 0.3s ease;
}

.cwl-input-clean:focus {
    border-color: #00D4FF;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.cwl-btn-clean {
    background: linear-gradient(135deg, #00D4FF 0%, #0088CC 100%);
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.cwl-btn-clean:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

/* Section Labels */
.cwl-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}

.cwl-section-clean {
    margin-bottom: 28px;
}

/* Group Strip with Modern Slider */
.cwl-group-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0 16px 0;
    scroll-behavior: smooth;
    /* Modern Thin Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #00D4FF rgba(255, 255, 255, 0.1);
}

/* Webkit Modern Slider */
.cwl-group-strip::-webkit-scrollbar {
    height: 6px;
}

.cwl-group-strip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.cwl-group-strip::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00D4FF, #0088CC);
    border-radius: 10px;
}

.cwl-group-strip::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #00E5FF, #00AAFF);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.cwl-clan-card {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
    min-width: 100px;
    transition: all 0.2s ease;
}

.cwl-clan-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.cwl-clan-card.user-clan {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.4);
}

.cwl-rank {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
}

.cwl-clan-name {
    font-size: 0.8rem;
    color: #fff;
}

/* Two Column Layout */
.cwl-two-col-clean {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .cwl-two-col-clean {
        grid-template-columns: 1fr;
    }
}

.cwl-card-clean {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Matrix Table - Clean Modern with Slider */
.cwl-matrix-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #00D4FF rgba(255, 255, 255, 0.1);
}

.cwl-matrix-container::-webkit-scrollbar {
    height: 6px;
}

.cwl-matrix-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.cwl-matrix-container::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00D4FF, #0088CC);
    border-radius: 10px;
}

/* ============================================
   ELECTRIC CWL THEME ⚡ (Cyberpunk/Neon)
   ============================================ */
.cwl-electric-theme {
    background: #050510;
    color: #AADDEE;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #00F0FF;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.15);
    font-family: 'Segoe UI', sans-serif;
}

/* 1. Header Area */
.cwl-group-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    margin-bottom: 20px;
}

.group-rank-badge {
    background: linear-gradient(135deg, #00F0FF, #0099FF);
    color: #000;
    font-weight: 900;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

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

.season-stats .metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric .val {
    font-size: 1.5rem;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.metric .lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #00F0FF;
}

/* 2. Horizontal Clan Scroll */
.cwl-clans-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: #00F0FF #050510;
}

.cwl-clans-scroll::-webkit-scrollbar {
    height: 6px;
}

.cwl-clans-scroll::-webkit-scrollbar-track {
    background: rgba(0, 240, 255, 0.1);
    border-radius: 10px;
}

.cwl-clans-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #00F0FF, #0099FF);
    border-radius: 10px;
}

.cwl-clans-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #00FFFF, #00BBFF);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.cwl-clan-card {
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 240, 255, 0.2);
    min-width: 140px;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
}

.cwl-clan-card.active {
    background: rgba(0, 240, 255, 0.1);
    border-color: #00F0FF;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
    transform: translateY(-2px);
}

.cwl-clan-card .rank {
    font-size: 0.8rem;
    color: #557788;
    margin-bottom: 4px;
}

.cwl-clan-card .name {
    color: #FFF;
    font-size: 0.9rem;
}

/* 3. Timeline 7-Day */
.cwl-timeline {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    height: 100px;
    align-items: flex-end;
    gap: 4px;
}

.timeline-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.bar-indicator {
    width: 60%;
    background: rgba(0, 240, 255, 0.2);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s;
}

.timeline-day.win .bar-indicator {
    background: linear-gradient(to top, #00F0FF, #88FFFF);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.day-lbl {
    font-size: 0.7rem;
    margin-top: 4px;
    color: #557788;
}

.score-lbl {
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 4px;
    color: #FFF;
}

/* 4. Roster Table */
.cwl-roster-table {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px;
}

.cwl-table-header {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1fr 1fr;
    padding: 12px;
    background: rgba(0, 240, 255, 0.1);
    font-weight: bold;
    color: #00F0FF;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.cwl-table-row {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1fr 1fr;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.cwl-table-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.rank-cell {
    font-family: monospace;
}

.p-name {
    color: #FFF;
    font-weight: 500;
    font-size: 0.95rem;
}

.p-tag {
    color: #557788;
    font-size: 0.75rem;
}

.stat-cell {
    font-weight: bold;
    text-align: center;
}

.stat-cell.stars {
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.stat-cell.missed.alert {
    color: #FF4444;
}

.cwl-section-title {
    color: #FFF;
    border-left: 3px solid #00F0FF;
    padding-left: 12px;
    font-size: 1.1rem;
    margin-bottom: 12px;
    margin-top: 24px;
}

/* 5. Matrix & Insights Grid */
.cwl-bi-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.cwl-matrix-table {
    width: 100%;
    border-collapse: collapse;
}

.cwl-matrix-table th {
    color: #557788;
    font-size: 0.7rem;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.val-cell {
    text-align: center;
    color: #FFF;
    font-weight: bold;
    padding: 8px;
}

.val-cell.th18 {
    color: #FF4444;
}

.val-cell.weight {
    color: #AADDEE;
    opacity: 0.7;
}

.clan-name-cell {
    color: #FFF;
    font-weight: bold;
    padding: 10px;
    font-size: 0.9rem;
}

.user-row {
    background: rgba(0, 240, 255, 0.15);
    border-left: 3px solid #00F0FF;
}

/* Promotion / Demotion Zones */
.promo-zone {
    background: rgba(74, 222, 128, 0.08);
    border-left: 3px solid #4ADE80;
}

.promo-zone .rank-badge {
    color: #4ADE80 !important;
}

.demo-zone {
    background: rgba(255, 68, 68, 0.08);
    border-left: 3px solid #FF4444;
}

.demo-zone .rank-badge {
    color: #FF4444 !important;
}

.zone-arrow {
    font-size: 0.65rem;
    margin-left: 4px;
    vertical-align: middle;
}

.promo-zone .zone-arrow {
    color: #4ADE80;
}

.demo-zone .zone-arrow {
    color: #FF4444;
}

/* Promo Gap Calculator Card */
.cwl-promo-gap-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(30, 30, 50, 0.9));
    backdrop-filter: blur(8px);
    animation: fadeSlideIn 0.4s ease-out;
}

.promo-gap-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.promo-gap-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.promo-gap-title {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.95rem;
    color: #FFD700;
    letter-spacing: 0.5px;
}

.promo-gap-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.promo-gap-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.promo-gap-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease, background 0.5s ease;
    background: linear-gradient(90deg, #FFD700, #F59E0B);
}

/* Zone Legend */
.cwl-zone-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.zone-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.zone-dot.green {
    background: #4ADE80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.zone-dot.grey {
    background: rgba(255, 255, 255, 0.25);
}

.zone-dot.red {
    background: #FF4444;
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.5);
}

/* Points column golden */
.pts-cell strong {
    color: #FFD700;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.9rem;
}

.th-icon-sm {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Insight Cards */
.insight-section {
    display: flex;
    flex-direction: column;
}

.insight-card {
    background: rgba(20, 25, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 12px;
}

.insight-card.negative {
    border-color: #FF4444;
    background: rgba(255, 68, 68, 0.05);
}

.insight-badge {
    background: #FF4444;
    color: #FFF;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.insight-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #DDD;
}

/* Matchup Insight */
.matchup-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.matchup-status.danger {
    background: rgba(255, 68, 68, 0.15);
    color: #FF4444;
}

.matchup-status.balanced {
    background: rgba(74, 222, 128, 0.15);
    color: #4ADE80;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.red {
    background: #FF4444;
}

.status-dot.green {
    background: #4ADE80;
}

.matchup-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 7-Day Performance */
.cwl-day-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.day-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.day-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
}

.day-indicator.complete {
    background: rgba(74, 222, 128, 0.2);
    color: #4ADE80;
}

.day-indicator.miss {
    background: rgba(255, 68, 68, 0.2);
    color: #FF4444;
}

.day-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.day-title {
    color: #fff;
    font-size: 0.9rem;
}

.day-stars {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.day-status {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.complete-badge {
    color: #4ADE80;
}

.miss-badge {
    background: #FF4444;
    color: #fff;
}

/* Empty State */
.cwl-empty-clean {
    text-align: center;
    padding: 60px 20px;
}

.cwl-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.cwl-empty-clean p {
    color: rgba(0, 212, 255, 0.6);
    font-size: 1rem;
}

/* 
   MOBILE RESPONSIVENESS UPDATES 📱 
   Added dynamically to support small screens
*/

/* 6. Summary Grid (Desktop Default) */
.cwl-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

/* Scrollable Tables (Horizontal) */
.cwl-roster-table,
.cwl-matrix-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure Grid items don't squash too much */
.cwl-table-header,
.cwl-table-row {
    min-width: 600px;
    /* Force scroll if screen < 600px */
}

/* --- MOBILE BREAKPOINT --- */
@media (max-width: 768px) {

    /* Stack the Main Grid (Matrix + Insight) */
    .cwl-bi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack the Performance Summary Cards */
    .cwl-summary-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce Header Font Size */
    .cwl-title {
        font-size: 1.2rem;
    }

    /* Matchup Insight: Stack logic row */
    .matchup-status {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
    }

    /* Adjust Icon Sizes */
    .cwl-stat-card-modern img {
        width: 48px !important;
        /* Override inline 72px */
    }

    .cwl-stat-card-modern .stat-value {
        font-size: 1.2rem !important;
    }

    .group-info h2 {
        font-size: 1.2rem !important;
    }

    .group-info img {
        width: 40px !important;
    }
}

/* ============================================
   CWL WORLD-CLASS TOURNAMENT STYLES 🏆
   Champions League-Style Dashboard
   ============================================ */

/* Tournament Header */
.cwl-tournament-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 100, 200, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.cwl-league-badge img {
    width: 80px;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.5));
}

.cwl-tournament-info {
    text-align: left;
}

.cwl-tournament-info h2 {
    color: #00D4FF;
    font-size: 1.6rem;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
    margin: 0 0 4px 0;
}

.cwl-season-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Loading State */
.cwl-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

/* Section Headers */
.cwl-section-header {
    color: #FFD700;
    font-size: 1rem;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* 7-Day Progression Track */
.cwl-progression-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px 12px;
    position: relative;
}

.cwl-progression-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 0;
}

.cwl-day-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cwl-day-marker:hover {
    transform: scale(1.1);
}

.cwl-day-marker .day-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.5);
}

.cwl-day-marker.completed .day-circle {
    background: linear-gradient(135deg, #4ADE80, #22C55E);
    border-color: #4ADE80;
    color: #000;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.cwl-day-marker.loss .day-circle {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border-color: #EF4444;
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.cwl-day-marker.active .day-circle {
    background: linear-gradient(135deg, #00D4FF, #0088CC);
    border-color: #00D4FF;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
    animation: cwl-pulse 2s infinite;
}

.cwl-day-marker.pending .day-circle {
    background: rgba(60, 60, 60, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

.cwl-day-marker .day-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

@keyframes cwl-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
    }
}

/* Group Standings Table */
.cwl-standings-table-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

.cwl-standings-table {
    width: 100%;
    border-collapse: collapse;
}

.cwl-standings-table thead {
    background: rgba(0, 212, 255, 0.1);
}

.cwl-standings-table th {
    padding: 12px 8px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #00D4FF;
    letter-spacing: 1px;
}

.cwl-standings-table th:first-child {
    padding-left: 16px;
}

.cwl-standings-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.cwl-standings-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cwl-standings-table tbody tr.your-clan {
    background: rgba(0, 212, 255, 0.1);
    border-left: 3px solid #00D4FF;
}

.cwl-standings-table tbody tr.promotion-zone {
    background: rgba(74, 222, 128, 0.08);
}

.cwl-standings-table tbody tr.demotion-zone {
    background: rgba(239, 68, 68, 0.08);
}

.cwl-standings-table td {
    padding: 14px 8px;
    font-size: 0.9rem;
    color: #fff;
}

.cwl-standings-table td:first-child {
    padding-left: 16px;
    font-weight: bold;
}

.cwl-standings-table .clan-name-cell {
    font-weight: 600;
}

.cwl-standings-table .stars-cell {
    color: #FFD700;
    font-weight: bold;
}

.cwl-standings-table .trend-up {
    color: #4ADE80;
}

.cwl-standings-table .trend-down {
    color: #EF4444;
}

.cwl-standings-table .trend-same {
    color: rgba(255, 255, 255, 0.4);
}

/* Today's Match Card */
.cwl-today-card {
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.8) 0%, rgba(0, 40, 80, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cwl-today-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00D4FF, transparent);
}

/* Animated match states */
.cwl-today-card.match-winning {
    border-color: rgba(74, 222, 128, 0.5);
    animation: pulseWin 2s ease-in-out infinite;
}

.cwl-today-card.match-winning::before {
    background: linear-gradient(90deg, transparent, #4ADE80, transparent);
}

.cwl-today-card.match-losing {
    border-color: rgba(255, 68, 68, 0.5);
    animation: pulseLose 2s ease-in-out infinite;
}

.cwl-today-card.match-losing::before {
    background: linear-gradient(90deg, transparent, #FF4444, transparent);
}

.cwl-today-card.match-tied {
    border-color: rgba(255, 215, 0, 0.5);
    animation: pulseTie 2s ease-in-out infinite;
}

.cwl-today-card.match-tied::before {
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
}

@keyframes pulseWin {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }

    50% {
        box-shadow: 0 0 20px 2px rgba(74, 222, 128, 0.15);
    }
}

@keyframes pulseLose {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }

    50% {
        box-shadow: 0 0 20px 2px rgba(255, 68, 68, 0.15);
    }
}

@keyframes pulseTie {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }

    50% {
        box-shadow: 0 0 20px 2px rgba(255, 215, 0, 0.12);
    }
}

/* Match status label */
.match-status-label {
    margin-top: 12px;
    text-align: center;
    animation: fadeSlideIn 0.4s ease-out;
}

.status-win {
    color: #4ADE80;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.status-loss {
    color: #FF4444;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.status-tie {
    color: #FFD700;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.cwl-day-badge {
    display: inline-block;
    background: rgba(0, 212, 255, 0.2);
    color: #00D4FF;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 16px;
}

.cwl-match-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cwl-team-name {
    font-size: 1.1rem;
    font-weight: bold;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cwl-team-name.our {
    color: #4ADE80;
    text-align: left;
}

.cwl-team-name.opp {
    color: #EF4444;
    text-align: right;
}

.cwl-vs {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    padding: 0 16px;
}

.cwl-live-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.cwl-score-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 80px;
}

.cwl-score-side.our {
    align-items: center;
}

.cwl-score-side.opp {
    align-items: center;
}

.cwl-score-big {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.cwl-score-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.cwl-attacks-used {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.cwl-score-divider {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
}

.cwl-timer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cwl-timer-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.cwl-timer-value {
    color: #00D4FF;
    font-size: 1.1rem;
    font-weight: bold;
}

/* CWL Intel Cards (reuse war styles) */
.cwl-intel-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
}

.cwl-intel-card.insight-red {
    border-color: rgba(239, 68, 68, 0.3);
}

.cwl-intel-card.insight-green {
    border-color: rgba(74, 222, 128, 0.3);
}

.cwl-grid-row {
    display: flex;
    gap: 16px;
}

@media (max-width: 768px) {
    .cwl-grid-row {
        flex-direction: column;
    }
}

/* Day MVP Display */
.cwl-mvp-display {
    text-align: center;
    padding: 16px 0;
}

.cwl-mvp-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 4px;
}

.cwl-mvp-stats {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Discipline Card */
.cwl-discipline-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    border-left: 3px solid #FF4444;
}

.cwl-discipline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cwl-discipline-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
}

.cwl-impact-text {
    color: #FF4444;
    font-size: 0.85rem;
}

/* Member Performance Tables */
.cwl-member-table-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow-x: auto;
}

.cwl-member-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
    font-family: 'ClashBold', 'Impact', sans-serif;
}

.cwl-member-table thead {
    background: rgba(255, 215, 0, 0.1);
}

.cwl-member-table th {
    padding: 10px 8px;
    text-align: left;
    font-size: 0.7rem;
    font-family: 'ClashBold', 'Impact', sans-serif;
    text-transform: uppercase;
    color: #FFD700;
    letter-spacing: 1px;
    font-weight: normal;
}

.cwl-member-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cwl-member-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cwl-member-table td {
    padding: 10px 8px;
    font-size: 0.8rem;
    color: #fff;
    font-family: 'ClashBold', 'Impact', sans-serif;
}

/* Clan name column */
.cwl-member-table .clan-name-cell {
    font-size: 0.85rem;
    color: #FFFFFF;
}

/* Stars column styling */
.cwl-member-table .stars-cell {
    font-size: 0.85rem;
    color: #FFD700;
}

.cwl-member-table .status-attacked {
    color: #4ADE80;
}

.cwl-member-table .status-missed {
    color: #EF4444;
}

/* Season Badge */
.cwl-season-badge {
    background: rgba(0, 212, 255, 0.15);
    color: #00D4FF;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
}

/* What-If Card */
.cwl-whatif-card {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.cwl-whatif-text {
    color: rgba(255, 255, 255, 0.7);
    margin: 12px 0 0;
}

.cwl-whatif-impact {
    color: #A855F7;
    font-weight: bold;
    margin-top: 8px;
}

/* Insight Lists */
.cwl-insight-header {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    margin: 0 0 12px 0;
}

.cwl-insight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cwl-insight-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.cwl-insight-list li:last-child {
    border-bottom: none;
}

/* CWL Live Feed Styling */
.cwl-feed .timeline-item {
    border-left-color: #00D4FF;
}

.cwl-feed .timeline-item.triple {
    border-left-color: #FFD700;
    background: rgba(255, 215, 0, 0.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cwl-tournament-header {
        flex-direction: column;
        text-align: center;
    }

    .cwl-tournament-info {
        text-align: center;
    }

    .cwl-match-header {
        flex-direction: column;
        gap: 8px;
    }

    .cwl-team-name.our,
    .cwl-team-name.opp {
        text-align: center;
    }

    .cwl-live-score {
        flex-direction: row;
    }

    .cwl-score-side.our,
    .cwl-score-side.opp {
        align-items: center;
    }

    .cwl-progression-track {
        overflow-x: auto;
        padding: 16px 16px;
        min-width: 0;
    }

    .cwl-progression-track>.cwl-day-marker {
        flex-shrink: 0;
    }

    .cwl-day-marker .day-circle {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }
}

/* ============================================
   🔥 HERO MATCH SECTION - Premium Score Display
   ============================================ */

/* Hero Score Enlargement */
.cwl-live-score .cwl-score-value {
    font-size: 3rem !important;
    font-weight: 900;
    letter-spacing: -1px;
    text-shadow: 0 0 20px currentColor;
    transition: all 0.3s ease;
}

/* Win Glow Effect */
.cwl-score-side.our.winning .cwl-score-value {
    color: #4ADE80 !important;
    text-shadow:
        0 0 10px rgba(74, 222, 128, 0.5),
        0 0 20px rgba(74, 222, 128, 0.3),
        0 0 40px rgba(74, 222, 128, 0.2);
    animation: winPulse 2s ease-in-out infinite;
}

.cwl-score-side.opp.losing .cwl-score-value {
    color: #EF4444 !important;
    opacity: 0.7;
}

@keyframes winPulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

/* Attack Stats Display */
.cwl-attack-stats {
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
}

.cwl-stat-item {
    text-align: center;
}

.cwl-stat-item .stat-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.cwl-stat-item .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFD700;
}

/* Insight Line */
.cwl-match-insight {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 100, 200, 0.05) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #E5E7EB;
    line-height: 1.4;
}

.cwl-match-insight .insight-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 1.1rem;
}

/* ============================================
   🏷️ POWER RANKING TAGS - Group Standings
   ============================================ */

.power-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    white-space: nowrap;
    animation: tagFadeIn 0.5s ease;
}

@keyframes tagFadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.power-tag.high-efficiency {
    background: rgba(249, 115, 22, 0.2);
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

.power-tag.low-participation {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.power-tag.cold-start {
    background: rgba(96, 165, 250, 0.2);
    color: #60A5FA;
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.power-tag.outpaced {
    background: rgba(156, 163, 175, 0.2);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.4);
}

.power-tag.dominant {
    background: rgba(74, 222, 128, 0.2);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.4);
}

/* ============================================
   📭 EMPTY STATE IMPROVEMENTS
   ============================================ */

.cwl-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.cwl-empty-state .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.cwl-empty-state .empty-title {
    font-size: 1.1rem;
    color: #60A5FA;
    margin-bottom: 8px;
}

.cwl-empty-state .empty-message {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* Skeleton Loading for Stats */
.stat-skeleton {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 4px;
    height: 1.2em;
    display: inline-block;
    min-width: 60px;
}

@keyframes skeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* CWL Story Header Styling */
.cwl-story-header {
    margin-bottom: 16px;
}

/* Momentum Stars in Momentum Section */
#cwl-momentum-stars {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

/* Better Table Styling for Standingse */
#cwl-standings-body tr.your-clan {
    background: rgba(0, 212, 255, 0.15) !important;
    border-left: 3px solid #00D4FF;
}

#cwl-standings-body tr.promotion-zone {
    background: rgba(74, 222, 128, 0.08);
}

#cwl-standings-body tr.demotion-zone {
    background: rgba(239, 68, 68, 0.08);
}

/* ============================================
   UX ISSUE #1: VISUAL BREATHING POINTS
   ============================================ */

/* Breathing Dividers Between Sections */
.cwl-breathing-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(0, 212, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 80%,
            transparent 100%);
    margin: 28px 0 20px 0;
    position: relative;
}

.cwl-breathing-divider::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00D4FF, #A855F7);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Section Header Icons */
.cwl-section-header .section-icon {
    display: inline-block;
    margin-right: 8px;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Improved Section Headers */
.cwl-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Story Section Container */
.cwl-story-section {
    margin-bottom: 20px;
}

/* ============================================
   UX ISSUE #2: MVP DRAMA & CINEMATIC DISPLAY
   ============================================ */

/* MVP Card - Cinematic Upgrade */
.cwl-mvp-display {
    text-align: center;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.cwl-mvp-display.has-mvp {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
}

.cwl-mvp-name {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 1.3rem;
    color: #FFD700;
    margin-bottom: 8px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.cwl-mvp-stars {
    font-size: 1.8rem;
    margin-bottom: 8px;
    animation: starSparkle 1.5s ease-in-out infinite;
}

@keyframes starSparkle {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.15);
        filter: brightness(1.3);
    }
}

.cwl-mvp-caption {
    font-size: 0.85rem;
    color: #4ADE80;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 6px;
    border-left: 3px solid #4ADE80;
    margin-top: 8px;
}

.cwl-mvp-stats {
    font-size: 0.9rem;
    color: #888;
}

/* MVP Sparkle Effect */
.cwl-mvp-display.has-mvp::before {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.2rem;
    animation: sparkleFloat 2s ease-in-out infinite;
}

.cwl-mvp-display.has-mvp::after {
    content: '✨';
    position: absolute;
    bottom: 10px;
    left: 15px;
    font-size: 1rem;
    animation: sparkleFloat 2s ease-in-out infinite 1s;
}

@keyframes sparkleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-5px) scale(1.2);
        opacity: 1;
    }
}

/* ============================================
   UX ISSUE #3: MOMENTUM STAR HISTORY (Last 5)
   ============================================ */

.cwl-momentum-stars-section {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.momentum-stars-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.momentum-stars-row:last-child {
    border-bottom: none;
}

.momentum-team-label {
    font-size: 0.8rem;
    color: #888;
    min-width: 80px;
    font-weight: 600;
}

.momentum-team-label.our {
    color: #4ADE80;
}

.momentum-team-label.opp {
    color: #FF4444;
}

.momentum-stars-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.momentum-attack-stars {
    display: flex;
    gap: 1px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
}

.momentum-attack-stars.our {
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.momentum-attack-stars.opp {
    border: 1px solid rgba(255, 68, 68, 0.2);
}

.momentum-star {
    color: #FFD700;
}

.momentum-star.empty {
    color: #333;
}

/* ============================================
   UX ISSUE #4: PERFORMANCE TAGS IN STATS TABLE
   ============================================ */

/* Performance Tags */
.perf-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.perf-tag.elite {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.4);
    font-weight: 700;
}

.perf-tag.clutch {
    background: rgba(255, 140, 0, 0.2);
    color: #FF8C00;
    border: 1px solid rgba(255, 140, 0, 0.4);
}

.perf-tag.consistent {
    background: rgba(74, 222, 128, 0.2);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}



.perf-tag.support {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.perf-tag.rising {
    background: rgba(0, 212, 255, 0.15);
    color: #00D4FF;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Member Name Cell with Tags */
.cwl-member-table .member-name-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Overall Stats Table Improvements */
#cwl-overall-body .rank-badge {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.85rem;
}

#cwl-overall-body .rank-badge.top-3 {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Impact Score Sorting Indicator */
.sort-indicator {
    font-size: 0.7rem;
    color: #00D4FF;
    margin-left: 4px;
}

/* Improved Hover on Stats Rows */
#cwl-overall-body tr:hover {
    background: rgba(0, 212, 255, 0.08);
    transition: background 0.2s ease;
}

/* ============================================
   CWL LIVE FEED TIME STYLING
   ============================================ */

.timeline-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.timeline-time {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
}

.timeline-time.just-now {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    animation: justNowPulse 2s ease-in-out infinite;
}

@keyframes justNowPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

.timeline-item.recent {
    background: rgba(74, 222, 128, 0.05);
    border-left-width: 4px !important;
}

/* ============================================
   MOBILE RESPONSIVENESS (COMPREHENSIVE)
   ============================================ */

@media (max-width: 768px) {

    /* Container padding */
    .cwl-container-clean {
        padding: 16px 12px;
    }

    /* Grid rows to stack */
    .cwl-grid-row {
        flex-direction: column;
        gap: 12px;
    }

    /* Score display */
    .cwl-live-score {
        flex-direction: row;
        gap: 16px;
    }

    .cwl-score-big {
        font-size: 2.5rem;
    }

    /* Section headers */
    .cwl-section-header {
        font-size: 0.95rem;
    }

    /* Tables scroll horizontally */
    .cwl-standings-table-container,
    .cwl-member-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cwl-standings-table,
    .cwl-member-table {
        min-width: 500px;
    }

    /* Momentum section */
    .momentum-stars-row {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .momentum-team-label {
        font-size: 0.75rem;
    }

    /* MVP Card */
    .cwl-mvp-display {
        padding: 12px;
    }

    .cwl-mvp-stars {
        font-size: 1.4rem;
    }

    .cwl-mvp-caption {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {

    /* Smaller screens */
    .perf-tag {
        font-size: 0.6rem;
        padding: 2px 4px;
    }

    .momentum-attack-stars {
        padding: 2px 4px;
        font-size: 0.75rem;
    }

    .cwl-mvp-name {
        font-size: 1.1rem;
    }

    /* Score big numbers */
    .cwl-score-big {
        font-size: 2rem;
    }

    .cwl-score-sub {
        font-size: 0.8rem;
    }

    /* Timeline items */
    .timeline-item {
        padding: 10px 12px;
    }

    .timeline-name {
        font-size: 0.85rem;
    }

    .timeline-stars {
        font-size: 0.9rem;
    }

    .timeline-meta {
        font-size: 0.75rem;
    }

    .timeline-time {
        font-size: 0.65rem;
    }

    /* Day selector */
    .cwl-progression-track {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cwl-day-marker {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* Match header names */
    .cwl-team-name {
        font-size: 0.85rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Breathing dividers */
    .cwl-breathing-divider {
        margin: 20px 0 16px 0;
    }

    /* Intel cards */
    .cwl-intel-card {
        padding: 12px;
    }

    .card-title {
        font-size: 0.85rem;
    }

    /* Win probability */
    .sim-value {
        font-size: 1.8rem;
    }

    /* Discipline card */
    .cwl-discipline-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* What-if section */
    .cwl-whatif-text {
        font-size: 0.85rem;
    }

    /* Tournament header */
    .cwl-tournament-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cwl-league-badge img {
        width: 60px;
        height: auto;
    }

    #cwl-league-name {
        font-size: 1.2rem;
    }

    /* Search row */
    .cwl-search-row {
        flex-direction: column;
        gap: 10px;
    }

    .cwl-input-clean {
        min-width: 100%;
    }

    .cwl-btn-clean {
        width: 100%;
    }
}

/* ============================================
   OPPONENT ROSTER INTEL STYLING
   ============================================ */

.opponent-intel-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.opponent-intel-loading {
    text-align: center;
    color: #888;
    padding: 30px;
    font-size: 0.9rem;
}

.opponent-intel-loading .loading-icon {
    font-size: 1.5rem;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Enemy Header */
.opponent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.opponent-name {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 1.1rem;
    color: #FF6B6B;
}

.opponent-tag {
    font-size: 0.75rem;
    color: #888;
}

/* TH Distribution Grid */
.th-distribution-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.th-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.th-label {
    width: 50px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.85rem;
    color: #fff;
}

.th-bar-container {
    flex: 1;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.th-bar {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.th-bar-count {
    font-size: 0.75rem;
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* TH Level Colors */
.th-bar.th-18 {
    background: linear-gradient(90deg, #FFB800, #FFD54F);
}

.th-bar.th-17 {
    background: linear-gradient(90deg, #9333EA, #A855F7);
}

.th-bar.th-16 {
    background: linear-gradient(90deg, #7C3AED, #A78BFA);
}

.th-bar.th-15 {
    background: linear-gradient(90deg, #06B6D4, #22D3EE);
}

.th-bar.th-14 {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.th-bar.th-13 {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.th-bar.th-12 {
    background: linear-gradient(90deg, #3B82F6, #60A5FA);
}

.th-bar.th-11 {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

.th-bar.th-low {
    background: linear-gradient(90deg, #6B7280, #9CA3AF);
}

/* Roster Comparison */
.roster-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.roster-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.roster-card.our-team {
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.roster-card.enemy-team {
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.roster-team-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}

.roster-avg-th {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 1.8rem;
}

.roster-card.our-team .roster-avg-th {
    color: #4ADE80;
}

.roster-card.enemy-team .roster-avg-th {
    color: #FF6B6B;
}

.roster-th-label {
    font-size: 0.75rem;
    color: #aaa;
}

/* Comparison Badge */
.comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.comparison-badge.advantage {
    background: rgba(74, 222, 128, 0.15);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.comparison-badge.disadvantage {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.comparison-badge.even {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Strategic Insights */
.strategic-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insight-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-pill.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.3);
}

.insight-pill.success {
    background: rgba(74, 222, 128, 0.15);
    color: #4ADE80;
    border-color: rgba(74, 222, 128, 0.3);
}

.insight-pill.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* No War State */
.opponent-no-war {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.opponent-no-war-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Standings Clan Badge */
.standings-clan-badge {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 10px;
    vertical-align: middle;
}

.clan-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   MOBILE RESPONSIVE - OPPONENT INTEL
   ============================================ */

@media (max-width: 600px) {

    /* Opponent Intel Container */
    .opponent-intel-container {
        padding: 12px;
    }

    /* Header - stack on mobile */
    .opponent-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .opponent-name {
        font-size: 0.95rem;
    }

    .comparison-badge {
        font-size: 0.75rem;
        padding: 6px 10px;
    }

    /* TH Distribution - smaller text */
    .th-label {
        width: 40px;
        font-size: 0.75rem;
    }

    .th-bar-container {
        height: 20px;
    }

    .th-bar-count {
        font-size: 0.65rem;
    }

    /* Roster Comparison - stack cards */
    .roster-comparison {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .roster-card {
        padding: 10px;
    }

    .roster-avg-th {
        font-size: 1.4rem;
    }

    .roster-th-label {
        font-size: 0.7rem;
    }

    /* Strategic Insights - wrap better */
    .strategic-insights {
        gap: 6px;
    }

    .insight-pill {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    /* Standings table - smaller badges */
    .standings-clan-badge {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
}

/* ============================================
   🔥 PREMIUM OPPONENT INTEL - SHOCKING UI 🔥
   Glassmorphism + Neon + Animated Effects
   ============================================ */

/* Main Container - Clean */
.opponent-intel-container {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
}



/* Header - Epic Style */
.opponent-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.opponent-name {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #FFD700;
}



.opponent-tag {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

/* Verdict Badge - Clean */
.comparison-badge {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.comparison-badge.favorable {
    background: linear-gradient(135deg, #10B981, #34D399) !important;
    color: #000 !important;
}

.comparison-badge.risky {
    background: linear-gradient(135deg, #EF4444, #F87171) !important;
    color: #fff !important;
}

.comparison-badge.even {
    background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
    color: #000 !important;
}

/* Verdict Reasons - Neon Pills */
.verdict-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
    z-index: 1;
}

.verdict-reason {
    font-size: 0.85rem;
    color: #FFD700;
    padding: 6px 14px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.verdict-reason:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

/* Dual TH Distribution - Premium */
.dual-th-distribution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
    position: relative;
    z-index: 1;
}

.th-distribution-column {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.th-distribution-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.th-dist-label {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.th-dist-label.enemy {
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.4);
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.th-dist-label.our {
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.4);
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* TH Bars - Animated */
.th-bar-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    height: 28px;
}

.th-bar {
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.th-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: barShine 2s ease-in-out infinite;
}

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

    50%,
    100% {
        left: 100%;
    }
}

.th-bar-count {
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

/* Power Zones - Epic Cards */
.power-zones {
    margin: 24px 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    position: relative;
    z-index: 1;
}

.power-zone-title {
    font-size: 1rem;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.power-zone-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.power-zone {
    text-align: center;
    padding: 16px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.power-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.power-zone:hover {
    transform: translateY(-6px) scale(1.02);
}

.power-zone:hover::before {
    opacity: 1;
}

.power-zone.advantage {
    border-color: rgba(16, 185, 129, 0.6);
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
}

.power-zone.disadvantage {
    border-color: rgba(239, 68, 68, 0.6);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02));
}

.power-zone.even {
    border-color: rgba(245, 158, 11, 0.6);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.01));
}

.zone-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    font-weight: 600;
}

.zone-icon {
    font-size: 2rem;
    margin: 10px 0;
    filter: drop-shadow(0 0 10px currentColor);
}

.zone-status {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zone-th {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    font-family: monospace;
}

/* RSI Comparison - Premium */
.rsi-comparison {
    margin: 24px 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    position: relative;
    z-index: 1;
}

.rsi-title {
    font-size: 1rem;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.rsi-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rsi-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rsi-label {
    width: 55px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

.rsi-bar-container {
    flex: 1;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rsi-bar {
    height: 100%;
    border-radius: 14px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.rsi-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rsiShine 2s ease-in-out infinite;
}

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

    50%,
    100% {
        left: 100%;
    }
}

.rsi-bar.our {
    background: linear-gradient(90deg, #10B981, #34D399, #10B981);
    background-size: 200% 100%;
    animation: rsiGradient 3s ease infinite;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.rsi-bar.enemy {
    background: linear-gradient(90deg, #EF4444, #F87171, #EF4444);
    background-size: 200% 100%;
    animation: rsiGradient 3s ease infinite;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

@keyframes rsiGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.rsi-value {
    width: 45px;
    text-align: right;
    font-size: 1.1rem;
    font-weight: 800;
}

.rsi-value.our {
    color: #34D399;
    text-shadow: 0 0 15px rgba(52, 211, 153, 0.5);
}

.rsi-value.enemy {
    color: #F87171;
    text-shadow: 0 0 15px rgba(248, 113, 113, 0.5);
}

/* Star Opportunity */
.star-opportunity {
    margin: 20px 0;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.star-opportunity.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(52, 211, 153, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.star-opportunity.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.star-opportunity.neutral {
    background: rgba(107, 114, 128, 0.15);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.star-opp-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 8px;
}

.star-opp-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

.star-opportunity.positive .star-opp-value {
    color: #34D399;
}

.star-opportunity.negative .star-opp-value {
    color: #F87171;
}

/* Strategic Recommendations - Premium */
.strategic-recs {
    margin: 24px 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    position: relative;
    z-index: 1;
}

.recs-title {
    font-size: 1rem;
    font-weight: 800;
    color: #60A5FA;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}

.recs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recs-list li {
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.08);
    border-left: 3px solid #60A5FA;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.recs-list li:hover {
    background: rgba(96, 165, 250, 0.15);
    transform: translateX(6px);
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.15);
}

.recs-list li:before {
    content: "→ ";
    color: #60A5FA;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

/* Mobile Responsive for Coach-Level Intel */
@media (max-width: 600px) {
    .dual-th-distribution {
        grid-template-columns: 1fr;
    }

    .power-zone-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .power-zone {
        padding: 8px 4px;
    }

    .zone-icon {
        font-size: 1.2rem;
    }

    .zone-status {
        font-size: 0.75rem;
    }

    .verdict-reasons {
        flex-direction: column;
        gap: 4px;
    }

    .star-opp-grid {
        flex-direction: column;
    }
}

/* Star Opportunity Index by Zone */
.star-opportunity-zones {
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.star-opp-grid {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.star-opp-zone {
    flex: 1;
    padding: 12px 8px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease;
}

.star-opp-zone:hover {
    transform: translateY(-2px);
}

.star-opp-zone.good {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
}

.star-opp-zone.risky {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.star-opp-zone.neutral {
    border-color: rgba(107, 114, 128, 0.4);
    background: rgba(107, 114, 128, 0.1);
}

.star-zone-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.star-zone-icon {
    font-size: 1.3rem;
    margin: 4px 0;
}

.star-zone-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

/* ============================================
   MULTI-CLAN FAVORITES SYSTEM
   ============================================ */

/* Favorite Button (Star) */
.cwl-btn-fav {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: rgba(255, 215, 0, 0.6);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cwl-btn-fav:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    color: #FFD700;
    transform: scale(1.05);
}

.cwl-btn-fav.active {
    background: rgba(255, 215, 0, 0.25);
    border-color: #FFD700;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Favorites Panel */
.cwl-favorites-panel {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation Row */
.cwl-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

/* ── Clan Switcher Pill ─────────────────────── */
.cwl-clan-switcher {
    display: flex;
    align-items: center;
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.switcher-arrow {
    background: none;
    border: none;
    color: rgba(255, 215, 0, 0.6);
    font-size: 1.3rem;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.switcher-arrow:hover {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
}

.switcher-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.switcher-center {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 215, 0, 0.15);
    border-right: 1px solid rgba(255, 215, 0, 0.15);
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.switcher-center:hover {
    background: rgba(255, 215, 0, 0.08);
}

.switcher-star {
    font-size: 0.85rem;
}

.switcher-label {
    color: #FFD700;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.switcher-count {
    background: #FFD700;
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}

/* Position Pill */
.cwl-pos-pill {
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Grid Toggle Pill */
.cwl-grid-pill {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    padding: 6px 14px;
    color: #00D4FF;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.cwl-grid-pill:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: #00D4FF;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

/* Favorites Dropdown */
.cwl-favorites-dropdown {
    position: relative;
}

.cwl-favorites-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    padding: 10px 18px;
    color: #FFD700;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cwl-favorites-toggle:hover {
    background: rgba(255, 215, 0, 0.18);
    border-color: rgba(255, 215, 0, 0.4);
}

.cwl-fav-count {
    background: rgba(255, 215, 0, 0.3);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    min-width: 20px;
    text-align: center;
}

.cwl-favorites-toggle .dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.cwl-favorites-toggle.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Favorites List Dropdown */
.cwl-favorites-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: rgba(15, 20, 35, 0.98);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 200;
    padding: 8px;
}

.cwl-fav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cwl-fav-item:last-child {
    border-bottom: none;
}

.cwl-fav-item:hover {
    background: rgba(0, 212, 255, 0.1);
}

.cwl-fav-item.active {
    background: rgba(0, 212, 255, 0.15);
    border-left: 3px solid #00D4FF;
}

.cwl-fav-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cwl-fav-item-name {
    color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.9rem;
}

.cwl-fav-item-tag {
    color: #888;
    font-size: 0.75rem;
}

.cwl-fav-item-remove {
    background: transparent;
    border: none;
    color: #ff4444;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    padding: 4px 8px;
}

.cwl-fav-item-remove:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Empty Favorites State */
.cwl-fav-empty {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 0.85rem;
}

/* Mobile Responsiveness for Favorites */
@media (max-width: 480px) {
    .cwl-nav-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cwl-favorites-toggle {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .cwl-nav-btn {
        padding: 8px 12px;
        font-size: 1rem;
    }

    .cwl-favorites-list {
        min-width: 180px;
    }
}

/* Minimize/Collapse Button */
.cwl-fav-minimize-btn {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 2px 16px;
    color: #888;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.cwl-fav-minimize-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.cwl-favorites-panel {
    position: relative;
}

.cwl-favorites-panel.minimized {
    padding: 4px 16px;
}

.cwl-favorites-panel.minimized .cwl-nav-row {
    display: none;
}

.cwl-favorites-panel.minimized .cwl-fav-minimize-btn {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    display: block;
    margin: 0 auto;
}

/* Sync Indicator */
.cwl-sync-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.9rem;
    animation: syncPulse 1s ease-in-out infinite;
}

@keyframes syncPulse {

    0%,
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        opacity: 0.6;
        transform: rotate(180deg);
    }
}

/* ============================================
   MULTI-CLAN DASHBOARD GRID
   ============================================ */

/* Grid Toggle Button */
.cwl-grid-toggle {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(75, 0, 130, 0.3));
    border: 2px solid rgba(138, 43, 226, 0.5);
    border-radius: 10px;
    padding: 8px 14px;
    color: #DDA0DD;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.cwl-grid-toggle:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.5), rgba(75, 0, 130, 0.5));
    border-color: rgba(186, 85, 211, 0.7);
    color: #fff;
    transform: scale(1.05);
}

.cwl-grid-toggle.active {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.6), rgba(75, 0, 130, 0.6));
    border-color: #BA55D3;
    color: #fff;
    box-shadow: 0 0 12px rgba(138, 43, 226, 0.4);
}

.cwl-grid-toggle .grid-icon {
    font-size: 1rem;
}

/* Dashboard Grid Container */
.cwl-dashboard-grid {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.cwl-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cwl-grid-header h3 {
    color: #DDA0DD;
    font-size: 1.1rem;
    margin: 0;
}

.cwl-grid-close-btn {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: 8px;
    padding: 6px 12px;
    color: #ff9999;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cwl-grid-close-btn:hover {
    background: rgba(255, 100, 100, 0.4);
    color: #fff;
}

/* Grid Cards Container */
.cwl-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Individual Clan Card */
.cwl-clan-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.9));
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cwl-clan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cwl-clan-card.active {
    border-color: #FFD700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

/* Card Header */
.cwl-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cwl-card-badge {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.cwl-card-info {
    flex: 1;
}

.cwl-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.cwl-card-tag {
    font-size: 0.75rem;
    color: #888;
}

/* Card Stats */
.cwl-card-stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.cwl-card-stat {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.cwl-card-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFD700;
    display: block;
}

.cwl-card-stat-label {
    font-size: 0.65rem;
    color: #888;
    text-transform: uppercase;
}

/* Card Status Badge */
.cwl-card-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cwl-card-status.prep {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.cwl-card-status.battle {
    background: rgba(255, 50, 50, 0.2);
    color: #FF5050;
    animation: battlePulse 1.5s ease-in-out infinite;
}

.cwl-card-status.ended {
    background: rgba(100, 200, 100, 0.2);
    color: #64C864;
}

.cwl-card-status.loading {
    background: rgba(150, 150, 150, 0.2);
    color: #999;
}

@keyframes battlePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Loading State for Cards */
.cwl-clan-card.loading {
    pointer-events: none;
    opacity: 0.6;
}

.cwl-clan-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}

/* Empty Grid State */
.cwl-grid-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.cwl-grid-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .cwl-grid-cards {
        grid-template-columns: 1fr;
    }

    .cwl-grid-toggle {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .cwl-grid-toggle span:last-child {
        display: none;
    }
}

/* ============================================
   CWL WAR ROOM — Enhanced Layout
   ============================================ */

/* Header */
.cwl-wr-header {
    margin-bottom: 16px;
}

.cwl-wr-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.cwl-wr-actions {
    display: flex;
    gap: 8px;
}

.cwl-wr-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

.cwl-wr-btn.secondary {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: #00D4FF;
}

.cwl-wr-btn.secondary:hover {
    background: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

.cwl-wr-btn.primary {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    border-color: transparent;
    color: #000;
    font-weight: bold;
}

.cwl-wr-btn.primary:hover {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    transform: translateY(-1px);
}

/* Summary Strip */
.cwl-wr-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.wr-summary-item {
    flex: 1;
    min-width: 80px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wr-summary-item.good {
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.06);
}

.wr-summary-item.warn {
    border-color: rgba(255, 68, 68, 0.3);
    background: rgba(255, 68, 68, 0.06);
}

.wr-summary-item.accent {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.06);
}

.wr-sum-val {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 1.1rem;
    color: #fff;
}

.wr-summary-item.warn .wr-sum-val {
    color: #FF4444;
}

.wr-summary-item.good .wr-sum-val {
    color: #4ADE80;
}

.wr-summary-item.accent .wr-sum-val {
    color: #FFD700;
}

.wr-sum-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Warnings */
.cwl-wr-warnings {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.15), rgba(255, 140, 0, 0.1));
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

.cwl-wr-warnings .warning-title {
    color: #FF4444;
    font-weight: bold;
    font-size: 0.85rem;
}

.cwl-wr-warnings .warning-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

/* 3-Column Grid */
.cwl-wr-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.cwl-wr-column {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.cwl-wr-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cwl-wr-column.roster .cwl-wr-col-header {
    background: rgba(74, 222, 128, 0.06);
    border-bottom-color: rgba(74, 222, 128, 0.15);
}

.cwl-wr-column.battleplan .cwl-wr-col-header {
    background: rgba(255, 215, 0, 0.06);
    border-bottom-color: rgba(255, 215, 0, 0.15);
}

.cwl-wr-column.enemy .cwl-wr-col-header {
    background: rgba(255, 68, 68, 0.06);
    border-bottom-color: rgba(255, 68, 68, 0.15);
}

.cwl-wr-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #FFD700;
}

/* Roster & Enemy lists */
.cwl-wr-roster,
.cwl-wr-enemies {
    max-height: 450px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cwl-wr-roster::-webkit-scrollbar,
.cwl-wr-enemies::-webkit-scrollbar {
    width: 4px;
}

.cwl-wr-roster::-webkit-scrollbar-thumb,
.cwl-wr-enemies::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 4px;
}

/* Roster filter row */
.cwl-tab-panel[data-tab="warroom"] .roster-filter-row {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cwl-tab-panel[data-tab="warroom"] .roster-filter {
    padding: 4px 10px;
    font-size: 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 500;
    transition: all 0.2s;
}

.cwl-tab-panel[data-tab="warroom"] .roster-filter.active {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ADE80;
}

/* Player card in roster */
.warroom-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: grab;
    transition: all 0.15s ease;
}

.warroom-player-card:hover {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
}

.warroom-player-card.assigned {
    opacity: 0.4;
    cursor: default;
}

.player-th-badge {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #FFD700;
    min-width: 32px;
    text-align: center;
}

.player-info .player-name {
    font-size: 0.78rem;
    color: #fff;
    font-weight: 500;
}

.player-info .player-role {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Enemy card styles */
.warroom-enemy-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
}

.enemy-th-badge {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(200, 50, 50, 0.15));
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #FF6666;
    min-width: 32px;
    text-align: center;
}

.enemy-info .enemy-name {
    font-size: 0.78rem;
    color: #fff;
}

/* Lanes */
.cwl-wr-lanes {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lane-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px;
}

.lane-section[data-lane="top"] {
    border-left: 3px solid #FF4444;
}

.lane-section[data-lane="mid"] {
    border-left: 3px solid #FFD700;
}

.lane-section[data-lane="bottom"] {
    border-left: 3px solid #4ADE80;
}

.lane-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lane-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.assignment-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    min-width: 52px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.assignment-slot.filled {
    border-style: solid;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.08);
}

.assignment-slot.mismatch {
    border-color: rgba(255, 68, 68, 0.5);
    background: rgba(255, 68, 68, 0.1);
}

.slot-position {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
}

.slot-th {
    font-size: 0.75rem;
    font-weight: bold;
    color: #FFD700;
}

.slot-assigned {
    font-size: 0.6rem;
    color: #4ADE80;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slot-remove {
    background: none;
    border: none;
    color: #FF4444;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 2px;
}

/* Lane legend */
.lane-legend {
    display: flex;
    gap: 4px;
}

.lane-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: bold;
}

.lane-tag.top {
    background: rgba(255, 68, 68, 0.2);
    color: #FF6666;
}

.lane-tag.mid {
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
}

.lane-tag.bottom {
    background: rgba(74, 222, 128, 0.2);
    color: #4ADE80;
}

/* Attack Tracker */
.cwl-atk-tracker {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 350px;
    overflow-y: auto;
}

.atk-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.8rem;
    transition: background 0.15s;
}

.atk-status-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.atk-status-row.done {
    border-left: 3px solid #4ADE80;
}

.atk-status-row.pending {
    border-left: 3px solid rgba(255, 255, 255, 0.15);
}

.atk-pos {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
    min-width: 24px;
}

.atk-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
}

.atk-th {
    color: #FFD700;
    font-size: 0.7rem;
    font-weight: bold;
}

.atk-result {
    color: #4ADE80;
    font-size: 0.75rem;
    font-weight: bold;
}

.atk-pending {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    font-style: italic;
}

/* Empty state */
.roster-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.8rem;
    text-align: center;
}

.roster-empty-state span {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cwl-wr-grid {
        grid-template-columns: 1fr;
    }

    .cwl-wr-summary {
        flex-direction: row;
    }

    .wr-summary-item {
        min-width: 60px;
    }

    .cwl-wr-roster,
    .cwl-wr-enemies {
        max-height: 300px;
    }

    .cwl-wr-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   DAY PROGRESSION TIMELINE
   ============================================ */
.day-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.day-card {
    flex-shrink: 0;
    width: 90px;
    padding: 10px 8px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: default;
}

.day-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.day-number {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.day-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.day-score {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 2px;
}

.day-opponent {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day card states */
.day-won {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(0, 0, 0, 0.4));
    border-color: rgba(74, 222, 128, 0.3);
}

.day-won .day-number {
    color: #4ADE80;
}

.day-won .day-score {
    color: #4ADE80;
}

.day-lost {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.12), rgba(0, 0, 0, 0.4));
    border-color: rgba(255, 68, 68, 0.3);
}

.day-lost .day-number {
    color: #FF4444;
}

.day-lost .day-score {
    color: #FF6B6B;
}

.day-draw {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.4));
    border-color: rgba(255, 215, 0, 0.3);
}

.day-draw .day-number {
    color: #FFD700;
}

.day-active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(0, 0, 0, 0.4));
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
    animation: dayActivePulse 2s ease-in-out infinite;
}

.day-active .day-number {
    color: #FFD700;
    font-size: 0.75rem;
}

.day-active .day-score {
    color: #FFD700;
}

@keyframes dayActivePulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.25);
    }
}

.day-prep {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 0, 0, 0.4));
    border-color: rgba(168, 85, 247, 0.3);
}

.day-prep .day-number {
    color: #A78BFA;
}

.day-upcoming {
    opacity: 0.5;
}

/* ============================================
   RICH ATTACK FEED CARDS
   ============================================ */
.rich-attack-card {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4px;
    transition: all 0.2s ease;
    animation: feedSlideIn 0.3s ease-out;
}

@keyframes feedSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.rich-attack-card:hover {
    background: rgba(0, 0, 0, 0.4);
}

.rich-attack-card.feed-ours {
    border-left-color: #4ADE80;
}

.rich-attack-card.feed-theirs {
    border-left-color: #FF4444;
}

/* 3★ gold glow */
.rich-attack-card.triple {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(0, 0, 0, 0.25));
}

.rich-attack-card.triple.feed-ours {
    border-left-color: #FFD700;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.05);
}

.attack-order {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
}

.attack-attacker {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attack-th-badge {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    flex-shrink: 0;
}

.attack-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attack-result {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
}

.attack-stars {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.attack-stars.triple {
    color: #FFD700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.attack-stars.double {
    color: #C0C0C0;
}

.attack-stars.single {
    color: #CD7F32;
}

.attack-stars.zero {
    color: #FF4444;
}

.attack-dest {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.attack-target {
    grid-column: 2 / 4;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.attack-th-sm {
    font-size: 0.6rem;
    color: rgba(255, 215, 0, 0.5);
}

/* ============================================
   TH DISTRIBUTION CHART
   ============================================ */
.th-dist-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.th-dist-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.th-dist-us {
    color: #4ADE80;
}

.th-dist-them {
    color: #FF4444;
}

.th-dist-row {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 4px;
    align-items: center;
    height: 26px;
}

.th-dist-bar-us-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.th-dist-bar-us {
    height: 20px;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.25), #4ADE80);
    border-radius: 4px 0 0 4px;
    min-width: 2px;
    transition: width 0.6s ease;
}

.th-dist-bar-opp-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.th-dist-bar-opp {
    height: 20px;
    background: linear-gradient(90deg, #FF4444, rgba(255, 68, 68, 0.25));
    border-radius: 0 4px 4px 0;
    min-width: 2px;
    transition: width 0.6s ease;
}

.th-dist-count {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 14px;
}

.th-dist-count.us {
    color: #4ADE80;
}

.th-dist-count.opp {
    color: #FF4444;
}

.th-dist-level {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
}

.th-dist-level.us {
    color: #4ADE80;
}

.th-dist-level.them {
    color: #FF6B6B;
}

.th-dist-verdict {
    text-align: center;
    margin-top: 10px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.verdict-good {
    background: rgba(74, 222, 128, 0.1);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.verdict-bad {
    background: rgba(255, 68, 68, 0.1);
    color: #FF4444;
    border: 1px solid rgba(255, 68, 68, 0.2);
}

.verdict-neutral {
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* ============================================
   RELIABILITY LEADERBOARD
   ============================================ */
.leaderboard-sort-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lb-sort-btn {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #888;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lb-sort-btn:hover {
    border-color: rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

.lb-sort-btn.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
    color: #FFD700;
}

.reliability-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.lb-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    align-items: center;
    transition: all 0.2s ease;
}

.lb-row:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Podium rows */
.lb-podium.lb-rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.08);
}

.lb-podium.lb-rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.06), rgba(0, 0, 0, 0.3));
    border-color: rgba(192, 192, 192, 0.2);
}

.lb-podium.lb-rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.06), rgba(0, 0, 0, 0.3));
    border-color: rgba(205, 127, 50, 0.2);
}

.lb-medal {
    font-size: 1.2rem;
    text-align: center;
}

.lb-rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
}

.lb-player {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lb-th {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    background: rgba(255, 215, 0, 0.12);
    color: #FFD700;
    flex-shrink: 0;
}

.lb-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lb-stat {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.lb-stat.missed {
    color: #FF4444;
    font-weight: 700;
}

@media (max-width: 768px) {
    .lb-stats {
        gap: 4px;
    }

    .lb-stat {
        font-size: 0.6rem;
    }
}

/* ============================================
   ENEMY BASE HEATMAP
   ============================================ */
.enemy-heatmap {
    padding: 4px 0;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 4px;
}

.hm-cell {
    padding: 6px 4px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    cursor: default;
}

.hm-cell:hover {
    transform: scale(1.05);
    z-index: 2;
}

.hm-pos {
    font-size: 0.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
}

.hm-th {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.hm-stars {
    font-size: 0.7rem;
    margin-top: 2px;
}

.hm-3star {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(0, 0, 0, 0.3));
    border-color: rgba(74, 222, 128, 0.3);
}

.hm-3star .hm-stars {
    color: #4ADE80;
}

.hm-2star {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 215, 0, 0.25);
}

.hm-2star .hm-stars {
    color: #FFD700;
}

.hm-1star {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 165, 0, 0.2);
}

.hm-1star .hm-stars {
    color: #FFA500;
}

.hm-0star {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.1), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 68, 68, 0.2);
}

.hm-0star .hm-stars {
    color: #FF4444;
}

.hm-untouched {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.hm-untouched .hm-stars {
    color: rgba(255, 255, 255, 0.2);
}

.hm-summary {
    margin-top: 8px;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.hm-summary strong {
    color: #fff;
}

/* ============================================
   SEASON PROGRESS RING
   ============================================ */
.season-ring-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.season-ring {
    display: flex;
    justify-content: center;
}

/* ============================================
   OPPONENT WEAKNESS REPORT
   ============================================ */
.weakness-report {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weakness-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.weakness-item:hover {
    background: rgba(0, 0, 0, 0.4);
}

.weakness-good {
    border-left: 3px solid #4ADE80;
}

.weakness-warn {
    border-left: 3px solid #FFD700;
}

.weakness-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.weakness-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.weakness-detail {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

/* ============================================
   BENCH vs ACTIVE SPLIT
   ============================================ */
.bench-split-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bench-section {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bench-active {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), rgba(0, 0, 0, 0.3));
    border-color: rgba(74, 222, 128, 0.15);
}

.bench-inactive {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.3));
    border-color: rgba(255, 255, 255, 0.06);
}

.bench-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.bench-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bench-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bench-th {
    font-size: 0.58rem;
    font-weight: 800;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ============================================
   QUICK ACTION FAB
   ============================================ */
.cwl-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
}

.fab-main {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FFD700, #F59E0B);
    color: #1a1a2e;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 2;
}

.fab-main:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
}

.fab-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.cwl-fab.fab-open .fab-actions {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.cwl-fab.fab-open .fab-main {
    transform: rotate(45deg);
}

.fab-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(30, 30, 50, 0.9);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.fab-action:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
    transform: scale(1.1);
}

/* ============================================
   RADAR CHART
   ============================================ */
.radar-chart-container {
    padding: 8px 0;
}

.radar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.radar-us {
    color: #4ADE80;
}

.radar-them {
    color: #FF4444;
}

/* ============================================
   NEXT ROSTER SUGGESTION
   ============================================ */
.next-roster-suggestion {
    padding: 4px 0;
}

.next-roster-header {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}

.next-roster-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-roster-card {
    display: grid;
    grid-template-columns: 28px 40px 1fr auto auto;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    align-items: center;
    font-size: 0.8rem;
}

.next-roster-card.nr-top {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), rgba(0, 0, 0, 0.25));
    border-color: rgba(74, 222, 128, 0.15);
}

.nr-pos {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

.nr-top .nr-pos {
    color: #4ADE80;
}

.nr-th {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    background: rgba(255, 215, 0, 0.12);
    color: #FFD700;
    text-align: center;
}

.nr-name {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-avg {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
}

.nr-fresh {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 800;
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
}

/* ============================================
   ANIMATED BACKGROUND PULSE
   ============================================ */
@keyframes promoPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }

    50% {
        box-shadow: 0 0 30px 4px rgba(74, 222, 128, 0.08);
    }
}

@keyframes demoPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }

    50% {
        box-shadow: 0 0 30px 4px rgba(255, 68, 68, 0.08);
    }
}

.cwl-promo-pulse {
    animation: promoPulse 3s ease-in-out infinite;
    border-color: rgba(74, 222, 128, 0.15) !important;
}

.cwl-demo-pulse {
    animation: demoPulse 3s ease-in-out infinite;
    border-color: rgba(255, 68, 68, 0.15) !important;
}

/* ============================================
   SOUND TOGGLE
   ============================================ */
.cwl-sound-toggle {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.cwl-sound-toggle:hover {
    border-color: rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

/* ============================================
   NOTIFICATION BADGE
   ============================================ */
.cwl-tab-btn {
    position: relative;
}

.cwl-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF4444;
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

/* ============================================
   COACH CTA (Decision clarity)
   ============================================ */
.cwl-coach-cta {
    margin-top: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 10px;
    color: #ffd700;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    animation: ctaFadeIn 0.5s ease;
}

@keyframes ctaFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */
.cwl-collapsible .cwl-collapse-body {
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}

.cwl-collapsible.collapsed .cwl-collapse-body {
    max-height: 0;
    opacity: 0;
}

.cwl-collapse-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapse-chevron {
    font-size: 10px;
    transition: transform 0.3s ease;
    opacity: 0.5;
    margin-left: 8px;
}

.cwl-collapsible.collapsed .collapse-chevron {
    transform: rotate(-90deg);
}

/* ============================================
   WEAKNESS CTA (Actionable insight)
   ============================================ */
.weakness-cta {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-left: 3px solid #4ADE80;
    border-radius: 8px;
    color: #4ADE80;
    font-size: 12px;
    font-weight: 600;
}