/* ============================================================
   Split din app.css pe layer/audienta (audit 2026-08-06 SF, ADR 0023).
   Precedenta layerelor (ultimul castiga): vendor < app < kf (tokens..utilities).
   Ordinea @layer e declarata IDENTIC in capul fiecarui fisier -
   prima declaratie stabileste ordinea, repetarea e no-op.
   ATENTIE: ordinea <link>-urilor e CONTRACT de cascada (intra-layer
   castiga ultimul incarcat): tokens, scoreboard, components, admin,
   base-layout, kf-skin; pagina juratului: tokens, judge, base-layout.
   NU adauga/reordona <link>-uri fara audit de coliziuni (ADR 0023).
   scoreboard.css - S8 BRACKET/scorecard/podium + S10c CATEGORY SHOW.
   ============================================================ */
@layer vendor, app, tokens, base, layout, components, utilities;

@layer app {
/* === 8. BRACKET ============================================ */

/* ── Pagina categorie LATĂ (fără sidebar, container extins pt bracket) ── */
.page-wide .app-wrap { max-width: 1600px; }

/* Filtrul „Ale mele" (mine-filter.js): body[data-mine-only] ascunde cardurile străine.
   CSS-driven — compune cu archive-filter.js (care umblă la style.display pe altă axă). */
body[data-mine-only] [data-mine="0"] { display: none !important; }

/* ── Strip categorii = TAB-URILE paginii de concurs, și SUBTITLUL ei: tabul activ poartă numele
      categoriei, TOP N, discriminatorii și starea, fiindcă `h2.res-cat-name` le repeta exact
      (șters 2026-08-15). Antetul mare de concurs = .res-hero via _contest_head. ──

   UN SINGUR RÂND CARE SCROLLEAZĂ, niciodată două rânduri stivuite: cu wrap, poziția fiecărui tab
   se mută la orice redimensionare, deci memoria spațială moare (NN/g „Use Only One Row of Tabs";
   Material 3 „when a set of tabs cannot fit on screen, use scrollable tabs"). Mecanismul e cel de
   la linia de timp a programului (`.tline__rail`).

   ⚠️ RIGLA BENZII E FUNDAL, nu `border-bottom`. Într-un container care scrollează, trucul din
   `.folder-tab` (`margin-bottom: -2px`, ca tabul să stea PESTE riglă) iese din cutia de padding și
   e TĂIAT de `overflow`. Fundalul se pictează pe cutia elementului și NU se mișcă la derulare, deci
   tab-urile alunecă peste o linie fixă, iar muchia lor de jos se suprapune exact peste ea. */
.cat-strip {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: .5rem;
    scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }

/* ── Capul benzii: NUMEȘTE controlul, spune CÂTE categorii sunt și dă săgeți de derulare.
   Fără el, o bandă care scrollează pe telefon e invizibilă ca mecanism: omul vede două categorii și
   n-are de unde ști că mai există trei. Numele + numărul sunt cel mai ieftin indiciu; săgețile sunt
   ținta de click pentru cine nu trage cu degetul. ── */
/* `margin-bottom: 0`: linia de bază a benzii și șina verticală a lui `.cat-block` trebuie să se
   ATINGĂ, altfel „L"-ul verde se rupe într-un colț cu spațiu. */
.cat-nav { margin-top: -.5rem; margin-bottom: 0; }
.cat-nav__hd {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding-bottom: .15rem;
}
.cat-nav__lbl { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--text-muted); }
.cat-nav__n {
    font-family: var(--font-mono); font-size: var(--font-2xs); font-weight: 700;
    background: var(--surface-2); color: var(--text-secondary);
    border: 1px solid var(--border-hair); padding: 0 4px;
}
/* `hidden` în markup = starea implicită FĂRĂ JS (săgețile n-ar face nimic). Controllerul îl scoate
   doar când banda chiar depășește. `display: flex` trebuie să piardă în fața lui `[hidden]`. */
.cat-nav__arrows { display: flex; gap: .2rem; }
.cat-nav__arrows[hidden] { display: none; }
.cat-nav__ar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    border: 1px solid var(--border-control); background: var(--surface);
    color: var(--text); cursor: pointer; line-height: 1;
}
.cat-nav__ar:hover:not(:disabled) { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); }
.cat-nav__ar:disabled { opacity: .35; cursor: default; }

/* ESTOMPAREA MARGINILOR = al doilea semnal de derulare, și singurul care spune ÎN CE PARTE mai e
   conținut. Starea vine din atributul `data-ov` pus de controller (stare în CSS, nu în JS: JS-ul
   raportează faptul, CSS-ul decide aspectul). Masca lucrează pe canalul ALFA — `black`/`transparent`
   de aici nu sunt culori de brand, ci opacitate, deci nu încalcă interdicția de literale de culoare. */
.cat-strip {
    --cat-fade-l: 0px; --cat-fade-r: 0px;
    mask-image: linear-gradient(to right,
        transparent 0, black var(--cat-fade-l),
        black calc(100% - var(--cat-fade-r)), transparent 100%);
}
.cat-nav[data-ov~="l"] .cat-strip { --cat-fade-l: 1.75rem; }
.cat-nav[data-ov~="r"] .cat-strip { --cat-fade-r: 1.75rem; }
/* TAB CU CUTIE, tip „folder" (brand: „Tabs lift into a bordered folder tab"). Fără cutie, tab-urile
   inactive erau doar text pe fundalul paginii — se citeau ca o listă, nu ca un control apăsabil
   (raport user 2026-08-15: „nu prea îți dai seama uman că sunt tab-uri"). Cutia e UN singur nivel:
   hairline pe trei laturi, muchia de jos deschisă spre riglă, zero pastile înăuntru.
   Semnalul de STIL = muchia de 3px cu hue-ul stilului — aceeași semnătură ca `.style-pill`
   (border-left colorat), refolosită ca marcaj, nu ca a doua cutie. Colțuri SHARP — brand brutalist. */
.cat-strip__item {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: .05rem; padding: .3rem .7rem; border-radius: 0;
    border: 1px solid var(--border-hair);
    /* LINIA VERDE E PE TAB-URI, nu pe bandă. Ca fundal al benzii avea două defecte: fundalul unui
       părinte se pictează întotdeauna sub fundalurile copiilor (deci tab-urile o acopereau —
       `z-index` nu schimbă ordinea asta), și mai ales se întindea pe TOATĂ banda. Traseul trebuie să
       plece DIN categoria activă spre stânga, nu să treacă și în dreapta ei: tab-urile de după activ
       primesc hairline neutru (vezi regula cu `~` de mai jos).
       `--primary`, NU `--volt`: volt-ul e umplere (14.65:1 cu text ink); ca linie pe suprafața light
       dă 1.10:1. `--primary` e marcajul care urmează tema (olive 6.06:1 / lime-dim 9.75:1). */
    border-bottom: 3px solid var(--primary);
    border-inline-start: 3px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent));
    background: var(--surface-2); color: var(--text-muted);
    text-decoration: none; white-space: nowrap;
    /* Mecanismul de folder: inactivele stau 3px mai jos = retrase, activul rămâne sus. Jos NU se
       adaugă marjă — muchia de jos a tuturor cade la aceeași înălțime (`align-items: stretch`), deci
       liniile lor se leagă într-una singură, continuă. */
    margin-block-start: 3px;
}
/* Tab-urile lipite: orice spațiu între ele ar rupe linia în segmente. */
.cat-strip__item + .cat-strip__item { margin-inline-start: 0; }
/* Ce vine DUPĂ categoria activă nu mai e pe traseu → hairline neutru, ca banda să rămână așezată,
   fără să ducă verdele mai departe. `~` = frații de după, singurul mod de a exprima „la dreapta lui"
   fără JS. */
.cat-strip__item--on ~ .cat-strip__item { border-bottom-color: var(--border-hair); }
/* `border-block-color` + `border-inline-end-color`, NU `border-color`: shorthand-ul ar șterge și
   muchia colorată cu hue-ul stilului (capcana „shorthand reset" din UI_RULES). */
.cat-strip__item:hover { background: var(--surface); color: var(--text); border-block-start-color: var(--border-strong); border-inline-end-color: var(--border-strong); }
.cat-strip__l1 { display: inline-flex; align-items: baseline; gap: .35rem; }
.cat-strip__fmt { color: var(--text-faint); }
/* `.cat-strip__top` (fostul „T8" owner-only) = ȘTERS: `TOP N` apare acum pe TOATE tab-urile, în
   linia de context, pentru toată lumea. */
/* ACTIV = trei semnale (NN/g cere minimum două): umplere volt · ridicat față de frați · tip mai mare
   (rolul de SUBTITLU). Muchia lui de jos e ULTIMA aprinsă: de aici traseul verde merge spre stânga,
   până în colțul din care coboară șina lui `.cat-block`. */
.cat-strip__item--on {
    margin-block-start: 0;
    background: var(--volt); color: var(--volt-ink);
    border-block-start-color: var(--volt-ink); border-inline-end-color: var(--volt-ink);
}
.cat-strip__item--on:hover {
    background: var(--volt); color: var(--volt-ink);
    border-block-start-color: var(--volt-ink); border-inline-end-color: var(--volt-ink);
}
.cat-strip__item--on .cat-strip__fmt { color: var(--volt-ink); opacity: .75; }
/* Linia de context a tabului activ = subtitlul paginii. Separatorul vine din `::before`, nu din
   caractere puse în markup: e decor, nu conținut (nu are ce căuta în text copiat sau citit). */
.cat-strip__l2 { display: inline-flex; align-items: baseline; gap: .3rem; opacity: .85; }
.cat-strip__l2 > * + *::before { content: "·"; margin-inline-end: .3rem; }

/* ── CONȚINUTUL CATEGORIEI SELECTATE — un singur bloc, cu șină verticală în culoarea marcajului.
   Rezolvă două lucruri deodată: (1) „de unde până unde ține categoria asta" — line-up, juriu,
   calificări și bracket sunt ale tabului aprins de deasupra; (2) legătura cerută între banda de
   categorii și tab-urile Calificare|Bracket, fără un conector care ar trebui să urmărească poziția
   unui tab dintr-o bandă care SCROLLEAZĂ (ar arăta greșit la prima derulare).
   RITMUL: secțiunile dinăuntru nu se mai ating (raport user: „calificările și bracketul sunt lipite
   de line-up"). Pas fluid, din aceeași scară peste tot — strâns în grup, aerisit între secțiuni. */
.cat-block {
    --cat-gap: clamp(.85rem, 2.5vw, 1.5rem);
    /* `--primary`, NU `--volt` — vezi linia de bază a benzii: volt-ul ca LINIE dă 1.10:1 pe light. */
    border-inline-start: 3px solid var(--primary);
    padding: var(--cat-gap) 0 var(--cat-gap) clamp(.55rem, 1.8vw, 1rem);
}
.cat-block .res-cat-head { margin-bottom: 0; }
/* Sub-tab-urile sunt ÎN AFARA blocului: acolo se oprește șina (cerință user). Spațiul dintre ele și
   bloc e al secțiunii următoare, deci stă pe ele. */
.cat-panels { margin-top: var(--cat-gap); }
.cat-panels .tab-content { padding-top: var(--cat-gap); }

/* ── „ACUM SE ÎNTÂMPLĂ AICI" (public/_live_signpost.html.twig) — semn, nu redirect.
   Bandă lată, apăsabilă pe toată suprafața: e singurul lucru din pagină care răspunde la „ce
   trebuie să fac eu acum". Volt DOAR aici și pe tabul activ; punctul pulsă ca `.page-state__dot`,
   fiindcă aici înseamnă chiar LIVE.

   UN SINGUR RÂND, până la 320px (raport user: ocupa patru rânduri pe telefon și anula exact
   înălțimea câștigată în antet). `nowrap` peste tot + `min-width: 0` pe numele categoriei, care e
   singurul element elastic: el absoarbe strâmtoarea cu `…`, restul rămân întregi.
   Pragul la care cade starea e o INTEROGARE DE CONTAINER, nu `@media`: banda stă în antet ca o
   coloană de ~16rem chiar și pe un ecran de 1600px, deci lățimea ecranului n-are ce spune despre ea. */
.live-sign {
    container-type: inline-size;
    display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem clamp(.4rem, 2vw, 1.2rem);
    margin: 0 0 .85rem; padding: .5rem .75rem;
    border: var(--border-dark); background: var(--surface);
    color: var(--text); text-decoration: none;
}
.live-sign:hover { background: var(--surface-2); }
.live-sign__now {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em; font-size: var(--font-sm);
    background: var(--status-active-bg); color: var(--status-active-fg);
    padding: .1rem .5rem;
}
.live-sign__dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: currentColor;
    animation: page-state-pulse 1.2s ease-in-out infinite;
}
.live-sign__now { flex: none; }
.live-sign__what { display: flex; flex-wrap: nowrap; align-items: baseline; gap: .15rem .5rem; min-width: 0; }
/* Singurul element elastic din bandă: se taie cu `…` când nu mai e loc. Mărimea e fluidă fiindcă la
   320px un titlu de 18px ar mânca singur jumătate din rând. */
.live-sign__cat {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: .02em;
    font-size: clamp(var(--font-base), 3.2vw, var(--font-xl));
}
.live-sign__st {
    flex: none; color: var(--text-secondary);
    font-family: var(--font-mono); font-weight: 700; font-size: var(--font-2xs); letter-spacing: .04em;
}
.live-sign__st::before { content: "·"; margin-inline-end: .35rem; }
.live-sign__go {
    flex: none; margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: .05em; font-size: var(--font-xs);
    background: var(--surface-inverse); color: var(--text-on-inverse);
    padding: .3rem .7rem; white-space: nowrap;
}
/* Sub pragul ăsta rămân numele categoriei și butonul — starea e derivabilă în două secunde, după ce
   omul ajunge acolo; numele și acțiunea nu sunt. */
@container (max-width: 26rem) {
    .live-sign__st { display: none; }
}
.live-sign:hover .live-sign__go { background: var(--volt); color: var(--volt-ink); }

.bk-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 96px;
    max-width: 190px;
}
.bk-col-label {
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg3);
    text-align: center;
    padding: .35rem .5rem .5rem;
    border-bottom: 1px solid var(--border-hair);
    margin-bottom: .5rem;
}
.bk-col-label--active { color: var(--volt-ink); background: var(--volt); border-bottom-color: var(--volt-ink); }
.bk-col-label--done   { color: var(--success); border-bottom-color: var(--success); }

.bk-col-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Fiecare battle = un slot flex egal, conținut centrat → runda cu N/2 matchuri
   pică fix la mijlocul dintre cei 2 feederi din runda dinainte. */
.bk-match {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* ── PRIMUL RÂND (T32) = FĂRĂ overlap → conector OUTGOING curat din marginea feederului.
   Brațul pleacă din muchia dreaptă a cardului (left:100%) și ajunge la bara verticală (merge point)
   la --bk-firstarm. De acolo, o linie de legătură (--bk-childlink) merge până în cardul T16. */
.bk-col--first .bk-match--up::after,
.bk-col--first .bk-match--down::after {
    content: '';
    position: absolute;
    left: 100%;
    width: var(--bk-firstarm);
    height: 50%;
    border-right: 2px solid var(--border-subtle);
}
.bk-col--first .bk-match--up::after   { top: 50%;    border-top: 2px solid var(--border-subtle); }
.bk-col--first .bk-match--down::after { bottom: 50%; border-bottom: 2px solid var(--border-subtle); }
.bk-col--first .bk-match--straight::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: var(--bk-firstarm);
    border-top: 2px solid var(--border-subtle);
}
/* linia de legătură de la merge point în cardul copil (T16) — ca să nu fie lipit de bracket */
.bk-col--second .bk-match::before {
    content: '';
    position: absolute;
    left: calc(var(--bk-childlink) * -1);
    top: 50%;
    width: var(--bk-childlink);
    border-top: 2px solid var(--border-subtle);
}
.bk-col--second .bk-match--resolved::before { border-color: var(--success); }

/* ── COLOANELE 3+ = overlap → conector „merge" (.bk-merge) pe matchul avansat:
   o LINIE verticală întinsă între CENTRELE celor 2 feederi (25%→75%) + cot scurt în card.
   Capetele sunt pur PROCENTUALE (sloturile flex egale țin centrele la 25%/75% indiferent de
   înălțimea cardului — ex. nume pe 2 rânduri); linia trece PE SUB cardurile feeder
   (z-index: .bk-battle=2 peste .bk-merge=1) → pare că iese din muchia cardului. */
.bk-merge {
    position: absolute;
    left: calc(var(--bk-arm) * -1);
    top: 25%;
    bottom: 25%;
    z-index: 1;
    border-left: 2px solid var(--border-subtle);
}
/* cot scurt din linie în card, la jumătatea matchului avansat */
.bk-col:not(.bk-col--first):not(.bk-col--second):not(.bk-col--final):not(.bk-col--plain) .bk-match::after {
    content: '';
    position: absolute;
    left: calc(var(--bk-arm) * -1);
    top: 50%;
    width: var(--bk-arm);
    border-top: 2px solid var(--border-subtle);
}
/* match rezolvat → linie + cot verzi (calea câștigătorului) */
.bk-match--resolved .bk-merge,
.bk-match--resolved::after { border-color: var(--success); }

/* ── PLACEHOLDER (schelet bracket pregătit din start, ca finala „urmează") ──
   bg OPAC (--paper, ca pagina): linia merge trece pe sub carduri → fără mască s-ar vedea prin el. */
.bk-battle--ph {
    border: 1px dashed var(--border-hair);
    background: var(--paper);
    box-shadow: none;
    min-height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.bk-battle--ph i { font-size: var(--font-xs); color: var(--fg4); opacity: .5; }
/* conectorii unui placeholder = estompați (nu negru plin) */
.bk-match--ph .bk-merge,
.bk-col--second .bk-match--ph::before,
.bk-col--final .bk-battle--ph::before,
.bk-col--final .bk-battle--ph::after { border-color: var(--border-hair); }

/* Card battle — z-index 2 = peste liniile merge (vezi comentariul .bk-merge) */
.bk-battle {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    margin: 3px 0;
    position: relative;
    z-index: 2;
    transition: box-shadow .1s;
}
.bk-battle--pending   { border-color: var(--border-hair); }
.bk-battle--active    { border-color: var(--volt-ink); background: var(--volt); color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); }
.bk-battle--completed { background: var(--paper-2); }
.bk-battle--golden    { border-color: var(--primary); box-shadow: 1px 1px 0 0 var(--primary); }

/* Entry row în battle */
.bk-entry {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    font-size: var(--font-base);
    border-bottom: 1px solid var(--border-hair);
    line-height: 1.25;
    min-height: 28px;
}
.bk-entry:last-of-type { border-bottom: none; }
/* câștigătorul iese clar în evidență (bandă verde la margine + bold) ca să-l urmărești ușor */
.bk-entry--winner {
    background: var(--winner-bg); color: var(--winner-fg); font-weight: 900;
    box-shadow: inset 3px 0 0 0 var(--winner-edge);
}
.bk-entry--loser  { color: var(--fg3); }   /* lizibil, dar clar secundar */
.bk-entry--bye    { color: var(--fg3); font-style: italic; letter-spacing: .08em; } /* avans liber — fără win/lose */
/* numele se aliniază spre CENTRUL bracketului: aripa stângă → dreapta, aripa dreaptă → stânga.
   Finala = centru. Nume lungi / 2v2 → maxim 2 RÂNDURI apoi taie (line-clamp); geometria nu se
   strică — sloturile .bk-match rămân egale, conectorii sunt procentuali. */
.bk-entry__name {
    flex: 1; min-width: 0; text-align: right;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.bk-half--right .bk-entry__name { text-align: left; }
.bk-col--final .bk-entry__name  { text-align: center; }
.bk-col--plain .bk-entry__name  { text-align: center; }   /* coloană standalone (ex. „Locul 3") */
.bk-entry__trophy { color: var(--rank-gold-ink); font-size: var(--font-sm); flex-shrink: 0; }

/* Badge golden round */
/* marcaj departajare = COLȚ PLIAT (triunghi) cu nr de runde suplimentare (1/2/3) pe colț.
   Stă pe latura EXTERIOARĂ (opusă numelui, care e aliniat spre centru): stânga pe aripa
   stângă, dreapta pe aripa dreaptă → nu acoperă numele. Absolut → nu mărește înălțimea. */
.bk-golden-mark {
    position: absolute; top: 0; left: 0; z-index: 3;
    width: 26px; height: 26px;
    background: var(--primary); color: var(--text-on-inverse);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    font-size: var(--font-2xs); font-weight: 900; line-height: 1;
    text-align: left; padding: 1.5px 0 0 2.5px;
}
.bk-half--right .bk-golden-mark {
    left: auto; right: 0;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    text-align: right; padding: 1.5px 2.5px 0 0;
}

/* CAMPION */
.bk-champion {
    margin-top: .75rem;
    padding: .65rem .75rem;
    background: var(--volt);
    border: 1px solid var(--volt-ink);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--volt-ink);
    box-shadow: var(--shadow-hard-sm);
}
.bk-champion__label {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
    color: var(--volt-ink); margin-bottom: .2rem;
}
.bk-champion__name {
    font-family: var(--font-display);
    font-size: var(--font-xl); font-weight: 900; color: var(--volt-ink); text-transform: uppercase;
}

/* ── Podium locurile 2-3-4 (clasare categorie, ADR 0009) — locul 1 = bara CAMPION verde FULL-WIDTH
   deasupra. Locurile 2/3/4 = UN SINGUR rând, pe toată lățimea (= lungimea locului 1), segmente
   DESCRESCĂTOARE (2 > 3 > 4) care umplu împreună tot rândul (flex-grow proporțional). Bare pline cu
   CULOAREA medaliei, cifra pe ACELAȘI rând cu numele, text INK (--on-rank): albul dădea 2.79:1 pe
   aur — medaliile sunt culori DESCHISE, nu închise, deci cerneala e cea care trebuie să fie închisă. */
.podium { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; margin-top: .35rem; }
.podium__step {
    display: flex; align-items: baseline; justify-content: center; gap: .4rem; text-align: center;
    padding: .3rem .6rem; border-radius: var(--radius-sm);
    background: var(--_pc); color: var(--on-rank);
}
/* flex-grow proporțional → 2/3/4 împart toată lățimea în raportul 45:32:23, descrescător. min-width
   rămâne AUTO (nu 0) → segmentul NU se strânge sub numele lui (fără rupere pe litere); când nu mai
   încap toate pe un rând, `flex-wrap` le lasă unul sub altul (abia atunci). */
.podium__step--2 { --_pc: var(--rank-silver); flex: 45 1 0; }
.podium__step--3 { --_pc: var(--rank-bronze); flex: 32 1 0; }
.podium__step--4 { --_pc: var(--rank-4);      flex: 23 1 0; }
.podium__medal { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: var(--font-lg); line-height: 1; }
.podium__nm { white-space: nowrap; font-weight: 900; text-transform: uppercase; font-size: var(--font-sm); line-height: 1.1; }

/* ── Cronometru mare pe proiector (numărătoare inversă, ADR 0010) ── */
.battle-timer {
    display: flex; justify-content: center; align-items: center;
    margin: 0 0 .75rem; padding: .35rem 1rem;
    /* Perechea inversă COMPLETĂ. Era `background: var(--ink)` (raw, fix închis) cu
       `color: var(--paper)` — dar --paper e remapat la o SUPRAFAȚĂ, care în dark devine tot
       închisă: 1.15:1, adică cronometrul de pe proiector dispărea exact în tema în care se
       proiectează. --paper NU e „text pe închis" (vezi nota de la token); aia e --text-on-inverse. */
    background: var(--surface-inverse); color: var(--text-on-inverse);
    border: 2px solid var(--surface-inverse); box-shadow: var(--shadow-hard-sm);
}
.battle-timer__val {
    font-family: var(--font-mono); font-weight: 700; line-height: 1;
    font-size: clamp(2.5rem, 12vw, 6rem); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* Timp expirat: fundal flash brand (roșu) — semnal vizual că runda s-a terminat. */
.battle-timer--done { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* Placeholder: element identic dar invizibil (spațiu REZERVAT — ecranul nu saltă când cronometrul
   de rundă pornește/se oprește pe ecranul smoke). */
.battle-timer--idle { visibility: hidden; }
/* Varianta MICĂ a cronometrului. Pe ecranul smoke (ADR 0026 am.4, timerele INVERSATE): ceasul de
   SESIUNE poartă --round (mic, în mijlocul perechii), cronometrul de RUNDĂ e cel mare de bază,
   sub pereche. Starea --done se moștenește. */
.battle-timer--round { margin: 0; padding: .2rem .6rem; }
.battle-timer--round .battle-timer__val { font-size: clamp(1.1rem, 3.5vw, 2rem); }


/* ── Split: bracket (stânga) + battle curent (dreapta), stacked pe mobil ── */
.bk-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
/* --bk-padb = respirația de sub bracket. Trăiește AICI, pe părintele comun, fiindcă o citesc două
   elemente frați: mirror-ul (ca padding) și căsuța „Locul 3" (ca tragere în sus). Legată într-un
   singur loc, căsuța nu poate ajunge niciodată peste cardurile bracketului. */
.bk-layout__bracket { order: 2; min-width: 0; --bk-padb: 1.5rem; }
/* Locul 3 stă sub bracket (standalone, ca să nu strice centrarea și conectorii finalei — ADR 0009),
   dar tras în sus în spațiul gol de sub finală ca să se citească ca parte din final, nu ca anexă.
   Plafonul e chiar padding-ul de jos al mirror-ului: peste el ar începe să se suprapună. */
.bk-third-slot { display: flex; justify-content: center; margin-top: calc(var(--bk-padb) * -0.8); }
.bk-layout__current { order: 1; min-width: 0; }
@media (min-width: 992px) {
    .bk-layout { flex-direction: row; align-items: flex-start; }
    /* Împărțirea NU mai e fixă 33/67 — o dictează cât loc cere efectiv bracketul.
       Bracketul primește `flex-basis: auto`, adică lățimea CONȚINUTULUI lui, care depinde direct de
       câte runde are (Top 32 = multe coloane, Top 4 = două). Panoul de jurizare are bază 33%, poate
       CREȘTE, dar NU se micșorează.
         · bracket mare  → bazele depășesc containerul; doar bracketul se strânge (scroll intern),
                           panoul rămâne fix pe 33% — exact ca înainte.
         · bracket mic   → rămâne spațiu liber; ambele cresc, deci panoul se umflă până la plafon
                           și nu mai rămâne gol lângă un bracket de 4.
       Zero JS, zero reguli per-mărime: mărimea bracketului se citește singură din conținut.
       Plafonul de 60%: peste atât, cei doi concurenți ajung prea depărtați pe orizontală, cu mijlocul
       pierdut între ei — devine mai greu de citit, nu mai ușor.
       align-self: center = panoul mai scund stă pe MIJLOCUL înălțimii bracketului, nu lipit sus;
       sticky rămâne → la scroll tot se lipește sub marginea de sus. */
    .bk-layout__current { order: 1; flex: 1 0 33%; max-width: 60%; min-width: 0; align-self: center; position: sticky; top: .75rem; }
    .bk-layout__bracket { order: 2; flex: 1 1 auto; min-width: 0; }
    .bk-layout--solo .bk-layout__bracket { flex: 1 1 100%; }
}
/* bara de progres sub battle-ul curent detaliat → full width în coloana din dreapta */
.bk-progress--under { margin: .6rem 0 0; }
.bk-progress--under .bk-progress__bar { max-width: none; }

/* Capul panoului „battle curent": fază + control Start/Finalizează */
.bk-current__ctrl {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem .55rem; margin-bottom: .5rem;
    border: 1px solid var(--volt-ink); background: var(--volt);
    border-radius: var(--radius-sm);
}
/* Acțiunile stau grupate la dreapta: cu space-between și trei copii direcți (fază + două forme),
   cronometrul ar fi plutit la mijloc, între fază și Finalizează. */
.bk-current__acts { display: flex; align-items: center; gap: .35rem; }
.bk-timer-btn { display: inline-flex; align-items: center; gap: .25rem; }
.bk-timer-btn__s { font-size: var(--font-2xs); font-weight: 700; opacity: .85; }
/* Previzualizarea deciziei finalei pe ecranul organizatorului (B30) — `<details>` nativ, zero JS.
   Acoperită implicit: verdictul e la un click, ca o privire peste umăr să nu-l ia. Aceeași mecanică
   de summary ca .panel-acc (marker propriu, nu cel al browserului), dar componentă separată — una e
   un acordeon de listă, cealaltă o dezvăluire unică. */
.fp { border: 1px solid var(--winner-edge); border-radius: var(--radius-sm); background: var(--winner-bg); margin-bottom: .5rem; overflow: hidden; }
.fp--tie { border-color: var(--warning); background: var(--warning-soft); }
.fp > summary {
    display: flex; align-items: center; gap: .3rem;
    padding: .35rem .55rem; cursor: pointer; user-select: none;
    font-size: var(--font-xs); font-weight: 700; color: var(--fg2);
    list-style: none;
}
.fp > summary::-webkit-details-marker { display: none; }
.fp > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: .8em; transition: transform .15s ease; color: var(--fg4); }
.fp[open] > summary::after { transform: rotate(180deg); }
.fp > summary:hover { filter: brightness(.97); }
.fp__body { display: flex; align-items: center; gap: .5rem; padding: .1rem .55rem .5rem; }
.fp__icon { font-size: var(--font-lg); flex-shrink: 0; color: var(--winner-ink); }
.fp--tie .fp__icon { color: var(--warning); }
.fp__body strong { font-size: var(--font-sm); color: var(--winner-fg); }
.fp--tie .fp__body strong { color: var(--warning); }
.fp__sub { font-size: var(--font-2xs); color: var(--fg3); }

.bk-current__phase {
    font-family: var(--font-display); font-weight: 900;
    font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .06em;
    color: var(--volt-ink);
}

/* Scorecard focus în coloana din stânga: umple lățimea, scară redusă vs panoul mare;
   fără umbră dură — panoul stă lipit de bracket, umbra adăuga zgomot */
.bk-layout__current .sc--focus { width: 100%; max-width: 100%; margin-bottom: 0; box-shadow: none; }
.bk-layout__current .sc--focus .sc__side { padding: .5rem .7rem; }
/* Plafoanele separate pe lățimea coloanei au dispărut 2026-08-15: existau fiindcă `cqi` măsura
   RÂNDUL, deci într-o coloană strâmtă numele ieșeau prea mari și trebuiau plafonate de mână. De când
   containerul e CELULA (vezi `.sc__nm`), îngustimea se reglează singură. Mărimea se diferențiază
   acum pe SUPRAFAȚĂ (antet de așteptare vs. cap de scorecard final), nu pe coloană. */
.bk-layout__current .sc--focus .sc__score-n { font-size: var(--font-4xl); }
.bk-layout__current .sc--focus .sc-jt__note { font-size: var(--font-md); }
.bk-layout__current .sc--focus .sc-jt__row { grid-template-columns: 1fr 6.5rem 1fr; }

/* ── Bracket OGLINDIT (mirrored: stânga → FINALĂ ← dreapta) ──
   FLUID: mirror = 100% din container, coloanele elastice (min 96 / max 190px) → Top 32 încape
   fără scroll pe ecrane late; sub ~1250px coloanele ating minimul și .bk-scroll preia (fallback). */
.bk-scroll { overflow-x: auto; padding-bottom: .5rem; }
.bk-mirror {
    /* --bk-overlap = cât trage coloana 3+ PESTE feederul ei (mai mare = mai compact);
       --bk-firstgap = spațiul normal T32→T16 (primul rând rămâne fără overlap);
       --bk-arm = cotul scurt în card. Reglabile dintr-un loc. */
    --bk-overlap: 36px;
    --bk-firstgap: 18px;   /* T32→T16 total = brațul bracketului + linia de legătură spre copil */
    --bk-firstarm: 9px;    /* brațul bracketului (din cardul T32 până la bara verticală/merge point) */
    --bk-childlink: 9px;   /* linia care leagă merge point-ul de copil (cardul T16) — ca să nu fie lipit */
    --bk-arm: 8px;
    --bk-gap: 14px;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 200px;
    padding: .5rem .25rem var(--bk-padb, 1.5rem);
    width: 100%;
    min-width: 0;
}
/* aripile împart spațiul egal; când coloanele ating max-width, spațiul liber merge spre
   marginile exterioare (justify flex-end + flip pe dreapta) → bracketul se strânge spre finală.
   min-width: MIN-CONTENT (nu 0!): aripa refuză să se strângă sub suma minimelor coloanelor →
   overflow-ul cade la DREAPTA mirror-ului (scrollabil), nu în stânga aripii (de neatins în LTR). */
.bk-half { display: flex; align-items: stretch; gap: 0; flex: 1 1 0; min-width: min-content; justify-content: flex-end; }
.bk-half--center { align-items: center; padding: 0 var(--bk-gap); flex: 0 0 auto; }
/* coloanele 3+ se suprapun pe orizontală → matchul avansat tras sub feederi (diagonal compact).
   Ordinea DOM (coloana mai centrală = mai târzie) o pune pe ea deasupra → conectorul „merge" se vede. */
.bk-col + .bk-col { margin-left: calc(var(--bk-overlap) * -1); }
/* a 2-a coloană (T16) NU se suprapune peste primul rând (T32) → spațiu normal pt conectorii outgoing */
.bk-col--first + .bk-col { margin-left: var(--bk-firstgap); }

/* Jumătatea dreaptă = oglindită prin CSS: scaleX flip pe coloane + conectori,
   iar conținutul (carduri + etichete) e re-flipuit ca textul să rămână normal. */
.bk-half--right { transform: scaleX(-1); }
.bk-half--right .bk-battle,
.bk-half--right .bk-col-label { transform: scaleX(-1); }

/* Finala primește din AMBELE laturi → brațe scurte stânga + dreapta */
.bk-col--final .bk-battle::before,
.bk-col--final .bk-battle::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    width: var(--bk-gap);
    border-top: 2px solid var(--border-subtle);
}
.bk-col--final .bk-battle::before { left: calc(var(--bk-gap) * -1); }
.bk-col--final .bk-battle::after  { right: calc(var(--bk-gap) * -1); }

/* ── SCORECARD (battle reveal: runde × jurați × participant) ── */
.sc {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--card);
    margin-bottom: .75rem;
    max-width: 680px;
    overflow: hidden;
}
.sc--live { border-color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); }
/* Battle-ul terminat NU mai primește chenar verde pe toată cutia: verdele aprins în jurul întregului
   scoreboard concura cu însuși câștigătorul, care e deja marcat verde + trofeu ÎNĂUNTRU. Un semnal
   repetat pe toată rama nu adaugă informație, doar zgomot. `.sc--live` rămâne (acolo chenarul chiar
   distinge un battle ÎN CURS de restul listei). Clasa `.sc--done` se emite în continuare din Twig,
   intenționat: e marcaj de stare, util dacă mai târziu vrem alt semnal — doar chenarul a picat. */

/* Panou FOCUS — battle curent/rezultat */
.sc--focus { max-width: 960px; width: 100%; margin-bottom: 1rem; box-shadow: var(--shadow-hard); }
.sc--focus .sc__bar { font-size: var(--font-sm); padding: .4rem .85rem; }
/* Plafon la vârful scării (feedback 2026-08-12 ×2: numele erau tot mici) — cqi-ul conduce, cu
   coeficientul de lungime; pe mobil coboară spre floor; line-clamp 2 = plasa finală. */
.sc--focus .sc__side { padding: .7rem 1rem; }
.sc--focus .sc__score-n { font-size: var(--font-7xl); }
.sc--focus .sc__score { min-width: 5.5rem; }
.sc--focus .sc-jt__note { font-size: var(--font-lg); }
.sc--focus .sc-jt__cell { min-height: 1.8rem; }
.sc--focus .sc-round__hd { font-size: var(--font-sm); }

.sc__bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .3rem .6rem;
    background: var(--surface-inverse); color: var(--text-on-inverse);
    font-family: var(--font-display);
    font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .08em;
}
.sc__state { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.sc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt);
           animation: sc-pulse 1.1s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Container pentru cq: numele din antetul „VS" (starea de așteptare) se strâng FLUID exact ca cele
   din rezumatul revealed (.sc-jc__nm) — înainte erau la font FIX + line-clamp, deci aceeași sursă
   de nume arăta diferit între cele două stări. cq-ul se declară pe WRAPPER (.sc__vs), nu pe .sc:
   unitățile cq nu se rezolvă pe elementul care declară containerul (vezi nota de la .sc-jc).
   MĂRIMEA = cqi (lățimea containerului) × --nm-k (bucket-ul de LUNGIME al numelui, servit de
   presenter prin .sc-nm--m/--l): cqi nu știe cât de lung e textul — fără coeficient, numele
   scurte rămâneau mici degeaba, iar cele lungi se rupeau în cuvânt (break-word e plasa FINALĂ,
   nu regula). Pe proiector, zoom-ul din .live-projector amplifică totul încă o dată. */
.sc-nm--m { --nm-k: .8; }
.sc-nm--l { --nm-k: .62; }
.sc__vs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-hair); container-type: inline-size; }
/* Cu fereastra de vot deschisă, numele și butoanele sunt UN bloc — linia dintre ele îl tăia în două
   (cerere user 2026-08-15). Separatorul rămâne unul singur, sub butoane (`.sc__vote`). */
.sc__vs:has(+ .sc__vote) { border-bottom: 0; }
/* Numele stau CENTRATE în latura lor (cerere user 2026-08-15) — nu lipite de marginile din afară.
   Așa cad exact peste butoanele de vot de dedesubt, care sunt și ele centrate pe coloana lor, iar
   antetul citește ca o pereche, nu ca două etichete împinse în colțuri. */
.sc__side {
    flex: 1; min-width: 0; padding: .5rem .75rem;
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; text-align: center; gap: .4rem;
    /* Containerul e CELULA, nu rândul (vezi .sc__nm): numele se măsoară în spațiul lui real. */
    container-type: inline-size;
}
/* `--r` nu mai schimbă alinierea (ambele laturi sunt centrate); rămâne ca marcaj de latură pentru
   ordinea cupă/nume din markup și pentru regulile care au nevoie să distingă dreapta de stânga. */
.sc__side--win { background: var(--winner-bg); color: var(--winner-fg); box-shadow: inset 4px 0 0 0 var(--winner-edge); }
.sc__side--out { color: var(--fg4); }
/* nume lungi / 2v2 → maxim 2 rânduri apoi taie (același pattern ca .bk-entry__name).
   `break-word`, NU `anywhere`: `anywhere` rupea ÎN INTERIORUL cuvântului chiar când nu era nevoie —
   „SATANEL" apărea ca „SATAN / EL". Cu `break-word` numele rămâne întreg cât timp încape (corpul
   literei scade fluid înainte, vezi .sc-jc__nm) și se rupe doar dacă un singur cuvânt chiar nu are
   loc. La 2v2 numele sunt separate prin spații, deci wrap-ul normal le pune pe două rânduri. */
.sc__nm {
    min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: break-word;
    /* CORPUL NUMELUI SE MĂSOARĂ ÎN CELULA LUI, nu în rând (containerul e pe `.sc__side` /
       `.sc-jc__nm`). Înainte `cqi` era lățimea rândului „VS", din care latura primește ~40% —
       deci scara supraevalua de ~2,4×: la 425px ieșeau litere de ~45px într-o celulă de ~150px,
       iar un nume scurt ca „MICU" se rupea în cuvânt („MI/CU").
       Coeficienții sunt cei vechi înmulțiți cu 2,4 (8→19, 11→26).
       `--nm-k` (bucketul de LUNGIME servit de presenter pe celulă) se moștenește aici.
       MĂRIMEA E DIFERITĂ PE CELE DOUĂ SUPRAFEȚE (calibrat 2026-08-15 pe feedback vizual, în două
       runde — prima a umflat ambele suprafețe, a doua a umflat capul de rezumat până cânt „LUCA T"
       își arunca „T"-ul pe rândul doi):
         · antetul „VS" (așteptare) → 21cqi, plafon `--font-5xl`: puțin mai mari decât erau, dar
           rămân eticheta perechii care urmează;
         · capul scorecardului FINAL (`.sc-jc__nm`) → 19cqi, plafon `--font-6xl`: ~ca înainte pe
           panoul îngust (acolo `cqi` conduce), cu ceva spațiu de creștere pe ecran lat.
       Discrepanța de lungime („BEAT THE YOUNG HUSTLER" vs „MICU") NU se rezolvă din coeficient — ăla
       nu știe cât e textul. O rezolvă `--nm-k`, bucketul de LUNGIME servit de presenter PER ENTRY:
       numele lung primește .62, cel scurt 1 → cutii de mărimi comparabile, nu litere de mărimi egale. */
    font-size: clamp(var(--font-sm), calc(21cqi * var(--nm-k, 1)), calc(var(--font-5xl) * var(--nm-k, 1)));
}
.sc-jc__nm .sc__nm { font-size: clamp(var(--font-sm), calc(19cqi * var(--nm-k, 1)), calc(var(--font-6xl) * var(--nm-k, 1))); }
/* Cupa e SUBORDONATĂ numelui și are corp PROPRIU (fluid din aceeași celulă): moștenirea o făcea
   cât un titlu pe panoul mare, iar `em` pe font-size-ul mutat nu mai are de unde moșteni. */
.sc__tr { color: var(--rank-gold-ink); flex-shrink: 0; font-size: clamp(var(--font-md), 9cqi, var(--font-3xl)); }

/* Scor mare acumulat în antet = runde câștigate (2–0) */
.sc__score { align-self: center; flex-shrink: 0; text-align: center; padding: 0 .7rem; min-width: 4.5rem; }
.sc__vs-mid { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-sm); }
.sc__score-n { font-family: var(--font-display); font-weight: 900; font-size: var(--font-4xl); line-height: 1; color: var(--fg3); }
.sc__score-n.is-win { color: var(--winner-ink); }
.sc__score-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-lg); margin: 0 .15rem; }
.sc__score-lbl { display: block; font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* Bloc rundă = card distinct, fundal colorat ciclic (3 culori) + dungă accent stânga,
   ca rundele să se distingă clar una de alta */
.sc-round {
    border-left: 4px solid var(--fg4);
    border-radius: var(--radius-sm); margin: 0 .45rem .4rem; overflow: hidden;
}
.sc-round:first-of-type { margin-top: .4rem; }
.sc-round--c0 { border-left-color: #2f6df0; background: #f4f8ff; }
.sc-round--c0 .sc-round__hd { background: #dde9ff; }
.sc-round--c1 { border-left-color: var(--warning); background: #fffaef; }
/* Literal, ca frații c0/c2 — NU `--warning-soft`. Setul ăsta e pinned-light prin decizie (cerneala
   lui, --sc-round-ink, e fixă), dar --warning-soft e theme-aware și în dark devenea #33270a:
   cerneală închisă pe fundal închis = 1.09:1, antetul rundei 1 dispărea. Un fundal pinned cere
   cerneală pinned și invers — nu se amestecă. */
.sc-round--c1 .sc-round__hd { background: #ffeecb; }
.sc-round--c2 { border-left-color: #7a4fd0; background: #f7f2ff; }
.sc-round--c2 .sc-round__hd { background: #e7dcff; }
/* runda de departajare (golden) — scoasă în evidență cu auriu */
.sc-round--golden { border: 2px solid var(--rank-gold); border-left-width: 5px; background: #fff8e6; box-shadow: 0 0 0 2px rgba(199,146,0,.12); }
.sc-round--golden .sc-round__hd { background: var(--golden-soft); color: var(--on-golden); }
.sc-round--golden .sc-round__no { color: var(--on-golden); }
/* `flex-wrap` — pe îngust „RUNDA 3" și rezultatul ajungeau lipite și se citeau ca un singur șir
   („RUNDA 3 egal"). Cu wrap, rezultatul pică sub numărul rundei exact când nu mai încape, în loc să
   stea permanent pe două rânduri: antetul rămâne de o linie oriunde e loc (regula de aranjament fluid
   din UI_RULES — cade pe rând când se îngustează, nu dintr-un @media dur). */
.sc-round__hd {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .2rem .6rem; background: var(--paper-2);
    border-bottom: 1px solid var(--border-hair);
    /* Text pinned pe tintele pastel .sc-round--c* (theme-INDEPENDENT) — altfel --fg2/--fg3
       flipează deschis în dark → text deschis pe pastel deschis = invizibil. Golden își
       păstrează override-ul propriu (--on-golden). Copiii moștenesc (color: inherit). */
    color: var(--sc-round-ink);
    font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .05em;
}
.sc-round__no { font-family: var(--font-display); font-weight: 900; color: inherit; }
.sc-round__res { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.sc-round__w { font-weight: 700; }
.sc-round__w--tie { color: inherit; }
.sc-round__tally { font-family: var(--font-mono); color: inherit; opacity: .8; flex-shrink: 0; }

/* Tabel jurați — stânga = e1 | jurat | dreapta = e2. Fundal alb ca umplerea %-ului să se vadă clar
   (identitatea rundei rămâne pe header + dunga stângă + chenar). */
.sc-jt { display: flex; flex-direction: column; background: var(--card); }
/* Mijloc cu lățime FIXĂ (nu auto) → celulele laterale e1/e2 rămân egale pe TOATE rândurile
   și rundele, indiferent de cât de lung e numele juratului/criteriului → barele --w% nu se
   mai distorsionează. Numele/criteriile lungi se rup în mijlocul fix (overflow-wrap). */
.sc-jt__row {
    display: grid; grid-template-columns: 1fr 7.5rem 1fr;
    align-items: stretch; border-top: 1px solid var(--border-hair);
}
.sc--focus .sc-jt__row { grid-template-columns: 1fr 10rem 1fr; }
.sc-jt__row:first-child { border-top: none; }
.sc-jt__judge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: .12rem .4rem; text-align: center; line-height: 1.05;
    border-left: 1px solid var(--border-hair); border-right: 1px solid var(--border-hair);
    min-width: 0; overflow: hidden; overflow-wrap: anywhere;
}
.sc-jt__jn { font-size: var(--font-xs); font-weight: 700; }
.sc-jt__jr { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; }
/* O singură linie per jurat/participant — FĂRĂ wrap. Fundalul celulei = cât din total
   (lungime = % normalizat), cu muchie clară unde se termină procentul. */
.sc-jt__cell {
    --sc-fill: rgba(20, 18, 16, .12); --sc-edge: rgba(20, 18, 16, .3);
    position: relative; overflow: hidden;
    display: flex; align-items: center; flex-wrap: nowrap; gap: .4rem;
    padding: .14rem .6rem; min-height: 1.55rem; min-width: 0;
    /* Fundal = cât din total: bloc colorat până la --w (=% normalizat) cu muchie clară */
    background:
        linear-gradient(90deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)),
        linear-gradient(90deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%));
}
.sc-jt__cell--entry2 {
    justify-content: flex-end;
    background:
        linear-gradient(270deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)),
        linear-gradient(270deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%));
}
.sc-jt__cell.is-fav { --sc-fill: rgba(15, 138, 61, .22); --sc-edge: var(--success); box-shadow: inset 3px 0 0 0 var(--success); }
.sc-jt__cell--entry2.is-fav { box-shadow: inset -3px 0 0 0 var(--success); }
/* rundă egală (scor egal) — marcaj neutru amber pe ambele părți + „egal" la mijloc */
.sc-jt__cell.is-tie { --sc-fill: rgba(199, 146, 0, .16); --sc-edge: var(--warning); box-shadow: inset 3px 0 0 0 var(--warning); }
.sc-jt__cell--entry2.is-tie { box-shadow: inset -3px 0 0 0 var(--warning); }
.sc-jt__judge.is-tie { background: var(--warning-soft); }
.sc-jt__eq { font-size: var(--font-2xs); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--warning); }
/* Caret „favorit" scos din flux, fix la marginea exterioară → nu mai împinge cifrele */
.sc-jt__cell--entry1 { padding-left: 1.6rem; }
.sc-jt__cell--entry2 { padding-right: 1.6rem; }
.sc-jt__fav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--success); flex-shrink: 0; }
.sc-jt__cell--entry1 .sc-jt__fav { left: .45rem; }
.sc-jt__cell--entry2 .sc-jt__fav { right: .45rem; }
/* Nota = numărul prominent; %-ul mic (lungimea fundalului îl arată oricum) */
/* Nota-total a criteriului = lățime FIXĂ + aliniere spre exterior → sub-criteriile de dedesubt
   pornesc de la ACELAȘI x pe toate rândurile (coloană verticală curată). */
.sc-jt__note { flex-shrink: 0; min-width: 2.4rem; font-family: var(--font-mono); font-weight: 700; font-size: var(--font-md); color: var(--fg1); }
.sc-jt__cell--entry1 .sc-jt__note { text-align: left; }
.sc-jt__cell--entry2 .sc-jt__note { text-align: right; }
.sc-jt__note small { font-size: var(--font-2xs); color: var(--fg2); font-weight: 400; }
/* Sub-criteriile (skills Trivium) STIVUITE unul sub altul, aliniate spre marginea EXTERIOARĂ
   (stânga la e1 / dreapta la e2, exact ca nota-total) → coloană curată de sus până jos, ușor de
   urmărit. Mică distanță față de nota-total (margin). */
.sc-jt__sk { display: inline-flex; flex-direction: column; gap: 1px; }
.sc-jt__cell--entry1 .sc-jt__sk { align-items: flex-start; margin-left: .35rem; }
.sc-jt__cell--entry2 .sc-jt__sk { align-items: flex-end; margin-right: .35rem; }
.sc-jt__skv { font-size: var(--font-xs); color: var(--fg2); white-space: nowrap; }
.sc-jt__skv b { color: var(--fg1); font-family: var(--font-mono); }
/* Chip-ul de ajustare (`.adj-chip`) e definit ÎN tokens.css — singurul fișier încărcat și de
   scorecard, și de ecranul juratului, deci culoarea pe nivel e aceeași pe ambele (ADR 0021 am.3).
   Aici trăiau `.sc-jt__pen`/`.sc-jc__pen`, un roșu/verde plat fără nivel, paralel cu tokenii
   juratului. `flex-shrink: 1` rămâne local: pe rândul strâmt al detaliului per jurat chipul
   cedează lățime în loc să împingă nota afară. */
.sc-jt .adj-chip { flex-shrink: 1; }

/* Legendă reveal — explică notă / % / bară / crash pentru oameni obișnuiți */
.sc-legend {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
    padding: .4rem .65rem; background: var(--paper-2); border-bottom: 1px solid var(--border-hair);
    font-size: var(--font-2xs); color: var(--fg3);
}
.sc-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.sc-legend__k {
    font-family: var(--font-mono); color: var(--fg1);
    background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 0 .3rem;
}
.sc-legend__bar { width: 26px; height: 7px; border-radius: 999px; border: 1px solid var(--border-hair); background: linear-gradient(90deg, var(--success) 65%, var(--paper) 65%); }

/* OUR / panel — tabel JURAT × DANSATOR. Stânga = juratul + categoria pe care o jurizează;
   coloana fiecărui dansator = TOTALul dat de acel jurat pe criteriul lui. Verde = cine a luat mai
   mult la criteriul ăla; crash/slip marcat. Detaliul pe runde rămâne în bracket (vizualizare detaliată). */
/* UN tabel: cap (nume mari + scor mare, stil .sc__vs) + rânduri criterii pe ACELEAȘI 3 coloane
   (1fr | criteriu/scor | 1fr) → e1 sub nume1, criteriul sub scor, e2 sub nume2. Aliniere garantată. */
/* full-bleed în rama .sc (chenarul exterior = SINGURA ramă; fără cutie-în-cutie) */
/* container-type: rândurile de dedesubt se dimensionează în `cqi` = lățimea REALĂ a tabelului, nu a
   ecranului. Tabelul stă și pe pagina categoriei (îngust, lângă bracket), și pe proiector (lat), deci
   un `@media` pe viewport ar minți. CAPCANĂ: `cq*` NU se rezolvă la elementul care declară containerul
   — doar la descendenți; de aceea clamp-urile stau pe `.sc-jc__*`, nu aici. */
/* Coloana din mijloc e PLAFONATĂ la cât ocupă blocul central din antet („3–0" + „criterii câștigate"),
   nu lăsată pe `auto`. Cu `auto` un criteriu lung („Originalitate & Battle") umfla coloana și strivea
   numele concurenților — care pe scoreboard sunt informația principală. Acum se întâmplă invers:
   criteriul se rupe pe două rânduri în lățimea lui (are spații, deci wrap normal), iar numele își
   păstrează spațiul. Plafon în `rem`, nu `cqi`: ELEMENTUL ĂSTA declară containerul, iar unitățile
   lui nu se rezolvă pe el însuși. */
.sc-jc { display: grid; grid-template-columns: 1fr minmax(4.5rem, 8.5rem) 1fr; margin: 0; background: var(--card); font-variant-numeric: tabular-nums; container-type: inline-size; }
/* cap: nume mari */
/* Corpul numelui scade cu LĂȚIMEA TABELULUI (cqi), nu cu a ecranului — plafon = --font-lg, adică
   exact cât era, deci pe lat nimic nu se schimbă. Rostul: un nume lung („SATANEL") se micșorează
   ÎNAINTE să fie nevoie să fie rupt în două. Ruperea rămâne ultima soluție (vezi .sc__nm). */
.sc-jc__nm { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border-hair); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; min-width: 0; container-type: inline-size; }
.sc-jc__nm.is-win { background: var(--winner-bg); color: var(--winner-fg); }
.sc-jc__nm.is-out { color: var(--fg4); }
/* cap: scor mare (centru) */
.sc-jc__sc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem .7rem; border-bottom: 1px solid var(--border-hair); text-align: center; }
.sc-jc__sc-n { font-family: var(--font-display); font-weight: 900; font-size: var(--font-4xl); line-height: 1; color: var(--fg3); }
.sc-jc__sc-n.is-win { color: var(--winner-ink); }
.sc-jc__sc-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-lg); margin: 0 .15rem; }
.sc-jc__sc small { font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
/* câte runde s-au dansat în total — jos de tot sub scorul central */
.sc-jc__rounds { font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
/* notă departajare — apare DOAR la egalitate de criterii (suma punctelor decide) */
.sc-jc__tiebreak { margin-top: 3px; padding: 1px 6px; background: var(--warning-soft); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--on-warning-soft); line-height: 1.2; }
.sc-jc__tiebreak b { font-family: var(--font-mono); color: var(--fg2); }
.sc-jc__tiebreak b.is-win { color: var(--winner-ink); }
/* rânduri criterii — aliniate sub cap; cifra centrată, penalizările sub ea (nu o împing) */
.sc-jc__v { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); font-family: var(--font-mono); }
.sc-jc__v b { font-size: var(--font-2xl); font-weight: 700; color: var(--fg2); line-height: 1; }
.sc-jc__v.is-win { background: var(--winner-bg); }
.sc-jc__v.is-win b { color: var(--winner-fg); }
/* egalitate la criteriu (scor egal) — neutru amber, NU verde; „egal" în centru */
.sc-jc__v.is-tie { background: var(--warning-soft); }
.sc-jc__v.is-tie b { color: var(--on-warning-soft); }
.sc-jc__crit.is-tie { background: var(--warning-soft); }
/* Marcajul de egalitate stă SUB numele rundei/criteriului, nu lângă el: pe orizontală împingea numele
   de pe centru, iar coloana din mijloc e oricum plafonată. Bandă lipită de fundul celulei — ține
   egalitatea în ACEEAȘI încăpere cu runda la care se referă. Înainte era un rând peste toată grila
   (`grid-column: 1 / -1`), deci o dungă dintr-o parte în alta a scorecardului, ruptă vizual de rundă:
   cu mai multe runde dedesubt nu se mai vedea la care dintre ele se referă. Numele juraților care au
   văzut egal + „egal", atât — că e vorba de runda de deasupra se înțelege din poziție, nu din text. */
.sc-jc__eq {
    display: flex; flex-direction: column; align-items: center; align-self: stretch; min-width: 0;
    padding: .05rem .25rem; border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 900;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
    color: var(--on-warning-soft); background: var(--warning-soft); overflow-wrap: anywhere;
}
.sc-jc__crit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); text-align: center; min-width: 0; }
.sc-jc__jx { display: flex; flex-direction: column; min-width: 0; }
/* criteriul (rolul) = linia PRINCIPALĂ (mare) — contează mai mult decât cine îl jurizează;
   numele juratului = secundar dedesubt (.sc-jc__role). Fallback la numele juratului dacă n-are rol. */
/* Criteriul stă într-o coloană plafonată, deci un nume lung („Originalitate & Battle") CADE PE DOUĂ
   RÂNDURI în loc să umfle coloana — exact ce trebuie, fiindcă spațiul îl merită numele concurenților.
   Corpul scade odată cu tabelul; `break-word` rupe doar dacă un singur cuvânt chiar nu încape. */
.sc-jc__name { font-family: var(--font-sans); font-size: clamp(var(--font-2xs), 3.4cqi, var(--font-sm)); font-weight: 900; color: var(--fg1); line-height: 1.15; overflow-wrap: break-word; }
.sc-jc__role { font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--fg3); line-height: 1.15; }
/* min-height = rezervarea rândului de penalizări: când o latură are penalizări iar cealaltă nu, ambele
   randează `.sc-jc__pens` (gol unde lipsește) → înălțime egală, laturile rămân aliniate (regulă de design). */
.sc-jc__pens { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; min-height: .9rem; }
/* Corpul numelui stă acum pe `.sc__nm` (vezi acolo: se măsoară în CELULĂ, nu în tabel, și are
   plafon separat pe capul de rezumat), deci aici rămâne doar spațierea panoului mare. */
.sc--focus .sc-jc__nm { padding: .7rem 1rem; }
.sc--focus .sc-jc__sc-n { font-size: var(--font-7xl); }
.sc--focus .sc-jc__v b { font-size: var(--font-5xl); }
.sc--focus .sc-jc__name { font-size: clamp(var(--font-xs), 4cqi, var(--font-md)); }

/* Toggle „Detaliu pe jurați" — lipit sub rezumat, deschide tabelele pe runde (Bootstrap collapse).
   Capul de tabel NU se redublează: numele sunt deja în rezumatul de deasupra. */
/* rând-footer al aceleiași rame (nu cutie separată): full-width, doar hairline sus */
.sc-detail-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; margin: 0; padding: .3rem .6rem;
    background: transparent; border: 0; border-top: 1px solid var(--border-hair); border-radius: 0;
    font-family: var(--font-display); font-size: var(--font-2xs); font-weight: 900;
    text-transform: uppercase; letter-spacing: .06em; color: var(--fg2); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.sc-detail-toggle:hover { background: var(--paper-2); color: var(--fg1); }
.sc-detail-toggle[aria-expanded="true"] { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); }
.sc-detail-toggle__chev { flex-shrink: 0; font-size: var(--font-sm); transition: transform .15s; }
.sc-detail-toggle[aria-expanded="true"] .sc-detail-toggle__chev { transform: rotate(180deg); }
.sc-detail { border-top: 1px solid var(--border-hair); }
.sc--focus .sc-detail-toggle { font-size: var(--font-xs); padding: .4rem .75rem; }

/* Totaluri (baza tie-break) */
.sc-totals {
    display: flex; align-items: center; justify-content: space-between;
    padding: .35rem .75rem; background: var(--paper-2); border-top: 1px solid var(--border-hair);
}
/* TOTAL PUNCTE = info importantă (tie-break la egal) → cifre MARI, vizibile */
.sc-totals__v { font-family: var(--font-mono); font-weight: 900; font-size: var(--font-3xl); color: var(--fg3); line-height: 1; }
.sc-totals__v--hi { color: var(--success); }
.sc--focus .sc-totals__v { font-size: var(--font-5xl); }
/* maxul teoretic (constant) — mic, estompat, lipit de total ca scală („18.6 / 30") */
.sc-totals__max { font-size: var(--font-2xs); color: var(--fg4); font-weight: 400; margin-left: 2px; }
.sc-totals__lbl { font-size: var(--font-sm); font-weight: 900; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; }

/* ── Totalul (%) pe fiecare jurat/criteriu (panel ȘI simplu): centrat în celula flex-column
   `.sc-jc__v` (definită mai sus), cu penalizările pe RÂND PROPRIU dedesubt. Boxele pe runde
   (fostul `.sc-rds`) au fost SCOASE din rezumat — magnitudinea trăiește în % + TOTAL PUNCTE. ── */
/* Coloana totalului = lățime FIXĂ → cifra (b) rămâne pe aceeași lățime pe toate rândurile
   (ex. 100% nu depășește). */
.sc-jc__tg { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 1px; flex-shrink: 0; width: 3.4rem; }
.sc--focus .sc-jc__tg { width: 4.5rem; }
/* Rândurile per-jurat pt varianta simplă (skills) — același grid ca panelul, dar FLUID.
   Nu „îndesat cu valori fixe": densitatea se derivă din lățimea tabelului (`cqi`), cu tokenii ca
   praguri. Pe o coloană îngustă rândurile se strâng singure; pe lat revin la mărimea de dinainte.
   Plafonul fiecărui clamp = VALOAREA DE AZI (--font-2xl / 3.4rem / .3rem) → nimic nu poate crește
   peste ce încăpea deja, deci încadrarea nu se poate strica; se poate doar micșora când e nevoie.
   Cifra e UNA singură (runde câștigate de juratul ăla), nu un procent de 3 caractere — iar verdictul
   se ia din CULOARE, cifra doar confirmă; de aceea pragul de jos poate coborî mult.
   Cele trei mărimi stau ca tokeni AICI: reglarea = trei linii într-un loc. Criteriile sunt neatinse. */
.sc-jr {
    margin-top: .4rem;
    --jr-pad-y: clamp(.12rem, .7cqi, .3rem);
    --jr-num: clamp(var(--font-sm), 4.2cqi, var(--font-2xl));
    --jr-col: clamp(1.9rem, 9cqi, 3.4rem);
    --jr-name: clamp(var(--font-2xs), 3.2cqi, var(--font-sm));
}
.sc-jr .sc-jc__v,
.sc-jr .sc-jc__crit { padding-top: var(--jr-pad-y); padding-bottom: var(--jr-pad-y); }
.sc-jr .sc-jc__v b { font-size: var(--jr-num); }
.sc-jr .sc-jc__tg { width: var(--jr-col); }
/* Numele juratului scade odată cu restul și se rupe în loc să împingă coloanele cifrelor. */
.sc-jr .sc-jc__name { font-size: var(--jr-name); }
/* Jurații care au dat runda laturii — pe UN rând, deasupra punctelor, separați prin „·".
   `min-height` cu unitate `em` (deci legată de propriul corp de literă) rezervă exact o linie ȘI
   ATUNCI CÂND E GOL: la o rundă luată 3–0, latura fără jurați ar fi altfel mai scundă și cele două
   coloane s-ar decala pe verticală. Containerul se randează mereu — vezi template. */
.sc-jr__who {
    /* `align-self: stretch` — altfel, ca element flex sub `align-items: center`, lățimea ar fi cea a
       conținutului, iar gol ar avea lățime zero și n-ar mai centra nimic peste cifră. */
    display: block; align-self: stretch; min-width: 0; min-height: 1.35em; text-align: center;
    font-family: var(--font-sans); font-weight: 700; line-height: 1.2;
    font-size: var(--jr-name); color: var(--fg3); overflow-wrap: anywhere;
}
.sc-jr .sc-jc__v.is-win .sc-jr__who { color: var(--winner-fg); }
/* Pe proiector densitatea nu mai e o virtute — se citește de la distanță. Rescriem TOKENII, nu
   regulile: regulile `.sc-jr …` de mai sus au aceeași specificitate ca perechile `.sc--focus …`
   dinainte și vin după ele în fișier, deci ar câștiga oricum. Aici sursa rămâne una. */
.sc--focus .sc-jr {
    --jr-pad-y: clamp(.2rem, 1cqi, .4rem);
    --jr-num: clamp(var(--font-2xl), 9cqi, var(--font-5xl));
    --jr-col: clamp(2.6rem, 13cqi, 4.5rem);
    --jr-name: clamp(var(--font-sm), 4.5cqi, var(--font-md));
}

/* Rezumat pe RUNDE — randat în ACELAȘI grid .sc-jc ca pe-criterii: totalul pe rundă = procent
   (.sc-jc__tg), penalizările dedesubt. Verde/amber moștenit din .sc-jc__v. */
/* Progres (înainte de reveal) — bară segmentată pe toată lățimea, un segment / jurat */
.sc-prog { padding: .55rem .65rem; display: flex; flex-direction: column; gap: 6px; }
.sc-prog__lbl { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; }
.sc-prog__row { display: flex; align-items: center; gap: .5rem; }
.sc-prog__no { width: 2.2rem; flex-shrink: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm); color: var(--fg3); }
.sc-prog__seg { display: flex; gap: 4px; flex: 1; }
.sc-prog__cell {
    flex: 1; height: 18px; border-radius: var(--radius-sm);
    background: var(--paper-2); border: 1px solid var(--border-hair); transition: background .15s;
}
.sc-prog__cell.is-on { background: var(--success); border-color: var(--success); }
.sc-prog__cnt { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--fg2); flex-shrink: 0; min-width: 2.4rem; text-align: right; }
.sc--focus .sc-prog__cell { height: 26px; }
.sc--focus .sc-prog { gap: 8px; padding: .75rem .8rem; }
.sc-prog__empty { font-size: var(--font-sm); color: var(--fg3); }
.sc-prog__hint { font-size: var(--font-2xs); color: var(--fg4); margin-top: .2rem; }

/* Carduri battle terminate = expandabile + acordeon scorecards */
.bk-battle--expandable { cursor: pointer; }
.bk-battle--expandable:hover { box-shadow: var(--shadow-hard-sm); }
/* indiciu „apasă pt scorecard": chevron mic în COLȚ, absolut → fără div/spațiu extra sub card.
   Estompat, se aprinde la hover/expand. */
.bk-battle__more {
    position: absolute; bottom: 0; left: 1px;   /* colț exterior (numele se aliniază spre centru) */
    color: var(--fg4); font-size: var(--font-3xs); line-height: 1;
    opacity: .45; pointer-events: none;
    transition: opacity .12s, color .12s;
}
.bk-battle__more i { transition: transform .12s; }
.bk-battle--expandable:hover .bk-battle__more { opacity: 1; color: var(--text); }
.bk-battle--expandable[aria-expanded="true"] .bk-battle__more { opacity: 1; color: var(--text); }
.bk-battle--expandable[aria-expanded="true"] .bk-battle__more i { transform: rotate(180deg); }

/* Slot principal scorecard (în panoul din dreapta): un singur scorecard vizibil odată — battle-ul
   curent implicit, sau cel pe care s-a dat click în bracket. Restul rămân collapse (ascunse). */
.bk-sc-hint { font-size: var(--font-2xs); color: var(--fg3); margin: .1rem .1rem .4rem; }
.bk-sc-slot { display: flex; flex-direction: column; }
.bk-sc-slot__item .sc { margin-bottom: 0; }

/* Strip progres bracket (battle-uri terminate / total) */
.bk-progress { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .6rem; font-size: var(--font-xs); color: var(--fg3); }
.bk-progress__lbl { font-weight: 700; white-space: nowrap; }
.bk-progress__bar { flex: 1; max-width: 340px; height: 6px; background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: 999px; overflow: hidden; }
.bk-progress__fill { display: block; height: 100%; background: var(--success); }

/* Finala = accent (centrul convergenței) */
.bk-col--final .bk-battle { box-shadow: var(--shadow-hard-sm); }
.bk-col--final .bk-col-label { color: var(--primary-strong); border-bottom-color: var(--primary); }



/* === 10c. CATEGORY SHOW ==================================== */

.cat-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: .32rem .65rem;
    background: var(--paper-2);
    border-top: 2px solid var(--border-strong);
    border-bottom: 1px solid var(--border-hair);
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--fg1); margin-bottom: .35rem;
}
.cat-panel-hdr--active { border-left: 3px solid var(--volt-ink); background: var(--volt); color: var(--volt-ink); }
.cat-panel-hdr--done   { border-left: 3px solid var(--success); background: var(--success-soft); color: var(--success); }
.cat-panel-hdr--info   { border-left: 3px solid var(--status-closed-fg); }

.config-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
    padding: .15rem .5rem; font-size: var(--font-xs); color: var(--fg2);
}
.config-pill__val { font-family: var(--font-mono); font-weight: 700; color: var(--fg1); }

/* Tabs categorie (Calificare | Bracket/Smoke). Familia/mărimea/tracking-ul vin din rolul de
   ETICHETĂ (components.css § 18b); aici rămân doar spațierea și culoarea.
   `background` + `border-color` pe `.active` au fost șterse: skinul kf le rescrie oricum (tab plat cu
   underline), deci erau declarații moarte care doar făceau diagnosticul mai greu. */
.cat-tabs .nav-link { padding: .3rem .75rem; color: var(--text-muted); }
.cat-tabs .nav-link.active { font-weight: 700; color: var(--text); }
.cat-tabs .nav-link .tab-badge { vertical-align: middle; margin-left: 3px; }


/* Grid de grupe calificare — 2 carduri/rând mobil, 4/rând desktop */
.bouts-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: .35rem;
}
@media (min-width: 768px) {
    .bouts-groups-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card grupă — background se umple orizontal pe măsură ce votează jurații (--fill dinamic) */
.bgc {
    position: relative;
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    font-size: var(--font-base);
}
.bgc::before {
    content: ""; position: absolute; inset: 0;
    width: var(--fill, 0%);
    background: color-mix(in srgb, var(--volt) 38%, transparent);
    transition: width .3s ease;
    z-index: 0; pointer-events: none;
}
.bgc--done::before { width: 100%; background: color-mix(in srgb, var(--success) 26%, transparent); }
.bgc--done   { border-color: var(--success); background: var(--success-soft); }
.bgc--active { border-color: var(--volt-ink); background: var(--volt); }

.bgc__hdr {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    font-family: var(--font-display);
    font-size: var(--font-md); font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .15rem .35rem;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border-bottom: 1px solid var(--border-hair);
    color: var(--fg3);
}
.bgc--done .bgc__hdr   { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: var(--success); }
.bgc--active .bgc__hdr { color: var(--volt-ink); background: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--volt-ink); }
.bgc__ord { white-space: nowrap; }
.bgc__state { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-sm); opacity: .85; }
.bgc--pending { opacity: .72; }
.bgc--pending .bgc__state { color: var(--fg4); }
/* Rundă de departajare (tie-break) — accent golden ca să iasă din grupele normale (B24).
   După regulile de stare → câștigă pe antet chiar și când e „done". */
.bgc--golden { border-color: var(--on-golden); opacity: 1; }
.bgc--golden .bgc__hdr { color: var(--on-golden); background: var(--golden-soft); border-color: var(--on-golden); }
.bgc__live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--volt-ink); display: inline-block;
    animation: bgc-pulse 1.2s ease-in-out infinite;
}
@keyframes bgc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.bgc__row {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 4px;
    padding: .18rem .3rem;
    border-bottom: 1px solid var(--border-hair);
    min-width: 0;
}
.bgc__row:last-child { border-bottom: none; }

.bgc__dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-hair);
}
.bgc__dot--done   { background: var(--success); }
.bgc__dot--active { background: var(--volt-ink); }

.bgc__name {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: var(--fg1); font-weight: 600;
    line-height: 1.3;
}
.bgc--done .bgc__name   { color: var(--success); }
.bgc--active .bgc__name { color: var(--volt-ink); }
.bgc__crew { color: var(--fg3); font-weight: 400; }

/* Listă calificați — 2 coloane jumate/jumate (stivuite pe mobil) + iconiță metodă */
.qual-2col { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 768px) { .qual-2col { grid-template-columns: 1fr 1fr; } }
.qual-method { font-size: var(--font-3xs); margin-left: .3rem; vertical-align: middle; }
/* Celula nume = flex → marcajul ⚖ (departajare) împins la dreapta, aliniat în coloană */
.qual-name-cell { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.qual-name-cell .e-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qual-name-cell .qual-method { margin-left: auto; flex-shrink: 0; }
.qual-method--tie_break { color: var(--primary); }
/* Invitat = calificat direct (fără scor/voturi) — marcaj ★ pe rândul din tabelul de calificați */
.qual-method--invited { color: var(--primary); }
/* Voturile juriului (decidentul PRIMAR) — coloană proeminentă X/Y; plin (toți jurații) = verde */
.qual-votes {
    display: inline-block; min-width: 2.2rem; text-align: center;
    font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700;
    color: var(--fg2); background: var(--surface-2);
    border: 1px solid var(--border-hair); border-radius: 4px; padding: 0 .3rem;
}
.qual-votes--full { color: var(--success); border-color: var(--success); background: transparent; }
.qual-legend { font-size: var(--font-2xs); color: var(--text-muted); margin: .4rem .15rem 0; line-height: 1.45; }
.qual-cutline {
    display: flex; align-items: center; gap: .5rem;
    margin: .6rem 0 .25rem; font-family: var(--font-display); font-weight: 900;
    font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-faint);
}
.qual-cutline::before, .qual-cutline::after { content: ""; flex: 1; height: 0; border-top: 1px dashed var(--border-hair); }
.qual-out-table { opacity: .72; }
.qual-row--out td { color: var(--text-muted); }


/* ── VOTUL PUBLICULUI (ADR 0030 am.2) — CTA-ul stă LÂNGĂ numele concurentului, în capul „VS" al
   panoului curent, nu într-o cutie separată care repetă numele. Counts NU apar aici
   (anti-bandwagon) — cifrele trăiesc pe scorecard la reveal (.sc-av mai jos). ── */
/* RÂNDUL de vot: aceleași 3 coloane ca „VS" de deasupra, deci fiecare buton stă sub numele lui.
   Sub nume, NU în celula numelui (încercat, raportat 2026-08-15): acolo fura din lățimea numelui pe
   ecran mic, iar cele două laturi își distribuiau liniile independent → butoanele ieșeau decalate
   pe verticală. Într-un rând propriu sunt pe aceeași linie prin construcție. */
.sc__vote {
    display: grid; grid-template-columns: 1fr minmax(4.5rem, 8.5rem) 1fr; align-items: center;
    padding: 0 .75rem .5rem; border-bottom: 1px solid var(--border-hair);
}
/* Coloanele 1 și 3 (a 2-a = scorul central, rămâne goală), fiecare buton CENTRAT pe coloana lui —
   adică exact sub numele de deasupra, care e și el centrat. Containerul se randează și gol după
   vot: rezervă spațiul, nimic nu sare. */
.avc { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.avc:first-child { grid-column: 1; }
.avc:last-child { grid-column: 3; }
.avc__btn {
    /* Corp de literă PROPRIU: numele de lângă poate urca până la --font-7xl pe panoul mare, iar
       moștenirea ar face din buton un panou. */
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 44px; padding: .45rem .8rem;      /* ținta de tap (UI_RULES „Ținte touch") */
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    font-size: var(--font-sm); letter-spacing: .04em; line-height: 1; white-space: nowrap;
    border: 2px solid var(--volt-ink); border-radius: var(--radius-sm);
    background: var(--volt); color: var(--volt-ink); cursor: pointer;
    box-shadow: var(--shadow-hard-sm);
}
.avc__btn--vote:hover { background: var(--volt-ink); color: var(--volt); }
/* După vot: confirmarea rămâne pe latura ALEASĂ. PĂSTREAZĂ umplerea lime — varianta „plată"
   (transparent + --volt-ink) punea cerneală ÎNCHISĂ pe suprafața închisă a panoului și dispărea
   (feedback 2026-08-15). `--volt-ink` are contrast garantat DOAR pe `--volt`, perechea lui.
   Se schimbă doar afordanța: fără cursor de apăsat, fără umbră, fără hover. */
.avc__btn--voted { cursor: default; box-shadow: none; }

/* ── Rezultatul votului pe scorecard — RÂND PROPRIU, DEASUPRA rezumatului, pe ACELEAȘI 3 coloane ca
   `.sc-jc`/`.sc-jr` → cifra fiecărei laturi cade exact peste numele ei.
   Suprafață NEUTRĂ + o muchie de accent (nu bandă lime plină, feedback 2026-08-15: striga mai tare
   decât verdictul juriului). Identitatea vine din muchie + etichetă, nu din fundal. */
.sc-av {
    display: grid; grid-template-columns: 1fr minmax(4.5rem, 8.5rem) 1fr; align-items: center;
    background: var(--audience-bg); color: var(--audience-fg);
    border-top: 1px solid var(--border-hair);
    box-shadow: inset 0 3px 0 0 var(--audience-edge);
}
.sc-av__v { padding: .4rem .5rem .3rem; text-align: center; font-family: var(--font-display); font-weight: 900; line-height: 1; }
/* Cifra e MARE — se citește din sală, de la aceeași distanță ca scorul juriului de sub ea. */
.sc-av__v b { font-size: var(--font-4xl); }
.sc-av__v.is-win b { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .09em; }
.sc-av__mid {
    display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .4rem;
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    letter-spacing: .06em; font-size: var(--font-xs); text-align: center; color: var(--audience-lbl);
}
.sc--focus .sc-av__v b { font-size: var(--font-6xl); }
.sc--focus .sc-av__mid { font-size: var(--font-sm); }

} /* END @layer app */