/* ===== Základ: stránka 16:9 (1920×1080), škáluje se do okna =====
   Všechny návrhy mají STEJNÉ HTML (hlavička + pět <article class="row">).
   Jednotlivé varianty se liší jen třídou na .slide (téma + rozložení).      */
@font-face { font-family: "Organica"; src: local("Organica"), local("Organica Regular"); font-weight: 400; }
@font-face { font-family: "Organica"; src: local("Organica SemiBold"), local("Organica Semibold"); font-weight: 600; }
@font-face { font-family: "Organica"; src: local("Organica Bold"); font-weight: 700; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
.stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.slide {
  position: relative; flex: none; width: 1920px; height: 1080px; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "Organica", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.slide.photo { background: linear-gradient(rgba(246,244,243,.55), rgba(246,244,243,.55)), url(bg.jpg) center / cover no-repeat, var(--bg); }

/* ---------- hlavička ---------- */
header { position: absolute; left: 48px; right: 48px; top: 0; height: 152px; border-bottom: var(--lh, 3px) solid var(--line); }
h1 { position: absolute; left: 0; top: 26px; font-size: 96px; line-height: 1.1; font-weight: 700; }
.stats { position: absolute; right: 12px; top: 26px; display: flex; gap: 64px; }
.stat { display: flex; align-items: center; gap: 22px; }
.gauge { width: 151px; height: 82px; flex: none; overflow: visible; }
.gauge path { fill: none; stroke-width: 24; }
.gauge .gt { stroke: var(--gt); }
.gauge .gf { stroke: var(--gf); stroke-dasharray: 170; stroke-dashoffset: calc(170 * (1 - var(--f))); }
.stat .v { font-size: 64px; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.stat .v small { font-size: 42px; }
.stat .l { font-size: 36px; line-height: 1.1; }

/* ---------- řádky stran ---------- */
.rows { position: absolute; left: 48px; right: 48px; top: 172px; display: flex; flex-direction: column; gap: 16px; }
.row { position: relative; display: grid; align-items: center; min-width: 0; }
.ico, .rank, .cl, .diff { display: none; }
.no { font-weight: 600; color: var(--mute); }
.name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.votes { white-space: nowrap; color: var(--mute); }
.votes b { font-weight: 600; color: var(--vot); }
.pct { display: inline-flex; align-items: baseline; white-space: nowrap; font-weight: 700; line-height: 1; }
.pct .i { display: inline-block; width: 1.4em; text-align: right; }
.pct .s { font-size: .5em; font-weight: 600; color: var(--mute); margin-left: .2em; }
.bar { position: relative; background: var(--track); border-radius: var(--br); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); min-width: var(--minw, 0px); background: var(--c); border-radius: var(--br); }
.thead, .stack, .donut, .restcard { display: none; }
.donut-c{display:none}
.axis{display:none}
