/* ========== Pamäťový súboj ========== */
:root {
  --bg: #0e1126;
  --bg2: #171b3a;
  --card: #1d2247;
  --line: #2c3266;
  --tx: #f3f4ff;
  --mut: #a6abd8;
  --acc: #8b6cff;
  --acc2: #5ee7c3;
  --o0: #ef4b5c;
  --o1: #3b82f6;
  --o2: #f0a800;
  --o3: #1fae6b;
  --r: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Rubik', system-ui, sans-serif;
  color: var(--tx);
  background:
    radial-gradient(1200px 600px at 10% -10%, #2a1f6b 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #0f4a52 0%, transparent 60%),
    linear-gradient(var(--bg), var(--bg));
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
/* jemná „čipová“ mriežka */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 40px 40px;
}
h1, h2 { margin: .2em 0; line-height: 1.15; }
p { margin: .5em 0; }
.muted { color: var(--mut); }
.small { font-size: .85em; }
.center { text-align: center; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: 0 10px 40px #0006; }
.pill { display: inline-block; background: #ffffff14; border: 1px solid #ffffff22; padding: .3em .8em; border-radius: 99px; font-weight: 600; font-size: .9em; }
.pill.ok { background: #1fae6b33; border-color: #1fae6b88; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary {
  background: linear-gradient(135deg, var(--acc), #5b8cff); color: #fff; font-weight: 800;
  padding: .85em 1.6em; border-radius: 14px; font-size: 1.1em;
  box-shadow: 0 6px 0 #3b2a99, 0 10px 30px #6d5cff55; transition: transform .08s;
}
.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #3b2a99; }
.ghost { background: #ffffff12; border: 1px solid #ffffff2a; padding: .7em 1.3em; border-radius: 14px; font-weight: 600; }
.wide { width: 100%; }
.link { background: none; color: var(--mut); text-decoration: underline; font-size: inherit; padding: 0; }

.logo { font-weight: 900; font-size: 2.4rem; letter-spacing: -.02em; text-align: center; }
.logo .grad { background: linear-gradient(90deg, #fff, var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alert { background: #ef4b5c22; border: 1px solid #ef4b5c88; padding: .7em 1em; border-radius: 12px; text-align: center; }

/* animácie */
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes slide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.bounce { animation: bounce 1.4s ease-in-out infinite; }
.spin { animation: spin 1.6s linear infinite; display: inline-block; }

/* ===================== ŽIAK ===================== */
.player { font-size: 17px; }
.join-page { max-width: 460px; margin: 0 auto; padding: 28px 16px 40px; display: grid; gap: 16px; }
.lbl { display: block; font-weight: 600; margin: 6px 0 8px; color: var(--mut); }
input[type=text], input:not([type]), input[type=password] {
  width: 100%; font: inherit; font-size: 1.2em; padding: .7em .9em; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg2); color: var(--tx); outline: none; margin-bottom: 14px;
}
input:focus { border-color: var(--acc); }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 20px; }
.avatars input { position: absolute; opacity: 0; pointer-events: none; }
.avatars span { display: grid; place-items: center; aspect-ratio: 1; font-size: 1.6em; border-radius: 12px; background: var(--bg2); border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.avatars input:checked + span { border-color: var(--acc2); background: #5ee7c322; transform: scale(1.08); }

.play { max-width: 560px; margin: 0 auto; padding: 12px 14px 28px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px; }
.me { display: flex; align-items: center; gap: 10px; background: #ffffff0d; border-radius: 99px; padding: 6px 14px 6px 6px; }
.me-av { font-size: 1.5em; background: var(--card); border-radius: 99px; width: 40px; height: 40px; display: grid; place-items: center; }
.me-sc { margin-left: auto; font-weight: 800; color: var(--acc2); }
.big-av { font-size: 5rem; }
.big { font-size: 4.5rem; line-height: 1; }
.tip { background: #ffffff0a; border-radius: 12px; padding: 12px; font-size: .92em; }

.pre { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.count-big { font-size: 7rem; font-weight: 900; line-height: 1; color: var(--acc2); animation: pulse 1s ease-in-out infinite; }
.qtext { font-size: 1.45em; text-align: center; font-weight: 800; }
.qtext.small { font-size: 1.15em; }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--mut); flex-wrap: wrap; }
.timer { font-size: 1.6em; font-weight: 900; color: var(--tx); min-width: 2ch; text-align: right; }
.hurry { color: var(--o0) !important; animation: pulse .5s ease-in-out infinite; }
.tbar { height: 8px; background: #ffffff15; border-radius: 99px; overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); border-radius: 99px; transition: width .1s linear; }
.tbar.big { height: 14px; }

.answers { flex: 1; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; min-height: 52vh; }
.answers.n2 { grid-template-columns: 1fr; }
.ans {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); color: #fff; font-weight: 800; font-size: 1.05em; padding: 14px 10px;
  box-shadow: inset 0 -6px 0 #0003, 0 8px 20px #0004; transition: transform .08s; text-shadow: 0 1px 2px #0005;
}
.ans:active { transform: scale(.96); }
.ans .sh { font-size: 2.2em; line-height: 1; }
.ans .tx { line-height: 1.2; }
.o0 { background: var(--o0); } .o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); }
.chip-ans { display: inline-block; padding: .2em .6em; border-radius: 8px; color: #fff; font-weight: 700; }

.result { text-align: center; border-radius: var(--r); padding: 26px 18px; border: 2px solid; }
.result.ok { background: #1fae6b22; border-color: var(--o3); }
.result.bad { background: #ef4b5c22; border-color: var(--o0); }
.result.timeout { background: #f0a80022; border-color: var(--o2); }
.gain { font-size: 1.8em; font-weight: 900; color: var(--acc2); }
.streak { font-size: 1.3em; font-weight: 800; }
.rank { font-size: 1.15em; margin-top: 14px; }
.fact { background: #ffffff0d; border-left: 4px solid var(--acc2); border-radius: 10px; padding: 12px 14px; font-size: .95em; }
.final-me h2 { font-size: 2.4em; }

/* ===================== UČITEĽ / PROJEKTOR ===================== */
.host { font-size: clamp(16px, 1.35vw, 26px); overflow-x: hidden; }
#host { min-height: 100vh; padding: 2.2vh 3vw 52px; display: flex; flex-direction: column; }
.host-foot { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 24px; justify-content: center; padding: 8px; font-size: 13px; color: var(--mut); background: #0008; }

.lobby { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) 1.4fr; gap: 3vw; align-items: stretch; }
.join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; text-align: center; }
.join .logo { font-size: 2.6em; }
.url { font-size: 1.7em; font-weight: 900; color: var(--acc2); word-break: break-all; }
.qr { width: min(18vw, 300px); background: #fff; border-radius: 14px; padding: 6px; margin: .4em 0; }
.roster { display: flex; flex-direction: column; gap: 1em; }
.roster h2 { display: flex; align-items: center; gap: .6em; }
.chips { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .55em; }
.chip { display: inline-flex; align-items: center; gap: .4em; background: var(--bg2); border: 1px solid var(--line); padding: .4em .8em; border-radius: 99px; font-weight: 600; }
.chip span { font-size: 1.3em; }
.chip i { font-style: normal; opacity: 0; color: var(--o0); transition: opacity .15s; }
.chip:hover i { opacity: 1; }
.chip:hover { border-color: var(--o0); }
.empty { font-size: 1.2em; }
.roster .primary { align-self: flex-end; font-size: 1.3em; }

.hq { flex: 1; display: flex; flex-direction: column; gap: 1.6vh; }
.hq.pre { align-items: center; justify-content: center; text-align: center; }
.hq.pre .hq-text { max-width: 30ch; }
.hq.pre .count-big { font-size: 10em; }
.hq-top { display: flex; gap: .8em; align-items: center; flex-wrap: wrap; }
.hq-top .pill:last-child { margin-left: auto; }
.hq-text { font-size: 2.6em; font-weight: 900; text-align: center; margin: .3em auto; max-width: 36ch; }
.hq-timer { display: flex; justify-content: center; }
.ring { width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center; font-size: 2.2em; font-weight: 900; background: var(--card); border: 4px solid var(--acc); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; margin-top: auto; }
.tile { display: flex; align-items: center; gap: .7em; border-radius: var(--r); padding: 1em 1.2em; font-size: 1.6em; font-weight: 800; color: #fff; box-shadow: inset 0 -6px 0 #0003; transition: opacity .3s, transform .3s; text-shadow: 0 1px 2px #0005; }
.tile .sh { font-size: 1.2em; width: 1.4em; text-align: center; }
.tile.dim, .barcol.dim { opacity: .28; }
.tile.correct { transform: scale(1.03); outline: 5px solid #fff; }
.answered-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; font-size: 1.5em; min-height: 1.6em; }
.ctrl { display: flex; justify-content: flex-end; gap: 1em; }
.ctrl .primary { font-size: 1.15em; }

.bars { display: flex; justify-content: center; align-items: flex-end; gap: 2vw; height: 22vh; }
.barcol { width: 9vw; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: none !important; }
.barcol b { font-size: 1.6em; margin-bottom: .2em; }
.barfill { width: 100%; height: var(--h); min-height: 8px; border-radius: 10px 10px 0 0; animation: grow .7s ease-out both; }
.barcol.o0 .barfill { background: var(--o0); } .barcol.o1 .barfill { background: var(--o1); }
.barcol.o2 .barfill { background: var(--o2); } .barcol.o3 .barfill { background: var(--o3); }
@keyframes grow { from { height: 0; } }
.hq.reveal { gap: 1.4vh; }
.hq.reveal .hq-text { font-size: 2.1em; margin: .1em auto; }
.hq.reveal .bars { height: 17vh; }
.hq.reveal .tile { font-size: 1.3em; padding: .6em 1em; }
.hq.reveal .fact.big { font-size: 1.1em; }
.fact.big { font-size: 1.3em; padding: .8em 1.1em; max-width: 60ch; margin: 0 auto; }

.board { flex: 1; display: flex; flex-direction: column; gap: 2vh; max-width: 1100px; width: 100%; margin: 0 auto; }
.board h1 { font-size: 2.2em; text-align: center; }
.lb { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.lb .row { display: flex; align-items: center; gap: .9em; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .3em 1em; font-size: 1.15em; animation: slide .45s ease-out both; animation-delay: calc(var(--i) * 70ms); }
.lb .row:nth-child(1) { background: linear-gradient(90deg, #f0a80044, var(--card)); border-color: #f0a80088; }
.lb .row:nth-child(2) { background: linear-gradient(90deg, #c9d2ff33, var(--card)); }
.lb .row:nth-child(3) { background: linear-gradient(90deg, #cd7f3233, var(--card)); }
.pos { width: 1.8em; font-weight: 900; color: var(--mut); }
.lb .av { font-size: 1.3em; }
.nm { font-weight: 700; flex: 1; }
.fire { font-size: .85em; }
.plus { color: var(--acc2); font-weight: 700; font-size: .8em; }
.sc { font-weight: 900; min-width: 5ch; text-align: right; }
.mv { width: 2.6em; text-align: right; font-size: .75em; color: var(--mut); }
.mv.up { color: var(--o3); } .mv.down { color: var(--o0); }

.final { flex: 1; display: flex; flex-direction: column; gap: 2vh; align-items: center; position: relative; z-index: 1; }
.final h1 { font-size: 2.6em; text-align: center; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1.5vw; margin-top: 2vh; }
.step { width: 15vw; min-width: 150px; text-align: center; animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.step.s1 { animation-delay: 1.2s; } .step.s2 { animation-delay: .6s; } .step.s3 { animation-delay: .1s; }
.pav { font-size: 3.6em; }
.s1 .pav { font-size: 4.6em; animation: bounce 1.4s ease-in-out infinite 2s; }
.pnm { font-weight: 800; font-size: 1.4em; }
.psc { color: var(--acc2); font-weight: 700; margin-bottom: .4em; }
.block { border-radius: 14px 14px 0 0; display: grid; place-items: center; font-size: 3em; background: linear-gradient(var(--acc), #4b3bb3); }
.s1 .block { height: 30vh; background: linear-gradient(#f5c84c, #b8860b); }
.s2 .block { height: 22vh; background: linear-gradient(#dfe5ff, #8a93b8); }
.s3 .block { height: 16vh; background: linear-gradient(#e7a36b, #8b5a2b); }
.rest { columns: 3; column-gap: 3vw; font-size: 1.1em; margin: 0; padding: 0; list-style: none; }
.rest li { margin: .2em 0; break-inside: avoid; }
.rest li span { color: var(--mut); display: inline-block; width: 2em; }

.badge-double { display: inline-block; background: linear-gradient(90deg, #f0a800, #ef4b5c); color: #fff; font-weight: 900; padding: .25em .8em; border-radius: 99px; font-size: .9em; animation: pulse 1s ease-in-out infinite; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; background: var(--c); transform: rotate(var(--r)); animation: fall var(--t) linear var(--d) infinite; border-radius: 2px; }
@keyframes fall { to { transform: translateY(110vh) rotate(calc(var(--r) + 720deg)); } }

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; }
  .qr { width: 200px; }
  .tiles { grid-template-columns: 1fr; }
  .rest { columns: 1; }
  .step { min-width: 0; width: 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
}