/* ==========================================================================
   Design v3 — Žebříčky (/zebricky)
   View:     app/Views/v3/leaderboard.php   ($pageCss = 'leaderboard', $pageJs = 'leaderboard',
                                             $pageClass = 'b3-page-leaderboard')
   Prototyp: design_handoff_l2beleth/design/Zebricky v3.dc.html
   Prefix:   .lb3-
   ========================================================================== */

/* Per-page pozadí (zlatá záře vpravo nahoře) */
body.b3-page-leaderboard {
    --b-page-bg: radial-gradient(800px 500px at 70% 200px, rgba(217, 181, 98, .10), transparent 70%), #070d0e;
}

/* Obal: .b-page (max 1240) jako flex-wrap: aside + sekce */
.lb3 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px clamp(40px, 6vw, 88px);
}

/* ── Levý sloupec ───────────────────────────────────────────────────────── */
.lb3-aside {
    flex: 1 1 220px;
    max-width: 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.lb3-head { display: flex; flex-direction: column; gap: 8px; }
.lb3-kicker {
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .28em;
    color: #a6ebdd;
}
.lb3-h1 { font-size: clamp(36px, 4.4vw, 56px); }
/* „Leaderboard“ je o ~50 % delší než „Žebříčky“ → při 4.4vw by přetekl 280px sloupec. */
.lb3-h1:lang(en) { font-size: clamp(30px, 2.95vw, 36px); }

/* Svislý tablist (bez JS = kotvy na panely) */
.lb3-tabs {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #1d2d31;
}
.lb3-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: -1px;
    padding: 11px 0 11px 18px;
    border-left: 1px solid transparent;
    color: #a4b6b4;
    font-size: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.lb3-tab > i { flex: none; font-size: 18px; }
.lb3-tab:hover { color: #e3c47f; }
.lb3-tab[aria-selected="true"] {
    border-left-color: #d9b562;
    color: #e3c47f;
    text-shadow: 0 0 14px rgba(217, 181, 98, .5);
}
/* Bez JS není žádný tab „vybraný“ (vidět jsou všechny panely). */
html:not(.b3-js) .lb3-tab[aria-selected="true"] {
    border-left-color: transparent;
    color: #a4b6b4;
    text-shadow: none;
}
html:not(.b3-js) .lb3-tab:hover { color: #e3c47f; }

.lb3-note {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: #6f8584;
}

/* ── Pravá sekce ────────────────────────────────────────────────────────── */
.lb3-main {
    flex: 3 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 72px;
    container-type: inline-size;
}
.lb3-panel { display: flex; flex-direction: column; gap: 40px; }
.lb3-panel:focus { outline: none; }
.lb3-panel:focus-visible { outline: 2px solid var(--b-gold); outline-offset: 6px; }
.b3-js .lb3-panel:not(.is-active) { display: none; }
/* Než leaderboard.js nastaví .lb3-ready (nebo když se nenačte / selže): tab = kotva #lb-xxx,
   zobrazí se cílový panel (:target) místo serverově aktivního, žádný tab nevypadá vybraně. */
.b3-js .lb3:not(.lb3-ready):has(.lb3-panel:target) .lb3-panel:not(:target) { display: none; }
.b3-js .lb3:not(.lb3-ready) .lb3-panel:target { display: flex; }
.b3-js .lb3:not(.lb3-ready):has(.lb3-panel:target) .lb3-tab[aria-selected="true"] {
    border-left-color: transparent;
    color: #a4b6b4;
    text-shadow: none;
}
.b3-js .lb3:not(.lb3-ready):has(.lb3-panel:target) .lb3-tab:hover { color: #e3c47f; }

/* Nadpis prázdného panelu: viditelný jen bez JS (s JS nese kontext aktivní tab). */
.lb3-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--b-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    font-variant: small-caps;
    letter-spacing: .24em;
    color: #e3c47f;
}
.b3-js .lb3-panel__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Karta šampiona (#1) */
.lb3-champ {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(32px, 4vw, 52px);
    overflow: hidden;
    border: 1px solid rgba(138, 106, 42, .6);
    border-radius: 18px;
    background: radial-gradient(500px 300px at 85% 30%, rgba(217, 181, 98, .18), transparent 70%), #0b1315;
}
.lb3-champ__numeral {
    position: absolute;
    right: clamp(16px, 4vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--b-display);
    font-weight: 900;
    font-size: clamp(120px, 16vw, 220px);
    line-height: 1;
    color: rgba(217, 181, 98, .12);
    pointer-events: none;
    user-select: none;
}
.lb3-champ__cat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--b-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    font-variant: small-caps;
    letter-spacing: .24em;
    color: #e3c47f;
}
.lb3-champ__name {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: #f6ead0;
    text-shadow: 0 0 30px rgba(217, 181, 98, .4);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.lb3-champ__meta {
    position: relative;
    font-size: 18px;
    font-style: italic;
    color: #cfdcda;
}
.lb3-champ__value {
    position: relative;
    margin-top: 10px;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    color: #3cc9b4;
}

/* Pořadí II… */
.lb3-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lb3-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #14201f;
}
.lb3-row__rank {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 18px;
    color: #6f8584;
}
.lb3-row--2 .lb3-row__rank { color: #c9d4d3; }
.lb3-row--3 .lb3-row__rank { color: #c08a55; }
.lb3-row__who {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.lb3-row__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    color: #e7eeec;
}
/* Při nedostatku místa se nejdřív zkracuje meta, až pak jméno. */
.lb3-row__meta {
    flex: 0 1000 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-style: italic;
    color: #6f8584;
}
.lb3-row__lead {
    flex: 1;
    min-width: 20px;
    border-bottom: 1px dotted #2a3e42;
}
.lb3-row__value {
    max-width: 45vw;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 16px;
    text-align: right;
    white-space: nowrap;
}
.lb3-row__sub,
.lb3-champ__sub { white-space: normal; }

/* Úzká sekce (mobil): meta pod jméno, vodicí linka zůstává na řádku se jménem. */
@container (max-width: 479.98px) {
    .lb3-row__who { flex-wrap: wrap; row-gap: 0; }
    /* jméno + mezera 12px + linka ≥ 8px se vždy vejdou na první řádek */
    .lb3-row__name { max-width: calc(100% - 20px); }
    .lb3-row__lead { order: 1; min-width: 8px; }
    .lb3-row__meta { order: 2; flex: 1 1 100%; }
}