* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Tipografia ───
   Big Shoulders para lo que grita (titulares, numeros, nombres de ronda) e
   Instrument para lo que se lee. Van servidas desde el propio worker: una
   partida no puede depender de que cargue un CDN. */

@font-face {
  font-family: 'Big Shoulders';
  src: url('/assets/fonts/bigshoulders-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument';
  src: url('/assets/fonts/instrument-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument';
  src: url('/assets/fonts/instrument-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Papel y tinta, como las cartas de verdad. No hay color de acento: lo que
     destaca lo hace invirtiendose (bloque negro, texto blanco). */
  --bg: #ffffff;
  --surface: #f4f4f2;
  --surface2: #e9e9e5;
  --line: #d8d8d2;

  /* La tinta hace de acento: los nombres se conservan para no tocar los cientos
     de usos que ya hay repartidos por la hoja. */
  --accent: #0b0b0b;
  --accent-hot: #000000;
  --accent-deep: #3a3a3a;
  --acid: #0b0b0b;

  --text: #0b0b0b;
  --text-dim: #6e6e6e;

  --success: #1c7c3f;
  --warning: #8a6a00;

  --font-display: 'Big Shoulders', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Instrument', system-ui, -apple-system, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --max-w: 430px;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  position: relative;
}

/* Sombra suave en los bordes: evita que el blanco quede plano de lado a lado */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(0, 0, 0, 0.05), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(0, 0, 0, 0.04), transparent 70%);
}

/* Grano de papel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%;
  max-width: var(--max-w);
  padding: 16px 20px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ─── Header ─── */

.logo {
  text-align: center;
  padding: 20px 0 14px;
}

/* Apilado como un cartel: el CON/TRA va en negativo, dentro de su recuadro
   negro, que es lo que hace de acento ahora que no hay color. */
.logo h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.logo h1 span {
  font-size: 1.55em;
  background: var(--accent);
  color: var(--bg);
  padding: 0.04em 0.16em 0.06em;
  transform: rotate(-2.5deg);
}

.logo p {
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-top: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* En partida el logo estorba: la pantalla es para las cartas */
body.in-game .logo {
  display: none;
}

/* Sin logo, lo de arriba queda justo debajo del boton flotante de sonido: se le
   deja su hueco. Va por elemento y no por :first-child porque el reloj sigue en
   el DOM aunque este oculto, y se llevaba el margen el que no era. */
body.in-game .round-header,
body.in-game .game-timer,
body.in-game .spectator-header {
  margin-right: 46px;
}

/* ─── Screens ─── */

.screen {
  display: none;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.screen.active {
  display: flex;
}

/* ─── Buttons ─── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active {
  transform: scale(0.96);
}

.btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1.5px solid var(--line);
}

.btn-small {
  padding: 10px 16px;
  font-size: 0.9rem;
}

/* ─── Inputs ─── */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

input[type="text"] {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

input[type="text"]:focus {
  border-color: var(--accent);
}

input[type="text"]::placeholder {
  color: var(--text-dim);
}

.code-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* ─── Avatar Picker ─── */

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 10px;
  padding: 4px 0;
}

.avatar-option {
  position: relative;
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
  padding: 2px;
}

.avatar-option.selected {
  border-color: var(--accent);
}

.avatar-option.selected::after {
  content: '✓';
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.avatar-option:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

@media (hover: hover) {
  .avatar-option:hover {
    transform: translateY(-2px);
  }
}

.avatar-image {
  display: inline-block;
  width: var(--avatar-size, 28px);
  height: var(--avatar-size, 28px);
  border-radius: 50%;
  object-fit: cover;
  background: #43bfe5;
  vertical-align: middle;
  flex-shrink: 0;
}

.avatar-option .avatar-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.avatar-placeholder {
  text-align: center;
  line-height: var(--avatar-size, 28px);
  color: #111;
  font-size: 1rem;
  font-weight: 700;
}

.avatar-option:active {
  transform: scale(0.9);
}

.player-avatar {
  --avatar-size: 36px;
  margin-right: 6px;
}

.avatar-small {
  --avatar-size: 28px;
  margin-right: 2px;
}

/* ─── Cards ─── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
}

/* La pregunta es el cartel del combate: manda en la pantalla */
.card-dark {
  position: relative;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 20px;
  border-radius: var(--radius);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.card-white {
  position: relative;
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.14);
  transition: transform 0.14s cubic-bezier(0.34, 1.3, 0.64, 1),
              box-shadow 0.14s ease,
              border-color 0.15s ease;
}

.card-white:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.14);
}

/* La elegida se levanta del taco y se rodea de tinta */
.card-white.selected {
  border-color: var(--accent);
  transform: translate(-2px, -3px);
  box-shadow: 5px 6px 0 var(--accent);
}

.card-white.selected::after {
  content: '';
  position: absolute;
  inset: auto 10px 100% auto;
  width: 26px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* ─── Player List ─── */

.player-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--surface2);
}

.player-item .name {
  font-weight: 600;
  font-size: 0.95rem;
}

.player-item .host-badge {
  background: var(--accent);
  color: white;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.player-item .score {
  color: var(--warning);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ─── QR Section ─── */

.qr-section {
  text-align: center;
  padding: 10px 0;
}

.qr-section img,
.qr-section canvas {
  margin: 8px auto;
  border-radius: 10px;
  display: block;
}

/* El codigo se dicta en voz alta y se teclea: grande y bien espaciado */
.room-code {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--accent);
  margin: 10px 0 6px;
  text-align: center;
}

/* ─── Game Config ─── */

.config-section {
  margin-bottom: 16px;
}

.config-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.round-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.round-toggle {
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.round-toggle.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(0, 0, 0, 0.07);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
}

.stepper-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.stepper-btn:active {
  border-color: var(--accent);
}

.stepper-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 30px;
  text-align: center;
}

/* ─── Custom Cards ─── */

.custom-card-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.custom-select {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

.custom-select option {
  background: var(--bg);
}

.ranking-item-input {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  width: 100%;
  margin-top: 4px;
}

.ranking-item-input:focus {
  border-color: var(--accent);
}

.custom-cards-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.custom-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--surface2);
  font-size: 0.8rem;
}

.custom-card-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.custom-card-remove {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  font-weight: 700;
}

/* ─── Round Info ─── */

/* Cabecera de combate: modo a la izquierda, marcador de asaltos a la derecha */
.round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--line);
}

.round-header .round-type {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--text);
}

.round-header .round-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2px;
}

.round-counter {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.round-counter b {
  color: var(--accent);
  font-weight: 800;
}

/* ─── Answer Status Bar ─── */

.answer-status-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.answer-avatar {
  --avatar-size: 100%;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 2.5px solid var(--line);
  background: var(--surface);
  transition: all 0.3s ease;
  opacity: 0.45;
}

.answer-avatar.done {
  border-color: var(--success);
  opacity: 1;
  animation: answer-pop 0.3s ease;
}

.answer-avatar.waiting {
  padding: 0;
}

.answer-check {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 0.6rem;
  background: var(--accent);
  color: var(--bg);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.answer-avatar.waiting .answer-check {
  display: none;
}

/* Quien se ha ido sigue en la fila, pero apagado y con el borde roto: se ve de
   un vistazo que no se le esta esperando. */
.answer-avatar.offline {
  opacity: 0.32;
  border-style: dashed;
  border-color: var(--text-dim);
}

.answer-avatar.offline .answer-check {
  background: var(--text-dim);
  color: var(--bg);
}

.player-item.offline {
  opacity: 0.5;
}

.offline-badge {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

@keyframes answer-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ─── Answers Grid ─── */

.answers-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── Voting ─── */

.vote-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.1s;
  width: 100%;
}

.vote-btn:active {
  transform: scale(0.97);
}

.vote-btn.selected {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.06);
}

.vote-avatar {
  --avatar-size: 36px;
  margin-right: 4px;
}

/* ─── Yo Nunca ─── */

.yn-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.yn-btn {
  padding: 24px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  background: var(--surface);
  color: var(--text);
}

.yn-btn:active {
  transform: scale(0.95);
}

.yn-btn.yes {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.08);
}

.yn-btn.no {
  border-color: var(--success);
  background: rgba(0, 0, 0, 0.05);
}

/* ─── Ranking Drag ─── */

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.ranking-item:active {
  cursor: grabbing;
}

.ranking-item .rank-num {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.1rem;
  min-width: 22px;
}

.ranking-item .rank-text {
  font-weight: 600;
  flex: 1;
  font-size: 0.92rem;
}

.ranking-item .drag-handle {
  color: var(--text-dim);
  font-size: 1rem;
}

/* La que llevas en el dedo va por encima y levantada; las demas se apartan
   con una transicion corta para dejarle hueco. */
.ranking-item.dragging {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 4px 6px 0 var(--accent);
}

.ranking-list.arrastrando .ranking-item:not(.dragging) {
  transition: transform 0.16s ease;
}

/* Tras el primer arrastre la lista ya no repite la entrada: la animacion
   fija el transform y no dejaria mover las tarjetas. */
.ranking-list.sin-entrada .ranking-item {
  animation: none;
}

/* Orden ya enviado: nada se mueve y la pagina vuelve a poder desplazarse */
.ranking-list.bloqueada .ranking-item {
  cursor: default;
  touch-action: auto;
  opacity: 0.7;
}

.ranking-list.bloqueada .drag-handle {
  visibility: hidden;
}

/* ─── Cambiar cartas ───
   En modo descarte las cartas se ven con borde discontinuo; las marcadas para
   tirar, tachadas y apagadas. */

/* Encima de la mano, debajo de la pregunta: abajo lo tapaba la barra de
   reacciones. */
.descarte-acciones {
  display: flex;
  gap: 8px;
  margin: 6px 0 2px;
}

.descarte-acciones:empty {
  display: none;
}

.descarte-acciones .btn {
  flex: 1;
  margin: 0;
}

.descarte-ayuda {
  margin: 4px 0 2px;
  font-size: 0.85rem;
}

.answers-grid.modo-descarte .card-white {
  border-style: dashed;
}

.card-white.descartar {
  opacity: 0.45;
  text-decoration: line-through;
  border-style: solid;
  border-color: var(--accent);
}

/* ─── Results ─── */

/* El ganador es el momento de la ronda: marco de tinta y sombra dura, para que
   no sea otra caja gris mas */
.result-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  border: 2px solid var(--accent);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.14);
}

.result-card .winner-name {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}

.winner-avatar,
.game-over-winner-avatar {
  display: grid;
  place-items: center;
  min-height: 86px;
  margin: 7px auto 9px;
}

.winner-avatar-image {
  --avatar-size: 82px;
  border: 3px solid var(--text);
  box-shadow: 4px 5px 0 var(--accent);
}

.game-over-winner-avatar {
  margin-top: 16px;
  margin-bottom: 0;
}

.game-over-winner-avatar .winner-avatar-image {
  --avatar-size: 104px;
}

.result-card .winner-answer {
  font-size: 1rem;
  margin-top: 6px;
  color: var(--text);
}

/* Quién respondió qué: el nombre va en una columna de ancho fijo para que las
   respuestas arranquen todas a la misma altura. Antes era un flex con
   space-between y cada fila repartía el hueco a su manera; con respuestas
   largas el nombre acababa debajo del avatar. */
.result-detail {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface2);
  font-size: 0.85rem;
  line-height: 1.3;
}

.result-detail > span:first-child,
.spec-detail-row > span:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.result-detail > span:first-child .avatar-image,
.spec-detail-row > span:first-child .avatar-image {
  margin-right: 6px;
}

.result-detail > span:last-child,
.spec-detail-row > span:last-child {
  min-width: 0;
  text-align: left;
}

.result-detail:last-child {
  border-bottom: none;
}

/* ─── Player Ranking Detail (who answered what) ─── */

.player-ranking-detail {
  padding: 8px 0;
  border-bottom: 1px solid var(--surface2);
}

.player-ranking-detail:last-child {
  border-bottom: none;
}

.detail-name {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 4px;
  display: block;
}

.detail-order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding-left: 4px;
}

/* ─── Scoreboard ─── */

.scoreboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 10px;
}

.score-row .position {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-dim);
  min-width: 28px;
  font-size: 1.15rem;
}

.score-row .name {
  flex: 1;
  font-weight: 600;
  margin-left: 6px;
  font-size: 0.95rem;
}

.score-row .pts {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
  font-size: 1.2rem;
}

/* El lider se lleva el amarillo, igual que en la tele */
.score-row:first-child {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
}

.score-row:first-child .position,
.score-row:first-child .pts,
.score-row:first-child .name {
  color: var(--bg);
}

/* ─── Game Over ─── */

.game-over-title {
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  margin: 16px 0;
}

/* Con la mano de 7 cartas el boton de enviar caia por debajo del scroll: se
   queda pegado al fondo, justo encima de la barra de reacciones. */
#screen-game .btn-primary {
  position: sticky;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  margin-top: 4px;
  box-shadow: 0 10px 28px 10px var(--bg);
}

/* Flotando sobre las cartas no puede ser translucido: se leeria la carta de
   debajo a traves del boton. */
#screen-game .btn-primary:disabled {
  opacity: 1;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

/* ─── Turno de juez ───
   Antes esto era un spinner solo en medio de 600px de negro. */

.judge-wait {
  text-align: center;
  padding: 18px 0 6px;
}

.judge-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bg);
  background: var(--acid);
  padding: 8px 18px 6px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.judge-sub {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ─── Waiting State ─── */

.waiting {
  text-align: center;
  padding: 24px 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.waiting .spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2.5px solid #222;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Reaction Bar ─── */

.reaction-bar {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: min(calc(100% - 16px), var(--max-w));
  justify-content: space-between;
  gap: 3px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid var(--line);
  z-index: 50;
  max-width: var(--max-w);
}

.reaction-btn {
  flex: 0 1 36px;
  width: auto;
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
}

.reaction-btn-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.reaction-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

@media (hover: hover) {
  .reaction-btn:hover {
    border-color: var(--text);
    transform: translateY(-3px);
  }
}

.reaction-btn:active {
  transform: scale(1.3);
}

.reaction-float-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 40;
}

.floating-reaction {
  position: absolute;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: float-up 2.2s ease-out forwards;
}

.reaction-float-image {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  box-shadow: 0 3px 0 var(--text);
}

.reaction-placeholder {
  display: grid;
  place-items: center;
  background: #43bfe5;
  color: var(--text);
}

.reaction-name {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-150px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-250px) scale(0.8);
  }
}

/* ─── Mute Button ─── */

.mute-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s;
}

.mute-btn svg {
  width: 19px;
  height: 19px;
}

.mute-btn:active {
  border-color: var(--accent);
}

/* ─── Toast ─── */

/* Sale justo encima de la barra de reacciones. Escondido tiene que quedar
   invisible del todo: antes solo bajaba 80px desde 70px de altura y siempre
   asomaba un trozo pegado al borde de la pantalla. */
.toast {
  position: fixed;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  visibility: hidden;
  background: var(--surface2);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
  z-index: 100;
  /* La visibilidad cambia al final de la animacion, no al principio */
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
  /* Los avisos largos pasan a dos lineas en vez de salirse del movil */
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
  line-height: 1.35;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
}

/* ─── Divider ─── */

.divider-line {
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

/* ─── Utilities ─── */

.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.mt-auto { margin-top: auto; }
.gap-12 { gap: 12px; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }

/* ─── Modo espectador (la tele) ───
   Esto se ve desde el sofa, a tres metros y de reojo mientras se juega con el
   movil en la mano. Todo escala con el viewport: lo que en el movil es un
   detalle, aqui tiene que leerse cruzando el salon. */

.spectator-mode .container {
  max-width: 1600px;
  padding: 2.5vh 4vw calc(2.5vh + 20px);
}

.spectator-mode .logo {
  display: none;
}

.spectator-mode .reaction-bar {
  display: none !important;
}

.spectator-mode .screen {
  gap: clamp(12px, 2.2vh, 28px);
}

/* La tele es apaisada y sobra alto: el contenido se centra en vez de
   amontonarse arriba dejando medio salon en negro. */
.spectator-mode .screen.active {
  justify-content: center;
}

.spectator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.spectator-badge {
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.3vw, 1.15rem);
  padding: 5px 16px 3px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spectator-round-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid var(--line);
  padding-bottom: clamp(6px, 1vh, 14px);
}

.spec-round-type {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.spec-round-counter {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  color: var(--accent);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* La pregunta manda: es lo unico que la gente lee de lejos */
/* La misma carta negra que en el movil, en grande: es lo que se lee de lejos */
.spectator-question {
  position: relative;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(20px, 3.5vh, 48px) clamp(24px, 3vw, 56px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.8vw, 4.4rem);
  line-height: 1.03;
  text-align: center;
  color: var(--bg);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.spectator-judge {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acid);
}

/* Fila de quien ha contestado ya */
.spectator-status {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  flex-wrap: wrap;
}

.spectator-status .answer-avatar {
  width: clamp(52px, 5.5vw, 92px);
  height: clamp(52px, 5.5vw, 92px);
  border-width: 3px;
}

.spectator-status .answer-check {
  font-size: clamp(0.7rem, 1vw, 1.1rem);
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
}

/* Lobby: la gente todavia se esta uniendo */
.spectator-players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 24px);
}

.spectator-player-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 20px 8px 8px;
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  font-weight: 600;
}

.spectator-player-chip.disconnected {
  opacity: 0.4;
}

.sp-avatar {
  --avatar-size: clamp(36px, 3.4vw, 58px);
  display: inline-flex;
}

.sp-name {
  font-weight: 600;
}

.sp-score {
  color: var(--acid);
  font-family: var(--font-display);
}

/* Respuestas en fase de juicio: en rejilla para aprovechar el ancho */
.spectator-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.spec-phase-label {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.spec-answer-card {
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: clamp(16px, 2vh, 28px) clamp(18px, 1.8vw, 30px);
  font-size: clamp(1.05rem, 1.9vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}

/* Resultado */
.spectator-result-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--acid);
}

.spectator-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(8px, 1.2vw, 18px);
}

.spec-detail-row {
  display: grid;
  grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 1.4vh, 18px) clamp(12px, 1.2vw, 20px);
  font-size: clamp(0.95rem, 1.5vw, 1.5rem);
  line-height: 1.3;
}

.spec-detail-row:last-child {
  margin-bottom: 0;
}

/* Marcador */
.spectator-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}

.spec-score-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 1.4vh, 18px) clamp(14px, 1.4vw, 24px);
  font-size: clamp(1rem, 1.7vw, 1.7rem);
}

/* El lider se lleva el amarillo */
.spec-score-row.first {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.spec-pos {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  color: var(--text-dim);
  min-width: 1.8em;
}

.spec-score-row.first .spec-pos,
.spec-score-row.first .spec-score-pts,
.spec-score-row.first .spec-score-name {
  color: var(--bg);
}

.spec-score-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-score-pts {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2.4rem);
  color: var(--accent);
  white-space: nowrap;
}

.spectator-waiting {
  text-align: center;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.8vw, 1.7rem);
  padding: clamp(20px, 4vh, 60px) 0;
}

/* ─── Animations ─── */

.anim-in {
  animation: slideUp 0.35s ease-out both;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Card entrance */
.card-dark {
  animation: scaleIn 0.4s ease-out;
}

/* Question card glow pulse */
.card-dark.pulse-glow {
  animation: scaleIn 0.4s ease-out, pulseGlow 2s ease-in-out infinite 0.5s;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.12);
  }
}

/* White card stagger */
.card-white {
  animation: slideUp 0.3s ease-out both;
}

/* Result card pop */
.result-card {
  animation: resultPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes resultPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Winner name bounce */
.winner-name {
  animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Score row slide in */
.score-row {
  animation: slideInLeft 0.3s ease-out both;
}

.score-row:nth-child(1) { animation-delay: 0ms; }
.score-row:nth-child(2) { animation-delay: 60ms; }
.score-row:nth-child(3) { animation-delay: 120ms; }
.score-row:nth-child(4) { animation-delay: 180ms; }
.score-row:nth-child(5) { animation-delay: 240ms; }
.score-row:nth-child(6) { animation-delay: 300ms; }

/* Result detail fade in */
.result-detail {
  animation: slideUp 0.25s ease-out both;
}

.result-detail:nth-child(1) { animation-delay: 0ms; }
.result-detail:nth-child(2) { animation-delay: 80ms; }
.result-detail:nth-child(3) { animation-delay: 160ms; }
.result-detail:nth-child(4) { animation-delay: 240ms; }
.result-detail:nth-child(5) { animation-delay: 320ms; }
.result-detail:nth-child(6) { animation-delay: 400ms; }

/* Vote button entrance */
.vote-btn {
  animation: slideUp 0.3s ease-out both;
}

.vote-btn:nth-child(1) { animation-delay: 50ms; }
.vote-btn:nth-child(2) { animation-delay: 100ms; }
.vote-btn:nth-child(3) { animation-delay: 150ms; }
.vote-btn:nth-child(4) { animation-delay: 200ms; }
.vote-btn:nth-child(5) { animation-delay: 250ms; }

/* Yo Nunca button entrance */
.yn-btn {
  animation: scaleIn 0.35s ease-out both;
}

.yn-btn:first-child { animation-delay: 100ms; }
.yn-btn:last-child { animation-delay: 200ms; }

/* Ranking item entrance */
.ranking-item {
  animation: slideInLeft 0.3s ease-out both;
}

.ranking-item:nth-child(1) { animation-delay: 50ms; }
.ranking-item:nth-child(2) { animation-delay: 100ms; }
.ranking-item:nth-child(3) { animation-delay: 150ms; }
.ranking-item:nth-child(4) { animation-delay: 200ms; }

/* Card flip for CAH reveal */
.card-flip {
  perspective: 600px;
}

.card-flip-inner {
  animation: flipReveal 0.6s ease-out both;
  transform-style: preserve-3d;
}

@keyframes flipReveal {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}

/* ─── Timer Bar ─── */

.game-timer {
  position: relative;
  height: 28px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}

.timer-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 55%, var(--accent-hot));
  border-radius: 14px;
  transition: width 0.15s linear;
}

/* El numero va encima de la barra, que es negra por la izquierda y clara por la
   derecha: en blanco y negro no hay un color que se lea sobre ambas. Con
   'difference' el texto se invierte solo segun lo que tenga debajo, asi que se
   lee tanto sobre el relleno como sobre la parte vacia. */
.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  mix-blend-mode: difference;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* Si el navegador no soporta el modo de fusion, el numero se pone fuera de la
   barra para no quedarse en blanco sobre blanco. */
@supports not (mix-blend-mode: difference) {
  .timer-text {
    color: var(--text);
    inset: 0 0 0 auto;
    padding-right: 12px;
  }
}

/* En la tele el reloj tambien se mira de lejos */
.spectator-mode .game-timer {
  height: clamp(26px, 4vh, 46px);
  border-radius: 999px;
  margin-bottom: 0;
}

.spectator-mode .timer-text {
  font-size: clamp(1rem, 1.9vw, 1.8rem);
}

.game-timer.timer-urgent .timer-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  animation: timerPulse 0.5s ease-in-out infinite;
}

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

.game-timer.hidden {
  display: none;
}

/* ─── Streak Badge ─── */

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
  animation: streakPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-left: 6px;
}

@keyframes streakPop {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ─── Round Transition ─── */

.round-transition {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--accent);
  color: var(--bg);
  z-index: 150;
  animation: fadeIn 0.3s ease-out;
}

.round-transition .rt-type {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.7;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 8px;
  animation: slideUp 0.4s ease-out 0.1s both;
}

.round-transition .rt-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

/* ─── Player item kick animation ─── */

.player-item {
  animation: slideInLeft 0.25s ease-out both;
  transition: opacity 0.3s, transform 0.3s;
}

/* ─── Safe area for notch/gesture bar ─── */

@supports (padding: env(safe-area-inset-bottom)) {
  .btn-primary,
  .btn-secondary {
    margin-bottom: 0;
  }
}

/* En la tele, quien se ha ido tambien se ve apagado en el marcador */
.spec-score-row.offline {
  opacity: 0.4;
}

/* Aviso de partida anterior, arriba del menu: se ofrece, no se entra solo */
.resume-btn {
  border-style: dashed;
  margin-bottom: 4px;
}

/* ─── Conectar la tele ───
   La tele abre /tv y enseña un codigo corto que se escribe en el movil: con el
   mando de la tele no se teclea nada. El numero tiene que leerse desde el sofa. */

body.tv-pairing .logo {
  display: block;
}

body.tv-pairing .logo h1 {
  font-size: clamp(2.1rem, 4.5vw, 4.2rem);
}

.tv-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vh, 32px);
  text-align: center;
}

.tv-pair-kicker {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.8vw, 1.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tv-pair-code {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1;
  background: var(--accent);
  color: var(--bg);
  /* el espaciado deja hueco tras la ultima cifra: se compensa a la izquierda */
  padding: 0.1em 0.3em 0.08em 0.42em;
  border-radius: 12px;
}

.tv-pair-help {
  max-width: 34ch;
  font-size: clamp(1rem, 2vw, 1.9rem);
  line-height: 1.35;
  color: var(--text-dim);
}

.tv-pair-help b {
  color: var(--text);
}

.tv-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6em 1.2em;
  margin-top: clamp(16px, 3vh, 40px);
  font-size: clamp(1rem, 1.8vw, 1.7rem);
  color: var(--text-dim);
  text-align: center;
}

.tv-next .tv-pair-code {
  font-size: clamp(2rem, 5vw, 4rem);
  border-radius: 8px;
}

.tv-link-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.tv-link-help {
  font-size: 0.8rem;
  line-height: 1.35;
}

.tv-link-help b {
  color: var(--text);
  word-break: break-all;
}

.link-tele {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: underline;
}

/* ─── Fin de partida: revancha o salir ─── */

.gameover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

/* ─── Instalar como app ─── */

.install-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}

.install-hint b {
  color: var(--text);
}

.resume-btn b {
  font-family: var(--font-display);
  font-size: 1.15em;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* ─── Frase montada ───
   La respuesta metida en el hueco de la pregunta. Sobre papel, la parte de la
   pregunta se apaga y la respuesta manda; dentro de una carta negra, la
   respuesta va como un trozo de carta blanca pegado en el hueco. */
.frase-montada {
  color: var(--text-dim);
  font-weight: 400;
}

.frase-montada .respuesta {
  color: var(--text);
  font-weight: 700;
}

.card-dark .frase-montada,
.spectator-question .frase-montada {
  color: inherit;
  font-weight: inherit;
}

/* Con el interlineado apretado de la carta negra, el recuadro de la segunda
   linea de la respuesta invadia la de arriba y dejaba una franja blanca bajo
   el texto de la pregunta. */
.card-dark .frase-montada,
.spectator-question .frase-montada {
  line-height: 1.3;
}

.card-dark .respuesta,
.spectator-question .respuesta {
  background: var(--bg);
  color: var(--text);
  padding: 0 0.18em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Avatar que ya tiene otro jugador de la sala: apagado y sin poder elegirse */
.avatar-option.taken {
  opacity: 0.28;
  filter: grayscale(1);
  cursor: not-allowed;
}

.avatar-option.taken:active {
  transform: none;
}

@media (hover: hover) {
  .avatar-option.taken:hover {
    transform: none;
  }
}

/* La racha va debajo del nombre del ganador: al lado lo descuadraba */
.streak-line {
  margin: 6px 0 2px;
}