/* Rozsuď! – „TV duel“: bulvárna súdna show. Červený roh vs. modrý roh, čierne obrysy, tvrdé tiene, nálepky. */
@font-face { font-family: "Unbounded"; src: url("/static/fonts/Unbounded.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/static/fonts/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }

:root {
  --papier: #fff3d1;
  --zlta: #ffd60a;
  --cerna: #111014;
  --cervena: #ff3b30;
  --modra: #2f6bff;
  --ruzova: #ff5fa2;
  --fialova: #7c3aed;
  --mata: #2ee6a6;
  --siva: #5b5560;
  --biela: #fffdf6;
  --obrys: 3px solid var(--cerna);
  --tien: 6px 6px 0 var(--cerna);
  --tien-maly: 4px 4px 0 var(--cerna);
  --r: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--cerna); background: var(--papier);
  background-image: radial-gradient(rgba(17,16,20,.13) 1.2px, transparent 1.3px);
  background-size: 18px 18px;
  font: 500 17px/1.5 "DM Sans", system-ui, sans-serif;
  overflow-x: clip;
}
a { color: var(--cerna); }
button, input, textarea { font: inherit; color: inherit; }
.obal { max-width: 600px; margin: 0 auto; padding: 0 16px; }
.disp { font-family: "Unbounded", sans-serif; font-weight: 900; letter-spacing: -.02em; }

/* hlavička */
.hlavicka { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--cerna);
  font: 900 22px/1 "Unbounded", sans-serif; background: var(--zlta); border: var(--obrys); border-radius: 12px;
  padding: 8px 12px 8px 10px; box-shadow: var(--tien-maly); transform: rotate(-2deg); }
.logo svg { width: 24px; height: 24px; }
.jazyky { display: flex; border: var(--obrys); border-radius: 99px; overflow: hidden; background: var(--biela); box-shadow: var(--tien-maly); }
.jazyky button { border: 0; background: none; padding: 6px 12px; font-weight: 800; font-size: 13px; cursor: pointer; }
.jazyky button.akt { background: var(--cerna); color: var(--zlta); }

/* nálepky */
.nalepka { display: inline-block; font: 800 12px/1 "Unbounded", sans-serif; letter-spacing: .04em; text-transform: uppercase;
  background: var(--zlta); border: 2.5px solid var(--cerna); border-radius: 8px; padding: 6px 9px; box-shadow: 3px 3px 0 var(--cerna);
  transform: rotate(-3deg); }
.nalepka.ruzova { background: var(--ruzova); color: var(--biela); }
.nalepka.fialova { background: var(--fialova); color: var(--biela); }
.nalepka.mata { background: var(--mata); }
.nalepka.cervena { background: var(--cervena); color: var(--biela); }
.nalepka.modra { background: var(--modra); color: var(--biela); }

/* hero */
.hero { padding: 26px 0 8px; text-align: center; position: relative; }
.hero .nalepka { margin-bottom: 14px; }
.hero h1 { font: 900 clamp(46px, 13vw, 76px)/.95 "Unbounded", sans-serif; letter-spacing: -.04em; margin: 4px 0 18px; text-transform: uppercase; }
.hero h1 .c { color: var(--cervena); text-shadow: -2px -2px 0 var(--cerna), 2px -2px 0 var(--cerna), -2px 2px 0 var(--cerna), 2px 2px 0 var(--cerna), 0 -2px 0 var(--cerna), 0 2px 0 var(--cerna), -2px 0 0 var(--cerna), 2px 0 0 var(--cerna), 5px 5px 0 var(--cerna); }
.hero h1 .m { color: var(--modra); text-shadow: -2px -2px 0 var(--cerna), 2px -2px 0 var(--cerna), -2px 2px 0 var(--cerna), 2px 2px 0 var(--cerna), 0 -2px 0 var(--cerna), 0 2px 0 var(--cerna), -2px 0 0 var(--cerna), 2px 0 0 var(--cerna), 5px 5px 0 var(--cerna); }
.hero p.pod { font-size: 18px; margin: 0 auto 22px; max-width: 30em; color: #2c2830; }
.duel { display: flex; align-items: center; justify-content: center; gap: 0; margin: 6px auto 22px; }
.roh { width: 128px; padding: 14px 8px 12px; border: var(--obrys); border-radius: var(--r); box-shadow: var(--tien); color: var(--biela);
  font: 900 15px/1.15 "Unbounded", sans-serif; text-transform: uppercase; }
.roh.c { background: var(--cervena); transform: rotate(-5deg); }
.roh.m { background: var(--modra); transform: rotate(5deg); }
.roh small { display: block; font: 700 12px/1.2 "DM Sans", sans-serif; text-transform: none; opacity: .92; margin-top: 4px; }
.vs { z-index: 2; margin: 0 -14px; width: 64px; height: 64px; border-radius: 50%; background: var(--zlta); border: var(--obrys);
  display: grid; place-items: center; font: 900 20px/1 "Unbounded", sans-serif; box-shadow: var(--tien-maly); animation: tlkot 1.6s ease-in-out infinite; }
@keyframes tlkot { 50% { transform: scale(1.12) rotate(-6deg); } }
.mala { font-size: 14px; color: var(--siva); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none;
  background: var(--zlta); color: var(--cerna); border: var(--obrys); border-radius: 14px; box-shadow: var(--tien);
  font: 800 18px/1.2 "Unbounded", sans-serif; padding: 16px 24px; transition: transform .07s, box-shadow .07s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--cerna); }
.btn.plny { width: 100%; }
.btn.druhy { background: var(--biela); }
.btn.cierny { background: var(--cerna); color: var(--zlta); }
.btn.ruzovy { background: var(--ruzova); color: var(--biela); }
.btn.maly { font-size: 14px; padding: 11px 14px; box-shadow: var(--tien-maly); border-radius: 12px; }
.btn.maly:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cerna); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .cena { background: var(--cerna); color: var(--zlta); border-radius: 8px; padding: 3px 7px; font-size: .8em; }
.btn.cierny .cena { background: var(--zlta); color: var(--cerna); }

/* pás s témami */
.pas { margin: 24px -16px 0; background: var(--cerna); color: var(--zlta); border-top: var(--obrys); border-bottom: var(--obrys);
  overflow: hidden; white-space: nowrap; transform: rotate(-1.5deg); }
.pas div { display: inline-block; padding: 11px 0; font: 800 15px/1 "Unbounded", sans-serif; text-transform: uppercase; animation: pas 38s linear infinite; }
.pas span { margin: 0 14px; }
.pas span::after { content: "⚡"; margin-left: 28px; }
@keyframes pas { to { transform: translateX(-50%); } }

/* sekcie */
section.blok { padding: 40px 0 4px; }
h2 { font: 900 28px/1.1 "Unbounded", sans-serif; letter-spacing: -.02em; margin: 0 0 16px; text-transform: uppercase; }
h3 { margin: 0 0 4px; font: 800 17px/1.25 "Unbounded", sans-serif; }
.box { background: var(--biela); border: var(--obrys); border-radius: var(--r); box-shadow: var(--tien); }
.kroky { display: grid; gap: 14px; counter-reset: k; }
.krok { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.krok:nth-child(2) { transform: rotate(.6deg); }
.krok::before { counter-increment: k; content: counter(k); flex: none; width: 42px; height: 42px; border-radius: 12px; border: var(--obrys);
  background: var(--zlta); font: 900 20px/36px "Unbounded", sans-serif; text-align: center; }
.krok:nth-child(2)::before { background: var(--cervena); color: var(--biela); }
.krok:nth-child(3)::before { background: var(--modra); color: var(--biela); }
.krok p { margin: 0; color: #3a353e; font-size: 15px; }
.ukazka-video { display: block; width: 74%; margin: 6px auto 0; border: var(--obrys); border-radius: var(--r); box-shadow: var(--tien); background: var(--cerna); aspect-ratio: 9/16; transform: rotate(-1.5deg); }

.sudcovia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sudca { position: relative; text-align: left; background: var(--biela); border: var(--obrys); border-radius: var(--r); box-shadow: var(--tien-maly);
  padding: 14px 12px 12px; cursor: pointer; transition: transform .1s; }
.sudca:active { transform: translate(2px, 2px); }
.sudca .em { font-size: 34px; line-height: 1; display: block; margin-bottom: 8px; }
.sudca b { display: block; font: 800 14px/1.2 "Unbounded", sans-serif; }
.sudca span.p { font-size: 13px; color: var(--siva); line-height: 1.3; display: block; margin-top: 4px; }
.sudca .vypocuj { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--cerna); text-decoration: underline; text-underline-offset: 3px; }
.sudca.vybrany { background: var(--zlta); box-shadow: var(--tien); transform: rotate(-1deg); }
.sudca.vybrany::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cerna); color: var(--zlta); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.sudca.premium { background: linear-gradient(160deg, #f6eaff, #ffe3f0); }
.sudca.premium.vybrany { background: linear-gradient(160deg, #e9d5ff, #ffc7e2); }
.sudca .vip { position: absolute; top: -11px; right: 10px; transform: rotate(4deg); font-size: 10px; padding: 5px 7px; }
.sekcia-premium { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.sekcia-premium h3 { margin: 0; }

.cipy { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { border: 2.5px solid var(--cerna); background: var(--biela); border-radius: 99px; padding: 7px 13px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0 var(--cerna); }
.cip.akt { background: var(--cerna); color: var(--zlta); }

details.faq { background: var(--biela); border: var(--obrys); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--tien-maly); }
details.faq summary { cursor: pointer; font-weight: 800; list-style: none; padding-right: 26px; position: relative; }
details.faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; font: 900 22px/1 "Unbounded", sans-serif; }
details.faq[open] summary::after { content: "–"; }
details.faq p { color: #3a353e; margin: 8px 0 0; font-size: 15px; }

.pata { padding: 44px 0 50px; text-align: center; font-size: 13px; color: var(--siva); }
.pata a { color: var(--siva); margin: 0 8px; }

/* formulár */
.papier { background: var(--biela); border: var(--obrys); border-radius: 22px; box-shadow: var(--tien); padding: 22px 18px; position: relative; }
.papier h2 { font-size: 24px; }
label.l { display: block; font: 800 12px/1 "Unbounded", sans-serif; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }
input[type=text], textarea { width: 100%; border: var(--obrys); background: #fffef9; border-radius: 14px; padding: 13px 14px; font-size: 17px; outline: none; }
input[type=text]:focus, textarea:focus { box-shadow: var(--tien-maly); background: #fffbe6; }
textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.postup { display: flex; gap: 6px; margin: 0 0 18px; }
.postup i { flex: 1; height: 8px; border-radius: 9px; border: 2px solid var(--cerna); background: var(--biela); }
.postup i.ok { background: var(--zlta); }
.dve { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.volba { border: var(--obrys); background: var(--biela); border-radius: 16px; padding: 14px; text-align: left; cursor: pointer; box-shadow: var(--tien-maly); }
.volba b { display: block; margin: 6px 0 2px; font: 800 14px/1.2 "Unbounded", sans-serif; }
.volba span { font-size: 13px; color: var(--siva); line-height: 1.3; display: block; }
.volba .em { font-size: 28px; }
.volba.vybrany { background: var(--zlta); }
.nav { display: flex; gap: 12px; margin-top: 22px; }
.nav .btn { flex: 1; }
.nav .btn.spat { flex: 0 0 auto; }
.pocitadlo { text-align: right; font-size: 12px; color: var(--siva); margin-top: 4px; }
.mikrofon { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; border: var(--obrys); background: var(--biela);
  border-radius: 99px; padding: 8px 16px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--cerna); }
.mikrofon.nahrava { background: var(--cervena); color: var(--biela); animation: pulz 1.1s infinite; }
@keyframes pulz { 50% { transform: scale(1.05); } }
.suhlas { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #3a353e; margin-top: 16px; }
.suhlas input { width: 22px; height: 22px; flex: none; accent-color: var(--cerna); margin-top: 1px; }
.tajne { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; background: var(--mata); border: 2.5px solid var(--cerna);
  border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
.chyba { background: var(--cervena); color: var(--biela); border: var(--obrys); border-radius: 12px; padding: 10px 14px; margin-top: 14px; font-weight: 700; }
.odovzdaj { text-align: center; padding: 26px 6px; }
.odovzdaj .em { font-size: 64px; }

/* predvolanie / zdieľanie */
.predvolanie { text-align: center; padding: 14px 0 20px; }
.predvolanie .nalepka { margin-bottom: 14px; font-size: 13px; }
.predvolanie h1 { font: 900 32px/1.08 "Unbounded", sans-serif; letter-spacing: -.02em; margin: 0 0 10px; text-transform: uppercase; }
.predvolanie .tema { display: inline-block; font: 800 19px/1.25 "Unbounded", sans-serif; background: var(--biela); border: var(--obrys);
  border-radius: 12px; padding: 8px 12px; box-shadow: var(--tien-maly); transform: rotate(1deg); margin: 4px 0 8px; }
.zdielaj { display: grid; gap: 12px; margin-top: 16px; }
.odkaz-box { background: #fffef9; border: 2.5px dashed var(--cerna); border-radius: 12px; padding: 10px 12px; font-size: 14px; word-break: break-all; color: var(--siva); }
.stav-riadok { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; background: var(--cerna); color: var(--zlta);
  border-radius: 14px; font-weight: 800; }
.bodky::after { content: ""; animation: bodky 1.4s infinite steps(4); }
@keyframes bodky { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.svetielko { width: 12px; height: 12px; border-radius: 50%; background: var(--cervena); flex: none; animation: blik 1s infinite; }
@keyframes blik { 50% { opacity: .2; } }

.porada { text-align: center; padding: 40px 0; }
.porada .kladivko { width: 130px; height: 130px; animation: uder 1.2s ease-in-out infinite; transform-origin: 70% 75%; }
@keyframes uder { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-30deg); } 75% { transform: rotate(8deg); } 85% { transform: rotate(0); } }
.porada p { font-weight: 700; min-height: 3em; transition: opacity .3s; }

/* rozsudok */
.rozsudok { text-align: center; padding: 8px 0 10px; }
.rozsudok .sudca-riadok { margin-bottom: 10px; }
.rozsudok h1 { font: 900 clamp(30px, 8.5vw, 42px)/1.05 "Unbounded", sans-serif; letter-spacing: -.03em; margin: 6px 0 18px; text-transform: uppercase; }
.odvolaci { display: inline-block; margin-bottom: 10px; }
.skore { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skore > div { min-width: 0; border: var(--obrys); border-radius: var(--r); padding: 12px 8px 10px; color: var(--biela); box-shadow: var(--tien-maly); position: relative; }
.skore > div:first-child { background: var(--cervena); }
.skore > div:last-child { background: var(--modra); }
.skore .meno { font: 800 15px/1.2 "Unbounded", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skore .pct { font: 900 clamp(36px, 11vw, 68px)/1.05 "Unbounded", sans-serif; letter-spacing: -.05em; text-shadow: -2px -2px 0 var(--cerna), 2px -2px 0 var(--cerna), -2px 2px 0 var(--cerna), 2px 2px 0 var(--cerna), 0 -2px 0 var(--cerna), 0 2px 0 var(--cerna), -2px 0 0 var(--cerna), 2px 0 0 var(--cerna), 4px 4px 0 var(--cerna); white-space: nowrap; }
.skore .prehral { filter: grayscale(.65) brightness(.95); transform: scale(.94); }
.skore .vyhral { transform: rotate(-2deg); box-shadow: var(--tien); }
.skore { margin-top: 30px; }
.skore .vyhral::before { content: "👑"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 34px; }
.pruh { height: 22px; border-radius: 99px; background: var(--modra); border: var(--obrys); overflow: hidden; margin: 14px 0 10px; display: flex; box-shadow: var(--tien-maly); }
.pruh i { display: block; height: 100%; background: var(--cervena); border-right: 3px solid var(--cerna); width: 50%; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.vitaz-stitok { margin-top: 4px; }
.bublina { position: relative; background: var(--biela); border: var(--obrys); border-radius: 22px; box-shadow: var(--tien); padding: 18px; margin: 26px 0 8px;
  font: 800 20px/1.35 "Unbounded", sans-serif; letter-spacing: -.01em; text-align: left; }
.bublina::after { content: ""; position: absolute; left: 34px; top: -16px; width: 26px; height: 26px; background: var(--biela);
  border-left: var(--obrys); border-top: var(--obrys); transform: rotate(45deg); }
.odovodnenie { text-align: left; padding: 0; margin: 18px 0 0; list-style: none; display: grid; gap: 10px; }
.odovodnenie li { background: var(--biela); border: 2.5px solid var(--cerna); border-radius: 14px; padding: 12px 14px 12px 46px; position: relative; font-size: 16px; }
.odovodnenie li::before { content: "§"; position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 7px; background: var(--zlta);
  border: 2px solid var(--cerna); font: 900 14px/20px "Unbounded", sans-serif; text-align: center; }
.trest { text-align: left; margin-top: 20px; background: var(--zlta); border: var(--obrys); border-radius: 16px; box-shadow: var(--tien); padding: 16px;
  position: relative; transform: rotate(-.8deg); }
.trest::before, .trest::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--papier); border: var(--obrys); border-radius: 50%; }
.trest::before { left: -13px; } .trest::after { right: -13px; }
.trest .stitok { font: 900 13px/1 "Unbounded", sans-serif; letter-spacing: .08em; }
.trest p { margin: 6px 0 0; font-weight: 800; font-size: 18px; }
.polahc { font-size: 14px; margin-top: 8px; color: #3a353e; }
.zaver { font: 800 18px/1.3 "Unbounded", sans-serif; margin: 22px 0 4px; }
.rada { text-align: left; margin-top: 18px; padding: 14px 16px; background: var(--mata); border: var(--obrys); border-radius: 14px; font-size: 15px; }
.akcie { display: grid; gap: 12px; margin-top: 26px; }
.akcie .riadok { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.video-box { background: var(--cerna); color: var(--zlta); border: var(--obrys); border-radius: 22px; box-shadow: var(--tien); padding: 16px; text-align: center; }
.video-box h3 { color: var(--zlta); margin-bottom: 10px; }
.video-box video { width: 100%; max-width: 330px; display: block; margin: 0 auto 14px; border: 3px solid var(--zlta); border-radius: 16px; background: #000; aspect-ratio: 9/16; }
.video-box .mala { color: #d9d3c4; margin: 10px 0 0; }
.video-box .btn.druhy { color: var(--cerna); }
.odvolanie-box { text-align: left; }
.vypovede details { background: var(--biela); border: 2.5px solid var(--cerna); border-radius: 14px; padding: 12px 14px; margin-top: 12px; text-align: left; }
.vypovede summary { cursor: pointer; font-weight: 800; }
.vypovede p { white-space: pre-wrap; color: #3a353e; margin: 8px 0 0; font-size: 15px; }
.vazne { text-align: left; }
.vazne ul { padding-left: 20px; }
.vazne li { margin: 6px 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--cerna); color: var(--zlta); padding: 10px 18px; border-radius: 12px; font-weight: 800; box-shadow: var(--tien-maly); z-index: 9; }
.moje { margin-top: 22px; text-align: left; }
.moje a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--biela); border: 2.5px solid var(--cerna); border-radius: 12px; margin-top: 8px; text-decoration: none; font-weight: 700; box-shadow: 3px 3px 0 var(--cerna); }
.moje a span { color: var(--siva); font-size: 13px; white-space: nowrap; }
.zmazat { background: none; border: 0; color: var(--siva); text-decoration: underline; cursor: pointer; font-size: 14px; margin-top: 22px; }
.odkaz-odvolanie { display: block; margin: 0 0 16px; text-decoration: none; }

.fade-in { animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pop { animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- v5: postavičky sudcov, živá ukážka, pečiatka, galéria ---------- */
.avatar { display: block; width: 64px; height: 64px; border-radius: 50%; }
.sudca .avatar { width: 58px; height: 58px; margin-bottom: 8px; transition: transform .2s; }
.sudca:hover .avatar, .sudca.vybrany .avatar { transform: rotate(-8deg) scale(1.06); }
.sudca-hlava { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sudca-hlava .avatar { width: 54px; height: 54px; filter: drop-shadow(3px 3px 0 var(--cerna)); }

/* živá ukážka v hero */
.demo { position: relative; max-width: 420px; margin: 4px auto 26px; text-align: left; }
.demo .box { padding: 16px 16px 14px; transform: rotate(-1.2deg); }
.demo-hlava { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.demo-hlava .avatar { width: 46px; height: 46px; flex: none; }
.demo-hlava b { display: block; font: 900 17px/1.1 "Unbounded", sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.demo-hlava span { font-size: 12px; color: var(--siva); font-weight: 700; }
.demo-skore { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-skore div { border: 2.5px solid var(--cerna); border-radius: 12px; padding: 6px 8px; color: var(--biela); min-width: 0; }
.demo-skore div:first-child { background: var(--cervena); } .demo-skore div:last-child { background: var(--modra); }
.demo-skore small { display: block; font: 800 11px/1.2 "Unbounded", sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-skore strong { font: 900 30px/1.1 "Unbounded", sans-serif; letter-spacing: -.04em; }
.demo-skore .prehral { filter: grayscale(.6); }
.demo-vyrok { margin: 10px 0 0; font-weight: 800; font-size: 14.5px; line-height: 1.35; }
.demo .nalepka.live { position: absolute; top: -12px; right: 8px; z-index: 2; transform: rotate(4deg); }
.demo .nalepka.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--biela); margin-right: 6px; animation: blik 1s infinite; vertical-align: 1px; }
.demo-body { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.demo-body i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cerna); background: var(--biela); }
.demo-body i.akt { background: var(--cerna); }
.demo .obsah { transition: opacity .35s, transform .35s; }
.demo .obsah.mizne { opacity: 0; transform: translateY(8px); }

/* galéria skutočných kariet */
.galeria { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.galeria img { flex: none; width: 230px; height: auto; border: 3px solid var(--cerna); border-radius: 16px; box-shadow: var(--tien-maly); scroll-snap-align: center; background: var(--papier); }
.galeria img:nth-child(odd) { transform: rotate(-1.5deg); } .galeria img:nth-child(even) { transform: rotate(1.5deg); }

/* porada – sudca premýšľa */
.porada .myslienka { position: relative; display: inline-block; }
.porada .myslienka .avatar { width: 130px; height: 130px; filter: drop-shadow(5px 5px 0 var(--cerna)); animation: premysla 2.4s ease-in-out infinite; }
.porada .myslienka::after { content: "…"; position: absolute; top: -10px; right: -38px; background: var(--biela); border: var(--obrys); border-radius: 18px;
  font: 900 26px/1 "Unbounded", sans-serif; padding: 4px 12px 14px; box-shadow: var(--tien-maly); animation: tlkot 1.2s ease-in-out infinite; }
@keyframes premysla { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-4px); } }

/* odhalenie rozsudku: pečiatka, otras, konfety */
.peciatka { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none; }
.peciatka span { font: 900 clamp(44px, 14vw, 96px)/1 "Unbounded", sans-serif; text-transform: uppercase; color: var(--cervena);
  border: 8px solid var(--cervena); border-radius: 18px; padding: 10px 22px; background: rgba(255,253,246,.92); transform: rotate(-12deg);
  animation: peciatka .9s cubic-bezier(.2,1.5,.4,1) both; box-shadow: 8px 8px 0 var(--cerna); }
@keyframes peciatka { 0% { opacity: 0; transform: rotate(-12deg) scale(3); } 45% { opacity: 1; transform: rotate(-12deg) scale(.92); } 60% { transform: rotate(-12deg) scale(1.04); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.peciatka.mizne span { animation: peciatkaPrec .35s ease-in both; }
@keyframes peciatkaPrec { to { opacity: 0; transform: rotate(-12deg) scale(.6); } }
.otras { animation: otras .45s; }
@keyframes otras { 10%, 50%, 90% { transform: translate(-6px, 2px); } 30%, 70% { transform: translate(6px, -2px); } }
#konfety { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 19; }

/* lepiaca výzva na mobile */
.lepiaca { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--cerna); border-top: var(--obrys); display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s; }
.lepiaca.ukaz { transform: none; }
.lepiaca p { margin: 0; color: var(--zlta); font: 800 13px/1.25 "Unbounded", sans-serif; flex: 1; }
.lepiaca .btn { padding: 11px 16px; font-size: 14px; box-shadow: 3px 3px 0 var(--zlta); border-color: var(--zlta); }
@media (min-width: 760px) { .lepiaca { display: none; } }
.demo .box { padding-top: 24px; }

/* široká obrazovka: úvod v dvoch stĺpcoch, ostatné sekcie v čitateľnom stĺpci */
@media (min-width: 900px) {
  .obal { max-width: 1040px; }
  .hlavicka { max-width: 1040px; }
  section.blok, .pata { max-width: 640px; margin-left: auto; margin-right: auto; }
  #app > .papier, #app > .rozsudok, #app > .predvolanie, #app > .porada, #app > .stav-riadok, #app > p, #app > .odkaz-odvolanie { max-width: 600px; margin-left: auto; margin-right: auto; }
  #app > .stav-riadok { margin-top: 18px; }
  .hero { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 48px; text-align: left; align-items: center; padding-top: 40px;
    grid-template-areas: "nal demo" "h1 demo" "pod demo" "cta demo" "mala demo" "moje moje"; }
  .hero > .nalepka { grid-area: nal; justify-self: start; }
  .hero h1 { grid-area: h1; font-size: 84px; }
  .hero .demo { grid-area: demo; margin: 0; max-width: none; }
  .hero p.pod { grid-area: pod; margin-left: 0; }
  .hero > .btn { grid-area: cta; justify-self: start; }
  .hero > .mala { grid-area: mala; }
  .hero .moje { grid-area: moje; max-width: 640px; }
  .pas { margin: 30px 0 0; }
  .galeria { margin: 0; }
}

/* ---------- animovaný rozsudok: scéna v krokoch (oneskorenie cez --d) ---------- */
.sc { animation-delay: var(--d, 0s) !important; animation-fill-mode: both !important; }
.sc-vlet-l { animation: vletL .7s cubic-bezier(.2,1.4,.4,1); }
.sc-vlet-p { animation: vletP .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes vletL { from { opacity: 0; transform: translateX(-120%) rotate(-14deg); } }
@keyframes vletP { from { opacity: 0; transform: translateX(120%) rotate(14deg); } }
.sc-pop { animation: pop .55s cubic-bezier(.2,1.6,.4,1); }
.sc-hore { animation: hore .5s cubic-bezier(.2,1.2,.4,1); }
@keyframes hore { from { opacity: 0; transform: translateY(26px) rotate(-1deg); } }
.sc-pecat { animation: pecat .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes pecat { 0% { opacity: 0; transform: rotate(-10deg) scale(1.8); } 60% { opacity: 1; transform: rotate(1deg) scale(.96); } }
.sc-padni { animation: padni .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes padni { from { opacity: 0; transform: translate(-50%, -80px) rotate(-30deg); } }
.skore .vyhral::before { animation: korunka 2.6s ease-in-out infinite; }
@keyframes korunka { 0%, 100% { transform: translateX(-50%) rotate(-8deg); } 50% { transform: translateX(-50%) rotate(6deg) translateY(-3px); } }
.skore .vyhral.sc-korunka::before { animation: padni .7s cubic-bezier(.3,1.6,.5,1) var(--dk, 0s) both, korunka 2.6s ease-in-out calc(var(--dk, 0s) + .7s) infinite; }
.sudca-hlava .avatar { animation: dycha 3.2s ease-in-out infinite; }
@keyframes dycha { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.sudca-hlava.hovori .avatar { animation: hovori .32s ease-in-out infinite alternate; }
@keyframes hovori { from { transform: rotate(-4deg) scale(1); } to { transform: rotate(3deg) scale(1.07); } }
.pruh.sc i { transition-delay: var(--d, 0s); }
.kurzor::after { content: "▍"; animation: blik .7s infinite; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) { .sc { animation: none !important; } }

/* nálepka SKANDÁL v hero – bulvárny háčik */
.hero > .nalepka.skandal { font-size: 18px; padding: 9px 14px; letter-spacing: .08em; box-shadow: 4px 4px 0 var(--cerna); animation: skandal 2.4s ease-in-out infinite; }
@keyframes skandal { 0%, 70%, 100% { transform: rotate(-4deg) scale(1); } 76% { transform: rotate(3deg) scale(1.12); } 82% { transform: rotate(-6deg) scale(1.05); } 88% { transform: rotate(-4deg) scale(1); } }
.hero h1 { text-wrap: balance; line-height: 1.04; }
@media (min-width: 900px) { .hero h1 { font-size: 72px; } }

/* najčastejšie hádky – rad promo videí */
.promo-rad { display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.promo-karta { flex: none; width: 200px; text-align: left; background: var(--biela); border: var(--obrys); border-radius: 18px; box-shadow: var(--tien-maly); padding: 8px 8px 10px; cursor: pointer; scroll-snap-align: start; }
.promo-karta:nth-child(odd) { transform: rotate(-1deg); } .promo-karta:nth-child(even) { transform: rotate(1deg); }
.promo-obal { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 2.5px solid var(--cerna); aspect-ratio: 9/16; background: var(--cerna); }
.promo-obal img, .promo-obal video { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-obal .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: var(--zlta);
  border: var(--obrys); display: grid; place-items: center; font-size: 22px; box-shadow: var(--tien-maly); padding-left: 4px; transition: transform .15s; }
.promo-karta:hover .play { transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); }
.promo-karta b { display: block; font: 800 13.5px/1.25 "Unbounded", sans-serif; margin: 9px 2px 4px; }
.promo-karta small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--siva); font-weight: 700; margin: 0 2px; }
.promo-karta small .avatar { width: 22px; height: 22px; }
@media (min-width: 900px) { .promo-rad { margin: 0; } }