/* ============================================================
   FF Kvíz — vizuál zladený s ../ff-biliard (rovnaká paleta):
   FF modrá --ff, tmavé modré pozadie, biele karty, akademická zlatá.
   Externý CSS kvôli CSP style-src 'self' — žiadne inline štýly.
   Dynamiku (timer ring, bary) rieši JS cez element.style (CSSOM).
   ============================================================ */

:root{
  --ff:      #1a3a6b;   /* značková modrá FF (ako v biliarde) */
  --ff-d:    #0f2548;   /* tmavšia modrá */
  --ff-l:    #27508f;   /* svetlejšia modrá */
  --gold:    #d9b25b;   /* zlatá – akademická */
  --gold-l:  #e8c878;
  --gold-d:  #c79a3f;
  --ink:     #10233f;   /* tmavý text na bielych kartách */
  --paper:   #eef1f6;   /* svetlý text na modrom pozadí */
  --muted:   #9db1cf;   /* tlmený text na modrom */
  --muted-d: #6b7c94;   /* tlmený text na bielom */
  --line:    #cdd6e6;   /* okraje na bielych kartách (ako .modebar v biliarde) */
  --green:   #0a7e4a;   /* správne (ako .srow .pp) */
  --green-bg:#d8f0e0;
  --red:     #c0392b;   /* nesprávne (ako .srow .mm) */
  --red-bg:  #f7d9d4;
  --shadow:  0 10px 30px #00000044;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--sans);
  color:var(--paper);
  background:radial-gradient(120% 90% at 50% -10%, #2a4f8c 0%, var(--ff-d) 55%, #081730 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

#stage{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:18px clamp(10px,2.5vw,28px); }

.scr{ display:none; animation:scrIn .45s ease both; }
.scr.on{ display:block; }
@keyframes scrIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }

/* ---------------- ŠTART ---------------- */
.hero{ text-align:center; padding:16px 0 10px; }
.heroLogo{
  width:66px; height:66px; border-radius:50%; object-fit:cover; background:#fff;
  border:3px solid var(--gold); box-shadow:0 0 0 5px #d9b25b22, var(--shadow);
}
.heroTitle{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(1.8rem, 4.2vw, 2.7rem); letter-spacing:.02em; margin-top:8px;
  text-shadow:0 2px 0 #00000055;
}
.heroSub{
  font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:clamp(.92rem, 1.9vw, 1.05rem); margin-top:3px;
}

.startGrid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:18px; margin-top:16px; align-items:stretch;   /* obe karty rovnako vysoké */
}
/* biela karta ako štartové okno biliardu */
.startCard{
  background:#fff; color:var(--ink);
  border-radius:18px; padding:22px;
  box-shadow:0 18px 40px #00000066, 0 2px 0 #ffffff22 inset;
}
.cardHead{
  font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ff); font-weight:800; margin-bottom:14px;
}
.lbl{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-d); font-weight:700; margin:12px 0 6px; }
#nameIn, #nameIn2{
  width:100%; padding:11px 14px; font:600 1.05rem var(--sans); color:var(--ink);
  background:#f1f4f9; border:2px solid var(--line); border-radius:12px; outline:none;
}
#nameIn:focus, #nameIn2:focus{ border-color:var(--ff); box-shadow:0 0 0 3px #1a3a6b33; }
#nameIn::placeholder, #nameIn2::placeholder{ color:#9aa8c6; font-weight:400; }
#nameIn.bad, #nameIn2.bad{ border-color:var(--red); box-shadow:0 0 0 3px #c0392b22; }
.nameWarn{
  margin-top:6px; font-size:.88rem; color:var(--red); font-weight:700;
  animation:scrIn .25s ease both;
}

.instGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:4px; }
.instBtn{
  aspect-ratio:1; border-radius:50%; border:3px solid transparent; cursor:pointer;
  background:#f1f4f9; padding:3px; display:grid; place-items:center; position:relative;
  transition:transform .08s ease, border-color .12s ease, box-shadow .15s ease;
}
.instBtn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.instBtn span{ font-size:1.4rem; }
.instBtn:hover{ transform:scale(1.06); }
.instBtn.sel{ border-color:var(--ff); transform:scale(1.08); box-shadow:0 0 0 3px #1a3a6b33; }
.instBtn.sel::after{
  content:"✓"; position:absolute; right:-2px; bottom:-2px; background:var(--ff); color:#fff;
  width:18px; height:18px; border-radius:50%; font-size:11px; display:flex;
  align-items:center; justify-content:center; border:2px solid #fff;
}

/* tlačidlá ako .btn v biliarde */
.bigBtn{
  display:block; width:100%; margin-top:18px; padding:14px 22px; cursor:pointer;
  font:800 1.1rem var(--sans); letter-spacing:.02em; color:#fff;
  background:linear-gradient(180deg, var(--ff-l), var(--ff));
  border:none; border-radius:14px;
  box-shadow:0 3px 0 #00000055, 0 2px 8px #0005;
  transition:transform .12s ease, box-shadow .12s ease, filter .2s;
}
.bigBtn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 5px 0 #00000055, 0 6px 14px #0005; }
.bigBtn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 1px 0 #00000055; }
.bigBtn:disabled{ filter:grayscale(.6) opacity(.55); cursor:not-allowed; }
.bigBtn.small{ width:auto; margin:10px auto 0; padding:10px 22px; font-size:1rem; }
.bigBtn.gold{
  color:#3a2a08;
  background:linear-gradient(180deg, var(--gold-l), var(--gold-d));
}

.ghostBtn{
  display:inline-block; margin-top:12px; padding:9px 18px; cursor:pointer;
  font:700 .95rem var(--sans); color:var(--ff);
  background:#e7ebf2; border:none; border-radius:12px;
  box-shadow:0 3px 0 #c4cad6;
  transition:transform .12s;
}
.ghostBtn:hover{ transform:translateY(-1px); }
.ghostBtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #c4cad6; }
a.langLink{ text-decoration:none; margin-left:6px; }

.hintLine{ margin-top:12px; font-size:.85rem; color:var(--muted-d); text-align:center; }
.hintLine em{ font-family:var(--serif); }
.startBtnRow{ text-align:center; }

/* sieň slávy — priesvitný panel ako v biliarde */
.boardCard{
  min-height:200px;
  display:flex; flex-direction:column;              /* rebríček vyplní výšku, počítadlo dole */
  background:#ffffff10; color:var(--paper);
  border:1px solid #ffffff22; border-radius:18px; padding:22px;
  box-shadow:var(--shadow);
}
.boardCard .cardHead{ color:var(--gold); }
.boardMode{ font-size:.7rem; color:var(--muted); letter-spacing:0; text-transform:none; vertical-align:middle; }
.boardCard .boardList{ flex:1; }
.boardList{ list-style:none; counter-reset:rank; }
.boardList li{
  counter-increment:rank; display:flex; align-items:center; gap:10px;
  padding:7px 6px; border-bottom:1px dashed #ffffff22; font-size:.98rem;
}
.endCard .boardList li{ border-bottom:1px dashed #cdd6e688; }
.boardList li::before{
  content:counter(rank); width:1.5em; text-align:right; flex:none;
  font:700 .95rem var(--sans); color:var(--muted);
}
.boardList li:nth-child(1)::before{ content:"🥇"; }
.boardList li:nth-child(2)::before{ content:"🥈"; }
.boardList li:nth-child(3)::before{ content:"🥉"; }
.boardList img{ width:24px; height:24px; border-radius:50%; object-fit:cover; background:#fff; flex:none; }
.boardList .bName{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.boardList .bTit{ color:var(--gold); font-weight:800; font-size:.92rem; white-space:nowrap; }
.endCard .boardList .bTit{ color:var(--gold-d); }
.boardList .bTime{ color:var(--muted); font-size:.8rem; white-space:nowrap; }
.endCard .boardList .bTime{ color:var(--muted-d); }
.boardEmpty{ color:var(--muted); font-style:italic; padding:8px; }
.endCard .boardEmpty{ color:var(--muted-d); }
.playsLine{ color:var(--muted); }

.foot{ text-align:center; color:#ffffff66; font-size:.82rem; margin:26px 0 8px; }
.foot em{ font-family:var(--serif); }

/* ---------------- HUD ---------------- */
.hud{ display:flex; align-items:center; gap:14px; padding:8px 0 14px; }
.hudPlayer{
  display:flex; align-items:center; gap:10px; min-width:0; flex:1;
  background:#ffffff12; border-radius:12px; padding:6px 12px 6px 6px;
  border:1px solid #ffffff22;
}
.hudLogo{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 2px 6px #0006; flex:none; }
.hudName{ font-weight:800; font-size:1.02rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hudTitleNow{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:.88rem; }

.timer{
  width:64px; height:64px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--gold) 360deg, #ffffff22 0deg); /* JS prepisuje */
  box-shadow:inset 0 0 0 3px var(--ff-d), var(--shadow);
}
.timer span{
  width:52px; height:52px; border-radius:50%; background:var(--ff-d);
  display:grid; place-items:center; font:800 1.3rem var(--sans); color:#fff;
}
.timer.low span{ color:#ff9d8f; animation:tick .5s steps(2) infinite; }
@keyframes tick{ 50%{ transform:scale(1.08); } }

.lifelines{ display:flex; gap:8px; }
.lifeBtn{
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.25rem;
  color:var(--gold); background:#ffffff12; border:2px solid var(--gold);
  box-shadow:0 3px 0 #00000055, 0 2px 8px #0005;
  transition:transform .12s, filter .2s;
}
.lifeBtn:hover:not(:disabled){ transform:translateY(-2px) rotate(-4deg); }
.lifeBtn:disabled{ filter:grayscale(1) opacity(.4); cursor:not-allowed; border-color:#ffffff33; box-shadow:none; }

/* ---------------- ARÉNA ---------------- */
.arena{ display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:20px; align-items:start; }
.qWrap{ min-width:0; }

/* otázka = biela karta (ako okná biliardu) s FF pečaťou */
.qCard{
  position:relative; border-radius:16px; padding:26px 28px 22px;
  background:#fff; color:var(--ink);
  box-shadow:0 18px 40px #00000066, 0 2px 0 #ffffff22 inset;
  transform:rotate(-.35deg);
  animation:cardIn .4s ease both;
}
@keyframes cardIn{ from{ opacity:0; transform:rotate(-.35deg) translateY(16px) scale(.98);} to{ opacity:1; transform:rotate(-.35deg);} }
.qCard::after{ /* pečať v rohu */
  content:"FF"; position:absolute; top:-14px; right:18px; width:44px; height:44px;
  border-radius:50%; display:grid; place-items:center;
  font:700 .95rem var(--serif); color:#fff; letter-spacing:.05em;
  background:radial-gradient(circle at 35% 30%, var(--ff-l) 0%, var(--ff) 60%, var(--ff-d) 100%);
  box-shadow:0 4px 10px #00000055; transform:rotate(8deg);
}
.qNum{
  font:800 .78rem var(--sans); text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted-d); margin-bottom:8px;
}
.qText{ font:600 clamp(1.15rem, 2.6vw, 1.5rem)/1.35 var(--serif); color:var(--ink); }

.qPhotoBox{ float:right; margin:0 0 10px 18px; width:min(180px, 38%); }
.qPhotoBox img{
  width:100%; display:block; border-radius:6px;
  border:5px solid #fff; outline:1px solid var(--line);
  box-shadow:0 8px 18px #00000044; transform:rotate(1.5deg);
  filter:sepia(.14);
}
.qPhotoBox figcaption{ font-size:.68rem; color:var(--muted-d); text-align:center; margin-top:6px; font-style:italic; }

/* odpovede — biele karty s modrým okrajom (ako .modebar v biliarde) */
.answers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.ansBtn{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  padding:14px 16px; min-height:64px; border-radius:14px;
  background:#fff; border:2px solid var(--line); color:var(--ff);
  font:700 1.03rem/1.3 var(--sans);
  box-shadow:0 3px 0 #00000033, 0 2px 8px #0004;
  transition:transform .13s ease, border-color .13s ease, background .2s;
  animation:ansIn .35s ease both;
}
.answers .ansBtn:nth-child(2){ animation-delay:.06s; }
.answers .ansBtn:nth-child(3){ animation-delay:.12s; }
.answers .ansBtn:nth-child(4){ animation-delay:.18s; }
@keyframes ansIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.ansBtn:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--ff); background:#1a3a6b14; }
.ansBtn:disabled{ cursor:default; }
.ansKey{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font:800 1rem var(--sans); color:#3a2a08;
  background:linear-gradient(180deg, var(--gold-l), var(--gold-d));
  box-shadow:0 2px 0 #00000033;
}
.ansTxt{ min-width:0; }

.ansBtn.correct{
  background:var(--green-bg); border-color:var(--green); color:var(--green);
  animation:winPulse .6s ease 2;
}
.ansBtn.correct .ansKey{ background:var(--green); color:#fff; }
@keyframes winPulse{ 50%{ transform:scale(1.025); box-shadow:0 0 0 6px #0a7e4a33, 0 2px 8px #0004;} }
.ansBtn.wrong{
  background:var(--red-bg); border-color:var(--red); color:var(--red);
  animation:shake .4s ease;
}
.ansBtn.wrong .ansKey{ background:var(--red); color:#fff; }
@keyframes shake{ 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
.ansBtn.dim{ opacity:.3; filter:grayscale(.8); }

/* zaujímavosť — zlatý rámik ako hlášky v biliarde */
.factBar{
  margin-top:16px; padding:14px 18px; border-radius:14px; text-align:center;
  background:#0c1f3dee; border:2px solid #ffd86b; color:#ffe08a;
  font:600 .98rem/1.45 var(--sans);
  box-shadow:0 8px 24px #0008;
  animation:scrIn .35s ease both;
}
.factBar em{ font-family:var(--serif); color:var(--paper); font-weight:400; }
.factBtns{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.moreBtn{
  margin-top:10px; padding:9px 18px; cursor:pointer; border:none; border-radius:12px;
  font:700 .95rem var(--sans); color:#3a2a08;
  background:linear-gradient(180deg, var(--gold-l), var(--gold-d));
  box-shadow:0 3px 0 #00000055;
  transition:transform .12s;
}
.moreBtn:hover{ transform:translateY(-1px); }
.moreBtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #00000055; }

/* okno „Viac" — medailón osobnosti / príbeh míľnika */
.infoCard{ width:min(620px, 94vw); }
.infoPhoto{ float:right; width:min(150px, 34%); margin:0 0 10px 16px; }
.infoPhoto img{
  width:100%; display:block; border-radius:6px;
  border:4px solid #fff; outline:1px solid var(--line);
  box-shadow:0 8px 18px #00000033; transform:rotate(1.5deg); filter:sepia(.14);
}
.infoPhoto figcaption{ font-size:.66rem; color:var(--muted-d); text-align:center; margin-top:5px; font-style:italic; }
.infoBody{ user-select:text; }
.infoBody p{ margin:0 0 10px; font-size:.98rem; line-height:1.55; color:var(--ink); }

/* ---------------- REBRÍK ---------------- */
.ladder{
  background:#ffffff10; border:1px solid #ffffff22;
  border-radius:16px; padding:14px 12px; box-shadow:var(--shadow);
}
.ladderList{ list-style:none; display:flex; flex-direction:column-reverse; gap:2px; }
.ladderList li{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9px;
  font:700 .92rem var(--sans); color:var(--muted);
}
.ladderList li .lNum{ font-family:var(--serif); width:1.4em; text-align:right; opacity:.7; }
.ladderList li .lIco{ margin-left:auto; font-size:.85rem; }
.ladderList li.done{ color:#7fd6a4; }
.ladderList li.cur{
  color:#3a2a08; background:linear-gradient(180deg, var(--gold-l), var(--gold-d));
  box-shadow:0 3px 10px #d9b25b55; animation:curPulse 1.6s ease infinite;
}
@keyframes curPulse{ 50%{ box-shadow:0 3px 18px #d9b25b99; } }
.ladderList li.safe{ border:1px dashed #d9b25b88; }
.ladderList li.safe .lIco::after{ content:"🔒"; }

/* ---------------- OVERLAY: publikum + pravidlá ---------------- */
.overlay{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:#081730cc; backdrop-filter:blur(3px); animation:scrIn .25s ease both;
}
.audCard{
  width:min(480px, 92vw); background:#fff; color:var(--ink);
  border-radius:18px; padding:24px;
  box-shadow:0 18px 40px #00000066;
}
.audCard h3{
  font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--sans);
  color:var(--ff); margin-bottom:16px; text-align:center;
}
.audBars{ display:grid; gap:10px; }
.audRow{ display:grid; grid-template-columns:2em 1fr 3.2em; align-items:center; gap:10px; font:800 1rem var(--sans); color:var(--ff); }
.audTrack{ height:20px; border-radius:10px; background:#e6e9ef; overflow:hidden; }
.audFill{
  height:100%; width:0; border-radius:10px;
  background:linear-gradient(90deg, var(--ff), var(--ff-l));
  transition:width .9s cubic-bezier(.2,.8,.3,1);
}
.audPct{ text-align:right; color:var(--ff); font-variant-numeric:tabular-nums; }

/* ---------------- DUEL (2P) — po vzore biliardu ---------------- */
.modeBar{ display:flex; gap:8px; margin-bottom:12px; }
.modeBtn{
  flex:1; padding:8px 10px; cursor:pointer;
  font:700 .95rem var(--sans); color:var(--ff);
  background:#e7ebf2; border:1px solid var(--line); border-radius:12px;
  transition:background .15s, color .15s;
}
.modeBtn.on{
  background:linear-gradient(180deg, var(--ff-l), var(--ff));
  color:#fff; border-color:var(--ff);
}
#p2box{ margin-top:6px; }

.boardTabs{ display:flex; gap:6px; margin-bottom:10px; }
.boardTab{
  padding:5px 12px; cursor:pointer;
  font:700 .82rem var(--sans); color:var(--muted);
  background:transparent; border:1px solid #ffffff2e; border-radius:999px;
  transition:background .15s, color .15s;
}
.boardTab.on{ background:var(--gold); color:#3a2a08; border-color:var(--gold); }

.duelHud{ display:flex; gap:10px; margin:10px 0 0; }
.duelHud.hidden{ display:none; }
.duelHud .dp{
  flex:1; display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:12px;
  background:#ffffff14; border:1px solid #ffffff22;
  color:var(--paper); opacity:.6;
}
.duelHud .dp.on{
  opacity:1; border-color:var(--gold);
  background:#ffffff22; box-shadow:0 0 12px #d9b25b44;
}
.duelHud .dp.outp{ opacity:.4; filter:grayscale(.6); }
.duelHud .dp img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:#fff; }
.duelHud .dp b{ font:700 .95rem var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.duelHud .dp .dpStat{ margin-left:auto; font:600 .82rem var(--sans); color:var(--muted); white-space:nowrap; }
.duelHud .dp.on .dpStat{ color:var(--gold-l); }
.vsTag{ font-style:normal; opacity:.8; }

/* potvrdenie žolíka — upozornenie pred minutím, čas beží ďalej */
.jokerCard{ text-align:center; }
.jokerCard h3{ font-size:16px; }
.jokerDesc{ font-size:1rem; line-height:1.5; color:var(--ink); }
.jokerWarn{
  margin-top:12px; padding:9px 12px; border-radius:10px;
  font-size:.88rem; line-height:1.45; color:var(--muted-d);
  background:#eef1f6; border:1px solid var(--line);
}
.jokerTime{
  margin-top:10px; font:700 .95rem var(--sans); color:var(--red);
}
.jokerTime strong{ font-variant-numeric:tabular-nums; }
.jokerBtns{ display:flex; gap:12px; justify-content:center; align-items:center; margin-top:16px; flex-wrap:wrap; }
.jokerBtns .bigBtn.small, .jokerBtns .ghostBtn{ margin:0; }

.rulesCard{
  width:min(560px, 94vw); max-height:88vh; overflow-y:auto;
  background:#fff; color:var(--ink);
  border-radius:18px; padding:26px 28px;
  box-shadow:0 18px 40px #00000066;
}
.rulesCard h3{
  font-size:15px; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--sans);
  color:var(--ff); font-weight:800; text-align:center; margin-bottom:14px;
}
.rulesList{ list-style:none; display:grid; gap:11px; }
.rulesList li{
  display:flex; gap:12px; align-items:flex-start; font-size:.98rem; line-height:1.45; color:var(--ink);
}
.rulesList .rIco{ flex:none; font-size:1.3rem; width:1.6em; text-align:center; }
.rulesList em{ font-family:var(--serif); }
.rulesList strong{ color:var(--ff); }

/* ---------------- KONIEC ---------------- */
.endCard{
  max-width:640px; margin:4vh auto 0; text-align:center;
  background:#fff; color:var(--ink);
  border-radius:20px; padding:30px 26px;
  box-shadow:0 18px 40px #00000066, 0 2px 0 #ffffff22 inset;
}
.endEmoji{ font-size:4rem; animation:drop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes drop{ from{ transform:translateY(-40px) scale(.5); opacity:0;} to{ transform:none; opacity:1;} }
.endHead{ font:600 2rem var(--serif); color:var(--ff); margin-top:8px; }
.endSub{ color:var(--ink); margin-top:8px; font-size:1.05rem; }
.endReveal{ margin-top:16px; padding:14px; border-radius:12px; background:var(--red-bg); border:1px solid #c0392b55; }
.revealLbl{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--red); font-weight:700; }
.revealAns{ font:600 1.2rem var(--serif); color:var(--ink); margin-top:4px; }
.revealFact{ font-size:.92rem; color:var(--muted-d); margin-top:8px; }
.endBoardWrap{ margin-top:20px; text-align:left; }
.endCard .cardHead{ color:var(--ff); }

/* konfety – vytvára JS */
.confetti{
  position:fixed; top:-40px; z-index:60; font-size:26px; pointer-events:none;
  animation:confFall linear both;
}
@keyframes confFall{
  to{ transform:translateY(110vh) rotate(720deg); opacity:.9; }
}

/* ---------------- RESPONZÍVNOSŤ ---------------- */
@media (max-width: 900px){
  .startGrid{ grid-template-columns:1fr; }
  .instGrid{ grid-template-columns:repeat(7,1fr); }
  .arena{ grid-template-columns:minmax(0,1fr); }
  .ladder{ order:-1; padding:8px; min-width:0; }
  .ladderList{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:4px; }
  .ladderList li{ flex:none; font-size:.78rem; padding:5px 8px; }
  .ladderList li .lTxt{ display:none; }
  .ladderList li.cur .lTxt, .ladderList li.safe .lTxt{ display:inline; }
  .ladderList li .lIco{ margin-left:2px; }
}
@media (max-width: 560px){
  .answers{ grid-template-columns:1fr; }
  .instGrid{ grid-template-columns:repeat(5,1fr); }
  .hud{ flex-wrap:wrap; }
  .qPhotoBox{ float:none; margin:0 auto 12px; }
  .qCard{ padding:20px 18px; }
}
/* ---- nízke viewporty (Windows 150 % škálovanie = 1280×720 a menej):
       zhutniť, aby sa HRA zmestila bez zvislého skrolovania ---- */
@media (max-height: 860px){
  #stage{ padding-top:8px; }
  .hero{ padding:8px 0 4px; }
  .heroLogo{ width:60px; height:60px; border-width:2px; }
  .heroTitle{ font-size:clamp(1.7rem, 4.8vh, 2.6rem); margin-top:4px; }
  .heroSub{ font-size:.95rem; }
  .startGrid{ margin-top:12px; gap:14px; }
  .startCard, .boardCard{ padding:14px 18px; }
  .cardHead{ margin-bottom:8px; }
  .lbl{ margin:8px 0 4px; }
  #nameIn, #nameIn2{ padding:9px 14px; font-size:1.05rem; }
  .instGrid{ gap:6px; }
  .bigBtn{ margin-top:12px; padding:11px 20px; font-size:1.05rem; }
  .ghostBtn{ margin-top:8px; padding:7px 14px; }
  .hintLine{ margin-top:8px; font-size:.8rem; }
  .boardList li{ padding:5px 6px; font-size:.92rem; }
  .foot{ margin:12px 0 4px; }

  .hud{ padding:4px 0 10px; gap:10px; }
  .hudLogo{ width:38px; height:38px; }
  .hudName{ font-size:.95rem; }
  .timer{ width:52px; height:52px; }
  .timer span{ width:42px; height:42px; font-size:1.05rem; }
  .lifeBtn{ width:44px; height:44px; font-size:1.05rem; }
  .qCard{ padding:16px 20px 14px; }
  .qNum{ margin-bottom:5px; }
  .qText{ font-size:clamp(1.02rem, 2.6vh, 1.3rem); }
  .qPhotoBox{ width:min(130px, 30%); margin:0 0 8px 14px; }
  .answers{ gap:9px; margin-top:12px; }
  .ansBtn{ min-height:50px; padding:9px 14px; font-size:.96rem; }
  .ansKey{ width:28px; height:28px; font-size:.9rem; }
  .ladder{ padding:8px 8px; }
  .ladderList li{ padding:3px 8px; font-size:.82rem; }
  .factBar{ margin-top:10px; padding:9px 14px; font-size:.9rem; }
  .factBar .bigBtn.small{ margin-top:6px; padding:8px 18px; font-size:.95rem; }
  .moreBtn{ margin-top:6px; padding:7px 14px; }
  .endCard{ margin-top:2vh; padding:18px 22px; }
  .endEmoji{ font-size:2.8rem; }
  .endHead{ font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}