/* ═══════════════════════════════════════════════════════════════════════════
   IZBORI.LOL — struktura i ništa više.
   Nijedna boja, font ni efekat se ne odlučuje ovde: sve vizuelno dolazi iz
   skin fajla kao custom property, pa je nov skin nov stylesheet i ništa
   drugo. Redosled učitavanja: base.css, pa jedan skin.
   Ništa nije zaobljeno. Svaki ćošak je četvrtast, namerno.
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  background: var(--desktop-bg);
  color: var(--fg);
  overflow: hidden;                 /* ekran pripada areni, ne skrolu */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── kabinet: jedan ekran, centriran ─────────────────────────────────────── */
.cab {
  position: fixed; inset: 0; margin: auto; z-index: 2; overflow: hidden;
  width: 100vw; height: 100dvh;
  background: var(--screen-bg);
  display: flex; flex-direction: column;
}
/* Na desktopu automat stoji na stolu — ekran dobija ivicu i senku, a širina
   se drži 16:10 da se ne razvuče u traku na ultrawide monitoru. */
@media (min-width: 900px) {
  .cab {
    width: min(100vw, calc(100dvh * 1.62)); height: 100dvh;
    box-shadow: var(--cab-shadow); border-left: var(--cab-edge); border-right: var(--cab-edge);
  }
}

/* ── CRT: skenlajnovi i vinjeta preko svega, ali ispod prstiju ───────────── */
/* Sloj SAMO dodaje ili množi svetlo po skinu — nikad ne gasi crtež ispod.
   pointer-events:none je ovde suština: bez toga ceo ekran prestaje da prima
   dodir, a to je greška koja se vidi tek na telefonu. */
.crt { position: absolute; inset: 0; z-index: 90; pointer-events: none; }
.crt::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    var(--scan-a) 0 1px, var(--scan-b) 1px var(--scan-pitch));
  mix-blend-mode: var(--scan-blend); opacity: var(--scan-op);
}
.crt::after {
  content: ""; position: absolute; inset: 0;
  background: var(--vignette);
}
@media (prefers-reduced-motion: no-preference) {
  .crt { animation: flick 5.5s steps(1) infinite; }
}
@keyframes flick { 0%,96% { opacity: 1; } 97% { opacity: .93; } 98%,100% { opacity: 1; } }

/* ── traka na vrhu: naslov turnira ───────────────────────────────────────── */
.marq {
  flex: none; height: var(--marq-h); overflow: hidden; position: relative; z-index: 40;
  background: var(--marq-bg); border-bottom: var(--rule);
  display: flex; align-items: center;
}
.marq .tape { display: flex; white-space: nowrap; will-change: transform; animation: run var(--marq-speed) linear infinite; }
.marq .tape span { padding-right: 2.5em; font-family: var(--mono); font-size: 9px;
  font-weight: 700; letter-spacing: .22em; color: var(--marq-fg); text-transform: uppercase; }
.marq .tape b { color: var(--marq-hot); font-weight: 700; }
@keyframes run { to { transform: translateX(-50%); } }
/* Reduce Motion NE gasi traku — traka koja stoji je samo odsečena rečenica.
   Usporava se, jer je čitljivost razlog zbog kog je uopšte tu. */
@media (prefers-reduced-motion: reduce) { .marq .tape { animation-duration: calc(var(--marq-speed) * 3); } }

/* ── HUD: dva life bara i sat između njih ────────────────────────────────── */
.hud {
  flex: none; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; gap: 6px; padding: 8px var(--gut) 6px;
  background: var(--hud-bg); border-bottom: var(--rule);
}
.hud .who { min-width: 0; }
.hud .who .nm {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em;
  color: var(--hud-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px;
}
.hud .who.b { text-align: right; }
/* Life bar se prazni ka centru — levi s desna, desni s leva. To je jedini
   razlog zašto ovde uopšte postoji `direction`. */
.bar { height: var(--bar-h); background: var(--bar-track); border: var(--bar-edge); position: relative; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 0; background: var(--bar-fill);
  transition: width 1.1s cubic-bezier(.2,.9,.2,1);
}
.hud .who.b .bar i { margin-left: auto; }
/* Bela pruga koja kasni za pogotkom — potpis žanra. */
.bar u { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; background: var(--bar-ghost);
  transition: width 1.9s .35s ease; }
.hud .who.b .bar u { inset: 0 0 0 auto; }

.clock {
  font-family: var(--mono); font-size: var(--clock-size); font-weight: 700; line-height: 1;
  letter-spacing: .04em; color: var(--clock-fg); text-shadow: var(--clock-glow);
  padding: 0 8px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center;
}
.clock.low { color: var(--clock-low); }
.hud .rd { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; text-align: center;
  color: var(--hud-dim); margin-top: 4px; }

/* ── arena ───────────────────────────────────────────────────────────────── */
.arena { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* Ćilim iza svega: romb-raport, jedan gradijent, bez ijedne slike. */
.arena::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--kilim); background-size: var(--kilim-size); opacity: var(--kilim-op);
}
/* Zraci iz centra — arkadni „sunburst”, konusni gradijent, bez markapa. */
.arena::after {
  content: ""; position: absolute; inset: -30%; z-index: 0;
  background: var(--rays); opacity: var(--rays-op); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .arena::after { animation: spin 90s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Dve strane su OBE preko celog polja i seku se komplementarnim clip-path-om,
   pa šav nikad ne propušta pozadinu između njih. Na telefonu je šav vodoravan,
   na desktopu je dijagonalan — ista dva elementa, druga dva poligona. */
.side { position: absolute; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; }

/* ── slojevi jedne strane, odozdo naviše ─────────────────────────────────
   bina → tinta → figura → LED rasteru → skrim → pločica
   Redosled je ceo dogovor: ono što boji stoji ISPOD figure, ono što je
   pretvara u ekran stoji IZNAD nje, a skrim je poslednji i tiče se samo
   podnožja gde stoje slova. */
.bina { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--bina-pos); filter: var(--foto-filter); }

/* SVETLO SE DODAJE, NE ODUZIMA.
   Trobojka sa dve strane je osvetljenje panela, a `screen` je jedini blend
   koji sme preko tuđeg kadra: on ne može da smanji ni jednu vrednost. Zato
   nijedan skin, nijedno stanje i nijedan izbor ne zatamnjuju fotografiju —
   čitljivost se plaća slovima i skrimom u podnožju, ne prigušivanjem slike. */
.tint { position: absolute; inset: 0; z-index: 1; background: var(--side-wash);
  mix-blend-mode: var(--tint-blend); pointer-events: none; }

/* LED PANEL: fin rasteru tačaka preko svega što je snimljeno, kao da slika
   stoji na ekranu a ne na papiru. Korak, boja i jačina su tokeni skina, pa
   arkada vozi gust svetli rasteru, a hartija tamne tačke u `multiply` —
   jer bi na hartiji `screen` bio nevidljiv. */
.led { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle, var(--led-dot) 0 1px, transparent 1.4px);
  background-size: var(--led-pitch) var(--led-pitch);
  mix-blend-mode: var(--led-blend); opacity: var(--led-op); }

.scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.side-a .scrim { background: linear-gradient(var(--scrim-dir-a), var(--scrim-ink), transparent 46%); }
.side-b .scrim { background: linear-gradient(var(--scrim-dir-b), var(--scrim-ink), transparent 46%); }

.side-a { clip-path: var(--cut-a); --side-wash: var(--wash-a); --glow: var(--glow-a); }
.side-b { clip-path: var(--cut-b); --side-wash: var(--wash-b); --glow: var(--glow-b); }

/* ŠAV IMA JEDAN IZVOR ISTINE, I TO NIJE DRUGI KOORDINATNI SISTEM.
   Prvo je bio <svg viewBox="0 0 100 100" preserveAspectRatio="none"> sa
   polilinijom istih procenata kao clip-path — i linija je pala pored ivice
   koju je trebalo da oboji. Dva sistema koja se „slažu na papiru” slažu se
   samo dok ih neko ne izmeri.
   Sada je šav traka: isti poligon, u istim procentima, u istoj kutiji kao
   obe strane. Ne može da promaši, jer nema šta da promaši. */
.seam { position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: var(--seam); clip-path: var(--band);
  filter: drop-shadow(0 0 var(--seam-glow-w) var(--seam-glow)); }

/* ── figura ──────────────────────────────────────────────────────────────
   Bez aspect-ratio apsolutno pozicionirana kutija sa `width:auto` i samo
   jednom ivicom zakačenom nema širinu — pa je cela figura visila van ekrana.
   Razmera je ovde, a slika samo popunjava kutiju. */
.fig { position: absolute; z-index: 2; height: var(--fig-h); width: auto;
  object-fit: contain; object-position: bottom; filter: var(--foto-filter); }
.side-a .fig { aspect-ratio: 972 / 1300; filter: var(--foto-filter) drop-shadow(var(--fig-shadow)); }
/* ZASTAVA IMA PRAVU ALFU, NE BLEND.
   Prvo je bila `mix-blend-mode: screen` — što na tamnom skinu radi savršeno,
   jer screen pretvara crno u ništa, a na svetlom pobeli pola panela. Matte je
   izračunat iz luminancije pre snimanja i radi na oba skina, jer alfa ne
   zavisi od toga šta je ispod. Maska niže dole hvata donju ivicu kadra, gde
   se nebo završava i počinje masa. */
.side-b .fig { aspect-ratio: 760 / 954;
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0 52%, transparent 88%); }

/* Naslov strane postoji za čitač i za pretraživač; na ekranu ga nosi
   markiza. Ime borca je ime borca, ne naslov dokumenta. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ── pločica s imenom ────────────────────────────────────────────────────── */
.plate { position: absolute; z-index: 5; max-width: 56%; }
.plate .p-tag {
  display: inline-block; font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: .26em; padding: 3px 7px; margin-bottom: 6px;
  background: var(--tag-bg); color: var(--tag-fg);
}
.plate .p-name {
  font-family: var(--display); font-weight: var(--name-weight); line-height: .88;
  font-size: var(--name-size); letter-spacing: var(--name-track); text-transform: uppercase;
  margin: 0; color: var(--name-fill);
  /* Obris se pravi senkama, a ne -webkit-text-stroke: stroke crta PREKO slova
     i pojede ih iznutra. Senka koristi istu geometriju i pada iza.
     Gradijent kroz background-clip:text je probano i izbačeno — slova su
     ostajala prazna, a od imena se video samo obris. Ime na ovoj strani mora
     da se pročita preko figure; puna boja to garantuje, efekat nije. */
  text-shadow: var(--name-outline);
}
.plate .p-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: var(--sub-fg); margin-top: 7px; text-transform: uppercase; }

/* ── statistike, izlaze na izbor ─────────────────────────────────────────── */
.stats { margin-top: 10px; display: grid; gap: 4px; width: 168px; max-width: 46vw;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.side.on .stats { opacity: 1; transform: none; }
.stat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.stat span { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; color: var(--sub-fg); }
.pips { display: flex; gap: 2px; }
.pips i { width: 6px; height: 8px; background: var(--pip-off); }
.pips i.f { background: var(--pip-on); }

/* ── VS medaljon ─────────────────────────────────────────────────────────── */
.vs {
  position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--vs-size); height: var(--vs-size); display: grid; place-items: center;
  pointer-events: none;
}
.vs .ocila { position: absolute; inset: 0; color: var(--ocila-fg); opacity: var(--ocila-op); }
/* Zraci se vrte, krst ne. */
.vs .ocila { filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); }
.vs .txt {
  position: relative; font-family: var(--display); font-weight: var(--name-weight);
  font-size: calc(var(--vs-size) * .46); line-height: 1; letter-spacing: -.04em;
  color: var(--vs-fg); text-shadow: var(--vs-outline); font-style: italic;
}
@media (prefers-reduced-motion: no-preference) { .vs .txt { animation: pulse 1.8s ease-in-out infinite; } }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* ── objava borbe: prelazi preko svega kad se pritisne dugme ─────────────── */
.fight {
  position: absolute; inset: 0; z-index: 70; display: grid; place-items: center;
  background: var(--fight-veil); pointer-events: none; opacity: 0;
}
.fight[data-on] { animation: fightin 1.5s ease-out forwards; }
.fight b {
  font-family: var(--display); font-weight: var(--name-weight); font-style: italic;
  font-size: var(--fight-size); letter-spacing: -.02em; color: var(--fight-fg);
  text-shadow: var(--fight-outline); transform: scale(3);
}
.fight[data-on] b { animation: fightb .5s cubic-bezier(.15,1.5,.4,1) forwards; }
@keyframes fightin { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fightb { to { transform: scale(1); } }
body.shake .cab { animation: shake .4s ease-out; }
@keyframes shake {
  20% { transform: translate(-6px, 4px); } 40% { transform: translate(5px, -5px); }
  60% { transform: translate(-4px, -3px); } 80% { transform: translate(3px, 3px); }
}
@media (prefers-reduced-motion: reduce) {
  body.shake .cab { animation: none; }
  .fight[data-on] b { animation: none; transform: none; }
}

/* ── podnožje: dugme i statusna traka ────────────────────────────────────── */
.foot { flex: none; z-index: 40; background: var(--foot-bg); border-top: var(--rule); }
.pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-color);
}
.pick button {
  padding: 12px 6px; background: var(--pickbtn-bg); color: var(--pickbtn-fg);
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; transition: background .15s, color .15s;
}
.pick button[aria-pressed="true"] { background: var(--pickbtn-on-bg); color: var(--pickbtn-on-fg); }
.go {
  display: block; width: 100%; padding: 14px 10px; text-align: center;
  background: var(--go-bg); color: var(--go-fg); border-top: var(--rule);
  font-family: var(--display); font-weight: var(--name-weight); font-style: italic;
  font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
}
.go:hover, .go:focus-visible { background: var(--go-bg-hover); color: var(--go-fg-hover); }
/* Trepćuće „ubaci glas” — jedini blink na strani, i to samo tamo gde ga skin
   dozvoli. Na Reduce Motion prelazi u mirno stanje, ne nestaje. */
.coin { animation: var(--blink); }
@media (prefers-reduced-motion: reduce) { .coin { animation: none; opacity: 1; } }
@keyframes blink { 50% { opacity: .25; } }

.statbar {
  display: flex; align-items: center; gap: 0; height: var(--stat-h);
  background: var(--statbar-bg); border-top: var(--rule); overflow: hidden;
}
.statbar .cell {
  flex: 1; min-width: 0; padding: 0 8px; border-right: var(--cell-rule);
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--cell-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.statbar .cell:last-child { border-right: 0; }
.statbar .cell b { color: var(--cell-hot); font-weight: 700; }
/* Потпис испод фотографије је услов лиценце, не украс — али не сме да
   истисне остало из траке, па је он тај који се прво повлачи. */
.statbar .izv { flex: 2 1 0; min-width: 0; font-size: 7px; letter-spacing: .06em; }
/* POTPIS ISPOD FOTOGRAFIJE JE USLOV LICENCE, NE UKRAS.
   Prvo se on sklanjao na uskom ekranu da bi ostale ćelije stale — a to je
   jedina ćelija u traci koja ne sme da se skloni. Povlači se brojanje. */
.statbar .izv a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .statbar .drop { display: none; }
  .statbar .izv { flex: 3 1 0; }
}
.statbar .dot { width: 6px; height: 6px; flex: none; background: var(--live); }
@media (prefers-reduced-motion: no-preference) { .statbar .dot { animation: blink 1.4s steps(1) infinite; } }

/* ── prekidač za skin: samo tamo gde ima gde da stane ────────────────────── */
.sw { display: none; }
@media (min-width: 1080px) {
  .sw {
    display: flex; position: fixed; z-index: 95; right: 14px; bottom: 14px; gap: 1px;
    background: var(--rule-color); border: var(--rule);
  }
  .sw button { padding: 7px 11px; background: var(--sw-bg); color: var(--sw-fg);
    font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
  .sw button[aria-pressed="true"] { background: var(--sw-on-bg); color: var(--sw-on-fg); }
}

/* ═══ RASPORED: TELEFON ══════════════════════════════════════════════════
   Šav je vodoravan, strane su jedna nad drugom, figure gledaju jedna drugu
   preko šava. Sve mere ispod su za uspravan ekran. */
:root {
  --gut: 10px;
  --cut-a: polygon(0 0, 100% 0, 100% 47%, 82% 42%, 64% 50%, 48% 43%, 30% 51%, 14% 44%, 0 50%);
  --cut-b: polygon(0 50%, 14% 44%, 30% 51%, 48% 43%, 64% 50%, 82% 42%, 100% 47%, 100% 100%, 0 100%);
  --band: polygon(0 48.8%, 14% 42.8%, 30% 49.8%, 48% 41.8%, 64% 48.8%, 82% 40.8%, 100% 45.8%,
                  100% 48.2%, 82% 43.2%, 64% 51.2%, 48% 44.2%, 30% 52.2%, 14% 45.2%, 0 51.2%);
  /* min() jer je mera i visine i širine: na uskom telefonu visina ekrana nije
     ograničenje — širina jeste, i figura bi izašla iz svoje polovine. */
  /* Šav na telefonu pada najviše na 42% — figura mora da stane iznad toga,
     inače je cik-cak seče po pola. To je mera, ne procena. */
  --fig-h: min(39%, 56vw);
  --vs-size: 96px;
  /* GDE JE STRANA UPALJENA JESTE MERA RASPOREDA, NE BOJA.
     Skin nosi boju svetla; koliko visoko ono pada zavisi od toga gde figura
     stoji, a to se menja sa prelomom. Kad je ovo bilo zakucano u skinu, na
     telefonu je cela figura stajala u tamnom delu gradijenta — crno odelo na
     crnoj pozadini, i figure prosto nije bilo. */
  --wash-pos-a: 50% 24%;
  --wash-pos-b: 50% 76%;
  --bina-pos: 50% 32%;
  --scrim-dir-a: 180deg;      /* pločica strane A je na telefonu gore */
  --scrim-dir-b: 0deg;
  --name-size: clamp(30px, 11vw, 54px);
  --fight-size: clamp(48px, 20vw, 110px);
  --clock-size: 26px;
}
/* Равно дно фигуре пада тачно на цик-цак: изгледа као да стоји на прегради,
     а не као да је неко одсекао сако. */
.side-a .fig { top: 3%; right: 5%; }
/* Застава стоји горе. Заставе стоје горе. */
/* PAZI: obe strane su PREKO CELE arene i samo su isečene — pa se `top` meri
   od vrha arene, ne od vrha polovine. Zastava sa `top:1%` završila je u delu
   koji clip-path strane B odseca, i na telefonu je prosto nije bilo. */
.side-b .fig { top: 52%; left: -3%; --fig-h: min(42%, 56vw); }
.side-a .plate { left: var(--gut); top: 10px; }
.side-b .plate { right: var(--gut); bottom: 12px; text-align: right; }
.side-b .stats { margin-left: auto; }
.side-b .stat { grid-template-columns: auto 1fr; }
.side-b .stat span { order: 2; text-align: right; }
.side-b .pips { order: 1; }

/* Nizak ekran: pločice bi se popele na figure, pa statistika ide prva. */
@media (max-height: 620px) { .stats { display: none; } }

/* ═══ RASPORED: DESKTOP ══════════════════════════════════════════════════
   Šav se okreće u dijagonalu, strane staju levo i desno, figure se okreću
   licem u lice, a medaljon dobija mesta da bude veći od svega. */
@media (min-width: 760px) {
  :root {
    --gut: 26px;
    --cut-a: polygon(0 0, 60% 0, 45% 26%, 57% 52%, 43% 78%, 53% 100%, 0 100%);
    --cut-b: polygon(60% 0, 100% 0, 100% 100%, 53% 100%, 43% 78%, 57% 52%, 45% 26%);
    --band: polygon(59.7% 0, 44.7% 26%, 56.7% 52%, 42.7% 78%, 52.7% 100%,
                    53.3% 100%, 43.3% 78%, 57.3% 52%, 45.3% 26%, 60.3% 0);
    --fig-h: min(93%, 48vw);
    --wash-pos-a: 28% 62%;
    --wash-pos-b: 72% 62%;
    --bina-pos: 50% 62%;
    --scrim-dir-a: 0deg;      /* na desktopu obe pločice stoje dole */
    --scrim-dir-b: 0deg;
    --vs-size: min(180px, 15vw);
    --name-size: clamp(46px, 5.6vw, 88px);
    --fight-size: clamp(90px, 12vw, 180px);
    --clock-size: 40px;
  }
  .seam .m { display: none; } .seam .d { display: block; }
  /* Figure stoje uz šav koliko smeju, a ne uz ivicu ekrana — dve fotelje na
     krajevima sale nisu suočavanje. Trinaest posto je najdalje meso koje
     najuži desktop dopušta pre nego što cik-cak počne da seče figuru. */
  .side-a .fig { top: auto; bottom: 0; left: 13%; right: auto; }
  .side-b .fig { top: 2%; bottom: auto; left: auto; right: 6%; --fig-h: min(74%, 38vw); }
  .side-a .plate { left: var(--gut); top: auto; bottom: 34px; }
  .side-b .plate { right: var(--gut); bottom: 34px; }
  .plate { max-width: 42%; }
  .hud { padding: 12px 26px 10px; }
  .hud .who .nm { font-size: 11px; }
  .marq .tape span { font-size: 10px; }
  .pick { grid-template-columns: 1fr 1fr; }
  .go { font-size: 30px; padding: 16px; }
  .statbar .cell { font-size: 9px; }
}

/* ── izbor borca ─────────────────────────────────────────────────────────── */
/* Kad je jedan izabran, drugi se povlači — ali se povlači TIPOGRAFIJA i
   pločica, nikad crtež. Figura se ne gasi ni u jednom stanju. */
.cab[data-pick] .side:not(.on) .plate { opacity: .38; }
.cab[data-pick] .side.on .plate { opacity: 1; }
.plate { transition: opacity .25s; }
.side .fig { transition: transform .35s ease, filter .35s ease; }
.side .bina, .side .tint { transition: filter .35s ease, opacity .35s ease; }
/* Изабрана страна СВЕТЛИ јаче — не тако што друга тамни. Слика се ни у
   једном стању не пригушује; додаје се ореол оној коју си изабрао. */
.side-a.on .fig { filter: var(--foto-filter) drop-shadow(var(--fig-shadow)) drop-shadow(0 0 22px var(--glow)); }
.side-b.on .fig { filter: var(--foto-filter) drop-shadow(0 0 22px var(--glow)); }
@media (min-width: 760px) {
  .side-a.on .fig { transform: translateY(-8px) scale(1.03); transform-origin: bottom left; }
  .side-b.on .fig { transform: translateY(-8px) scale(1.03); transform-origin: bottom right; }
}
@media (hover: hover) {
  .pick button:hover { background: var(--pickbtn-on-bg); color: var(--pickbtn-on-fg); }
}
/* Dodirni ekran nema hover, a zalepljen :hover tamo je gori nego nijedan. */

/* ── prvi kadar ──────────────────────────────────────────────────────────── */
/* Skin se bira u head-u, pre nego što se bilo šta nacrta, pa stranica nikad
   nije nacrtana u pogrešnom skinu. Ostaje običan prvi kadar — i on se sleže. */
html.booting body { opacity: 0; }
body { transition: opacity .18s; }