/* ═══════════════════════════════════════════════════════════════════
   JACKPOT — MINIHRA (index.html #jackpot, logika v js/jackpot.js)

   Sklenené osudie s guľôčkami poslancov — čísla z hlasovacích lístkov.
   Guľôčky poháňa skript (fyzika), tu je len ich vzhľad. Ťuknutá guľôčka
   prepadne lievikom na výherný rad a kandidát vyskočí v okne. Po
   poslancoch príde zlaté prémiové číslo starostu a potom oslava cez
   celú obrazovku.

   Farby a krivky sú tie isté ako na zvyšku webu; navyše je tu len zlatá
   pre jackpot a guľôčku kandidáta na starostu.
   ═══════════════════════════════════════════════════════════════════ */
.jackpot{
  --zlato-svetle:#FFF3C4;
  --zlato:#FFC93C;
  --zlato-tmave:#E09A12;
  --zlato-hneda:#9A5A06;
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  background:linear-gradient(180deg,#E6F5FB 0%,#F8FDFF 40%,#E3F3FA 100%);
}
.jackpot::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 440px at 78% 42%,rgba(47,198,214,.17),transparent 70%),
    radial-gradient(520px 380px at 8% 88%,rgba(21,100,200,.08),transparent 70%);
}
/* mäkké biele pásy v pozadí ako na plagáte */
.jackpot__pozadie{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.jackpot__pozadie i{
  position:absolute;left:-25%;width:150%;height:38%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));
}
.jackpot__pozadie i:nth-child(1){top:-4%;rotate:-7deg}
.jackpot__pozadie i:nth-child(2){top:36%;rotate:5deg;opacity:.85}
.jackpot__pozadie i:nth-child(3){top:72%;rotate:-3deg;opacity:.75}

/* ─────────── rozloženie ─────────── */
.jackpot__in{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"hlava automat";
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(1.6rem,4vw,2.4rem);
  align-items:center;
}
.jackpot__hlava{grid-area:hlava}
.automat{grid-area:automat}

.jackpot__h{
  font-family:var(--f-display-alt);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.9rem,6.6vw,5.4rem);line-height:.9;letter-spacing:.005em;
}
.jackpot__h em{
  display:block;font-style:normal;
  background:linear-gradient(180deg,#FFE58A 0%,var(--zlato) 42%,var(--zlato-tmave) 72%,#B8700A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(154,90,6,.55)) drop-shadow(0 12px 18px rgba(224,154,18,.28));
}
.jackpot .sec__sub{margin-top:1rem}

@media(max-width:900px){
  .jackpot__in{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"hlava" "automat";
  }
  .jackpot__hlava{text-align:center}
  .jackpot__hlava .kicker{justify-content:center}
  .jackpot .sec__sub{margin-inline:auto}
}

/* ─────────── automat ─────────── */
.automat{
  position:relative;width:min(100%,520px);justify-self:center;
  display:grid;justify-items:center;gap:clamp(.7rem,1.6vw,1rem);
}
/* okolo osudia sú žiarovky — stroj je preto užší o ich okraj */
.automat__stroj{position:relative;width:min(100% - 44px,420px);display:grid;justify-items:center}

.osudie{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 52%,rgba(4,167,181,.10) 76%,rgba(11,46,94,.24) 100%),
    radial-gradient(70% 45% at 50% 100%,rgba(47,198,214,.28),transparent 70%),
    rgba(234,248,253,.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -18px 40px -18px rgba(11,46,94,.35),
    0 34px 60px -30px rgba(9,40,85,.55);
  touch-action:manipulation;
  transition:box-shadow .6s var(--ease);
}
/* kovový prstenec */
.osudie::before{
  content:'';position:absolute;inset:-12px;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 210deg,#FDFEFF,#B4C6D4,#F2F8FB,#93AABC,#FFFFFF,#B4C6D4,#E8F1F6,#FDFEFF);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
  box-shadow:0 2px 8px rgba(9,40,85,.25);
}
/* vzduchová mriežka na dne — odtiaľ fúka */
.osudie__vnutro{
  position:absolute;left:50%;bottom:4%;width:22%;height:5%;translate:-50% 0;border-radius:50%;
  background:repeating-linear-gradient(90deg,rgba(11,46,94,.35) 0 2px,transparent 2px 6px);
  opacity:.55;pointer-events:none;
}
/* odlesky skla — nad guľôčkami, kliky prepúšťa */
.osudie__lesk{
  position:absolute;inset:0;border-radius:50%;z-index:5;pointer-events:none;
  background:
    radial-gradient(38% 22% at 32% 17%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(12% 30% at 86% 52%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),
    radial-gradient(60% 18% at 50% 96%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);
}

/* žiarovky okolo osudia — skript ich rozmiestni do kruhu */
.automat__zarovky{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;pointer-events:none;z-index:6}
.zarovka{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#FFFDF2,#FFE08A 55%,#F2B01E);
  box-shadow:0 0 0 1px rgba(154,90,6,.25);
  opacity:.38;
  animation:jZarovka 1.6s linear infinite;
  animation-delay:calc(var(--i) * -.2s);
}
@keyframes jZarovka{
  0%,22%,100%{opacity:.38;box-shadow:0 0 0 1px rgba(154,90,6,.25)}
  6%{opacity:1;box-shadow:0 0 0 1px rgba(154,90,6,.25),0 0 10px 3px rgba(255,201,60,.75)}
}
.jackpot:not(.je-vidno) .zarovka{animation-play-state:paused}
.jackpot.je-vyhra .zarovka{animation-duration:.5s}

/* lievik pod osudím */
.automat__lievik{
  position:relative;z-index:-1;width:36%;height:clamp(20px,4.4vw,30px);margin-top:4px;
  clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);
  background:linear-gradient(90deg,#93AABC,#F4F9FC 46%,#B4C6D4);
}

/* ─────────── guľôčka ───────────
   .gula sa nehýbe svetlom — odlesk a tieň ostávajú na mieste, otáča sa
   len biely štítok s číslom (.gula__cislo). Tak to vyzerá ako guľa. */
.gula{
  position:absolute;left:0;top:0;width:var(--gula,64px);height:var(--gula,64px);
  border:0;padding:0;margin:0;border-radius:50%;cursor:pointer;
  font-size:calc(var(--gula,64px) * .36);
  background:radial-gradient(circle at 34% 28%,#E4FBFF 0 6%,#5ED6E3 19%,#10B0C0 45%,#0B78A3 78%,#0A4E7C 100%);
  box-shadow:inset -.14em -.2em .4em rgba(4,30,70,.32),0 .2em .5em -.2em rgba(5,40,80,.55);
  will-change:transform;z-index:1;
  -webkit-tap-highlight-color:transparent;
}
.gula::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(40% 26% at 34% 22%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%);
}
.gula--zlata{
  background:radial-gradient(circle at 34% 28%,#FFFBEA 0 6%,#FFE08A 20%,var(--zlato,#FFC93C) 46%,var(--zlato-tmave,#E09A12) 78%,var(--zlato-hneda,#9A5A06) 100%);
  box-shadow:inset -.14em -.2em .4em rgba(110,60,0,.32),0 .2em .5em -.2em rgba(110,60,0,.5);
}
.gula__cislo{
  position:absolute;left:21%;top:21%;width:58%;height:58%;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 40% 35%,#fff,#EAF3F8 80%);
  box-shadow:inset 0 -.06em .12em rgba(11,46,94,.18);
  font-family:var(--f-display-alt);font-weight:700;font-size:1em;line-height:1;
  color:var(--navy-800);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.gula:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .osudie .gula{transition:filter .2s ease}
  .osudie .gula:hover{filter:brightness(1.1) saturate(1.1)}
}

/* guľôčka na ceste do radu */
.automat__let{position:absolute;inset:0;pointer-events:none;z-index:8}
.gula--let{cursor:default;transform-origin:50% 50%}

/* ─────────── výherný rad ─────────── */
.automat__rad{width:100%;display:grid;justify-items:center;gap:.45rem}
.automat__radPopis{
  font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);text-align:center;
}
.automat__radPopis i{font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:none;color:#B8700A}
.rad{
  list-style:none;margin:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(.22rem,1vw,.5rem);
  padding:clamp(.4rem,1.2vw,.6rem) clamp(.5rem,1.6vw,.9rem);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,#123F78,#0B2E5E 55%,#072347);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.75),0 18px 30px -18px rgba(9,40,85,.75);
}
.rad__miesto{
  position:relative;flex:1 1 0;max-width:50px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;container-type:inline-size;
  background:radial-gradient(circle at 50% 38%,#04152E,#0A2A52);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.14);
}
/* prémiové číslo (starosta) má na konci radu vlastné zlaté miesto
   a od poslancov ho delí čiarka */
.rad__miesto--starosta{
  margin-left:clamp(.3rem,1.4vw,.7rem);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 0 0 2px rgba(255,201,60,.55);
}
.rad__miesto--starosta::before{
  content:'';position:absolute;left:calc(-1 * (clamp(.22rem,1vw,.5rem) + clamp(.3rem,1.4vw,.7rem)) / 2 - 1px);
  top:18%;bottom:18%;width:2px;border-radius:2px;background:rgba(123,222,234,.35);
}
.rad__duch{
  font-family:var(--f-display-alt);font-weight:700;font-size:38cqw;line-height:1;
  color:rgba(123,222,234,.32);
}
.rad__miesto--starosta .rad__duch{color:rgba(255,201,60,.45)}
.gula--v-rade{inset:6%;width:88%;height:88%;font-size:32cqw;z-index:2}
/* zábles, keď guľôčka zapadne */
.rad__miesto.je-plne::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(123,222,234,.9),0 0 18px 4px rgba(47,198,214,.6);
  opacity:0;animation:jZapadla .7s var(--ease) both;
}
.rad__miesto--starosta.je-plne::after{box-shadow:0 0 0 2px rgba(255,224,138,.95),0 0 20px 5px rgba(255,201,60,.7)}
@keyframes jZapadla{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
/* pri výhre guľôčky v rade poskočia jedna po druhej */
.jackpot.je-vyhra .gula--v-rade{animation:jSkok .62s var(--ease) both;animation-delay:calc(var(--i) * .07s)}
@keyframes jSkok{0%,100%{transform:none}40%{transform:translateY(-55%)}}

/* ─────────── ovládanie ─────────── */
.automat__ovladanie{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.6rem .8rem;margin-top:.15rem;
}
.automat__pokyn{
  margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(.92rem,1.8vw,1.02rem);
  color:var(--navy-800);text-align:center;
}
.jackpot.je-premia .automat__pokyn{color:#B8700A}
.jackpot .automat__pokyn.je-zly{color:#C81E36}
.automat__pocet{
  padding:.38rem .7rem;border-radius:var(--r-pill);
  background:var(--navy-800);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.78rem;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.automat__pocet[hidden]{display:none}
.automat__znova{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.68rem 1.2rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:linear-gradient(180deg,#FFE58A,var(--zlato) 52%,#F2A91E);
  color:var(--navy-900);
  font-family:var(--f-display-alt);font-weight:700;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 4px 0 #C47F0A,0 14px 26px -12px rgba(224,154,18,.75),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .2s ease;
}
.automat__znova[hidden]{display:none}
.automat__znova svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.automat__znova:active{transform:translateY(3px);box-shadow:0 1px 0 #C47F0A,0 8px 16px -10px rgba(224,154,18,.7)}
.automat__znova:focus-visible{outline:3px solid var(--teal-300);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.automat__znova:hover{filter:brightness(1.05)}}
.automat__zvuk{
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:#fff;color:var(--navy-800);
  box-shadow:0 10px 22px -14px rgba(9,40,85,.6),inset 0 0 0 1px rgba(4,167,181,.22);
  transition:transform .12s var(--ease),color .2s ease;
}
.automat__zvuk:active{transform:scale(.94)}
.automat__zvuk:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.automat__zvuk svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.automat__zvuk svg path:first-child{fill:currentColor;stroke:none}
.automat__ticho{display:none}
.automat__zvuk[aria-pressed="false"]{color:var(--muted)}
.automat__zvuk[aria-pressed="false"] .automat__vlny{display:none}
.automat__zvuk[aria-pressed="false"] .automat__ticho{display:inline}

/* ─────────── prémiové číslo ───────────
   Keď sú vonku všetci poslanci, do osudia spadne zlatá guľôčka.
   Osudie sa rozžiari na zlato, žiarovky zrýchlia, zlaté miesto v rade
   pulzuje a okolo guľôčky sa šíria kruhy — nedá sa ju prehliadnuť. */
.jackpot.je-premia .osudie{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -18px 40px -18px rgba(154,90,6,.3),
    0 0 0 6px rgba(255,201,60,.28),
    0 0 70px 10px rgba(255,201,60,.32),
    0 34px 60px -30px rgba(9,40,85,.55);
}
.jackpot.je-premia .zarovka{animation-duration:.8s}
.jackpot.je-premia .rad__miesto--starosta{animation:jPremiaMiesto 1.2s ease-in-out infinite}
@keyframes jPremiaMiesto{
  50%{box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 0 0 2px rgba(255,224,138,1),0 0 16px 4px rgba(255,201,60,.65)}
}
.gula--premia::before{
  content:'';position:absolute;inset:-16%;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,201,60,.85);
  animation:jPremiaKruh 1.4s ease-out infinite;
}
@keyframes jPremiaKruh{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.4)}}

/* návnada — číslo iného kandidáta na starostu: po ťuknutí zhasne
   a nad ňou na chvíľu vyskočí „Zlá voľba“ */
.gula.gula--vedla{
  background:radial-gradient(circle at 34% 28%,#FBF8EF 0 6%,#E6DCC2 20%,#CBBD98 46%,#A1926C 78%,#6F6248 100%);
  box-shadow:inset -.14em -.2em .4em rgba(70,55,25,.3),0 .2em .5em -.2em rgba(70,55,25,.45);
}
.osudie .gula.je-zla{z-index:4}
.gula__zle{
  position:absolute;left:50%;bottom:calc(100% + .3em);z-index:2;pointer-events:none;
  padding:.4em .8em;border-radius:999px;white-space:nowrap;
  background:#D43B3B;color:#fff;box-shadow:0 8px 18px -8px rgba(120,20,20,.6);
  font-family:var(--f-display);font-weight:800;font-size:clamp(12px,.6em,16px);
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
  animation:jZle 1.8s var(--ease-out,cubic-bezier(.23,1,.32,1)) forwards;
}
/* veľká pečiatka cez celé osudie */
.automat__zle{
  position:absolute;left:50%;top:50%;z-index:9;pointer-events:none;
  display:grid;justify-items:center;gap:.35rem;
  padding:.75em 1.4em .8em;border-radius:18px;border:3px solid #fff;
  background:linear-gradient(180deg,#EF4057,#C81E36);color:#fff;
  box-shadow:0 0 0 7px rgba(215,38,61,.28),0 22px 44px -14px rgba(140,10,30,.65);
  font-family:var(--f-display);text-transform:uppercase;text-align:center;white-space:nowrap;
  animation:jZlePec 2s cubic-bezier(.23,1,.32,1) forwards;
}
.automat__zle b{font-weight:900;font-size:clamp(1.7rem,7vw,2.8rem);letter-spacing:.04em;line-height:1}
.automat__zle span{font-weight:700;font-size:clamp(.72rem,2.6vw,.9rem);letter-spacing:.1em;opacity:.95}
@keyframes jZlePec{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.82)}
  9%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1.08)}
  17%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-56%) rotate(-7deg) scale(1)}
}
/* osudie sa zatrasie a zablikne načerveno */
.jackpot.je-zla .automat__stroj{animation:jTras .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes jTras{
  15%{transform:translateX(-9px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)}
  60%{transform:translateX(4px)} 75%{transform:translateX(-2px)}
}
.jackpot.je-zla .osudie{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 0 60px 0 rgba(215,38,61,.35),
    0 0 0 6px rgba(215,38,61,.35),
    0 0 70px 10px rgba(215,38,61,.35),
    0 34px 60px -30px rgba(9,40,85,.55);
  transition-duration:.15s;
}
@keyframes jZle{
  0%{opacity:0;transform:translate(-50%,.5em) scale(.92)}
  12%,78%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-.4em) scale(1)}
}

/* guľôčka s číslom ako na plagáte — vpravo dole cez fotku */
.gula--odznak{left:auto;top:auto;right:-12cqw;bottom:-8cqw;width:46cqw;height:46cqw;font-size:16.5cqw;cursor:default}
.kandidat__rola{
  margin:0;font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}

/* ─────────── okno s vylosovaným kandidátom ───────────
   Vyskočí hneď po ťuknutí, uprostred obrazovky. Otvára a zatvára sa
   prechodom (nie animáciou), takže sa dá kedykoľvek prerušiť. */
.ukazka{
  --zlato:#FFC93C;--zlato-tmave:#E09A12;--zlato-hneda:#9A5A06;
  position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:1rem;
  background:rgba(4,21,47,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease-out;
}
.ukazka[hidden]{display:none}
.ukazka.je-otvorena{opacity:1}
.ukazka__karta{
  position:relative;width:min(100%,340px);text-align:center;
  padding:1.5rem 1.35rem 1.3rem;border-radius:var(--r-lg);
  background:radial-gradient(120% 60% at 50% 0%,#fff,var(--sky-50) 70%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(4,167,181,.18);
  transform:translateY(10px) scale(.95);
  transition:transform .28s var(--ease);
}
.ukazka.je-otvorena .ukazka__karta{transform:none}
.ukazka__nad{
  display:inline-block;margin:0;padding:.32rem .85rem;border-radius:var(--r-pill);
  background:var(--sky-100);color:var(--teal-700);
  font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;
}
.ukazka__foto{position:relative;width:min(176px,50vw);aspect-ratio:1;margin:1.1rem auto 0;container-type:inline-size}
.ukazka__foto img{
  display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 5px #fff,0 0 0 8px rgba(4,167,181,.35),0 22px 36px -18px rgba(9,40,85,.65);
}
.ukazka__foto .gula--odznak{right:-6cqw;bottom:-4cqw;width:40cqw;height:40cqw;font-size:14.5cqw}
.ukazka__rola{
  margin:1.15rem 0 0;font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
.ukazka__meno{
  margin:.3rem 0 0;font-family:var(--f-display-alt);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,9vw,2.9rem);line-height:.9;
}
.ukazka__meno b{display:block;font-weight:700;color:var(--navy-800)}
.ukazka__meno span{display:block;color:var(--teal-500)}
.ukazka__info{margin:.7rem 0 0;font-size:.88rem;color:var(--muted)}
.ukazka__dalej{
  margin-top:1.15rem;width:100%;padding:.92rem 1rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--grad-brand);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 14px 28px -14px rgba(21,100,200,.7);
  transition:transform .12s var(--ease),filter .2s ease;
}
.ukazka__dalej:active{transform:scale(.97)}
.ukazka__dalej:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.ukazka__dalej:hover{filter:brightness(1.06)}}

/* obsah okna sa poskladá: fotka, guľôčka, meno */
.ukazka.je-otvorena .ukazka__foto img{animation:jFoto .4s var(--ease) both}
.ukazka.je-otvorena .gula--odznak{animation:jOdznak .5s var(--ease) .08s both}
.ukazka.je-otvorena .ukazka__rola,
.ukazka.je-otvorena .ukazka__meno,
.ukazka.je-otvorena .ukazka__info{animation:jRiadok .4s var(--ease) both}
.ukazka.je-otvorena .ukazka__meno{animation-delay:.05s}
.ukazka.je-otvorena .ukazka__info{animation-delay:.1s}
@keyframes jFoto{from{opacity:0;transform:scale(.92)}}
@keyframes jOdznak{from{opacity:0;transform:scale(.6) rotate(-140deg)}}
@keyframes jRiadok{from{opacity:0;transform:translateY(8px)}}

/* prémiové číslo — zlaté okno */
.ukazka--premia .ukazka__karta{
  background:radial-gradient(120% 60% at 50% 0%,#FFFDF3,#FFF2CC 78%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 2px rgba(255,201,60,.65),0 0 70px -10px rgba(255,201,60,.6);
}
.ukazka--premia .ukazka__nad{background:linear-gradient(180deg,#FFE58A,var(--zlato));color:var(--navy-900)}
.ukazka--premia .ukazka__foto img{box-shadow:0 0 0 5px #fff,0 0 0 8px rgba(255,201,60,.85),0 22px 36px -18px rgba(110,60,0,.55)}
.ukazka--premia .ukazka__rola{color:#B8700A}
.ukazka--premia .ukazka__dalej{
  background:linear-gradient(180deg,#FFE58A,var(--zlato) 52%,#F2A91E);color:var(--navy-900);
  box-shadow:0 4px 0 #C47F0A,0 14px 26px -12px rgba(224,154,18,.75);
}

/* ═══════════ VÝHRA — oslava cez celú obrazovku ═══════════ */
.vyhra{
  --zlato:#FFC93C;--zlato-tmave:#E09A12;--zlato-hneda:#9A5A06;
  position:fixed;inset:0;z-index:9995;overflow:hidden;
  background:radial-gradient(120% 85% at 50% 28%,rgba(18,66,124,.97),rgba(4,21,47,.985) 72%);
  opacity:0;transition:opacity .35s var(--ease);
}
.vyhra[hidden]{display:none}
.vyhra.je-otvorena{opacity:1}
/* zlaté lúče za nápisom */
.vyhra__lucie{
  position:absolute;left:50%;top:24%;width:170vmax;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.15) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 14%,transparent 70%);
          mask:radial-gradient(closest-side,#000 14%,transparent 70%);
  animation:jLucie 48s linear infinite;
}
@keyframes jLucie{to{rotate:1turn}}
.vyhra__platno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.vyhra__posun{
  position:relative;z-index:2;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(3.2rem,7vh,4.5rem) 1rem clamp(2rem,5vh,3rem);
}
.vyhra__obsah{position:relative;width:min(100%,900px);margin:0 auto;text-align:center;color:#fff}
.vyhra__x{
  position:fixed;top:max(.9rem,env(safe-area-inset-top));right:.9rem;z-index:4;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease,transform .12s var(--ease);
}
.vyhra__x:active{transform:scale(.94)}
.vyhra__x:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.vyhra__x:hover{background:rgba(255,255,255,.22)}}
.vyhra__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.vyhra__nad{
  margin:0;font-family:var(--f-script);font-weight:700;font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--teal-200);
}
.vyhra__jackpot{
  margin:.1rem 0 0;display:flex;justify-content:center;flex-wrap:nowrap;
  font-family:var(--f-display-alt);font-weight:700;line-height:.86;letter-spacing:.01em;
  font-size:clamp(4rem,17vw,10.5rem);
  filter:drop-shadow(0 5px 0 #7A4504) drop-shadow(0 18px 34px rgba(255,180,40,.45));
}
.vyhra__jackpot span{
  display:inline-block;color:transparent;
  /* spodná vrstva je zlato, horná lesk, ktorý prebehne písmenami */
  background:
    linear-gradient(110deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 160% 0/280% 100% no-repeat,
    linear-gradient(180deg,#FFF6D0 0%,#FFE070 34%,var(--zlato) 56%,var(--zlato-tmave) 78%,#B8700A 100%);
  -webkit-background-clip:text;background-clip:text;
}
.vyhra.je-otvorena .vyhra__jackpot span{
  /* easeOutBack — písmená dopadnú s malým pruživým prekmitom */
  animation:
    jPismeno .7s cubic-bezier(.34,1.56,.64,1) both,
    jLeskPismena 3.2s linear infinite;
  animation-delay:calc(.2s + var(--i) * .07s),calc(1.2s + var(--i) * .08s);
}
@keyframes jPismeno{from{opacity:0;transform:translateY(-55%) scale(1.3) rotate(-10deg)}}
@keyframes jLeskPismena{0%{background-position:160% 0,0 0}35%,100%{background-position:-60% 0,0 0}}
.vyhra__pod{
  margin:.9rem 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(.78rem,1.8vw,.95rem);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-200);
}
.vyhra.je-otvorena .vyhra__nad,
.vyhra.je-otvorena .vyhra__pod{animation:jRiadok .5s var(--ease) both}
.vyhra.je-otvorena .vyhra__pod{animation-delay:.85s}

/* plagát s výhernou kombináciou */
.plagat{
  margin:clamp(1.4rem,3.4vw,2.2rem) auto 0;padding:clamp(1rem,3vw,1.9rem) clamp(.8rem,3vw,1.9rem) clamp(1.3rem,3vw,2rem);
  border-radius:var(--r-lg);color:var(--navy-800);
  background:
    radial-gradient(90% 40% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#F4FBFE,#DDF0F8);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.35);
}
.vyhra.je-otvorena .plagat{animation:jPlagat .6s var(--ease) .95s both}
@keyframes jPlagat{from{opacity:0;transform:translateY(22px) scale(.97)}}
.plagat__starosta{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3.4vw,2rem);text-align:left}
.plagat__starosta .pk__foto{width:clamp(96px,16vw,150px)}
.plagat__starosta .pk__meno{font-size:clamp(2rem,6vw,3.6rem);margin:0}
.plagat__starosta .kandidat__rola{margin-bottom:.35rem}
.plagat__stitok{
  display:inline-block;margin:clamp(1.3rem,3vw,1.8rem) 0 clamp(1rem,2.4vw,1.4rem);
  padding:.12em .7em;border-radius:.45em;background:var(--teal-500);color:#fff;
  font-family:var(--f-display-alt);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,3vw,1.8rem);letter-spacing:.01em;
}
.plagat__poslanci{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.1rem,3vw,1.8rem) clamp(.4rem,2vw,1.2rem);
}
.pk{display:grid;justify-items:center;text-align:center}
.vyhra.je-otvorena .pk{animation:jPk .55s var(--ease) both;animation-delay:calc(1.15s + var(--i) * .07s)}
@keyframes jPk{from{opacity:0;transform:translateY(14px) scale(.94)}}
.pk__foto{position:relative;width:min(100%,108px);aspect-ratio:1;container-type:inline-size}
.pk__foto img{
  display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff,0 12px 22px -14px rgba(9,40,85,.65);
}
.pk .gula--odznak{right:auto;left:50%;bottom:-16cqw;translate:-50% 0;width:42cqw;height:42cqw;font-size:15cqw}
.pk__meno{
  margin:calc(clamp(.9rem,3vw,1.5rem)) 0 0;font-family:var(--f-display-alt);font-weight:700;
  text-transform:uppercase;line-height:.92;font-size:clamp(.92rem,2.6vw,1.45rem);
}
.pk__meno b{display:block;font-weight:700;color:var(--navy-800)}
.pk__meno span{display:block;color:var(--teal-500)}
.plagat__starosta .pk__meno{text-align:left}

.vyhra__navod{
  margin:clamp(1.3rem,3vw,1.8rem) auto 0;max-width:58ch;
  font-size:clamp(.98rem,1.8vw,1.1rem);line-height:1.6;color:rgba(230,243,255,.92);text-wrap:pretty;
}
.vyhra__navod b{color:var(--zlato);font-weight:800}
.vyhra__akcie{margin-top:clamp(1.2rem,3vw,1.7rem);display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem}
.vyhra .btn--ghost{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.vyhra .btn--ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--teal-300)}
.vyhra.je-otvorena .vyhra__navod,
.vyhra.je-otvorena .vyhra__akcie{animation:jRiadok .5s var(--ease) both;animation-delay:1.6s}

@media(max-width:560px){
  .plagat__poslanci{gap:1rem .35rem}
  .pk__meno{font-size:clamp(.78rem,3.6vw,.95rem)}
}

/* ─────────── bez animácií ───────────
   Guľôčky v osudí stoja (skript ich nerozpohybuje), nič nepreskakuje ani
   sa netočí; ostávajú len jemné prelínania. */
@media(prefers-reduced-motion:reduce){
  .zarovka{animation:none;opacity:.75}
  .vyhra__lucie{animation:none}
  .rad__miesto.je-plne::after,
  .jackpot.je-vyhra .gula--v-rade,
  .ukazka.je-otvorena .ukazka__foto img,
  .ukazka.je-otvorena .gula--odznak,
  .jackpot.je-premia .rad__miesto--starosta,
  .gula--premia::before,
  .vyhra.je-otvorena .pk,
  .vyhra.je-otvorena .plagat{animation:none}
  .ukazka__karta{transform:none}
  .ukazka.je-otvorena .ukazka__rola,
  .ukazka.je-otvorena .ukazka__meno,
  .ukazka.je-otvorena .ukazka__info,
  .vyhra.je-otvorena .vyhra__nad,
  .vyhra.je-otvorena .vyhra__pod,
  .vyhra.je-otvorena .vyhra__navod,
  .vyhra.je-otvorena .vyhra__akcie{animation:jSvetlo .3s ease both}
  .vyhra.je-otvorena .vyhra__jackpot span{animation:jSvetlo .3s ease both}
}
@keyframes jSvetlo{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .gula__zle{animation-name:jZleTicho}
  .automat__zle{animation-name:jZlePecTicho}
  .jackpot.je-zla .automat__stroj{animation:none}
}
@keyframes jZlePecTicho{
  0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg)}
  10%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg)}
}
@keyframes jZleTicho{
  0%,100%{opacity:0;transform:translateX(-50%)}
  10%,80%{opacity:1;transform:translateX(-50%)}
}