/* ===== Fit pass: readability floors + small-stage fixes (loaded last) =====
   Rule of thumb: no text under 8px (the UI is em-scaled from the stage / panel size, so on phones some labels would land at 4-7px),
   and nothing that can be pressed leaves its container. */

/* ---- build panel ---- */
.c-ribbon { font-size: max(.78em, 8px); }
.card .c-name { font-size: max(1.02em, 8.5px); }
.c-vs b { font-size: max(.8em, 8px); }
.s-lbl, .s-val { font-size: max(1.05em, 8.5px); }
.bpill small { font-size: max(.78em, 8px); }
.p-hint { font-size: max(1.05em, 8.5px); }
.pi-brand, .pi-lv, .pi-set { font-size: max(.82em, 8px); }
.dchip { font-size: max(.8em, 8px); }
.role-tag { font-size: max(.78em, 8px); }
.vs-row { font-size: max(.88em, 8px); }
.pi-verdict { font-size: max(.92em, 8px); }
.pi-note { font-size: max(.88em, 8px); }
.pi-desc { font-size: max(.95em, 8.5px); }
.br-bonus { font-size: max(.95em, 8px); }
.pop-buy .cost-chip, .pop-sell .cost-chip { font-size: max(.85em, 8px); }
.c-cost { font-size: max(1.1em, 8.5px); }
.pop .btn .lbl { font-size: max(1em, 8.5px); }
@container pmain (max-height: 150px) { .pi-desc { font-size: max(.9em, 8.5px); } }

/* arena chip name may wrap / hyphenate instead of "MIDNIGHT J…" */
.c-arena .ac-name { hyphens: auto; -webkit-hyphens: auto; }

/* ---- progress hub / popups ---- */
.thumb-title { font-size: max(.62em, 8px); }
.evc-item small, .lg-rw small, .fx-item small { font-size: max(.62em, 8px); }
.sc-rar, .sc-disc, .sc-type { font-size: max(.62em, 8px); }
.mc-diff { font-size: max(.7em, 8.5px); }
.lk-chip small { font-size: max(.78em, 8px); }
.ph-tier small { font-size: max(.7em, 8.5px); }
.pg-dot { font-size: max(.7em, 8px); }
.ev-tag { font-size: max(.66em, 8.5px); }
.lg-n { font-size: max(.72em, 8.5px); }
.sc-tag { font-size: max(.68em, 8.5px); }
.sc-price s { font-size: max(.72em, 8px); }
.bv-tag { font-size: max(.62em, 8px); }
.btn.bvbtn .bv-sub { font-size: max(.62em, 8px); }
.rw-bv .rw-bv-note { font-size: max(.8em, 8.5px); }
.menu-ribbon b { font-size: max(.6em, 8px); }
.menu-badge { font-size: max(.85em, 8.5px); }
.rw-badge { font-size: max(.85em, 8px); }
.rk-reward { font-size: max(.78em, 8.5px); }
.rkr-h, .mr-ledger-h { font-size: max(.75em, 8.5px); }
.su-lbl { font-size: max(.8em, 8.5px); }
.su-look-tag { font-size: max(1em, 8.5px); }

/* long compound names (de / ru) wrap instead of clipping */
.fx-uname { white-space: normal; text-wrap: balance; line-height: 1.1; max-width: 100%; }
.evc-item small, .tr-item small, .lg-rw small { white-space: normal; text-wrap: balance; overflow-wrap: break-word; }
.cp-plate { max-width: 100%; }
.cp-np .np { max-width: 94%; }
.cp-np .np-name, .cp-np .np-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---- modals on short stages: the close button must not sit on the first row ---- */
.short .modal .screen-title { padding: 0 1.6em; }

/* ---- pre-match setup on small portrait phones: the explanatory hints go first ---- */
@container stage (max-height: 660px) { .portrait .su-hint { display: none; } }

/* ---- match result: compaction on mid-height landscape stages (1024x600, 1280x600 ...) ---- */
@container stage (min-height: 461px) and (max-height: 720px) {
    .landscape #scr-result .mr-wrap { font-size: clamp(11px, 1.8cqh, 34px); }
    .landscape #scr-result .mr-ledger-h, .landscape #scr-result .mr-ledger .ledger-title { display: none; }
}

/* ---- clipped single-line labels end in an ellipsis instead of a hard cut ---- */
.fit { text-overflow: ellipsis; }

/* ---- build panel, tight stages (landscape phones): names wrap, bars keep a legible label column ---- */
.stat { grid-template-columns: max(3.5em, 34px) minmax(0, 1fr) max(2.4em, 24px); }
.card .c-name { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; line-height: 1; max-height: 2.2em; overflow: hidden; }
.c-ribbon { white-space: normal; text-align: center; line-height: 1; }
.p-hint { white-space: normal; text-wrap: balance; }

/* ---- menu ---- */
.portrait .menu-buttons .row.sub .btn, .short .menu-buttons .row.sub .btn { font-size: max(.8em, 9px); }
.menu-ribbon b { font-size: max(.6em, 8px); }
/* short landscape (phones on their side): logo left, buttons right, so the menu keeps readable sizes instead of shrinking into a corner */
.short.landscape .menu-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.short.landscape .menu-bot { display: none; }
.short.landscape .menu-center { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; justify-content: center; gap: 4cqmin; padding: 0 3cqmin; width: 100%; }
.short.landscape .menu-center > .logo { flex: 0 0 38%; width: 38%; min-width: 0; }
.short.landscape .menu-center > .menu-buttons { flex: 0 0 56%; width: 56%; min-width: 0; }

/* ---- batch 2: wrapping labels + floors for long de / ru strings ---- */
.lk-name { font-size: max(.72em, 8.5px); white-space: normal; text-wrap: balance; overflow-wrap: anywhere; line-height: 1.05; }
.landscape .lk-name { font-size: max(.78em, 8.5px); }
.ph-title { white-space: normal; text-wrap: balance; line-height: 1.05; }
.rk-reward .new, .rk-reward span { white-space: normal; }
.lb2-me-h { font-size: max(.65em, 8.5px); }
.lb2-me-t, .lb2-me-s { white-space: normal; text-wrap: balance; }
.pop-buy .lbl { white-space: normal; text-align: center; line-height: 1; }
.lp-title { line-height: 1.25; }
.rr-line { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.short .rr-line { -webkit-line-clamp: 1; white-space: nowrap; display: block; }
.mr-title.fit { white-space: normal; text-wrap: balance; line-height: 1.05; }
.thumb-title { font-size: max(.62em, 8px); line-height: 1.1; overflow: hidden; }

/* nameplate previews (new item / unlock popups): the plate may never be wider than its frame */
.cp-np { padding: 0 .5em; }
.cp-plate { width: 100%; min-width: 0; display: flex; justify-content: center; }
.cp-np .np { max-width: 100%; min-width: 0; }
.cp-np .np-name { font-size: max(1em, 9px); }

/* build: tight buttons on landscape phones */
.short .btn.act { padding-inline: .3em; gap: .2em; }

/* ---- build, small portrait stages: the CPU panel has no shop / actions, so it gives that space to the bot preview ---- */
@container stage (max-height: 760px) {
    .portrait .is-cpu .p-in { grid-template-rows: auto minmax(0, 1fr) auto auto; }
    .portrait .is-cpu .p-shop, .portrait .is-cpu .p-actions { display: none; }
    .portrait .is-cpu .p-cover { grid-row: 4; min-height: 0; padding: .35em 1em; }
    .portrait .is-cpu .cover-gear { width: 2em; height: 2em; }
    .portrait .is-cpu .cover-txt { font-size: 1.15em; }
}

/* part popover in the compact (short preview) layout: the counter icons repeat what the verdict line says, so they go first */
@container pmain (max-height: 150px) {
    .pop .pi-vs { display: none; }
    .pop .pi-info { gap: .1em; }
    .pop .pi-set { display: none; }
}

/* ---- fit pass 2 ---- */
/* modal titles keep clear of the close button on every stage (long de words such as DATENSCHUTZERKLAERUNG shrink inside it) */
.modal .screen-title { padding: 0 1.6em; }
/* rank ladder: the title never gets squashed by the scrolling list */
.rl-modal .screen-title { flex: none; }
.rl-modal .rl-body { min-height: 0; }
/* leaderboard season dots: usable tap targets (visible size grows, hit area grows more) */
.lb2-dot { position: relative; min-width: max(1.8em, 26px); height: max(1.5em, 22px); line-height: max(1.4em, 22px); }
.lb2-dot::after { content: ''; position: absolute; inset: -.5em -.25em; }
/* daily gift: the two buttons share the row equally on narrow stages so "ABHOLEN X2" is not cut */
@container stage (max-width: 460px) {
    .lg-btns > .btn:first-child, .lg-btns > .btn.bvbtn { flex: 1 1 0; min-width: 0; }
    .lg-btns > .btn.bvbtn { font-size: .8em; }
}
/* settings on the smallest landscape phones: the toggles sit in two columns so Legal / Delete stay above FERTIG */
@container stage (max-height: 460px) {
    .landscape .set-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4em; row-gap: .35em; align-content: start; }
    .landscape .set-body > * { min-width: 0; }
    .landscape .set-body > :not(.set-row), .landscape .set-body > .set-gfx { grid-column: 1 / -1; }
    /* the explanatory hints are what pushes Graphics / Legal under FERTIG on short landscape phones */
    .landscape .set-body > .set-hint { display: none; }
}
/* build action row on small landscape phones: the reroll icon makes room for the full label */
@container stage (max-height: 400px) { .landscape .btn.act.reroll > .ico { display: none; } }

/* ---- pre-match setup: the card grid scrolls inside itself instead of running under START / off the stage ---- */
#scr-setup.active > .su-grid { flex: 0 1 auto; min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: .25em .5em .4em; margin: -.25em -.5em -.4em; scrollbar-width: thin; scrollbar-color: var(--purple) rgba(12, 6, 26, .55); }
#scr-setup.active > .su-title, #scr-setup.active > .su-mode { flex: none; }
/* compact setup on mid-size stages so Bot-Looks + START stay on screen without scrolling */
@container stage (max-height: 1200px) {
    .landscape #scr-setup.active { font-size: clamp(11px, 2.35cqmin, 28px); }
    .landscape .su-title { font-size: 2em; }
    .landscape .su-mode { display: none; }
    .landscape .su-hint, .landscape .su-tab .set-hint { display: none; }
}
@container stage (max-height: 1100px) {
    .portrait #scr-setup.active { font-size: clamp(11px, 3.7cqw, 19px); }
    .portrait .su-title { font-size: 2em; }
    .portrait .su-mode { display: none; }
    .portrait .su-hint { display: none; }
}