/* ==========================================================================
   Design v3 — Status serveru (/status)
   View:     app/Views/v3/status.php   ($pageCss = 'status', $pageJs = 'status',
                                        $pageClass = 'b3-page-status')
   Prototyp: design_handoff_l2beleth/design/Status v3.dc.html
   Prefix:   .st3-
   Pozn.: legacy texty jsou s velkým písmenem („Všichni“, „Hráčů online“); prototyp je má
   v small-caps malými písmeny → text-transform: lowercase tam, kde to prototyp tak ukazuje.
   ========================================================================== */

/* Per-page pozadí (tyrkysová záře za kruhem grand bossů) */
body.b3-page-status {
    --b-page-bg: radial-gradient(900px 600px at 50% 420px, rgba(60, 201, 180, .10), transparent 70%), #070d0e;
}

/* Obal: .b-page (max 1240) + flex column */
.st3 {
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 8vw, 104px);
}
.st3-top {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 32px);
}

/* ── Údržba (není v prototypu; legacy banner v jazyce v3) ──────────────── */
.st3-maint {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px clamp(18px, 2.6vw, 28px);
    border: 1px solid rgba(138, 106, 42, .6);
    border-radius: 14px;
    background: radial-gradient(420px 260px at 100% 0, rgba(217, 181, 98, .14), transparent 70%), #0b1315;
}
.st3-maint__icon { flex: none; font-size: 28px; line-height: 1; color: #d9b562; }
.st3-maint__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st3-maint__title {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: #e3c47f;
}
.st3-maint__msg { margin: 0; font-size: 17px; font-style: italic; line-height: 1.5; color: #cfdcda; }

/* ── Hlavička ───────────────────────────────────────────────────────────── */
.st3-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 48px;
}
.st3-head__title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st3-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .28em;
    color: #a6ebdd;
}
.st3-kicker__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3cc9b4;
    box-shadow: 0 0 10px #3cc9b4;
}
.st3-kicker__dot--maint { background: #d9b562; box-shadow: 0 0 10px #d9b562; }

.st3-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 0;
}
.st3-stat { display: flex; flex-direction: column; gap: 2px; }
.st3-stat__label {
    margin: 0;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: .2em;
    text-transform: lowercase;
    color: #a4b6b4;
}
.st3-stat__value {
    margin: 0;
    font-family: var(--b-display);
    font-size: 34px;
    font-weight: 700;
}
.st3-stat__value--teal { color: #3cc9b4; }
.st3-stat__of { font-size: 20px; color: #1d7a6e; }

/* ── Grand bossové v kruhu ──────────────────────────────────────────────── */
.st3-grand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.st3-ring {
    position: relative;
    width: min(100%, 640px);
    aspect-ratio: 1;
    container-type: inline-size;
}
.st3-ring__dash {
    position: absolute;
    inset: 8%;
    border: 1px dashed rgba(217, 181, 98, .3);
    border-radius: 50%;
    animation: b-spin 240s linear infinite;
}
.st3-ring__inner {
    position: absolute;
    inset: 30%;
    border: 1px solid rgba(60, 201, 180, .35);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(60, 201, 180, .18) inset;
}
.st3-ring__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.st3-ring__label {
    margin: 0;
    font-family: var(--b-body);
    font-weight: 400;
    font-size: clamp(12px, 1.6vw, 15px);
    line-height: 1.55;
    font-variant: small-caps;
    letter-spacing: .24em;
    text-transform: lowercase;
    color: #a4b6b4;
}
.st3-ring__count {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(40px, 8vw, 76px);
    line-height: 1;
    color: #e3c47f;
}
.st3-ring__of { font-size: .55em; color: #8a6a2a; }
.st3-ring__state {
    margin: 0;
    font-size: clamp(12px, 1.6vw, 15px);
    font-style: italic;
    color: #a6ebdd;
}
.st3-ring__list { margin: 0; padding: 0; list-style: none; }

/* Medailon (pozice přes --x/--y z view: úhel -90° + i·360°/n, poloměr 42 %) */
.st3-gb {
    --ink: #3cc9b4;
    --glow: rgba(60, 201, 180, .35);
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: clamp(76px, 16vw, 120px);
    text-align: center;
}
.st3-gb--cd { --ink: #e3c47f; --glow: rgba(217, 181, 98, .5); }
.st3-gb__medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 9vw, 68px);
    aspect-ratio: 1;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: #0b1315;
    color: var(--ink);
    font-size: clamp(18px, 3vw, 28px);
    box-shadow: 0 0 28px var(--glow);
}
.st3-gb__name {
    max-width: 100%;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(11px, 1.5vw, 15px);
    line-height: 1.15;
    overflow-wrap: break-word;
}
.st3-gb__state {
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: .14em;
    text-transform: lowercase;
    color: var(--ink);
}
/* Odpočet respawnu (legacy ho ukazuje pod „Cooldown“). Absolutně pod štítkem, aby výška
   medailonu (a tím jeho vystředění na kružnici) zůstala 1:1 s prototypem. */
.st3-gb__timer {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #a4b6b4;
}
/* Úzký kruh: medailony by se s řádkem navíc překrývaly → štítek „cooldown“ jen pro čtečky,
   odpočet převezme jeho místo i barvu (výška medailonu = prototyp). */
@container (max-width: 399.98px) {
    .st3-gb--timer .st3-gb__state {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .st3-gb--timer .st3-gb__timer {
        position: static;
        transform: none;
        line-height: 1.55;
        color: var(--ink);
    }
}

/* ── Bestiář ────────────────────────────────────────────────────────────── */
.st3-rb { display: flex; flex-direction: column; gap: 24px; }
.st3-rb__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.st3-rb__title { display: flex; flex-direction: column; gap: 6px; }
.st3-rb__title .b-h2 { line-height: 1.12; }
.st3-rb__kicker {
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .28em;
    color: #a6ebdd;
}

.st3-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st3-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.st3-chip {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #1d2d31;
    border-radius: 999px;
    background: transparent;
    color: #a4b6b4;
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: .14em;
    text-transform: lowercase;
    cursor: pointer;
}
.st3-chip:hover { border-color: #2a3e42; color: #e3c47f; }
.st3-chip[aria-pressed="true"] {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .12);
    color: #e3c47f;
}

.st3-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: min(100%, 240px);
    padding: 0 16px;
    border: 1px solid #1d2d31;
    border-radius: 999px;
    background: #0b1315;
    cursor: text;
    transition: border-color var(--b-dur) ease;
}
.st3-search > i { color: #a4b6b4; }
.st3-search:focus-within { border-color: #d9b562; }
.st3-search__input {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 1px 2px; /* = UA padding inputu v prototypu → šířka/výška pole 1:1 */
    border: 0;
    outline: 0;
    background: none;
    color: #e7eeec;
    font-size: 16px;
}
.st3-search__input:focus,
.st3-search__input:focus-visible { outline: none; }
.st3-search__input::-webkit-search-decoration,
.st3-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.st3-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.st3-letter {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid #1d2d31;
    border-radius: 50%;
    background: transparent;
    color: #a4b6b4;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    cursor: pointer;
}
.st3-letter:hover { border-color: #2a3e42; color: #a6ebdd; }
.st3-letter[aria-pressed="true"] {
    border-color: #3cc9b4;
    background: rgba(60, 201, 180, .14);
    color: #a6ebdd;
}

/* Bez JS nemají filtry smysl (vše je vykreslené) → schovat. */
html:not(.b3-js) .st3-tools,
html:not(.b3-js) .st3-letters { display: none; }

.st3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #14201f;
    background: #14201f;
}
.st3-grid[hidden] { display: none; }
.st3-cell {
    --ink: #3cc9b4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: #081012;
    font-size: 16px;
    transition: background-color var(--b-dur) ease;
}
.st3-cell:hover { background: #0e1a1b; }
.st3-cell[hidden] { display: none; }
.st3-cell--cd { --ink: #e3c47f; }
.st3-cell__name { flex: 1; min-width: 0; overflow-wrap: break-word; }
/* Štítek + odpočet (2 řádky) přesahují do paddingu buňky → výška řádku mřížky = prototyp. */
.st3-cell__tag {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: -5px 0;
    line-height: 1.3;
    text-align: right;
}
.st3-cell__cd {
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: .12em;
    text-transform: lowercase;
    color: #e3c47f;
}
.st3-cell__timer {
    font-size: 13px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #a4b6b4;
}

.st3-noresults { margin: 0; font-style: italic; color: #a4b6b4; }
.st3-rb__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-style: italic;
    color: #6f8584;
}

/* ── Hráči online ───────────────────────────────────────────────────────── */
/* Prázdný stav = prototyp */
.st3-players--empty {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    border: 1px dashed #1d2d31;
    border-radius: 14px;
    color: #a4b6b4;
    font-size: 17px;
    font-style: italic;
}
.st3-players__moon { flex: none; font-size: 28px; font-style: normal; color: #1d7a6e; }
.st3-players__empty { margin: 0; }

/* Seznam hráčů (v prototypu nenavrženo): stejný jazyk jako bestiář — mřížka buněk
   s 1px spárami, tyrkysový kosočtverec = online, level vpravo v Cinzel. */
.st3-players:not(.st3-players--empty) {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
    border: 1px solid #1d2d31;
    border-radius: 14px;
    background: radial-gradient(420px 260px at 100% 0, rgba(60, 201, 180, .08), transparent 70%), #0b1315;
}
.st3-players__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.st3-players__icon { font-size: 28px; line-height: 1; color: #3cc9b4; }
.st3-players__title {
    margin: 0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.12;
    color: #e7eeec;
}
.st3-players__count {
    min-width: 34px;
    padding: 2px 12px;
    border: 1px solid #14514a;
    border-radius: 999px;
    background: rgba(60, 201, 180, .08);
    color: #a6ebdd;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
}
.st3-players__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #14201f;
    background: #14201f;
}
.st3-pc {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 16px;
    background: #081012;
    transition: background-color var(--b-dur) ease;
}
.st3-pc:hover { background: #0e1a1b; }
.st3-pc__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st3-pc__name,
.st3-pc__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st3-pc__name { font-size: 17px; line-height: 1.3; color: #e7eeec; }
.st3-pc__meta { font-size: 14px; line-height: 1.4; font-style: italic; color: #6f8584; }
.st3-pc__clan { color: #a4b6b4; }
.st3-pc__lv {
    flex: none;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    color: #3cc9b4;
}
.st3-pc__lvl {
    font-family: var(--b-body);
    font-weight: 400;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: .12em;
    text-transform: lowercase;
    color: #6f8584;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .st3-ring__dash { animation: none; }
}