/**
 * Atlas-Civ-Clicker | Ranking Styles v3.0.0
 * Fokus: Wettbewerb, Status und Jagdfieber.
 */

/* Tier-Farben & Ränge */
.tier-siedler { color: #94a3b8 !important; }
.tier-vogt { color: #b45309 !important; font-weight: bold; }
.tier-fuerst { color: #22d3ee !important; font-weight: bold; text-shadow: 0 0 5px rgba(34, 211, 238, 0.3); }
.tier-imperator { color: #fbbf24 !important; font-weight: bold; text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
.tier-titan { color: #d946ef !important; font-weight: bold; animation: titanic-glow 2s infinite alternate; }

@keyframes titanic-glow {
    from { text-shadow: 0 0 5px #d946ef, 0 0 10px #d946ef; }
    to { text-shadow: 0 0 15px #d946ef, 0 0 20px #ff00ff; }
}

/* Top 3 Highlighting */
.ranking-item.top-1 { background: rgba(251, 191, 36, 0.08) !important; border-left: 3px solid #fbbf24; }
.ranking-item.top-2 { background: rgba(226, 232, 240, 0.05) !important; border-left: 3px solid #e2e8f0; }
.ranking-item.top-3 { background: rgba(180, 83, 9, 0.05) !important; border-left: 3px solid #b45309; }

/* --- Kaiserliches Rivalen- & Verfolger-Radar (v7.9.45) --- */
.poking-system {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    max-width: 220px;
    width: 100%;
}

/* 🎯 Der Herausforderungs-Badge (Nach Vorne) - Edles Gold/Amber */
.rival-badge {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.06), rgba(251, 191, 36, 0.01)) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem !important;
    font-weight: 700;
    color: var(--color-gold) !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.03);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Wenn sehr nah dran (< 1000 Punkte): Edles kaiserliches Pulsieren (Gold-Glow) */
.rival-badge.is-critical {
    border-color: rgba(251, 191, 36, 0.45) !important;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.03)) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.12);
    animation: gold-pulse 2.0s infinite alternate;
}

@keyframes gold-pulse {
    from { border-color: rgba(251, 191, 36, 0.2); box-shadow: 0 0 3px rgba(251, 191, 36, 0.03); }
    to { border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 10px rgba(251, 191, 36, 0.15); }
}

/* 🛡️ Der Verfolger-Sicherungs-Badge (Nach Hinten) - Edles Stahlblau/Cyan */
.hunter-badge {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.06), rgba(56, 189, 248, 0.01)) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem !important;
    font-weight: 700;
    color: #38bdf8 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.03);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Wenn Verfolger sehr nah dran (< 1000 Punkte): Edles stahlblaues Pulsieren */
.hunter-badge.is-critical {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.03)) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.12);
    animation: blue-pulse 2.0s infinite alternate;
}

@keyframes blue-pulse {
    from { border-color: rgba(56, 189, 248, 0.2); box-shadow: 0 0 3px rgba(56, 189, 248, 0.03); }
    to { border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 0 10px rgba(56, 189, 248, 0.15); }
}

/* 👑 Thron gesichert Badge - Smaragdgrün */
.rival-thron {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.01)) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    color: #10b981 !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

/* Sanftes goldenes Pulsieren der eigenen Zeile bei enger Bedrohung */
@keyframes row-warning-pulse {
    0% { background: rgba(251, 191, 36, 0.02); }
    100% { background: rgba(251, 191, 36, 0.07); }
}

.ranking-item.hunter-danger {
    animation: row-warning-pulse 2s infinite alternate !important;
    border-right: 3px solid var(--color-gold) !important;
}

/* 📊 Die kaiserliche Aufhol-Leiste */
.radar-bar-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.radar-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.radar-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b45309, var(--color-gold));
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.25);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.radar-percent-label {
    font-size: 0.62rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: right;
    letter-spacing: 0.5px;
    margin-top: -1px;
    opacity: 0.8;
}

/* Eigener Rang Fokus (Gepiekt-Effekt) */
@keyframes row-focus-glow {
    0% { background: rgba(251, 191, 36, 0.05); }
    100% { background: rgba(251, 191, 36, 0.12); }
}

.ranking-item.is-me {
    animation: row-focus-glow 2s infinite alternate;
    border-left: 4px solid var(--color-gold) !important;
    position: relative;
}

.ranking-item.is-me::after {
    content: "DU";
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--color-gold);
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
    opacity: 0.8;
}



/* Mobile Optimierung: Wird in view_ranking.css über das moderne Nova v4.0 Elite Grid-Card-System gesteuert. */

/* Tooltip & Badge Refinement */
.rank-tier-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
}