/* --- Ruleta wheel overlay --- */
.ruleta-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  z-index: 200;
  animation: fadeIn .3s ease;
}
.ruleta-overlay.show { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.ruleta-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.ruleta-container {
  position: relative;
  width: 280px;
  height: 280px;
}

.ruleta-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 30px rgba(59,130,246,.4));
}

.ruleta-wheel svg { width: 100%; height: 100%; }
.ruleta-slice { display: none; /* replaced by SVG */ }

.ruleta-pointer {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #fff;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
  z-index: 5;
}

.ruleta-result {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  min-height: 1.5em;
}

/* --- Quiz buzzer overlay (participants see this) --- */
.quiz-buzzer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 30;
  padding: 20px;
}
.quiz-buzzer-overlay.show { display: flex; }

/* ====== 5050 / Comodin fullscreen overlay ====== */
.comodin-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 200;
  animation: fadeIn .3s ease;
  backdrop-filter: blur(4px);
}
.comodin-fullscreen-overlay.comodin-exit { opacity: 0; transition: opacity .5s ease; }
.comodin-overlay-icon { font-size: 4rem; }
.comodin-overlay-title {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.comodin-overlay-sub {
  font-size: 1rem;
  color: #d1d5db;
}
.comodin-overlay-bits {
  padding: 4px 14px;
  background: rgba(139,92,246,.3);
  border: 1px solid rgba(139,92,246,.5);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  color: #c4b5fd;
}
.comodin-cut-anim {
  animation: cutSwing 0.6s ease-in-out 3;
}
@keyframes cutSwing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-20deg) scale(1.2); }
  75% { transform: rotate(20deg) scale(1.2); }
}

.quiz-question-text {
  font-size: clamp(.9rem, 2.5vw, 1.2rem);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  max-width: 90%;
  line-height: 1.5;
}

.quiz-buzz-btn {
  padding: 16px 40px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .15s ease;
  animation: pulse-buzz 1.5s ease infinite;
}
.quiz-buzz-btn:hover { transform: scale(1.05); }
.quiz-buzz-btn:disabled { opacity: .4; cursor: default; animation: none; }
@keyframes pulse-buzz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}

.quiz-buzzer-status {
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  text-align: center;
}

.quiz-buzzer-timer {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  font-family: 'Orbitron', monospace;
}

/* --- Timer bar --- */
.quiz-timer-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 4px;
  background: var(--green);
  border-radius: 0 2px 2px 0;
  transition: width 1s linear, background-color .5s ease;
  z-index: 31;
}
.quiz-timer-bar.urgent { background: var(--amber); }
.quiz-timer-bar.critical { background: var(--danger); animation: pulse-bar .5s ease infinite alternate; }
@keyframes pulse-bar { from { opacity: 1; } to { opacity: .5; } }

/* --- Quiz options (for option-type questions) --- */
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(90%, 400px);
}
.quiz-option-btn {
  padding: 12px 16px;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.quiz-option-btn:hover { border-color: var(--blue); background: rgba(255,255,255,.15); }
.quiz-option-btn.eliminated { opacity: .2; pointer-events: none; text-decoration: line-through; }
.quiz-option-btn.correct { border-color: var(--green); background: rgba(34,197,94,.3); }
.quiz-option-btn.wrong { border-color: var(--danger); background: rgba(239,68,68,.3); }

/* --- Host panel (below PiP camera, centered) --- */
.quiz-host-panel {
  position: fixed;
  top: calc(clamp(140px, 18vw, 260px) * 0.75 + 140px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 119;
  padding: 0;
  min-width: 260px;
  max-width: 90vw;
  width: 380px;
  display: none;
  flex-direction: column;
  gap: 0;
  font-size: .85rem;
  resize: both;
  overflow: auto;
}
.quiz-host-panel.dragging { user-select: none; }
.quiz-host-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  cursor: grab;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: .65rem;
  color: var(--muted);
  user-select: none;
}
.quiz-host-panel-header:active { cursor: grabbing; }
.quiz-host-panel-body { padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; }

/* ====== Tile command lists (below kick button, host only) ====== */
.tile-cmds-list {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  font-size: .55rem;
  line-height: 1.3;
  opacity: .7;
}
.tile-cmd-item {
  color: var(--muted);
  white-space: nowrap;
}

/* ====== Collapsible commands reference panel ====== */
.cmds-panel {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 200;
  width: 220px;
  font-size: .7rem;
  background: rgba(10, 15, 30, .92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: height .25s ease;
}
.cmds-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: .7rem;
  user-select: none;
  background: rgba(255,255,255,.04);
}
.cmds-toggle:hover { color: #fff; }
.cmds-toggle .cmds-arrow { transition: transform .2s; }
.cmds-panel.collapsed .cmds-body { display: none; }
.cmds-panel.collapsed .cmds-arrow { transform: rotate(180deg); }
.cmds-body { padding: 6px 10px 10px; }
.cmds-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: var(--txt);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cmds-row:last-child { border-bottom: none; }
.cmds-emoji { font-size: .85rem; width: 20px; text-align: center; }
.cmds-name { font-weight: 700; color: var(--amber); min-width: 52px; }
.cmds-desc { color: var(--muted); }
.quiz-host-panel.show { display: flex; }

.quiz-host-question {
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  padding: 6px 0;
  line-height: 1.4;
}
.quiz-host-who { font-size: .75rem; color: var(--muted); text-align: center; }

.quiz-host-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.quiz-host-option {
  padding: 8px 10px;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: .8rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.quiz-host-option:hover {
  border-color: var(--blue);
  background: rgba(255,255,255,.12);
}
.quiz-host-option.selected {
  border-color: var(--blue);
  background: rgba(59,130,246,.2);
}
.quiz-host-option.result-correct {
  border-color: var(--green);
  background: rgba(34,197,94,.2);
}
.quiz-host-option.eliminated,
.host-turn-option.eliminated,
.quiz-option-readonly.eliminated {
  opacity: .2;
  pointer-events: none;
  text-decoration: line-through;
}
.quiz-host-option.result-wrong {
  border-color: var(--danger);
  background: rgba(239,68,68,.2);
}

.quiz-host-answer-input {
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: .85rem;
  outline: none;
}
.quiz-host-answer-input:focus {
  border-color: var(--blue);
}

.quiz-host-actions {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.quiz-host-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.quiz-host-btn.correct { background: var(--green); color: #000; }
.quiz-host-btn.wrong { background: var(--danger); color: #fff; }
.quiz-host-btn.pass { background: var(--amber); color: #000; }
.quiz-host-btn.next { background: var(--blue); color: #000; }
.quiz-host-btn.confirm { background: var(--blue); color: #000; font-size: .85rem; padding: 8px 20px; }

/* --- Host timer (inside host panel) --- */
.quiz-host-timer-wrap {
  position: relative;
  text-align: center;
  min-height: 6px;
}
.quiz-host-timer {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green);
  font-family: 'Orbitron', monospace;
}
.quiz-host-timer-bar,
.quiz-participant-timer-bar {
  height: 4px;
  background: var(--green);
  border-radius: 2px;
  transition: width 1s linear, background-color .5s ease;
  margin-top: 4px;
}
.quiz-host-timer-bar.urgent,
.quiz-participant-timer-bar.urgent { background: var(--amber); }
.quiz-host-timer-bar.critical,
.quiz-participant-timer-bar.critical { background: var(--danger); animation: pulse-bar .5s ease infinite alternate; }

/* --- Participant question panel (read-only, positioned like host panel) --- */
.quiz-participant-panel {
  position: absolute;
  top: calc(clamp(140px, 18vw, 260px) * 0.75 + 90px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 119;
  padding: 12px 18px;
  min-width: 260px;
  max-width: 38vw;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}
.quiz-participant-panel.show { display: flex; }

.quiz-participant-question {
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  padding: 4px 0;
  line-height: 1.4;
}

.quiz-participant-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.quiz-participant-option {
  padding: 8px 10px;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: .8rem;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.quiz-participant-status {
  font-size: .85rem;
  color: rgba(255,255,255,.8);
  text-align: center;
  min-height: 1.2em;
}

.quiz-participant-timer-wrap {
  width: 100%;
  text-align: center;
}
.quiz-participant-timer {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green);
  font-family: 'Orbitron', monospace;
}

/* --- Tile score badge (on each tile corner) --- */
.tile-score-badge {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 12;
  padding: 6px 14px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
}
.tile-score-badge.hide { display: none; }
.tile-score-name { color: var(--muted); }
.tile-score-pts {
  color: var(--amber);
  font-family: 'Orbitron', monospace;
  font-size: .9rem;
}

/* --- Scores --- */
.quiz-scores {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 20px;
  z-index: 15;
  padding: 8px 20px;
}
.quiz-scores.show { display: flex; }
.quiz-score-item {
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
}
.quiz-score-item .points {
  font-size: 1.4rem;
  font-family: 'Orbitron', monospace;
}
.quiz-score-item.left .points { color: var(--blue); }
.quiz-score-item.right .points { color: var(--pink); }

/* --- Comodines bar --- */
.comodines-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  z-index: 15;
}
.comodines-bar.show { display: flex; }

.comodin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-2);
  background: var(--glass);
  color: var(--txt);
  font-size: .7rem;
  cursor: pointer;
  transition: all .15s ease;
  opacity: .5;
}
.comodin-btn.available { opacity: 1; }
.comodin-btn.available:hover { border-color: var(--amber); transform: translateY(-2px); }
.comodin-btn .icon { font-size: 1.4rem; }
.comodin-btn .cost { color: var(--amber); font-weight: 700; }

/* ====== Round-based quiz styles ====== */

/* Round counter */
.quiz-round-counter {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  padding: 6px 20px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke-2);
  border-radius: 20px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--txt);
  font-family: 'Orbitron', monospace;
  backdrop-filter: blur(8px);
}
.quiz-round-counter.sudden-death {
  color: var(--danger);
  border-color: var(--danger);
  animation: pulse-sudden-death 1s ease infinite;
}
@keyframes pulse-sudden-death {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); }
  50% { box-shadow: 0 0 20px 4px rgba(239,68,68,.15); }
}

/* Answer buttons (contestant) */
.quiz-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.quiz-answer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
}
.quiz-answer-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: rgba(102,183,255,.08);
}
.quiz-answer-btn.selected {
  border-color: var(--blue);
  background: rgba(102,183,255,.15);
}
.quiz-answer-btn:disabled {
  opacity: .6;
  cursor: default;
}
.quiz-answer-btn.correct-reveal {
  border-color: var(--green);
  background: rgba(45,212,191,.15);
}
.quiz-answer-btn.wrong-reveal {
  border-color: var(--danger);
  background: rgba(239,68,68,.15);
}
.quiz-answer-label {
  font-weight: 800;
  font-size: .9rem;
  color: var(--muted);
  min-width: 20px;
}
.quiz-answer-text { flex: 1; }

/* Read-only options (contestant sees, cannot click) */
.quiz-options-readonly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.quiz-option-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: .85rem;
}

/* Host confirm panel */
.host-confirm-panel {
  margin-top: 10px;
}

/* Timer container */
.quiz-timer-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.quiz-timer-bar {
  flex: 1;
  height: 6px;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.3s linear;
}
.quiz-timer-bar.urgent { background: var(--amber); }
.quiz-timer-bar.critical { background: var(--danger); animation: pulse-bar 0.5s ease infinite; }
@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.quiz-timer-text {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 28px;
  text-align: right;
  font-family: 'Orbitron', monospace;
}

/* Contestant status indicator */
.contestant-status {
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: center;
  margin: 6px 0;
}
.contestant-status.waiting { color: var(--muted); }
.contestant-status.answered { color: var(--amber); background: rgba(246,195,106,.1); }
.contestant-status.correct { color: var(--green); background: rgba(45,212,191,.1); }
.contestant-status.wrong { color: var(--danger); background: rgba(239,68,68,.1); }

/* Host round panel */
.host-round-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.host-round-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.host-round-side-label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.host-round-left .host-round-side-label { color: var(--blue); }
.host-round-right .host-round-side-label { color: var(--pink); }

.host-round-question {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  min-height: 40px;
}
.host-round-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.host-round-option {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  transition: all .15s;
}
.host-round-option.correct-highlight {
  border-color: var(--green);
  background: rgba(45,212,191,.1);
  color: var(--green);
}
.host-round-option.selected {
  border-color: var(--blue);
  background: rgba(102,183,255,.12);
}

/* Judge panel */
.judge-panel {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.btn-correct {
  flex: 1;
  padding: 8px;
  background: var(--green);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.btn-wrong {
  flex: 1;
  padding: 8px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.btn-sm { padding: 6px 12px; font-size: .75rem; }

.host-round-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.host-round-actions {
  margin-top: 4px;
}

/* Game over overlay */
.quiz-game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 250;
  backdrop-filter: blur(6px);
}
.game-over-content {
  text-align: center;
  z-index: 2;
  animation: gameOverPop .6s cubic-bezier(.2,1,.3,1);
}
@keyframes gameOverPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.quiz-game-over-overlay.fade-out { opacity: 0; transition: opacity .5s ease; }
.game-over-crown {
  font-size: 4rem;
  animation: crownBounce 1s ease infinite;
  filter: drop-shadow(0 0 20px rgba(255,215,0,.6));
  margin-bottom: 4px;
}
@keyframes crownBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}
.game-over-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(251,191,36,.4);
}
.game-over-winner {
  font-family: 'Archivo Black', sans-serif;
  font-size: 2.8rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fff, #fbbf24);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 2s linear infinite;
  margin-bottom: 12px;
}
@keyframes goldShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.game-over-scores {
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 8px;
}
.game-over-rounds {
  font-size: .9rem;
  color: var(--muted);
}
/* Confetti */
.confetti {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: .9;
  animation: confettiFall 2.5s ease-in forwards;
}
.confetti-0 { background: #ef4444; width: 8px; height: 14px; }
.confetti-1 { background: #3b82f6; width: 12px; height: 8px; }
.confetti-2 { background: #fbbf24; width: 6px; height: 16px; }
.confetti-3 { background: #22c55e; width: 10px; height: 10px; border-radius: 50%; }
.confetti-4 { background: #a855f7; width: 14px; height: 6px; }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Round intro animation */
.round-intro-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 250;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}
.round-intro-content {
  text-align: center;
  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.round-intro-label {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 8px;
}
.round-intro-number {
  font-family: 'Archivo Black', sans-serif;
  font-size: 6rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.round-intro-content.sudden-death .round-intro-label {
  color: var(--danger);
  font-size: 2rem;
  animation: pulse-sudden-death 1s ease infinite;
}
@keyframes scaleIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Host turn panel */
.host-turn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.host-turn-label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.host-turn-round {
  font-size: .75rem;
  color: var(--muted);
}
.host-turn-question {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
  min-height: 40px;
}
.host-turn-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.host-turn-option {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .85rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  transition: all .15s;
  cursor: pointer;
}
.host-turn-option.correct-highlight {
  border-color: var(--green);
  background: rgba(45,212,191,.1);
  color: var(--green);
}
.host-turn-option.selected {
  border-color: var(--blue);
  background: rgba(102,183,255,.15);
  box-shadow: 0 0 8px rgba(102,183,255,.2);
}
.host-turn-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Turn result flash */
.turn-result-flash {
  text-align: center;
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  animation: scaleIn 0.3s ease;
}
.turn-result-flash.correct {
  background: rgba(45,212,191,.15);
  color: var(--green);
}
.turn-result-flash.wrong {
  background: rgba(239,68,68,.15);
  color: var(--danger);
}

/* Twitch connect button */
.btn-twitch {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #9146ff;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-twitch:hover { background: #7c3aed; }
.twitch-status {
  font-size: .8rem;
  font-weight: 600;
  color: #9146ff;
  padding: 6px 12px;
  background: rgba(145,70,255,.1);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(145,70,255,.3);
}

/* Mobile adjustments for rounds */
@media (max-width: 640px) {
  .quiz-round-counter { font-size: .75rem; padding: 4px 14px; }
  .quiz-answer-grid { grid-template-columns: 1fr; }
  .host-round-grid { grid-template-columns: 1fr; }
  .game-over-winner { font-size: 1.8rem; }
  .game-over-scores { font-size: 1.5rem; }
}