:root {
  --cuerpo: #1c1f26;      /* el aparato */
  --cuerpo-2: #2a2e36;
  --borde: #14161b;
  --pantalla: #e3efec;    /* pantalla LCD */
  --encabezado: #1f3f57;  /* barra del mail */
  --azul: #2f5a7a;        /* suéter de Mike */
  --azul-claro: #3b7aa6;
  --celeste: #7fd8ea;
  --foco: #ffe14d;
  --texto: #1c1f26;
  --escala: 1;
  --ancho: 1280px;
  --alto: 720px;
  --toque: 44px;          /* 44 px reales, en coordenadas del juego (lo calcula ui.js) */
  --fuente: "Pixelify Sans", "Courier New", monospace;                 /* títulos */
  --letra: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;     /* textos para leer */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b0f17;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--fuente);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { position: fixed; inset: 0; touch-action: manipulation; }

/* Escenario de tamaño lógico (1280x720 apaisado, 720xN vertical) que se escala para entrar en la ventana. */
#escenario {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ancho);
  height: var(--alto);
  transform: translate(-50%, -50%) scale(var(--escala));
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
}

#lienzo {
  display: block;
  touch-action: none;
  image-rendering: pixelated;
}

#capas { position: absolute; inset: 0; pointer-events: none; }
#capas > *, .pantalla > * { pointer-events: auto; }
.pantalla { position: absolute; inset: 0; pointer-events: none !important; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ teclas de BlackBerry */
.tecla-bb {
  font: 700 22px var(--fuente);
  min-height: var(--toque);
  min-width: var(--toque);
  color: #fff;
  background: var(--cuerpo-2);
  border: 3px solid var(--borde);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 5px 0 var(--borde);
  padding: 6px 16px;
  cursor: pointer;
  touch-action: manipulation;
}
.tecla-bb:hover { background: #4a515e; }
.tecla-bb.principal { background: var(--azul); }
.tecla-bb.principal:hover { background: var(--azul-claro); }
.tecla-bb:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18), 0 2px 0 var(--borde); }
.tecla-bb:disabled { opacity: .55; cursor: default; }
.tecla-bb.grande { font-size: 34px; }
.tecla-bb.chica { font-size: 16px; padding: 4px 10px; }

:focus-visible { outline: 4px solid var(--foco); outline-offset: 3px; }
input:focus-visible { outline-offset: 1px; }

/* ------------------------------------------------------------ paneles con forma de pantalla de BlackBerry */
.panel {
  position: absolute;
  background: var(--pantalla);
  border: 10px solid var(--cuerpo-2);
  outline: 4px solid var(--borde);
  box-shadow: inset 0 0 0 4px var(--borde), 8px 10px 0 rgba(0, 0, 0, .35);
  padding: 0 20px 16px;
  font-family: var(--letra);
  font-size: 18px;
  line-height: 1.3;
  user-select: text;
  -webkit-user-select: text;
}
.panel h2 {
  font-family: var(--fuente);
  margin: 4px -16px 12px;
  padding: 8px 14px 8px 48px;
  background: var(--encabezado) url("sprites/sobre.png") no-repeat 12px center / 28px 20px;
  image-rendering: pixelated;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
}
.panel p { margin: 0 0 10px; }
.panel ul { margin: 0 0 10px; padding-left: 20px; }
.panel li { margin-bottom: 6px; }

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 0 6px;
  border: 3px solid var(--borde);
  background: var(--cuerpo-2);
  color: #fff;
  font-family: var(--fuente);
  font-size: 16px;
  text-align: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4);
}
.tecla { font-size: 16px; margin-bottom: 0 !important; }
@media (pointer: coarse) { .solo-teclado { display: none; } }

/* ------------------------------------------------------------ menú */
#form-jugar {
  position: absolute;
  left: 50%;
  top: 508px;
  width: 476px;
  transform: translateX(-50%);
  background: rgba(20, 22, 27, .88);
  border: 4px solid var(--borde);
  padding: 8px 12px 4px;
}
#form-jugar label { display: block; font: 700 17px var(--letra); color: #fff; margin-bottom: 4px; }
#form-jugar label + input { display: block; width: 100%; margin-bottom: 6px; }
#form-jugar label .nota { font-weight: 400; color: #c9ced8; font-size: .85em; }
#form-jugar .fila { display: flex; gap: 10px; }
#form-jugar input {
  flex: 1;
  min-width: 0;
  min-height: var(--toque);
  font: 700 22px var(--letra);
  padding: 6px 10px;
  border: 3px solid var(--borde);
  background: #fff;
  color: var(--texto);
  user-select: text;
  -webkit-user-select: text;
}
#btn-jugar { font-size: 26px; min-width: 150px; }
#form-jugar .estado { color: #fff; margin: 6px 0 4px !important; font: 15px var(--letra); min-height: 1.2em; }
#form-jugar .estado.error { color: #ffb4a8; font-weight: 700; }
#form-jugar .estado:empty { display: none; }
#form-jugar { padding-bottom: 10px; }

.cartel-ronda {
  position: absolute;
  left: 50%;
  top: 274px;
  transform: translateX(-50%);
  width: 480px;
  margin: 0;
  padding: 6px 10px;
  background: rgba(20, 22, 27, .9);
  border-top: 4px solid #ffb02e;
  color: #fff;
  font: 700 17px var(--letra);
  text-align: center;
}
.cartel-ronda.abierta { border-top-color: #7fe08a; }


.horizontal #panel-historia { right: 28px; top: 276px; width: 370px; font-size: 16px; }
.horizontal #panel-top { left: 28px; top: 300px; width: 340px; }

/* ------------------------------------------------------------ fin de partida */
.botones-fin {
  position: absolute;
  left: 50%;
  top: 450px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
#btn-otra { width: 340px; min-height: 88px; }
#btn-menu { width: 200px; min-height: max(56px, var(--toque)); }

.horizontal #panel-resumen { left: 28px; top: 160px; width: 370px; max-height: calc(var(--alto) - 190px); overflow: auto; }
.horizontal #panel-ranking { right: 28px; top: 160px; width: 370px; max-height: calc(var(--alto) - 190px); overflow: auto; }

.resumen-linea { font-weight: 700; }
.resumen-puesto { font-weight: 700; color: #1f5f7c; }
#panel-resumen .acto { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #2f5f7c; margin-bottom: 4px; }
#panel-resumen .pregunta { font-weight: 600; }
#panel-resumen .respuesta { background: #fff; border: 3px solid var(--borde); border-left: 8px solid #3fae5a; padding: 6px 10px; }
#panel-resumen .fuente { font-size: 14px; color: #44525e; margin-bottom: 0; }

.estado { min-height: 1.3em; font-size: 15px; margin: 8px 0 6px !important; }
.estado.error { color: #a8231a; }
.estado.aviso { color: #6b4a00; font-weight: 700; }

/* ------------------------------------------------------------ ranking */
.lista-ranking { margin: 0; padding: 0; list-style: none; counter-reset: puesto; font-size: 17px; }
.lista-ranking li {
  counter-increment: puesto;
  display: grid;
  grid-template-columns: 2em 1fr auto;
  gap: 6px;
  padding: 3px 4px;
  border-bottom: 2px dotted rgba(28, 31, 38, .25);
}
.lista-ranking li::before { content: counter(puesto) "."; font-weight: 700; }
.lista-ranking li .pts { font-weight: 700; white-space: nowrap; }
.lista-ranking li.vos { background: var(--celeste); }
.lista-ranking li.vacio { display: block; border: 0; }
.lista-ranking li.vacio::before { content: none; }
.lista-ranking .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ partida */
#opciones-toque { position: absolute; inset: 0; pointer-events: none !important; }
.opcion-toque {
  position: absolute;
  pointer-events: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  color: transparent;
}
.opcion-toque:focus-visible { outline: 6px solid var(--foco); outline-offset: 6px; }

#explicacion-breve {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: min(900px, calc(var(--ancho) - 420px));
  margin: 0;
  padding: 8px 14px;
  background: rgba(20, 22, 27, .9);
  border-left: 8px solid #7fe08a;
  color: #fff;
  font: 700 19px/1.3 var(--letra);
  pointer-events: none !important;
}

#explicacion-breve.error { border-left-color: #ff6b6b; }

#controles { position: absolute; right: 18px; bottom: 12px; display: flex; gap: 10px; }
[data-estado="jugando"] #btn-efectos, [data-estado="cargando"] #controles { display: none; }

/* ------------------------------------------------------------ avisos */
#aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 15, 23, .82);
  z-index: 5;
}
#aviso .caja {
  background: var(--pantalla);
  border: 10px solid var(--cuerpo-2);
  outline: 4px solid var(--borde);
  padding: 26px 34px;
  max-width: min(760px, calc(var(--ancho) - 40px));
  font: 24px/1.45 var(--letra);
  text-align: center;
}
#aviso code { font-family: "Courier New", monospace; background: #fff; padding: 2px 8px; border: 2px solid var(--borde); }
.fila-botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.sin-js { color: #fff; font: 20px var(--letra); text-align: center; padding: 40px; }

/* ------------------------------------------------------------ vertical (celular parado)
   1 px del juego ≈ 0,5 px de la pantalla del celular: por eso todo va al doble. */
.vertical .panel { font-size: 30px; border-width: 12px; padding: 0 22px 18px; }
.vertical .panel h2 { font-size: 34px; padding: 10px 16px 10px 64px; background-size: 40px 28px; }
.vertical .lista-ranking { font-size: 30px; }
.vertical .estado { font-size: 27px; }
.vertical .tecla-bb { font-size: 32px; }
.vertical .tecla-bb.chica { font-size: 26px; }
.vertical .tecla-bb.grande { font-size: 44px; }

.vertical #form-jugar { left: 24px; right: 24px; width: auto; transform: none; top: 524px; padding: 12px 16px 6px; }
.vertical #form-jugar label { font-size: 28px; margin-bottom: 8px; }
.vertical #form-jugar label + input { margin-bottom: 12px; }
.vertical #form-jugar input { font-size: 34px; }
.vertical #btn-jugar { font-size: 40px; min-width: 200px; }
.vertical #form-jugar .estado { font-size: 26px; }
.vertical .cartel-ronda { top: 16px; width: auto; left: 24px; right: 24px; transform: none; font-size: 27px; }

.vertical .columna-paneles {
  position: absolute;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 6px 12px 16px 6px;
}
.vertical .columna-paneles .panel { position: relative; }
.vertical #menu .columna-paneles { top: 840px; bottom: 170px; }
.vertical #fin .columna-paneles { top: 520px; bottom: 120px; }

.vertical .botones-fin { top: 396px; left: 24px; right: 24px; transform: none; flex-direction: row; gap: 18px; }
.vertical #btn-otra { flex: 1; width: auto; min-height: 96px; }
.vertical #btn-menu { width: 220px; min-height: 96px; }

.vertical #explicacion-breve { left: 16px; right: 230px; width: auto; transform: none; bottom: 12px; font-size: 26px; }
.vertical #controles { right: 16px; bottom: 14px; }
.vertical #aviso .caja { font-size: 34px; padding: 30px; }
.vertical #panel-resumen .acto, .vertical #panel-resumen .fuente { font-size: 24px; }

/* ------------------------------------------------------------ animaciones de la capa HTML
   Usan `translate` y `scale` sueltos para no pisar los `transform` que ubican cada cosa.
   Al pasar de [hidden] a visible, la animación arranca de nuevo. */
@keyframes entrar-abajo { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes entrar-costado-izq { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes entrar-costado-der { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes saltar-boton {
  0% { opacity: 0; scale: .6; }
  60% { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}
@keyframes latir { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes resaltar {
  0% { background: #fff6a8; }
  100% { background: var(--celeste); }
}

.tecla-bb { transition: background-color .12s ease, transform .08s ease, box-shadow .08s ease; }

#form-jugar { animation: entrar-abajo .45s .45s cubic-bezier(.2, .8, .2, 1) both; }
.cartel-ronda { animation: entrar-abajo .4s .55s cubic-bezier(.2, .8, .2, 1) both; }
.horizontal #panel-top, .horizontal #panel-resumen { animation: entrar-costado-izq .45s .2s cubic-bezier(.2, .8, .2, 1) both; }
.horizontal #panel-historia, .horizontal #panel-ranking { animation: entrar-costado-der .45s .3s cubic-bezier(.2, .8, .2, 1) both; }
.vertical .columna-paneles .panel { animation: entrar-abajo .45s .35s cubic-bezier(.2, .8, .2, 1) both; }
.vertical .columna-paneles .panel + .panel { animation-delay: .45s; }

#btn-otra { animation: saltar-boton .5s .9s cubic-bezier(.34, 1.56, .64, 1) both, latir 1.6s 2s ease-in-out infinite; }
#btn-otra:hover, #btn-otra:focus-visible { animation-play-state: running, paused; }
#btn-menu { animation: saltar-boton .45s 1s cubic-bezier(.34, 1.56, .64, 1) both; }
.lista-ranking li.vos { animation: resaltar 1.2s 1s ease-out both; }

#explicacion-breve { animation: entrar-abajo .3s cubic-bezier(.2, .8, .2, 1) both; }
#aviso { animation: aparecer .2s ease-out both; }
#aviso .caja { animation: saltar-boton .35s cubic-bezier(.34, 1.56, .64, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.quieto *, .quieto *::before, .quieto *::after { animation: none !important; transition: none !important; }