/* ==========================================================================
   PANEL PVP — Refonte 2026-05-09
   DA MDE : noir profond + or + accent rouge sang
   Cohérence : full bordures (jamais border-left seul), animations limitées,
   typo Cinzel/Oswald, glow subtil par hover.
   ========================================================================== */

/* (Le CSS de .panel-combat / #game-container vit dans panels.css : il est
   generique a tous les modes de combat, pas specifique au PvP.) */

/* --- Full-width fix : annule padding de game-main pour les panels pleine largeur --- */
.panel-pvp,
.panel-pvm,
.panel-tower,
.panel-inventory,
.panel-sanctuary,
.panel-fabrication,
.panel-market,
.panel-friends,
.panel-guild,
.panel-bestiary,
.panel-achievements,
.panel-summoner,
.panel-admin {
    padding: 1.2rem 1.5rem;
}

/* Cap largeur du panel PVP : centre les cards et evite l'etalement infini sur grand ecran. */
.panel-pvp {
    max-width: 1280px;
    margin: 0 auto;
}

/* ==========================================================================
   Sub-tabs (Arène / Classement / Divisions)
   ========================================================================== */
.pvp-tabs {
    display: flex;
    gap: 4px;
    margin: 1rem 0 1.4rem;
    padding: 4px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 10px;
}
.pvp-tab {
    flex: 1;
    padding: 0.7rem 1rem;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.pvp-tab:hover { color: var(--gold-text-warm); }
.pvp-tab.active {
    /* Meme fond que .pvp-card : noir-rouge profond + radial sang subtil */
    background:
        radial-gradient(ellipse at top, rgba(255, 90, 60, 0.16), transparent 70%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    color: var(--gold-text-warm);
    box-shadow: inset 0 0 14px rgba(255, 90, 60, 0.12), inset 0 1px 0 rgba(var(--gold-rgb), 0.18);
}

/* ==========================================================================
   Card de base : fond gradient noir-rouge profond, bordure or, padding uniforme
   Toutes les cards principales du panel PVP héritent de ce style.
   ========================================================================== */
.pvp-card {
    position: relative;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.10), transparent 65%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.06), transparent 70%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(var(--gold-rgb), 0.18);
}

/* ==========================================================================
   Bandeau ELO / Division / Record / Progression
   Layout horizontal : ELO grand à gauche, division au centre, record à droite,
   barre de progression en bas pleine largeur.
   ========================================================================== */
.pvp-stat-bar {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-rows: auto auto;
    grid-column-gap: 1.4rem;
    align-items: center;
}
/* Bouton englobant ELO + Division : tout cliquable, indique clairement
   l'interaction via le CTA "Voir les divisions ›" a droite. */
.pvp-stat-bar-summary {
    grid-column: 1 / span 2; grid-row: 1;
    display: inline-flex; align-items: center; gap: 1.2rem;
    padding: 0.5rem 0.9rem 0.5rem 0.7rem;
    background: rgba(var(--gold-rgb), 0.05);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font: inherit;
    text-align: left;
}
.pvp-stat-bar-summary:hover {
    background: rgba(var(--gold-rgb), 0.12);
    border-color: rgba(var(--gold-rgb), 0.45);
    transform: translateY(-1px);
}
.pvp-stat-bar-summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.pvp-stat-bar-summary-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 4px;
    padding: 4px 10px;
    border-left: 1px solid rgba(var(--gold-rgb), 0.2);
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold-text-warm);
}
.pvp-stat-bar-summary-cta svg {
    transition: transform 0.2s ease;
}
.pvp-stat-bar-summary:hover .pvp-stat-bar-summary-cta svg {
    transform: translateX(3px);
}
.pvp-stat-bar-elo {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 0.6rem;
}
.pvp-stat-bar-elo-val {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-text-warm);
    text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.45);
    letter-spacing: 1px;
}
.pvp-stat-bar-elo-label {
    margin-top: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--text-secondary);
}
.pvp-stat-bar-division {
    display: flex; align-items: center; gap: 10px;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(var(--gold-rgb), 0.2);
}
.pvp-stat-bar-division-icon {
    width: 38px; height: 38px;
    filter: drop-shadow(0 0 10px var(--division-color, var(--gold)));
}
.pvp-stat-bar-division-name {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--division-color, var(--gold-text-warm));
    letter-spacing: 1.5px;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
.pvp-stat-bar-record {
    grid-column: 5; grid-row: 1;
    display: flex; align-items: baseline; gap: 6px;
    font-family: 'Oswald', sans-serif;
    padding: 0 1rem;
    justify-self: end;
}

/* Bouton "Defenses" (recap attaques subies) — DA MDE, sobre. */
.pvp-stat-bar-history-btn {
    grid-column: 3; grid-row: 1;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0.55rem 0.95rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pvp-stat-bar-history-btn:hover {
    background: rgba(var(--gold-rgb), 0.1);
    border-color: rgba(var(--gold-rgb), 0.5);
    color: var(--gold-text-warm);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.18);
}
.pvp-stat-bar-history-icon {
    width: 18px; height: 18px;
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.pvp-stat-bar-history-btn:hover .pvp-stat-bar-history-icon {
    opacity: 1;
}
.pvp-stat-bar-record .wins { color: var(--stat-green-light); font-size: 1.4rem; font-weight: 700; }
.pvp-stat-bar-record .losses { color: var(--stat-red-light); font-size: 1.4rem; font-weight: 700; }
.pvp-stat-bar-record small { font-size: 0.7rem; color: var(--text-secondary); letter-spacing: 1px; }
.pvp-stat-bar-record .sep { color: var(--text-secondary); opacity: 0.5; }
.pvp-stat-bar-progress {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(var(--gold-rgb), 0.15);
    display: flex; flex-direction: column; gap: 6px;
}
.pvp-stat-bar-progress-track {
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}
.pvp-stat-bar-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-text-warm));
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
    transition: width 0.4s ease;
}
.pvp-stat-bar-progress-hint {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: right;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Card défenseur : sprite + identité + stats + équipement
   ========================================================================== */
.pvp-defender-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.6rem;
}
.pvp-defender-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--gold-text-warm);
    text-transform: uppercase;
}
.pvp-defender-change-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    border-radius: 7px;
    color: var(--gold-text-warm);
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pvp-defender-change-btn:hover {
    background: rgba(var(--gold-rgb), 0.22);
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--gold-rgb), 0.2);
}

.pvp-defender-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.4rem;
    align-items: center;
}
.pvp-defender-sprite-wrap {
    position: relative;
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, var(--elem-color, rgba(var(--gold-rgb), 0.18)) 0%, transparent 65%);
}
.pvp-defender-sprite {
    width: 200px; height: 200px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}
.pvp-defender-info {
    display: flex; flex-direction: column; gap: 0.6rem;
    min-width: 0;
}
.pvp-defender-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1.5px;
    line-height: 1;
}
.pvp-defender-meta {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pvp-defender-stats-equip-row {
    display: flex;
    gap: 0.9rem;
    align-items: stretch;
    flex-wrap: nowrap;
}
.pvp-defender-stats {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
}
.pvp-defender-stat {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvp-defender-stat:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(var(--gold-rgb), 0.18);
}
.pvp-defender-stat img {
    width: 22px; height: 22px;
    opacity: 0.95;
    flex-shrink: 0;
}
.pvp-defender-stat b {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.3px;
    line-height: 1;
}
.pvp-defender-stat small {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    color: var(--text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-left: 2px;
}

/* Equipement : 5 écailles + cristal — placés à droite des stats */
.pvp-defender-equip {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}
.pvp-defender-equip-label {
    display: none; /* legacy : la zone n'a plus besoin d'un titre */
}
.pvp-defender-equip-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.pvp-equip-slot {
    --slot-accent: var(--gold);
    flex: 0 0 64px;
    height: 78px;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 6px 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(20, 8, 8, 0.6));
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    cursor: default;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvp-equip-slot.pvp-equip-slot-filled {
    border-color: var(--slot-accent);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4), 0 0 8px color-mix(in srgb, var(--slot-accent) 25%, transparent);
}
.pvp-equip-slot.pvp-equip-slot-filled:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4), 0 6px 16px color-mix(in srgb, var(--slot-accent) 35%, transparent);
}
.pvp-equip-tier-pill {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--slot-accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--slot-accent) 50%, transparent);
}
.pvp-equip-icon-wrap {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
}
.pvp-equip-slot-icon {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.pvp-equip-bonus-bar {
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold-text-light);
    letter-spacing: 0.5px;
    line-height: 1;
}
.pvp-equip-slot-empty {
    border-style: dashed;
    border-color: rgba(var(--gold-rgb), 0.18);
    opacity: 0.6;
}
.pvp-equip-slot-num {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--text-secondary);
    opacity: 0.5;
}
.pvp-equip-slot-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* Couleur d'accent par RARETÉ (tier de l'écaille). Refonte 2026-05-09 :
   l'accent est maintenant la couleur de la rareté T1-T6 (Fragile→Primo pur)
   au lieu de l'élément. Plus lisible : un slot rouge = écaille Ancien, un
   slot cyan = Primo pur, etc. */
.equip-tier-1 { --slot-accent: var(--rarity-fragile,        #9aa0a6); }
.equip-tier-2 { --slot-accent: var(--rarity-robuste,        #4488ff); }
.equip-tier-3 { --slot-accent: var(--rarity-alpha,          #aa44ff); }
.equip-tier-4 { --slot-accent: var(--rarity-ancien,         #ff2244); }
.equip-tier-5 { --slot-accent: var(--rarity-primordial,     #ff8800); }
.equip-tier-6 { --slot-accent: var(--rarity-primordial_pur, #22d3ee); }
/* Malus doublon : aucun visuel cote PvP — l'info reste dans le tooltip */

.pvp-equip-divider {
    width: 6px;
    align-self: stretch;
    background: transparent;
}

.pvp-equip-crystal { --slot-accent: #c084fc; flex-basis: 76px; }
.pvp-equip-crystal.pvp-equip-slot-filled .pvp-equip-bonus-bar {
    color: #e9d5ff;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.5);
}

/* ==========================================================================
   Barre d'essais d'attaque PVP (10 pips + regen)
   ========================================================================== */
.pvp-defender-entries-bar {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    border-top: 1px solid rgba(var(--gold-rgb), 0.18);
    padding-top: 1rem;
}
.pvp-entries-head {
    display: inline-flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.pvp-entries-head-icon {
    width: 20px; height: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.pvp-entries-head-label {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-main);
}
.pvp-entries-head-label b {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    color: var(--gold-text-warm);
    font-weight: 700;
    margin: 0 2px;
}
.pvp-entries-track {
    position: relative;
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.pvp-entries-fill {
    height: 100%;
    background: linear-gradient(90deg,
        rgba(var(--stat-red-rgb, 200, 60, 60), 0.85) 0%,
        var(--gold) 55%,
        var(--gold-text-warm) 100%);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    transition: width 0.45s cubic-bezier(0.2, 0.85, 0.3, 1);
    position: relative;
}
.pvp-entries-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
    border-radius: 7px 7px 0 0;
    pointer-events: none;
}
.pvp-entries-regen {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    min-width: 10ch;
    text-align: right;
}
.pvp-entries-regen:empty { display: none; }

/* ==========================================================================
   No defense placeholder (quand le user n'a pas encore choisi un défenseur)
   Refonte 2026-05-11 : aligne sur la DA arene PVP (centre, Cinzel uppercase,
   glow sang sur l'icone bouclier).
   ========================================================================== */
.pvp-no-defense {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1.4rem;
    text-align: center;
}
.pvp-no-defense-icon {
    width: 84px; height: 84px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(var(--stat-red-rgb), 0.25), transparent 70%),
        rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--stat-red-rgb), 0.5);
    box-shadow: 0 0 24px rgba(var(--stat-red-rgb), 0.3), inset 0 0 14px rgba(var(--stat-red-rgb), 0.1);
}
.pvp-no-defense-icon img {
    width: 42px; height: 42px;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(var(--stat-red-rgb), 0.5));
}
.pvp-no-defense-body {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    max-width: 540px;
}
.pvp-no-defense-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.pvp-no-defense-hint {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.pvp-no-defense-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    border: 1px solid var(--gold-text-warm);
    border-radius: 7px;
    color: #1a0808;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pvp-no-defense-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--gold-rgb), 0.4);
}

/* ==========================================================================
   Section "Six challengers" : header + grille adversaires
   ========================================================================== */
.pvp-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 1.6rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
}
.pvp-section-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-text-warm);
}
.pvp-section-refresh {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 6px;
    color: var(--gold-text-warm);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pvp-section-refresh:hover {
    background: rgba(var(--gold-rgb), 0.1);
    transform: rotate(90deg);
}

.pvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ==========================================================================
   Cards adversaires : sprite gros + identité + ELO/record + bouton combattre
   ========================================================================== */
.pvp-card-opp {
    --opp-accent: var(--gold);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    padding: 1.2rem 1rem 1rem;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--opp-accent) 12%, transparent), transparent 60%),
        linear-gradient(180deg, #160808, #0d0606);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(var(--gold-rgb), 0.1);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvp-card-opp:hover {
    transform: translateY(-3px);
    border-color: var(--opp-accent);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.6),
        0 0 18px color-mix(in srgb, var(--opp-accent) 30%, transparent),
        inset 0 1px 0 rgba(var(--gold-rgb), 0.15);
}
/* .pvp-card-opp-bot retire : matchmaking ne genere plus de bots filler. */
.pvp-card-opp-power {
    position: absolute;
    top: 8px; right: 8px;
    display: flex; flex-direction: column; align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 6px;
}
.pvp-card-opp-power-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.55rem;
    color: var(--text-secondary);
    letter-spacing: 1.2px;
}
.pvp-card-opp-power-val {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    line-height: 1;
}

.pvp-card-opp-sprite-wrap {
    position: relative;
    width: 160px; height: 160px;
    margin: 0.6rem 0 0.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--opp-accent) 30%, transparent) 0%, transparent 70%);
}
.pvp-card-opp-sprite {
    width: 150px; height: 150px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
.pvp-card-opp-element-chip {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--opp-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--opp-accent) 50%, transparent);
}
.pvp-card-opp-element-chip img { width: 18px; height: 18px; }

.pvp-card-opp-name {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
}
.pvp-card-opp-owner {
    margin-top: 2px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
    letter-spacing: 0.3px;
}
.pvp-card-opp-meta {
    margin-top: 0.5rem;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
}
.pvp-card-opp-divider {
    width: 70%;
    height: 1px;
    margin: 0.7rem 0 0.5rem;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent);
}
.pvp-card-opp-stats {
    display: flex; gap: 1rem; align-items: center;
    font-family: 'Oswald', sans-serif;
}
.pvp-card-opp-elo {
    display: flex; flex-direction: column; align-items: center;
}
.pvp-card-opp-elo b {
    font-size: 1.25rem;
    color: var(--gold-text-warm);
    letter-spacing: 0.5px;
}
.pvp-card-opp-elo small {
    font-size: 0.6rem;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pvp-card-opp-record {
    display: flex; flex-direction: column; align-items: center;
}
.pvp-card-opp-record .row { display: flex; gap: 4px; align-items: baseline; }
.pvp-card-opp-record .wins { color: var(--stat-green-light); font-weight: 700; font-size: 1rem; }
.pvp-card-opp-record .losses { color: var(--stat-red-light); font-weight: 700; font-size: 1rem; }
.pvp-card-opp-record .sep { color: var(--text-secondary); opacity: 0.5; }
.pvp-card-opp-record small {
    font-size: 0.6rem;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pvp-card-opp-fight {
    margin-top: 1rem;
    width: 100%;
    padding: 10px 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--stat-red-rgb), 0.5);
    border-radius: 8px;
    color: var(--stat-red-light);
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(var(--stat-red-rgb), 0.3);
    transition: all 0.2s ease;
}
.pvp-card-opp-fight:hover:not(:disabled) {
    background: rgba(var(--stat-red-rgb), 0.12);
    border-color: var(--stat-red);
    box-shadow: 0 0 16px rgba(var(--stat-red-rgb), 0.4), inset 0 0 14px rgba(var(--stat-red-rgb), 0.08);
    transform: translateY(-1px);
}
.pvp-card-opp-fight:disabled { opacity: 0.5; cursor: not-allowed; }
.pvp-card-opp-fight img {
    width: 16px; height: 16px;
    filter: drop-shadow(0 0 4px rgba(var(--stat-red-rgb), 0.5));
}

/* Skeletons (loading state) */
.pvp-card-skeleton {
    height: 320px;
    border-radius: 12px;
    background: linear-gradient(135deg, #160808, #0d0606);
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    position: relative;
    overflow: hidden;
}
.pvp-card-skeleton::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.05), transparent);
    animation: pvp-skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes pvp-skel-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Empty state */
.pvp-loading {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}
.pvp-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}
.pvp-empty img { width: 48px; height: 48px; opacity: 0.5; margin-bottom: 0.6rem; }
.pvp-empty-text { margin-bottom: 0.8rem; font-style: italic; }
.pvp-empty-btn {
    padding: 8px 16px;
    background: rgba(var(--gold-rgb), 0.15);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    border-radius: 6px;
    color: var(--gold-text-warm);
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
}
.pvp-empty-btn:hover { background: rgba(var(--gold-rgb), 0.25); }

/* ==========================================================================
   Modal "Picker dragon de défense" (overlay + liste)
   ========================================================================== */
.defense-picker-overlay {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 2rem;
    animation: pvp-fade-in 0.2s ease;
}
@keyframes pvp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.defense-picker {
    width: min(560px, 100%);
    max-height: 80vh;
    display: flex; flex-direction: column;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(var(--gold-rgb), 0.2);
}
.defense-picker-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
}
.defense-picker-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--gold-text-warm);
    letter-spacing: 1.5px;
}
.defense-picker-close {
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}
.defense-picker-close:hover { color: var(--gold-text-warm); }
.defense-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem;
    display: flex; flex-direction: column; gap: 6px;
}
.defense-picker-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.defense-picker-item:hover {
    background: rgba(var(--gold-rgb), 0.08);
    border-color: rgba(var(--gold-rgb), 0.4);
    transform: translateX(2px);
}
.defense-picker-item.active {
    background: rgba(var(--gold-rgb), 0.15);
    border-color: var(--gold);
}
.defense-picker-item canvas { flex-shrink: 0; }
.defense-picker-item-info { flex: 1; min-width: 0; }
.defense-picker-item-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: var(--gold-text-warm);
}
.defense-picker-item-meta {
    margin-top: 2px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   Leaderboard tab (préservé, styling cohérent)
   ========================================================================== */
.pvp-leaderboard-wrap { padding: 0; }

/* ==========================================================================
   Divisions tab : résumé + liste tiers
   ========================================================================== */
.div-current-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: center;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--division-color, var(--gold)) 18%, transparent), transparent 60%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.div-current-icon {
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, var(--division-color, rgba(var(--gold-rgb), 0.3)) 0%, transparent 70%);
}
.div-current-icon img { width: 72px; height: 72px; filter: drop-shadow(0 0 16px var(--division-color, var(--gold))); }
.div-current-info { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.div-current-name {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.div-current-elo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    color: var(--gold-text-light);
    letter-spacing: 1px;
}
.div-current-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
}
.div-current-bar-fill {
    height: 100%;
    transition: width 0.4s ease;
    box-shadow: 0 0 10px currentColor;
}
.div-current-hint {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.div-tiers-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
.div-tier-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(20, 8, 8, 0.6), rgba(13, 6, 6, 0.7));
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.div-tier-card:hover {
    border-color: rgba(var(--gold-rgb), 0.4);
    transform: translateX(2px);
}
.div-tier-card.is-current {
    border-color: var(--division-tier-color, var(--gold));
    box-shadow: 0 0 16px color-mix(in srgb, var(--division-tier-color, var(--gold)) 25%, transparent), inset 0 0 24px color-mix(in srgb, var(--division-tier-color, var(--gold)) 8%, transparent);
}
.div-tier-icon { width: 48px; height: 48px; flex-shrink: 0; }
.div-tier-icon img { width: 100%; height: 100%; filter: drop-shadow(0 0 8px var(--division-tier-color, var(--gold))); }
.div-tier-body { min-width: 0; }
.div-tier-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.div-tier-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--division-tier-color, var(--gold-text-warm));
}
.div-tier-range {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}
.div-tier-desc {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.3;
    font-style: italic;
}
.div-tier-you {
    padding: 4px 10px;
    background: rgba(var(--gold-rgb), 0.18);
    border: 1px solid var(--gold);
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ==========================================================================
   Encart hebdomadaire PVP (récompenses + entrées + œuf)
   Refonte 2026-05-09 - DA Arène (rouge/or sur fond noir)
   ========================================================================== */
.pvp-weekly-info {
    margin: 1rem 0;
    max-width: 100%;
}
.pvp-weekly-card {
    padding: 0;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.14), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 65%),
        linear-gradient(135deg, #1c0808 0%, #2a1010 50%, #1c0808 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--gold-rgb), 0.15);
    overflow: hidden;
    position: relative;
}
/* Header de l'encart hebdo : eyebrow "Saison hebdomadaire" + titre +
   timer reset a droite. Le JS rend cette structure dans renderPvpWeeklyInfo. */
.pvp-weekly-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
}
.pvp-weekly-head-left {
    display: flex; flex-direction: column; gap: 2px;
}
.pvp-weekly-head-eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.pvp-weekly-head-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.1;
}
.pvp-weekly-head-reset {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    flex-shrink: 0;
}
.pvp-weekly-head-reset-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pvp-weekly-head-reset-timer {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1px;
}

/* Badge "Classement actuel : #N" injecte au centre du header weekly. */
.pvp-weekly-head-rank {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 8px;
}
.pvp-weekly-head-rank-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.pvp-weekly-head-rank-val {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.4);
}

/* Body : oeuf de la semaine a gauche + grille de recompenses a droite. */
.pvp-weekly-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.2rem;
    padding: 1.1rem 1.3rem;
    align-items: stretch;
}

/* Compat retro : .pvp-weekly-top (ancien nom) ciblait le meme layout. */
.pvp-weekly-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.2rem;
    padding: 1.1rem 1.3rem;
    align-items: stretch;
}
.pvp-weekly-egg-showcase {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.8rem;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(var(--gold-rgb), 0.1), rgba(0, 0, 0, 0.4) 70%);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
}
.pvp-weekly-egg-glow {
    position: absolute; inset: -10%;
    background: radial-gradient(circle at center, rgba(255, 200, 100, 0.16), transparent 60%);
    pointer-events: none;
    animation: pvp-weekly-pulse 4s ease-in-out infinite;
}
@keyframes pvp-weekly-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.pvp-weekly-egg-sprite {
    width: 96px; height: 96px;
    position: relative; z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(var(--gold-rgb), 0.3));
}
.pvp-weekly-egg-sprite.egg-sprite-frame > i { transform: scale(0.75); }
.pvp-weekly-egg-meta { text-align: center; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.pvp-weekly-egg-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    color: var(--gold-text-light);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-style: italic;
    opacity: 0.85;
}
.pvp-weekly-egg-species {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.55);
    letter-spacing: 1.2px;
}
.pvp-weekly-reset {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.pvp-weekly-rewards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    align-content: center;
}
/* Cellule de recompenses : refonte 2026-05-11.
   Layout vertical clean : RANG -> trait separateur -> cendres -> +Œuf optionnel.
   Une seule typo (Oswald), bordure coloree par rang. */
.pvp-weekly-cell {
    --cell-accent: rgba(var(--gold-rgb), 0.4);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    padding: 0.85rem 0.6rem;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(15, 5, 5, 0.65));
    border: 1px solid var(--cell-accent);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Pas de hover : les cellules sont informatives, pas cliquables. */
.pvp-weekly-cell-rank {
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cell-accent-text, var(--text-secondary));
    line-height: 1;
}
.pvp-weekly-cell-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cell-accent), transparent);
}
.pvp-weekly-cell-ashes {
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1;
}
.pvp-weekly-cell-ashes-val {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 0.5px;
}
.pvp-weekly-cell-cendre { width: 18px; height: 18px; }
/* Sprite œuf grand format, sans contour : juste l'image + badge ×N optionnel. */
.pvp-weekly-cell-egg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
/* Pattern .egg-sprite-frame (cf. admin.css) : le parent crop, le <i> affiche
   la frame native 128×128 scalée. Marche pour toutes les grilles (3×3, 5×4…)
   car on lit toujours la frame (0,0) au coin haut-gauche du sheet. */
.pvp-weekly-cell-egg-sprite {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(var(--gold-rgb), 0.35));
}
.pvp-weekly-cell-egg-sprite > i { transform: scale(0.375); } /* 48/128 */
.pvp-weekly-cell-egg-mul {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-text-warm);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Couleur d'accent par rang (variable consommee par le rank + divider). */
.pvp-weekly-cell.rank-1 {
    --cell-accent: var(--gold);
    --cell-accent-text: var(--gold-text-warm);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.35), inset 0 0 18px rgba(var(--gold-rgb), 0.1);
}
.pvp-weekly-cell.rank-1 .pvp-weekly-cell-rank {
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
}
.pvp-weekly-cell.rank-2 {
    --cell-accent: #C0C8D8;
    --cell-accent-text: #C0C8D8;
    box-shadow: 0 0 10px rgba(192, 200, 216, 0.25), inset 0 0 14px rgba(192, 200, 216, 0.08);
}
.pvp-weekly-cell.rank-3 {
    --cell-accent: #CD7F32;
    --cell-accent-text: #CD7F32;
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.25), inset 0 0 14px rgba(205, 127, 50, 0.08);
}
.pvp-weekly-cell.rank-mid {
    --cell-accent: rgba(var(--gold-rgb), 0.3);
    --cell-accent-text: var(--text-main);
}
.pvp-weekly-cell.rank-low {
    --cell-accent: rgba(150, 150, 150, 0.3);
    --cell-accent-text: var(--text-secondary);
    opacity: 0.85;
}

.pvp-weekly-entries {
    padding: 0 1.3rem 1.1rem;
    position: relative;
    z-index: 1;
}
.pvp-weekly-entries-track {
    position: relative;
    height: 38px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    overflow: hidden;
}
.pvp-weekly-entries-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255, 90, 60, 0.3), rgba(var(--gold-rgb), 0.4));
    transition: width 0.4s ease;
}
.pvp-weekly-entries-content {
    position: relative;
    height: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 0 1rem;
    font-family: 'Oswald', sans-serif;
}
.pvp-weekly-entries-label {
    color: var(--gold-text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.pvp-weekly-entries-count { color: var(--text-main); font-size: 1.05rem; font-weight: 600; flex: 1; }
.pvp-weekly-entries-count b { font-size: 1.3rem; color: var(--gold-text-warm); margin-right: 2px; }
.pvp-weekly-entries-count .sep { color: var(--text-secondary); margin: 0 4px; opacity: 0.7; }
.pvp-weekly-entries-timer { color: var(--text-secondary); font-size: 0.82rem; letter-spacing: 0.3px; }

/* ==========================================================================
   Modal Divisions (ouverte au clic sur l'ELO)
   Refonte 2026-05-09 : transformation de l'ancien tab Divisions en modal.
   ========================================================================== */
.pvp-divisions-modal {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(.25,.8,.4,1);
}
.pvp-divisions-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}
.pvp-divisions-modal[hidden] { display: none; }
.pvp-divisions-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pvp-divisions-modal-card {
    position: relative;
    width: min(640px, 100%);
    max-height: 86vh;
    display: flex; flex-direction: column;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.12), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 70%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(var(--gold-rgb), 0.2);
    transform: translateY(16px) scale(0.96);
    transition: transform 0.32s cubic-bezier(.25,.8,.4,1);
}
.pvp-divisions-modal.is-active .pvp-divisions-modal-card {
    transform: translateY(0) scale(1);
}
.pvp-divisions-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
    flex-shrink: 0;
}
.pvp-divisions-modal-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-text-warm);
}
.pvp-divisions-modal-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pvp-divisions-modal-close:hover {
    background: rgba(var(--stat-red-rgb), 0.15);
    border-color: rgba(var(--stat-red-rgb), 0.5);
    color: var(--stat-red-light);
}
.pvp-divisions-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gold-rgb), 0.3) transparent;
}
.pvp-divisions-modal-body::-webkit-scrollbar { width: 6px; }
.pvp-divisions-modal-body::-webkit-scrollbar-track { background: transparent; }
.pvp-divisions-modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.3);
    border-radius: 3px;
}
.pvp-divisions-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb), 0.5); }

/* ==========================================================================
   Animation d'entrée des cards opponents (subtile)
   ========================================================================== */
.pvp-card-opp.pvp-card-in {
    animation: pvp-card-in 0.4s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
@keyframes pvp-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    .pvp-defender-stats-equip-row { flex-direction: column; gap: 0.7rem; }
    .pvp-defender-equip-row { flex-wrap: wrap; }
}
@media (max-width: 980px) {
    .pvp-defender-body { grid-template-columns: 1fr; }
    .pvp-defender-sprite-wrap { margin: 0 auto; }
    .pvp-defender-stats { justify-content: center; }
    .pvp-grid { grid-template-columns: repeat(2, 1fr); }
    .pvp-weekly-top, .pvp-weekly-body { grid-template-columns: 1fr; }
    .pvp-weekly-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .pvp-weekly-head-reset { align-items: flex-start; }
    .pvp-weekly-rewards-grid { grid-template-columns: repeat(3, 1fr); }
    /* La pill œuf est devenue compacte (icône + badge) — on la laisse visible
       même en small screen, c'est lisible. */
    .pvp-defender-entries-bar { grid-template-columns: 1fr; gap: 0.6rem; text-align: center; }
    .pvp-entries-meta { justify-content: center; }
    .pvp-entries-regen { text-align: center; }
}
@media (max-width: 600px) {
    .pvp-grid { grid-template-columns: 1fr; }
}

/* ── Barre ELO / Division / Record / Defenses / Progress ──
   Layout compact des 1000px : 3 lignes compactes au lieu d'un empilement
   vertical de 5 blocs. On cache le CTA texte "Voir toutes les divisions"
   pour ne garder que la fleche (le pointer reste, le block reste cliquable). */
@media (max-width: 1000px) {
    .pvp-stat-bar {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        grid-column-gap: 0.6rem;
        grid-row-gap: 0.7rem;
    }
    .pvp-stat-bar-summary {
        grid-column: 1 / -1; grid-row: 1;
        gap: 0.7rem;
        padding: 0.45rem 0.7rem 0.45rem 0.6rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .pvp-stat-bar-elo {
        padding: 0 0.4rem;
        flex-shrink: 0;
        flex-direction: column;
        gap: 2px;
    }
    .pvp-stat-bar-elo-val { font-size: 1.7rem; }
    .pvp-stat-bar-elo-label { font-size: 0.6rem; letter-spacing: 2px; }
    .pvp-stat-bar-division {
        gap: 6px;
        padding-left: 0.6rem;
        min-width: 0;
        flex: 1 1 auto;
    }
    .pvp-stat-bar-division-icon { width: 30px; height: 30px; flex-shrink: 0; }
    .pvp-stat-bar-division-name { font-size: 1rem; letter-spacing: 0.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pvp-stat-bar-summary-cta {
        margin-left: auto;
        padding: 4px 6px;
        font-size: 0;
        letter-spacing: 0;
        border-left: none;
        flex-shrink: 0;
    }
    .pvp-stat-bar-summary-cta svg { width: 16px; height: 16px; }
    .pvp-stat-bar-history-btn {
        grid-column: 1; grid-row: 2;
        justify-content: center;
        padding: 0.45rem 0.7rem;
        font-size: 0.72rem;
        letter-spacing: 1px;
    }
    .pvp-stat-bar-history-label { white-space: nowrap; }
    .pvp-stat-bar-record {
        grid-column: 2; grid-row: 2;
        padding: 0 0.5rem;
        justify-self: end;
    }
    .pvp-stat-bar-record .wins,
    .pvp-stat-bar-record .losses { font-size: 1.15rem; }
    .pvp-stat-bar-progress {
        grid-column: 1 / -1; grid-row: 3;
        margin-top: 0.3rem;
        padding-top: 0.6rem;
    }
    .pvp-stat-bar-progress-hint { font-size: 0.7rem; }
}

/* Tres petits ecrans (≤ 360px) : la barre Record et le bouton Defenses
   passent en pleine largeur empiles pour ne pas tronquer. */
@media (max-width: 360px) {
    .pvp-stat-bar {
        grid-template-columns: 1fr;
    }
    .pvp-stat-bar-history-btn { grid-column: 1; }
    .pvp-stat-bar-record { grid-column: 1; grid-row: 3; justify-self: center; }
    .pvp-stat-bar-progress { grid-row: 4; }
}

/* ============================================
   Recap des defenses PVP — refonte 2026-05-10, alignement DA arene PVP
   (cf. .pvp-divisions-modal). Backdrop blur + card noir profond + gradient
   sang/or, header Cinzel uppercase, rows avec borders teintees V/D.
   ============================================ */
.defhist-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(.25,.8,.4,1);
}
.defhist-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.defhist-overlay[hidden] { display: none; }
.defhist-modal {
    position: relative;
    width: min(880px, 100%);
    /* Hauteur fixe (capee au viewport) pour que la modale ne change pas
       de taille selon le nombre de lignes ou le tab actif. Le body interne
       scroll quand la liste deborde. */
    height: min(720px, 86vh);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, rgba(255, 90, 60, 0.12), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--gold-rgb), 0.08), transparent 70%),
        linear-gradient(135deg, #1a0a0a 0%, #260f10 50%, #1a0a0a 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(var(--gold-rgb), 0.2);
    transform: translateY(16px) scale(0.96);
    transition: transform 0.32s cubic-bezier(.25,.8,.4,1);
}
.defhist-overlay.is-active .defhist-modal {
    transform: translateY(0) scale(1);
}
.defhist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
    flex-shrink: 0;
}
.defhist-header h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-text-warm);
}
.defhist-header h3 img {
    width: 22px; height: 22px;
    opacity: 0.95;
    filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.3));
}
.defhist-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.defhist-close:hover {
    background: rgba(var(--stat-red-rgb), 0.15);
    border-color: rgba(var(--stat-red-rgb), 0.5);
    color: var(--stat-red-light);
}
/* Onglets Attaques / Défenses : palette gold-ish coherente avec le header. */
.defhist-tabs {
    display: flex;
    gap: 6px;
    padding: 0.6rem 1.4rem 0;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
    flex-shrink: 0;
}
.defhist-tab {
    background: transparent;
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    padding: 0.5rem 1.1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    margin-bottom: -1px; /* la tab active mord sur le border-bottom du conteneur */
}
.defhist-tab:hover {
    color: var(--gold-text-warm);
    background: rgba(var(--gold-rgb), 0.06);
}
.defhist-tab.is-active {
    background: rgba(var(--gold-rgb), 0.12);
    border-color: rgba(var(--gold-rgb), 0.45);
    color: var(--gold-text-warm);
    box-shadow: 0 -2px 8px rgba(var(--gold-rgb), 0.15);
}

.defhist-body {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
    /* flex: 1 → remplit l'espace restant entre header/tabs et bas de modale,
       donc la hauteur de la modale est constante meme avec 0 / 5 / 50 lignes.
       min-height conserve pour eviter le pop pendant Chargement... */
    flex: 1 1 auto;
    min-height: 240px;
}
.defhist-loading,
.defhist-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Resume V/D en tete de liste */
.defhist-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
}
.defhist-stat-win {
    color: var(--stat-green-light, #4ade80);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.defhist-stat-loss {
    color: var(--stat-red-light, #f87171);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.defhist-stat-sep { color: var(--text-secondary); opacity: 0.5; }
.defhist-stat-total {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Liste des attaques */
.defhist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.defhist-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px 1fr 150px;
    gap: 12px;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.defhist-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.defhist-row-won {
    border-color: rgba(var(--stat-green-rgb, 74, 222, 128), 0.5);
}
.defhist-row-lost {
    border-color: rgba(var(--stat-red-rgb), 0.5);
}
.defhist-row-won:hover {
    border-color: var(--stat-green, #4ade80);
    box-shadow: 0 6px 16px rgba(var(--stat-green-rgb, 74, 222, 128), 0.18);
}
.defhist-row-lost:hover {
    border-color: var(--stat-red);
    box-shadow: 0 6px 16px rgba(var(--stat-red-rgb), 0.2);
}
.defhist-row-result {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.defhist-row-won .defhist-row-result { color: var(--stat-green-light, #4ade80); }
.defhist-row-lost .defhist-row-result { color: var(--stat-red-light, #f87171); }
.defhist-row-elo-delta {
    margin-top: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: none;
}
.defhist-row-won .defhist-row-elo-delta { color: var(--stat-green-light, #4ade80); }
.defhist-row-lost .defhist-row-elo-delta { color: var(--stat-red-light, #f87171); }
/* Aligne attacker/defender en haut pour que la dragon-row reste au meme
   niveau visuellement entre les deux blocs. */
.defhist-row-attacker,
.defhist-row-defender {
    align-self: start;
}
/* Premiere ligne du bloc : label uppercase + pseudo (a droite, attaquant
   uniquement). Defenseur n'a que le label, meme structure pour matcher
   la hauteur de la dragon-row dessous. */
.defhist-row-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.defhist-row-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Oswald', sans-serif;
    flex-shrink: 0;
}
.defhist-row-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--gold-text-warm);
    font-size: 0.95rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.defhist-row-dragon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-main);
    flex-wrap: wrap;
}
.defhist-row-dragon img {
    width: 18px; height: 18px;
    flex-shrink: 0;
}
.defhist-row-level {
    display: inline-flex; align-items: center;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    color: var(--gold-text-warm);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.defhist-row-rarity {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}
.defhist-row-vs {
    text-align: center;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 0.6;
    letter-spacing: 1px;
}
.defhist-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.defhist-row-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}
@media (max-width: 720px) {
    .defhist-row {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .defhist-row-vs { display: none; }
    .defhist-row-meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}