/* Etapa 5 — estilos de la linea de tiempo propia.
   El resto de la pantalla sigue feo a proposito: la grilla de timelines ajenas
   es la etapa 6 y la vista de apuestas la etapa 9. */

:root {
  /* Los huecos NO se achican nunca. Con 30 cartas la timeline se desplaza en
     horizontal, pero cada blanco sigue midiendo lo que mide un dedo.
     48px es el minimo tocable recomendado (WCAG 2.5.8 pide 24, Apple 44). */
  --hueco-ancho: 48px;
  --carta-ancho: 116px;
  --carta-alto: 104px;

  --fondo: #14161a;
  --panel: #1d2027;
  --borde: #2f343d;
  --texto: #e8eaed;
  --tenue: #9aa1ad;
  --acento: #4c9aff;
  --acento-fuerte: #1b6fd6;
  --ok: #2ea44f;
  --peligro: #d9534f;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 12px;
  background: var(--fondo);
  color: var(--texto);
  /* la pagina nunca se desplaza en horizontal: solo la timeline por dentro */
  overflow-x: hidden;
}

button { font: inherit; min-height: 44px; }

/* ------------------------------------------------------ linea de tiempo */

.tl-marco {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 0 4px;
  margin: 8px 0;
}

.tl-titulo {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 12px 8px;
  font-weight: 600;
}
.tl-titulo .tl-sub { font-weight: 400; color: var(--tenue); font-size: 13px; }

/* la pista se desplaza sola, el resto de la pagina no se mueve */
.tl-pista {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  padding: 4px 12px 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tl-carta {
  flex: 0 0 var(--carta-ancho);
  width: var(--carta-ancho);
  min-height: var(--carta-alto);
  background: #262b34;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.tl-anio { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.tl-nombre { font-size: 12px; line-height: 1.25; }
.tl-artista { font-size: 11px; color: var(--tenue); line-height: 1.2; }

/* --- el hueco: ancho fijo, alto completo, siempre tocable --- */
.tl-hueco {
  flex: 0 0 var(--hueco-ancho);
  width: var(--hueco-ancho);
  min-height: var(--carta-alto);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 2px dashed transparent;
  border-radius: 8px;
  color: var(--tenue);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* que el dedo no dispare zoom ni seleccion de texto */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tl-hueco::before {
  content: "";
  width: 3px; height: 62%;
  background: var(--borde);
  border-radius: 2px;
}
.tl-hueco:disabled { cursor: default; }
.tl-hueco:not(:disabled):hover { border-color: var(--acento); }
.tl-hueco:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

.tl-hueco.sel {
  border-color: var(--acento);
  background: rgba(76, 154, 255, .16);
}
.tl-hueco.sel::before { background: var(--acento); width: 5px; height: 84%; }

.tl-hueco.bloqueado {
  border-color: var(--ok);
  background: rgba(46, 164, 79, .2);
}
.tl-hueco.bloqueado::before { background: var(--ok); width: 5px; height: 84%; }

/* el hueco vetado en la fase de apuestas (§4.5.4) */
.tl-hueco.vetado { opacity: .35; }
.tl-hueco.vetado::before { background: var(--peligro); }

/* ------------------------------------------------- barra de colocacion */

/* Fija abajo: en un telefono la accion principal siempre queda bajo el pulgar. */
.tl-barra {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-barra[hidden] { display: none; }

.tl-donde {
  text-align: center;
  font-size: 15px;
  min-height: 22px;
}
.tl-donde strong { color: var(--acento); }

.tl-controles { display: flex; gap: 8px; align-items: stretch; }

/* Estos dos botones son la razon por la que no hace falta acertar el hueco:
   se toca cerca y se afina con las flechas. */
.tl-paso {
  flex: 0 0 84px;
  font-size: 22px;
  background: #2b313b;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.tl-paso:disabled { opacity: .4; cursor: default; }
.tl-paso:active:not(:disabled) { background: #39414e; }

.tl-confirmar {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.tl-confirmar:disabled { background: #3a4048; color: var(--tenue); cursor: default; }

/* En pantallas angostas las flechas se agrandan todavia mas */
@media (max-width: 480px) {
  :root { --carta-ancho: 104px; }
  .tl-paso { flex-basis: 72px; min-height: 52px; }
}

/* ------------------------------- pista compacta (grilla, §8.1) --------- */

/* Mismo componente, medidas chicas. Aca los huecos NO son tocables (nadie
   coloca sobre la timeline ajena fuera de la fase de apuestas), asi que pueden
   ser finos sin costo. */
.tl-pista.compacta {
  --carta-ancho: 46px;
  --carta-alto: 30px;
  --hueco-ancho: 6px;
  padding: 2px 12px 8px;
  gap: 0;
}
.tl-pista.compacta .tl-carta {
  padding: 2px 4px;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
}
.tl-pista.compacta .tl-anio { font-size: 12px; font-weight: 600; }
.tl-pista.compacta .tl-hueco::before { width: 1px; height: 40%; }

/* ------------------------------------- grilla de timelines ajenas ------ */

.gr-fila {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.gr-fila.es-turno { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }

/* La cabecera es lo que se mira: nombre, cartas y monedas en grande. */
.gr-cab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}
.gr-cab:disabled { cursor: default; }
.gr-cab:not(:disabled):hover { background: rgba(255,255,255,.04); }
.gr-cab:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

.gr-chevron { color: var(--tenue); width: 12px; flex: 0 0 12px; }
.gr-nombre { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-nombre.desconectado { color: var(--tenue); text-decoration: line-through; }

.gr-marcas { font-size: 11px; color: var(--acento); letter-spacing: .5px; flex: 0 0 auto; }

/* los dos numeros que importan */
.gr-cuenta {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.gr-monedas {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 58px; text-align: right;
}

.gr-vacio { color: var(--tenue); font-size: 12px; padding: 4px 12px 10px; }

.gr-fila.expandida { border-color: var(--acento); }

@media (max-width: 480px) {
  .gr-cuenta { font-size: 18px; }
  .gr-monedas { font-size: 15px; min-width: 50px; }
  .gr-nombre { font-size: 15px; }
}

/* ------------------------------------- adivinanza (etapa 7, §4.2/§8.3) - */

/* Pegado arriba. La barra de colocacion es sticky abajo, asi que no chocan:
   el de turno tiene una arriba y otra abajo, y el resto solo esta. */
.adv {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.adv.sonando { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.adv.cerrada { opacity: .75; }

.adv-fila1 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.adv-titulo { font-size: 15px; font-weight: 600; }
.adv-monedas {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.adv-monedas.gano { color: var(--ok); }

.adv-campos { display: flex; gap: 8px; }
.adv-campos input {
  flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 16px; /* 16px evita el zoom de iOS */
}
.adv-campos input:disabled { opacity: .5; }
.adv-enviar {
  flex: 0 0 auto; min-width: 92px;
  background: var(--acento-fuerte); color: #fff;
  border: none; border-radius: 6px; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}
.adv-enviar:disabled { background: #3a4048; color: var(--tenue); cursor: default; }

.adv-estado { margin-top: 8px; font-size: 14px; min-height: 20px; }
.adv-estado.aviso { color: #ffd9a8; }
.adv-estado.cierre { color: var(--tenue); }
.adv-estado.premio { color: var(--ok); font-weight: 600; }

.adv-acertaron { margin-top: 4px; font-size: 13px; color: var(--tenue); }
.adv-acertaron:empty { display: none; }
.adv-acertaron .primero { color: var(--ok); font-weight: 700; }

@media (max-width: 480px) {
  .adv-campos { flex-wrap: wrap; }
  .adv-campos input { flex: 1 1 45%; }
  .adv-enviar { flex: 1 1 100%; min-height: 48px; }
}

/* -------------------------------- gasto de monedas (etapa 8, §4.4) ----- */

.gasto {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}
.gasto[hidden] { display: none; }

/* La compra aparece justo despues de fallar, que es un momento confuso.
   Se marca fuerte para que no se lea como algo que pasa solo. */
.gasto.compra { border-color: #a4661f; background: #33240f; }

.gasto-cabecera { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.gasto-texto { font-size: 14px; line-height: 1.45; margin-bottom: 8px; color: #e2e5ea; }
.gasto-texto strong { color: #ffd9a8; }
.gasto-texto .falta { color: var(--peligro); font-weight: 700; }

.gasto-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.gasto-btn, .gasto-si, .gasto-no {
  min-height: 48px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0 16px;
  border: 1px solid transparent;
}
.gasto-btn { background: var(--acento-fuerte); color: #fff; flex: 1 1 auto; }
.gasto-btn:disabled { background: #3a4048; color: var(--tenue); cursor: default; }
.gasto-si { background: var(--ok); color: #fff; flex: 1 1 auto; }
.gasto-no {
  background: transparent; color: var(--texto);
  border-color: var(--borde); flex: 0 0 auto; min-width: 110px;
}
.gasto-no:hover { background: rgba(255,255,255,.05); }

/* el saldo resultante, que es lo que de verdad se quiere saber antes de pagar */
.gasto-saldo { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .gasto-btn, .gasto-si { flex: 1 1 100%; }
  .gasto-no { flex: 1 1 100%; }
}

/* ---------------------------- ventana de apuestas (etapa 9, §4.5/§8.2) - */

.apuesta {
  background: #1b2436;
  border: 2px solid var(--acento);
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}
.apuesta[hidden] { display: none; }

.apuesta-cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 16px; font-weight: 700; margin-bottom: 6px;
}
.apuesta-reloj {
  font-variant-numeric: tabular-nums; color: #ffd9a8; font-weight: 700;
  flex: 0 0 auto;
}

/* Es la unica mecanica que el grupo no ha jugado nunca: el texto tiene que
   ensenarla solo, sin que nadie explique nada. */
.apuesta-explica { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.apuesta-explica ul { margin: 6px 0 0; padding-left: 20px; }
.apuesta-explica li { margin-bottom: 3px; }
.apuesta-explica strong { color: var(--acento); }
.apuesta-explica .cuesta { color: #ffd9a8; }
.apuesta-explica .falta { color: var(--peligro); font-weight: 700; }

.apuesta-controles { display: flex; gap: 8px; align-items: stretch; }
.apuesta-confirma { margin-top: 4px; }
.apuesta-acciones { display: flex; margin-top: 8px; }
.apuesta-acciones[hidden] { display: none; }
.apuesta-acciones .gasto-no { flex: 1 1 auto; }

/* Sin reloj hay que decir a quien se esta esperando. */
.apuesta-esperando { margin-top: 8px; font-size: 13px; color: var(--tenue); }
.apuesta-esperando:empty { display: none; }
.apuesta-esperando strong { color: #ffd9a8; }

@media (max-width: 480px) {
  .apuesta-controles .tl-paso { flex-basis: 64px; }
}

/* ---------------------------------- controles del host (salida manual) - */

/* Discreto a proposito: esta siempre visible, pero no compite con la accion
   del turno. Es una salida de emergencia, no algo que se use cada ronda. */
.host {
  border: 1px dashed var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0;
  background: rgba(255,255,255,.02);
}
.host[hidden] { display: none; }
.host-titulo { font-size: 11px; letter-spacing: .6px; color: var(--tenue); margin-bottom: 6px; }
.host-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.host-btn {
  flex: 1 1 auto; min-height: 40px;
  background: transparent; color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 8px;
  font-size: 13px; cursor: pointer; touch-action: manipulation; padding: 0 12px;
}
.host-btn:hover { color: var(--texto); border-color: var(--peligro); }
.host-btn[hidden] { display: none; }
.host-confirma { margin-top: 6px; }

/* ------------------------------- contador del timeout de turno (§5.3) -- */

.aviso-turno {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #4a2a12;
  border: 1px solid #a4661f;
  color: #ffd9a8;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 15px;
}
.aviso-turno[hidden] { display: none; }
.aviso-turno.urgente { background: #4d1f1f; border-color: var(--peligro); color: #ffc9c9; }
.aviso-turno .cuenta {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 46px; text-align: center;
}

/* ------------------------------------------------------------ el resto */

.viejo { font-size: 13px; }
.viejo pre { white-space: pre-wrap; word-break: break-word; }
hr { border: none; border-top: 1px solid var(--borde); margin: 14px 0; }
input { font: inherit; padding: 6px; background: #22262e; color: var(--texto);
        border: 1px solid var(--borde); border-radius: 6px; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3, h4 { font-size: 15px; margin-bottom: 6px; }