body.leaderboard-detail-open { overflow:hidden; }
.leaderboardDetailViewer { position:fixed; inset:0; z-index:6750; font-family:"Poppins",sans-serif; }
.leaderboardDetailViewer[hidden], .leaderboardGlyphViewer[hidden] { display:none; }
.leaderboardDetailBackdrop { position:absolute; inset:0; border:0; background:rgba(0,5,14,.82); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }

/* Shell only. Creature/team content reuses the game's existing classes directly. */
.leaderboardDetailDialog {
    position:absolute;
    top:50%;
    left:50%;
    display:flex;
    flex-direction:column;
    container-type:inline-size;
    width:min(calc(100% - 14px),440px);
    max-height:calc(100dvh - 18px);
    overflow:hidden;
    border:1px solid rgba(129,206,239,.58);
    border-radius:13px;
    background:linear-gradient(180deg,#0b2a42,#071d31 58%,#061827);
    color:#fff;
    box-shadow:0 22px 70px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.07);
    transform:translate(-50%,-50%);
}
.leaderboardDetailHeader {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:6px 7px 6px 13px;
    border-bottom:1px solid rgba(172,211,235,.18);
    background:linear-gradient(180deg,#163a56,#10283b);
}
.leaderboardDetailHeading { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; }
.leaderboardDetailHeading small { display:block; margin-bottom:2px; color:#90bdd5; font-size:7px; font-weight:800; letter-spacing:.55px; line-height:1; text-transform:uppercase; }
.leaderboardDetailHeading strong { display:block; overflow:hidden; color:#fff; font-size:16px; font-weight:800; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.leaderboardDetailClose,.leaderboardDetailBack,.leaderboardCodexNavButton,.leaderboardGlyphViewerClose {
    display:grid;
    flex:0 0 auto;
    place-items:center;
    width:31px;
    height:31px;
    margin:0;
    padding:0;
    border:1px solid rgba(255,228,168,.72);
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:13px;
    cursor:pointer;
}
.leaderboardDetailBack { border-color:rgba(135,217,247,.6); color:#bceeff; }
.leaderboardDetailBack[hidden],.leaderboardCodexNavButton[hidden] { display:none !important; }
.leaderboardCodexNavButton { border-color:rgba(135,217,247,.45); color:#bceeff; }
.leaderboardDetailClose:hover,.leaderboardDetailBack:hover,.leaderboardCodexNavButton:hover,.leaderboardGlyphViewerClose:hover,
.leaderboardDetailClose:focus-visible,.leaderboardDetailBack:focus-visible,.leaderboardCodexNavButton:focus-visible,.leaderboardGlyphViewerClose:focus-visible { outline:0; filter:brightness(1.14); }
.leaderboardDetailBody { min-height:0; padding:8px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#367c9d rgba(3,18,30,.32); }

/* Team summary remains leaderboard-specific. The six slots themselves are exactly teamQuickSlots/teamQuickSlot + quick medallions. */
.leaderboardTeamSummary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    min-height:50px;
    padding:8px 11px;
    border:1px solid rgba(111,194,229,.28);
    border-radius:9px;
    background:rgba(6,34,54,.72);
}
.leaderboardTeamSummary span { display:flex; flex-direction:column; min-width:0; }
.leaderboardTeamSummary span:last-child { text-align:right; }
.leaderboardTeamSummary small { color:#8fc4de; font-size:7px; font-weight:800; text-transform:uppercase; }
.leaderboardTeamSummary strong { overflow:hidden; color:#fff0a8; font-size:14px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.leaderboardTeamQuickSlots {
    width:100%;
    height:90px;
    margin-top:7px;
    padding:0;
}
.leaderboardTeamQuickSlot { cursor:pointer; }
.leaderboardTeamQuickSlot[role='button']:hover,
.leaderboardTeamQuickSlot[role='button']:focus-visible { outline:0; filter:brightness(1.08); }

/* Read-only creature viewer: same creature panel body/identity/controls/glyph classes, no tab/action bar. */
.leaderboardDetailViewer.is-creature .leaderboardDetailBody { padding:0; }
.leaderboardCreatureReadonlyBody { max-height:calc(100dvh - 64px); overflow-y:auto; }
.leaderboardCreatureReadonlyControls { display:flex; flex-direction:column; justify-content:center; }
.leaderboardReadonlyGlyphWorkspace { width:100%; border-bottom:0; }
.leaderboardReadonlyGlyphEquippedPanel { width:100%; }
.leaderboardReadonlyGlyphBonus .creatureGlyphBonusRow em { white-space:nowrap; }

/* Codex creature inspector: same validated identity layout, without glyphs. */
.leaderboardDetailViewer.is-codex .leaderboardDetailHeading small { display:none; }
.leaderboardDetailViewer.is-codex .leaderboardDetailBody { padding:0; }
.leaderboardCodexCreatureBody { grid-template-columns:1fr; max-height:none; overflow:visible; }
.leaderboardCodexCreatureBody .leaderboardCreatureReadonlyIdentity { border-bottom:0; }
.leaderboardCodexFooter { display:flex; align-items:stretch; gap:12px; padding:9px 12px 10px; border-top:1px solid rgba(142,220,255,.14); }
.leaderboardCodexEvolution { flex:1 1 auto; min-width:0; padding:0; border-top:0; text-align:left; }
.leaderboardCodexEvolution > small { display:block; margin-bottom:5px; color:#8edcff; font-size:8px; font-weight:900; letter-spacing:.08em; text-align:left; }
.leaderboardCodexEvolutionPortraits { display:flex; align-items:center; justify-content:flex-start; gap:7px; min-height:56px; }
.leaderboardCodexEvolutionPortrait { display:block; flex:0 1 58px; width:58px; min-width:0; padding:0; border:0; background:transparent; cursor:pointer; }
.leaderboardCodexEvolutionPortrait img { display:block; width:100%; aspect-ratio:1; border:0; object-fit:contain; background:transparent; box-shadow:none; transition:transform .12s ease,filter .12s ease,opacity .12s ease; }
.leaderboardCodexEvolutionPortrait:not(.is-current) img { opacity:.76; }
.leaderboardCodexEvolutionPortrait.is-current { cursor:default; }
.leaderboardCodexEvolutionPortrait.is-current img { transform:scale(1.08); filter:brightness(1.12); opacity:1; }
.leaderboardCodexEvolutionPortrait:not(.is-current):hover img,.leaderboardCodexEvolutionPortrait:not(.is-current):focus-visible img { transform:scale(1.06); filter:brightness(1.12); opacity:1; }
.leaderboardCodexEvolutionPortrait:focus-visible { outline:0; }
.leaderboardDetailViewer.is-codex-loading .leaderboardCodexEvolutionPortraits,.leaderboardDetailViewer.is-codex-loading .leaderboardCodexNavButton { opacity:.55; pointer-events:none; }
.leaderboardCodexCreatureActions { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:auto; padding:0 0 0 12px; border-left:1px solid rgba(142,220,255,.22); }
.leaderboardCodexPortraitAction {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:172px;
    height:32px;
    padding:0 14px;
    border:1px solid rgba(112,213,247,.44);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(14,82,111,.64),rgba(8,54,77,.72));
    color:#dff8ff;
    font:800 8px/1 "Poppins",sans-serif;
    letter-spacing:.04em;
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    cursor:pointer;
}
.leaderboardCodexPortraitAction:hover,.leaderboardCodexPortraitAction:focus-visible { outline:0; filter:brightness(1.12); }
.leaderboardCodexPortraitAction:disabled { cursor:wait; opacity:.7; }

/* The snapshot has no editable controls; keep the exact visual blocks, hide action-only affordances if inherited. */
.leaderboardCreatureReadonlyBody .creatureGlyphBestDpsButton,
.leaderboardCreatureReadonlyBody .creatureGlyphUnequipAllButton { display:none !important; }
.leaderboardCreatureReadonlyBody .creatureGlyphEquippedHeader { padding-right:0; }

/* Glyph modal shell; restore the previous compact read-only popup styling. */
.leaderboardGlyphViewer { position:absolute; inset:0; z-index:6; }
.leaderboardGlyphViewerBackdrop { position:absolute; inset:0; border:0; background:rgba(0,5,12,.72); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.leaderboardGlyphViewerDialog {
    position:absolute;
    top:50%;
    left:50%;
    width:min(calc(100% - 24px),250px);
    overflow:hidden;
    border:1px solid rgba(91,211,246,.72);
    border-radius:12px;
    background:linear-gradient(180deg,#0c3048,#061e31);
    color:#fff;
    box-shadow:0 16px 45px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.07);
    transform:translate(-50%,-50%);
}
.leaderboardGlyphViewerHeader {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:39px;
    padding:5px 6px 5px 12px;
    border-bottom:1px solid rgba(111,207,239,.20);
    background:linear-gradient(180deg,#164663,#0e3148);
}
.leaderboardGlyphViewerHeader strong { color:#8ce9ff; font-size:10px; font-weight:900; letter-spacing:.4px; }
.leaderboardGlyphViewerBody { padding:0; }
.leaderboardGlyphViewerCard {
    min-width:0;
    padding:12px 8px 8px;
    border:0;
    border-radius:0;
    background:rgba(2,25,40,.50);
}
.leaderboardGlyphViewerTop { padding-right:0; border-bottom:0; }
.leaderboardGlyphViewerVisual,
.leaderboardGlyphViewerVisual .glyphVisual {
    width:64px;
    height:64px;
}
.leaderboardGlyphViewerMeta > strong { color:#eaf8ff; font-size:11px; font-weight:900; }
.leaderboardGlyphViewerMeta > small {
    overflow:hidden;
    max-width:100%;
    color:#8fb8cd;
    font-size:7px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.leaderboardGlyphStars { min-height:13px; }
.leaderboardGlyphViewerMain { margin-top:7px; }
.leaderboardGlyphViewerStats {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
    margin-top:4px;
}
.leaderboardGlyphViewerStat {
    display:grid;
    grid-template-columns:18px minmax(0,1fr) auto;
    align-items:center;
    gap:4px;
    min-width:0;
}
.leaderboardGlyphViewerStat > img { width:16px; height:16px; object-fit:contain; }
.leaderboardGlyphViewerStatLabels { display:flex; flex-direction:column; min-width:0; }
.leaderboardGlyphViewerStatLabels strong { color:#eef9ff; font-size:8px; font-weight:900; }
.leaderboardGlyphViewerStatLabels small { color:#7ea6bb; font-size:6px; font-weight:800; }
.leaderboardGlyphViewerStat > em {
    color:#f5f7fb;
    font-size:8px;
    font-style:normal;
    font-weight:900;
    white-space:nowrap;
}
.leaderboardGlyphViewerStat.creatureGlyphDetailMainRow > em { color:#ffd36b; }

@media (max-width:390px) {
    .leaderboardDetailDialog { width:min(calc(100% - 8px),430px); }
    .leaderboardCodexFooter { gap:8px; padding:8px 9px 9px; }
    .leaderboardCodexEvolutionPortraits { gap:5px; min-height:48px; }
    .leaderboardCodexEvolutionPortrait { flex-basis:46px; width:46px; }
    .leaderboardCodexCreatureActions { padding-left:8px; }
    .leaderboardCodexPortraitAction { min-width:126px; padding-inline:8px; font-size:7.2px; }
    .leaderboardDetailBody { padding:6px; }
    .leaderboardTeamSummary { min-height:46px; padding:7px 8px; }
    .leaderboardTeamSummary strong { font-size:12px; }
    .leaderboardTeamQuickSlots { height:82px; }
}

/* Creature viewer / Codex — element + role only, same validated layout as creature modal. */
.leaderboardCreatureReadonlyIdentity {
    grid-template-areas:
        "med stats primary"
        "med stats primary"
        "power stats primary";
}

.leaderboardCreatureReadonlyIdentity .leaderboardCreatureMetaIcons {
    grid-area:primary;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:center;
    align-items:center;
    justify-items:stretch;
    width:100%;
    height:100%;
    min-width:0;
    margin:0;
    gap:6px;
}

.leaderboardCreatureReadonlyIdentity .leaderboardCreatureMetaIcon {
    display:grid;
    place-items:center;
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:1;
    padding:0;
    cursor:help;
}

.leaderboardCreatureReadonlyIdentity .leaderboardCreatureMetaIcon img {
    width:90%;
    height:90%;
    object-fit:contain;
}

/* Tooltip is appended to body, therefore it must sit above the leaderboard modal (z-index 6750). */
.battleRewardTooltip.leaderboardCreatureMetaTooltip {
    z-index:6900 !important;
}

@container (max-width:424px) {
    .leaderboardCreatureReadonlyIdentity .leaderboardCreatureMetaIcons {
        gap:5px;
    }
}

/* Codex : première zone de boss actuellement débloquée dans la rotation serveur. */
.leaderboardCodexCombatZones {
    display:flex;
    flex:0 0 auto;
    min-width:92px;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0 12px;
    border-left:1px solid rgba(142,220,255,.18);
    text-align:center;
}
.leaderboardCodexCombatZones > small {
    display:block;
    margin-bottom:8px;
    color:#8edcff;
    font-size:8px;
    font-weight:700;
    letter-spacing:.06em;
    white-space:nowrap;
}
.leaderboardCodexCombatZoneList {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
}
.leaderboardCodexCombatZone {
    display:grid;
    place-items:center;
    min-width:50px;
    height:30px;
    padding:0 8px;
    border:1px solid rgba(89,196,236,.42);
    border-radius:8px;
    background:linear-gradient(180deg,rgba(13,56,82,.84),rgba(4,29,48,.94));
    color:#dff8ff;
    font:900 13px/1 "Poppins",sans-serif;
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.34);
}
button.leaderboardCodexCombatZone {
    appearance:none;
    cursor:pointer;
    touch-action:manipulation;
    transition:transform .12s ease,filter .12s ease,border-color .12s ease;
}
button.leaderboardCodexCombatZone:hover,
button.leaderboardCodexCombatZone:focus-visible {
    outline:none;
    filter:brightness(1.15);
    border-color:rgba(134,226,255,.78);
}
button.leaderboardCodexCombatZone:active {
    transform:scale(.95);
}
button.leaderboardCodexCombatZone:disabled {
    cursor:wait;
    opacity:.72;
}

@media (max-width: 520px) {
    .leaderboardCodexCombatZones {
        min-width:76px;
        padding-inline:8px;
    }
    .leaderboardCodexCombatZones > small {
        font-size:7px;
    }
    .leaderboardCodexCombatZone {
        min-width:44px;
        height:28px;
        font-size:11px;
    }
}