/* =====================================================================
   KVÍZ PARTY – HOST / TV képernyő
   Unified h-bar / h-body / h-actions layout (shared in base.css)
   TV-optimalizált: nagy képernyőn is középre igazítva
   ===================================================================== */

html, body.host { height: 100%; overflow: hidden; }

/* A `hidden` attribútum mindig nyerjen */
[hidden] { display: none !important; }

#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  /* TV böngészőknek explicit centering */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.screen.active { display: flex; animation: popIn 0.35s ease both; }
.screen.scrollable { overflow-y: auto; }

/* Nagy TV képernyők (>1920px) – tartalom max-szélesség és középre */
@media (min-width: 1920px) {
  .h-body > * {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
  .lobby-grid {
    max-width: 1600px;
    width: 100%;
  }
  .q-text {
    max-width: 1400px;
    width: 100%;
  }
  .answers {
    max-width: 1600px;
    width: 100%;
  }
  .reveal-grid {
    max-width: 1400px;
    width: 100%;
  }
  .board {
    max-width: 1200px;
    width: 100%;
  }
  .end-grid {
    max-width: 1600px;
    width: 100%;
  }
}

/* Extra nagy TV (4K) */
@media (min-width: 2560px) {
  html { font-size: 125%; }
  .h-body > * {
    max-width: 2200px;
  }
  .lobby-grid {
    max-width: 2000px;
  }
}

/* ---------------- START képernyő ---------------- */

.settings { padding: clamp(14px, 1.6vw, 26px); overflow: auto; }
.settings h2 { font-size: clamp(0.9rem, 1.2vw, 1.2rem); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mode-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.18s ease;
  color: var(--text);
}
.mode-card:hover { transform: translateY(-2px); border-color: rgba(255, 176, 32, 0.5); }
.mode-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 179, 1, 0.20), rgba(255, 176, 32, 0.08));
  box-shadow: 0 0 0 2px rgba(245, 179, 1, 0.3) inset, 0 10px 26px rgba(245, 179, 1, 0.16);
  color: #fff;
}
.mode-card .em { font-size: 1.5rem; display: block; color: var(--muted); }
.mode-card .em .ic { width: 1.35em; height: 1.35em; }
.mode-card.selected .em { color: var(--gold); }
.mode-card .nm { font-weight: 900; letter-spacing: 0.06em; font-size: 0.85rem; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-radius: 12px;
  padding: 0.7em 1em;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.cat:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.cat.selected {
  background: linear-gradient(135deg, var(--amber), var(--gold));
  border-color: transparent;
  color: #241a00;
  box-shadow: 0 6px 20px rgba(245, 179, 1, 0.3);
}
.cat .cnt {
  opacity: 0.7;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
}

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); }
.switch-row:last-child { border-bottom: 0; }
.switch-row label { font-weight: 700; font-size: 0.95rem; }

/* ---------------- LOBBY ---------------- */

.lobby-grid {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(16px, 2vw, 40px);
  min-height: 0;
  margin: 0 auto;
}
.join-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(20px, 3vw, 48px) clamp(16px, 2vw, 32px);
  text-align: center;
  background: linear-gradient(160deg, rgba(12,18,40,0.92), rgba(8,12,30,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.join-card .h-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.join-card .h-code {
  font-size: clamp(3.2rem, 9vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(34,211,238,0.15);
  line-height: 1;
  margin: 8px 0;
}
.qr-box {
  background: #fff;
  border-radius: 20px;
  padding: 14px;
  width: clamp(150px, 18vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px rgba(34,211,238,0.2), 0 16px 48px rgba(0,0,0,0.5);
}
.qr-box svg, .qr-box img { width: 100%; height: 100%; display: block; }
.join-url { font-size: clamp(0.82rem, 1.1vw, 1.05rem); color: var(--muted); font-weight: 700; word-break: break-all; margin-top: 4px; }

.players-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(18px, 2vw, 32px);
  background: linear-gradient(160deg, rgba(12,18,40,0.92), rgba(8,12,30,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.players-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.players-head h2 {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
  color: #fff;
}
.players-head .h-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  text-transform: uppercase;
}
.player-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  align-content: start;
  overflow: auto;
}
.player-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(14px, 1.6vw, 22px) clamp(10px, 1.2vw, 18px);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed rgba(255,255,255,0.12);
  font-size: clamp(0.85rem, 1.3vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.3s ease;
  min-height: 56px;
}
.player-card.filled {
  border-style: solid;
  border-color: rgba(34,211,238,0.2);
  background: rgba(34,211,238,0.06);
  color: var(--text);
  justify-content: flex-start;
}
.player-card .av { font-size: clamp(1.4rem, 2vw, 2rem); }
.player-card .nm { font-size: clamp(0.9rem, 1.3vw, 1.15rem); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
.player-card .sc { font-size: clamp(0.7rem, 0.9vw, 0.9rem); color: var(--muted); font-weight: 700; }
.player-card.off { opacity: 0.42; filter: grayscale(0.7); }
.player-card.empty { border-style: dashed; justify-content: center; color: var(--muted); opacity: 0.6; font-weight: 800; }

.lobby-hint { font-size: 0.82rem; color: var(--muted); text-align: center; margin-top: 12px; font-weight: 600; }

/* ---------------- VISSZASZÁMLÁLÓ ---------------- */

.count-num {
  font-size: clamp(9rem, 34vw, 30rem);
  font-weight: 900;
  line-height: 0.85;
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 60px rgba(245, 179, 1, 0.45));
  animation: countPop 0.9s ease both;
}

/* ---------------- KÉRDÉS ---------------- */

.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
  font-size: clamp(0.85rem, 1.4vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge--type { background: linear-gradient(135deg, rgba(129, 140, 248, 0.34), rgba(167, 139, 250, 0.22)); border: 1px solid rgba(167, 139, 250, 0.6); color: #dfe3ff; }
.badge--cat { background: rgba(255, 255, 255, 0.08); color: var(--muted); border: 1px solid var(--line); }
.badge--bonus { background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(245, 158, 11, 0.4)); border: 1px solid rgba(251, 191, 36, 0.8); color: #fef3c7; animation: bonusPulse 1.5s ease-in-out infinite; }
.badge--modifier { display: inline-flex; align-items: center; gap: 0.4em; background: linear-gradient(135deg, rgba(244, 63, 94, 0.55), rgba(245, 179, 1, 0.45)); border: 1px solid rgba(251, 146, 60, 0.85); color: #fff7ed; animation: bonusPulse 1.5s ease-in-out infinite; }
.badge--modifier .ic { width: 1.1em; height: 1.1em; }
.badge--difficulty { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #e5e7eb; }
/* Nehézség-jelző pötty — emoji helyett tisztán CSS (TV-ben is biztos) */
.dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; vertical-align: 0.05em; }
.dot--easy { background: var(--emerald); box-shadow: 0 0 10px rgba(16, 185, 129, 0.75); }
.dot--medium { background: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 32, 0.75); }
.dot--hard { background: var(--red); box-shadow: 0 0 10px rgba(244, 63, 94, 0.75); }
.dot--all { background: var(--indigo); box-shadow: 0 0 10px rgba(129, 140, 248, 0.7); }
@keyframes bonusPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); }
}

.timer-ring { display: flex; align-items: center; gap: 12px; width: 100%; }
.timer-ring .time {
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: center;
}
.timer-ring .time.low { color: var(--red); animation: pulseGlow 0.7s infinite; }
.timer-bar {
  flex: 1 1 auto;
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.timer-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  transition: width 0.2s linear;
}
.timer-bar.low i { background: linear-gradient(90deg, #f97316, var(--red)); }

.q-text {
  flex: 0 0 auto;
  font-size: clamp(1.7rem, 4.3vw, 4.2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  padding: clamp(10px, 1.4vw, 24px) clamp(12px, 1.8vw, 30px);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(129, 140, 248, 0.14));
  border: 1px solid var(--line);
  max-height: 34vh;
  overflow: auto;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-image { max-height: 26vh; max-width: 100%; border-radius: var(--r-md); object-fit: contain; margin: 0 auto; }

.answers {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 22px);
  min-height: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.answer {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(10px, 1.4vw, 22px) clamp(14px, 1.8vw, 28px);
  border-radius: var(--r-lg);
  font-size: clamp(1.1rem, 2.5vw, 2.5rem);
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: popIn 0.4s ease both;
  position: relative;
  overflow: hidden;
}
.answer .key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 68px);
  height: clamp(38px, 4vw, 68px);
  border-radius: 14px;
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: 900;
  background: rgba(0, 0, 0, 0.28);
}
.answer .txt { flex: 1 1 auto; }
.answer .votes {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  font-weight: 900;
  opacity: 0.75;
}
.answer--0 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.34), rgba(239, 68, 68, 0.12)); }
.answer--1 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.34), rgba(59, 130, 246, 0.12)); }
.answer--2 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.1)); color: #fff; }
.answer--3 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.34), rgba(34, 197, 94, 0.12)); }

.answer.correct { outline: 4px solid var(--green); box-shadow: 0 0 44px rgba(34, 197, 94, 0.55); animation: correctReveal 0.6s ease-out, pulseGlow 1.1s 0.6s infinite; }
.answer.wrong { opacity: 0.32; filter: grayscale(0.75); transition: opacity 0.4s ease, filter 0.4s ease; }
.answer.dim { opacity: 0.25; }

/* Animált helyes válasz kijelölés */
@keyframes correctReveal {
  0% { transform: scale(1); outline-color: transparent; box-shadow: none; }
  50% { transform: scale(1.04); outline-color: var(--green); box-shadow: 0 0 60px rgba(34, 197, 94, 0.8); }
  100% { transform: scale(1); outline-color: var(--green); box-shadow: 0 0 44px rgba(34, 197, 94, 0.55); }
}
.answer.reveal-anim {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.answer.reveal-wrong {
  animation: wrongFade 0.5s ease-out forwards;
}
@keyframes wrongFade {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.32; filter: grayscale(0.75); }
}

/* Igaz / Hamis: két nagy kártya */
.answers--tf { grid-template-columns: 1fr 1fr; }
.answers--tf .answer {
  justify-content: center;
  text-align: center;
  font-size: clamp(1.6rem, 4.6vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: clamp(18px, 3vw, 46px);
}

/* ---------------- TIPPES KÉPERNYŐ ---------------- */

.guess-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
  min-height: 0;
}
.guess-range {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 24px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.guess-range .lo,
.guess-range .hi {
  font-size: clamp(2rem, 5.4vw, 5.4rem);
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guess-range .dash { font-size: clamp(1.6rem, 4vw, 4rem); color: var(--muted); }
.guess-range .unit { font-size: clamp(0.9rem, 1.4vw, 1.5rem); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.guess-line {
  width: min(70vw, 1100px);
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  position: relative;
}
.guess-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
  animation: guessSweep 2.6s ease-in-out infinite;
}
@keyframes guessSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(450%); }
}
.guess-count {
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 900;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.guess-help { color: var(--muted); font-size: clamp(0.9rem, 1.4vw, 1.5rem); font-weight: 700; text-align: center; }

.answered-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(34, 197, 94, 0.94);
  color: #04210f;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  font-size: clamp(0.85rem, 1.3vw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* ---------------- EREDMÉNY ---------------- */

.reveal-grid { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-rows: auto 1fr; gap: clamp(12px, 1.6vw, 24px); min-height: 0; }
.correct-banner {
  padding: clamp(14px, 2vw, 32px);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.12));
  border: 2px solid rgba(34, 197, 94, 0.7);
  box-shadow: 0 0 48px rgba(34, 197, 94, 0.28);
}
.correct-banner .lbl { font-size: clamp(0.85rem, 1.3vw, 1.3rem); letter-spacing: 0.2em; text-transform: uppercase; color: #bbf7d0; font-weight: 900; }
.correct-banner .val { font-size: clamp(1.6rem, 4.4vw, 4.2rem); font-weight: 900; line-height: 1.05; }

.gain-list { display: flex; flex-direction: column; gap: clamp(6px, 0.9vw, 14px); overflow: auto; }
.gain {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  padding: clamp(8px, 1.1vw, 18px) clamp(12px, 1.6vw, 24px);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  animation: floatUp 0.4s ease both;
}
.gain .who { font-size: clamp(1rem, 1.9vw, 2rem); font-weight: 900; }
.gain .tier { font-size: clamp(0.7rem, 1vw, 1.1rem); color: var(--muted); font-weight: 800; letter-spacing: 0.1em; }
.gain .pts { font-size: clamp(1.1rem, 2.2vw, 2.3rem); font-weight: 900; color: var(--lime); font-variant-numeric: tabular-nums; }
.gain .pts.neg { color: var(--red); }
.gain.bad .pts { color: var(--red); }
.gain.bad { opacity: 0.62; }
.gain.win { border-color: rgba(34, 197, 94, 0.65); box-shadow: 0 0 34px rgba(34, 197, 94, 0.25); }
.gain-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gain-chip {
  font-size: clamp(0.65rem, 0.95vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}
.gain-chip--fast { background: rgba(45, 212, 191, 0.16); border-color: rgba(45, 212, 191, 0.5); color: #9af0e2; }
.gain-chip--coin { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.gain-chip--neg { background: rgba(244, 63, 94, 0.18); border-color: rgba(244, 63, 94, 0.55); color: #fca5a5; }

/* ---------------- FINÁLÉ TÉT (tét-tábla) ---------------- */

.wager-board { display: flex; flex-direction: column; gap: 10px; width: min(90vw, 760px); margin: 0 auto; overflow: auto; }
.wager-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05); font-weight: 900; font-size: clamp(0.9rem, 1.4vw, 1.3rem);
}
.wager-row .nm { display: flex; align-items: center; gap: 8px; }
.wager-row .wg { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.wager-row .wg.on { color: var(--gold); }

/* ---------------- RANGLISTA ---------------- */

.board { width: 100%; max-width: 1200px; margin: 0 auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(8px, 1.1vw, 18px); overflow: auto; justify-content: center; }
.board-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  padding: clamp(10px, 1.4vw, 24px) clamp(14px, 1.8vw, 30px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.board-row .place { font-size: clamp(1.4rem, 2.8vw, 3rem); font-weight: 900; width: 2.2ch; text-align: center; }
/* Helyezésjelvény: arany / ezüst / bronz érem (emoji helyett) */
.rank {
  display: inline-grid; place-items: center;
  width: clamp(34px, 3.4vw, 52px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(0.95rem, 1.5vw, 1.45rem); font-weight: 900; color: #241a00;
  background: linear-gradient(140deg, #ffd85f, var(--gold) 60%, #cf8d00);
  box-shadow: 0 6px 18px rgba(245, 179, 1, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.65);
}
.rank i { font-style: normal; line-height: 1; }
.rank.r2 { background: linear-gradient(140deg, #f1f5ff, #b6c2da 62%, #8f9db5); box-shadow: 0 6px 18px rgba(203, 213, 224, 0.26), inset 0 1px 2px rgba(255, 255, 255, 0.7); }
.rank.r3 { background: linear-gradient(140deg, #f0b489, #cd7f32 62%, #96591c); color: #2b1608; box-shadow: 0 6px 18px rgba(205, 127, 50, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5); }
.podium-card .medal .rank { width: clamp(48px, 5vw, 78px); font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
.board-group-label {
  display: flex; align-items: center; gap: 0.45em;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem); font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0 0 8px;
}
.board-group-label + .board-row { margin-top: 0; }
h3.board-group-label { margin-top: 18px; }
.board-row .name { font-size: clamp(1.1rem, 2.4vw, 2.6rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.board-row .score { font-size: clamp(1.1rem, 2.4vw, 2.6rem); font-weight: 900; color: var(--cyan); font-variant-numeric: tabular-nums; }
.board-row.top1 { background: linear-gradient(135deg, rgba(255, 209, 102, 0.28), rgba(255, 209, 102, 0.06)); border-color: rgba(255, 209, 102, 0.6); }
.board-row.top2 { background: linear-gradient(135deg, rgba(203, 213, 225, 0.2), transparent); border-color: rgba(203, 213, 225, 0.4); }
.board-row.top3 { background: linear-gradient(135deg, rgba(217, 119, 6, 0.24), transparent); border-color: rgba(217, 119, 6, 0.45); }
.board-row .delta { font-size: clamp(0.75rem, 1.1vw, 1.2rem); color: var(--lime); font-weight: 900; margin-left: 10px; }

/* ---------------- BOLT ---------------- */

.shop-items { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.2vw, 18px); justify-content: center; margin-top: 18px; }
.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: clamp(0.85rem, 1.3vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.shop-item .em { font-size: 1.3em; }
.shop-item .cost { color: var(--gold); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.3em; }
.shop-item--free { border-style: dashed; }
.shop-item--free .cost { color: var(--lime); }

/* ---------------- VÉGEREDMÉNY ---------------- */

.podium { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(10px, 1.4vw, 24px); align-items: end; }
.podium-card {
  border-radius: var(--r-lg);
  padding: clamp(14px, 1.8vw, 30px);
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  animation: popIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.podium-card .medal { font-size: clamp(2.4rem, 5vw, 5rem); }
.podium-card .medal .rank { display: inline-grid; }
.podium-card .nm { font-size: clamp(1.1rem, 2.2vw, 2.4rem); font-weight: 900; text-transform: uppercase; }
.podium-card .sc { font-size: clamp(1rem, 2vw, 2.2rem); font-weight: 900; color: var(--gold); }
.podium-card.p1 { background: linear-gradient(180deg, rgba(255, 209, 102, 0.32), rgba(255, 209, 102, 0.05)); border-color: rgba(255, 209, 102, 0.65); transform: translateY(-4%); box-shadow: 0 0 60px rgba(255, 209, 102, 0.25); }
.podium-card.p2 { background: linear-gradient(180deg, rgba(203, 213, 225, 0.22), transparent); }
.podium-card.p3 { background: linear-gradient(180deg, rgba(217, 119, 6, 0.26), transparent); }

.end-grid { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-rows: auto auto auto; gap: clamp(10px, 1.4vw, 20px); }
.end-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; overflow: auto; }
.fun {
  padding: clamp(10px, 1.2vw, 18px);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.fun .t { font-size: clamp(0.7rem, 1vw, 1rem); color: var(--muted); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.fun .v { font-size: clamp(0.95rem, 1.5vw, 1.6rem); font-weight: 900; }

/* ---------------- effekt rétegek ---------------- */

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-reaction {
  position: absolute;
  font-size: clamp(2rem, 4vw, 4rem);
  animation: floatAway 2.4s ease-out forwards;
}
@keyframes floatAway {
  0% { opacity: 0; transform: translateY(40px) scale(0.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46vh) scale(1.5) rotate(12deg); }
}
.fx-attack {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 12, 26, 0.92);
  border: 1px solid rgba(245, 179, 1, 0.55);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(0.9rem, 1.6vw, 1.7rem);
  letter-spacing: 0.04em;
  animation: floatUp 0.3s ease both;
  box-shadow: 0 0 40px rgba(245, 179, 1, 0.3);
}
#confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

.host-offline {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 14, 0.9);
  z-index: 95;
  font-size: clamp(1.2rem, 3vw, 3rem);
  font-weight: 900;
  text-align: center;
  padding: 20px;
}

/* ---------------- kicsi képernyő (laptop) ---------------- */
@media (max-width: 900px), (max-height: 560px) {
  .lobby-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .join-card { padding: clamp(16px, 4vw, 32px); }
  .join-card .h-code { font-size: clamp(2.8rem, 14vw, 5rem); }
  .qr-box { width: min(150px, 36vw); }
  .player-grid { grid-template-columns: 1fr 1fr; }
  .answers { grid-template-columns: 1fr 1fr; }
}

/* ---------------- LG / WebOS TV specifikus ---------------- */
/* WebOS böngésző gyakran nem támogatja a dvh-t, fallback */
@supports not (height: 100dvh) {
  #app, .screen { height: 100vh; }
}

/* TV böngészőkön a backdrop-filter lassú lehet – kikapcsoljuk */
@media (min-width: 1600px) and (min-height: 800px) {
  .panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------------- TORNA ---------------- */

.tourney-match {
  transition: all 0.3s ease;
}
.tourney-match.current {
  border-color: rgba(245, 179, 1, 0.55) !important;
  box-shadow: 0 0 22px rgba(245, 179, 1, 0.16);
}
.tourney-match.done {
  opacity: 0.7;
}
.tourney-match.pending {
  opacity: 0.5;
}

/* =====================================================================
   FŐOLDAL / START – „portal” stílusú kezdőképernyő (mockup alapján).
   kizárólag a #screen-start-ra van hatással, a többi képernyő érintetlen.
   ===================================================================== */

#screen-start {
  background:
    radial-gradient(1100px 640px at 92% -14%, rgba(245, 179, 1, 0.16), transparent 60%),
    radial-gradient(1000px 720px at -10% 16%, rgba(45, 212, 191, 0.15), transparent 62%),
    radial-gradient(1300px 820px at 50% 128%, rgba(129, 140, 248, 0.22), transparent 64%),
    linear-gradient(160deg, #0a0a1a 0%, #12102a 55%, #1a1636 100%);
}
#screen-start::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 85%);
  mask-image: radial-gradient(circle at 50% 30%, #000, transparent 85%);
  pointer-events: none;
}
#screen-start > * { position: relative; z-index: 1; }

/* --- felső sáv --- */
.home-bar { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.08); }
.home-brand { color: #fff; gap: 0.5em; }
.home-logo {
  display: inline-grid; place-items: center;
  width: 2.1em; height: 2.1em; border-radius: 13px;
  background: linear-gradient(140deg, #ffd85f, var(--gold) 58%, #d19300);
  color: #241a00;
  box-shadow: 0 8px 22px rgba(245, 179, 1, 0.42), inset 0 1px 3px rgba(255, 255, 255, 0.7);
}
.home-brand b {
  background: linear-gradient(90deg, #ffffff, #ffe6a8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-sub { color: rgba(248, 250, 252, 0.5); font-size: 0.7em; font-weight: 700; }
#screen-start .h-btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #e2e8f0;
}
#screen-start .h-btn:hover { background: rgba(245, 179, 1, 0.14); border-color: rgba(245, 179, 1, 0.42); color: #fff; }

/* --- elrendezés --- */
.home-body { padding: clamp(0.9rem, 2vw, 1.8rem) clamp(1rem, 3vw, 3rem); overflow: hidden; }
.home-grid {
  width: 100%; max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(258px, 340px) 1fr;
  gap: clamp(16px, 2vw, 30px); align-items: stretch;
}

/* --- bal: üveges, arany keretes belépő kártya --- */
.home-hero-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(20px, 2.4vw, 34px);
  border-radius: 30px; color: #fff;
  background: linear-gradient(158deg, rgba(38, 33, 84, 0.92) 0%, rgba(22, 19, 50, 0.94) 58%, rgba(14, 13, 36, 0.96) 100%);
  border: 1px solid rgba(245, 179, 1, 0.32);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.home-hero-card::after {
  content: ''; position: absolute; right: -30%; top: -32%;
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.3), transparent 70%);
  pointer-events: none;
}
.home-hero-top { position: relative; z-index: 1; }
.home-hi {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: clamp(0.85rem, 1.2vw, 1rem); font-weight: 800; color: var(--gold);
}
.home-hero-title {
  margin: 6px 0 10px; font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 900; line-height: 0.98; text-transform: uppercase;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.home-hero-title span {
  background: linear-gradient(100deg, #ffe082, var(--gold) 55%, #ff9d2e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-hero-tag { font-size: clamp(0.85rem, 1.2vw, 1.02rem); font-weight: 600; line-height: 1.35; color: rgba(226, 232, 240, 0.78); max-width: 27ch; }

/* indítás gomb */
.home-start {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 14px 14px 14px 22px; cursor: pointer; text-align: left;
  border-radius: 20px; color: #241a00;
  background: linear-gradient(135deg, #ffc94a, var(--gold) 62%, #e39c00);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 14px 34px rgba(245, 179, 1, 0.32), inset 0 1px 3px rgba(255, 255, 255, 0.6);
  transition: transform 0.12s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.home-start:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(245, 179, 1, 0.42); }
.home-start:active { transform: translateY(1px) scale(0.99); }
.home-start:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; filter: none; }
.home-start-txt {
  display: flex; flex-direction: column; line-height: 1.05;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
}
.home-start-txt em { font-style: normal; font-weight: 800; font-size: 0.6em; letter-spacing: 0.14em; opacity: 0.72; margin-top: 3px; }
.home-start-play {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(52px, 6vw, 64px); height: clamp(52px, 6vw, 64px); border-radius: 50%;
  background: linear-gradient(140deg, #1b1740, #0a0a1a); color: var(--gold);
  font-size: 1.5rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.22);
}
.home-start-play .ic { width: 0.82em; height: 0.82em; }

/* --- jobb: beállítások panel --- */
.home-settings {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 2.2vw, 30px);
  border-radius: 30px;
  background: rgba(20, 18, 46, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.home-settings-head { display: flex; align-items: center; }
.home-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: clamp(0.8rem, 1.2vw, 0.98rem); font-weight: 900;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
#screen-start .home-settings .field { margin-bottom: 0; }
#screen-start .home-settings .field > span { color: rgba(203, 213, 225, 0.72); }
.home-set-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 12px 0;
}
.home-set-row .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-set-row .field > span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal);
}
.home-set-row .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.home-set-row .input {
  width: 100%;
  padding: 0.7em 1em;
  font-size: 0.95rem;
  font-weight: 700;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: all 0.2s ease;
}
.home-set-row .input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}
.home-set-row .spin-group {
  position: absolute;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-set-row .spin-btn {
  width: 24px;
  height: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 0.15s ease;
}
.home-set-row .spin-btn:hover {
  background: var(--teal);
  color: #fff;
}
.home-set-row .spin-btn .ic {
  width: 14px;
  height: 14px;
}
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; margin-top: auto; }
#screen-start .home-chips .chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: #cbd5e1;
}
#screen-start .home-chips .chip .ic { color: var(--teal); }

/* --- távirányító súgó (a mockup alsó súgósora) --- */
.home-remote-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
  margin-top: 10px; padding: 9px 14px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted); font-size: clamp(0.72rem, 1vw, 0.86rem); font-weight: 700;
}
.home-remote-hint > .ic { color: var(--gold); }
.home-remote-hint .hint-lbl { color: #e2e8f0; letter-spacing: 0.06em; text-transform: uppercase; }
.home-remote-hint .key {
  display: inline-grid; place-items: center;
  min-width: 2.1em; padding: 0.16em 0.5em;
  border-radius: 8px; color: #f8fafc; font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* TV-n a minta+blur eldobható a teljesítményért */
@media (min-width: 1600px) and (min-height: 800px) {
  #screen-start::before { display: none; }
}

/* keskeny / rövid képernyő: egymás alá */
@media (max-width: 900px), (max-height: 560px) {
  .home-body { overflow-y: auto; }
  .home-grid { grid-template-columns: 1fr; }
  .home-hero-card { min-height: 200px; }
  .home-set-row { grid-template-columns: 1fr 1fr; }
  .home-set-row label:last-child { grid-column: 1 / -1; }
}

/* =====================================================================
   TV-TÁVIRÁNYÍTÓ FOKUSZ – a tv-nav.js teszi fel a .tv-focus osztályt.
   Nagy arany fókuszgyűrű + enyhe nagyítás: TV-nerről is jól látszik,
   és eldobható a blur, mert a TV-gyorsítótár nem kezeli jól.
   ===================================================================== */
.tv-focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px;
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(245, 179, 1, 0.18), 0 12px 34px rgba(0, 0, 0, 0.45) !important;
  transform: scale(1.02);
  z-index: 3;
  position: relative;
}
button.tv-focus, .mode-card.tv-focus, .cat.tv-focus { color: #fff; }
.home-start.tv-focus { transform: scale(1.03); }
.input.tv-focus { border-color: var(--gold); background: rgba(245, 179, 1, 0.08); }

/* Billentyűzetes fókusz: ugyanaz a gyűrű, halványabban */
.host .h-btn:focus-visible,
.host .h-action-btn:focus-visible,
.host .mode-card:focus-visible,
.host .cat:focus-visible,
.host .input:focus-visible,
.host .spin-btn:focus-visible {
  outline: 3px solid rgba(245, 179, 1, 0.75);
  outline-offset: 2px;
}

/* Kapcsolók: TV-n bejárhatóak legyenek */
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.65); }
.switch input:checked + .track { background: linear-gradient(135deg, var(--amber), var(--gold)); }

/* Arany márkaikon a fejlécekben (a méretet a base.css .ic adja) */
.brand-ic { color: var(--gold); }
.h-brand { display: inline-flex; align-items: center; gap: 0.4em; }

/* Bolt / szünet nagy ikonai */
.shop-big, .pause-big {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto clamp(8px, 1.4vw, 18px);
  width: clamp(88px, 13vw, 170px); height: clamp(88px, 13vw, 170px);
  border-radius: 34px;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(245, 179, 1, 0.16), rgba(129, 140, 248, 0.12));
  border: 1px solid rgba(245, 179, 1, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pause-big { color: var(--teal); border-color: rgba(45, 212, 191, 0.32); }
.shop-big .ic, .pause-big .ic { width: 2.1em; height: 2.1em; }

/* Bracket címe */
.bracket-title {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  margin-bottom: 16px; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.bracket-title .ic { color: var(--gold); }

/* Statisztika-chip a dobogón */
.podium-chip { display: inline-flex; align-items: center; gap: 0.35em; }
.podium-chip .ic { color: var(--teal); }

/* Régi cián szövegszín az új palettára */
.board-row .score { color: var(--teal); }

/* ---------------- KATEGÓRIA SZAVAZÁS ---------------- */

.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
}

.cv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  border: 3px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cv-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
}

.cv-card .emoji {
  font-size: 4rem;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

.cv-card .name {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cv-card .votes {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.cv-card .bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.cv-card .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.cv-card.winner {
  background: linear-gradient(135deg, var(--amber), var(--gold));
  border-color: transparent;
  color: #241a00;
  box-shadow: 0 12px 40px rgba(245, 179, 1, 0.5);
  animation: pulse 0.6s ease;
}

.cv-card.winner .votes {
  color: #241a00;
}

.cv-timer-lg {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 24px auto;
}

.cv-timer-bar-lg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 999px;
  transition: width 0.1s linear;
}

.cv-timer-text-lg {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.cv-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  animation: popIn 0.5s ease;
}

.cv-result-emoji {
  font-size: 6rem;
  filter: drop-shadow(0 12px 36px rgba(245, 179, 1, 0.5));
}

.cv-result-name {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-shadow: 0 4px 20px rgba(245, 179, 1, 0.4);
}

.cv-result-label {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---------------- TV PREZENTÁCIÓ UPGRADE ---------------- */

/* Dramai countdown */
.count-num {
  font-size: clamp(8rem, 20vw, 16rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 8px 40px rgba(245, 179, 1, 0.5);
  animation: countPulse 1s ease-in-out;
}

@keyframes countPulse {
  0% { transform: scale(1.4); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Question slide-in */
.q-text {
  animation: questionSlideIn 0.6s cubic-bezier(.17,.67,.3,1) both;
}

@keyframes questionSlideIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Answer options staggered pop */
.answer-btn {
  animation: answerPop 0.4s ease both;
}

.answer-btn:nth-child(1) { animation-delay: 0.1s; }
.answer-btn:nth-child(2) { animation-delay: 0.2s; }
.answer-btn:nth-child(3) { animation-delay: 0.3s; }
.answer-btn:nth-child(4) { animation-delay: 0.4s; }

@keyframes answerPop {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Correct answer flash */
.correct-banner {
  animation: correctFlash 0.8s ease;
}

@keyframes correctFlash {
  0% { background: transparent; box-shadow: none; }
  50% { background: rgba(245, 179, 1, 0.2); box-shadow: 0 0 60px rgba(245, 179, 1, 0.6); }
  100% { background: transparent; box-shadow: none; }
}

/* Leaderboard slide-in */
.board-row {
  animation: boardSlideIn 0.5s ease both;
}

.board-row:nth-child(1) { animation-delay: 0.05s; }
.board-row:nth-child(2) { animation-delay: 0.1s; }
.board-row:nth-child(3) { animation-delay: 0.15s; }
.board-row:nth-child(4) { animation-delay: 0.2s; }
.board-row:nth-child(5) { animation-delay: 0.25s; }
.board-row:nth-child(6) { animation-delay: 0.3s; }

@keyframes boardSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Top player glow */
.board-row.top1 {
  animation: boardSlideIn 0.5s ease both, topGlow 2s ease-in-out infinite;
}

@keyframes topGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 179, 1, 0.3); }
  50% { box-shadow: 0 0 40px rgba(245, 179, 1, 0.6); }
}

/* Boss question overlay */
.boss-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245, 179, 1, 0.15), rgba(99, 102, 241, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  animation: bossPulse 2s ease-in-out infinite;
}

@keyframes bossPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.boss-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 48px;
  background: linear-gradient(135deg, var(--amber), var(--gold));
  border-radius: 24px;
  box-shadow: 0 12px 60px rgba(245, 179, 1, 0.6);
  animation: bossBadgePop 0.6s cubic-bezier(.17,.67,.3,1);
}

@keyframes bossBadgePop {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.boss-badge .ic {
  width: 4rem;
  height: 4rem;
  color: #241a00;
}

.boss-badge-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #241a00;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Boss timer - extra nagy, piros */
.boss-timer .timer-bar {
  background: linear-gradient(90deg, #ef4444, #f59e0b) !important;
}

.boss-timer .time {
  color: #ef4444 !important;
  font-size: 3rem !important;
}