:root {
  --bg1: #6366f1; --bg2: #ec4899;
  --card: #fff; --texto: #1e1b4b; --suave: #6b7280;
  --primario: #f59e0b; --ok: #22c55e; --mal: #ef4444;
  --radio: 20px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
  color: var(--texto); min-height: 100dvh;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; touch-action: manipulation;
}
#app {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.pantalla {
  display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; text-align: center;
}
.pantalla.activa { display: flex; }
.oculto { display: none !important; }

h1 { color: #fff; font-size: clamp(1.8rem, 7.5vw, 2.8rem); line-height: 1.15; margin: 0; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
h2 { color: #fff; font-size: clamp(1.6rem, 7vw, 2.6rem); margin: 0; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.sub { color: #fff; opacity: .9; font-size: 1.2rem; margin: 0; }

button {
  font: inherit; cursor: pointer; border: 0; border-radius: var(--radio);
  color: var(--texto); background: var(--card); padding: 14px 22px;
  font-size: 1.2rem; font-weight: 700; min-height: 56px;
  box-shadow: 0 6px 0 rgba(0,0,0,.15); transition: transform .08s, box-shadow .08s;
}
button:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
button:disabled { opacity: .5; cursor: default; }
.grande { font-size: 1.7rem; padding: 18px 40px; min-height: 72px; width: 100%; }
.primario { background: var(--primario); color: #fff; }
.secundario { background: rgba(255,255,255,.25); color: #fff; }
.practica { background: var(--card); color: var(--bg1); }
.chico { font-size: .95rem; padding: 8px 14px; min-height: 40px; box-shadow: none; }
.peligro { background: transparent; color: #fff; opacity: .75; box-shadow: none; }
.fila { display: flex; gap: 12px; width: 100%; }
.fila > * { flex: 1; }
.tarjeta { background: var(--card); border-radius: var(--radio); padding: 16px; width: 100%; }

/* Selector de tablas */
.tablas p { margin: 0 0 10px; font-weight: 700; }
#chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  min-height: 48px; min-width: 48px; padding: 0 10px; font-size: 1.2rem;
  background: #eef2ff; color: var(--texto); box-shadow: none;
}
.chip.on { background: var(--bg1); color: #fff; }

/* Juego */
#juego { justify-content: flex-start; gap: 12px; }
#juego header { display: flex; justify-content: space-between; width: 100%; color: #fff; font-size: 1rem; }
#juego header > div { flex: 1; }
#terminar { margin-bottom: 8px; }
#juego header b { font-size: 1.5rem; display: block; font-variant-numeric: tabular-nums; }
#juego header b.pulso { animation: pulso .5s; }
@keyframes pulso { 50% { transform: scale(1.5); color: #fde68a; } }
.barra { width: 100%; height: 16px; background: rgba(0,0,0,.25); border-radius: 8px; overflow: hidden; }
#barraFill { height: 100%; width: 100%; transform-origin: left; background: var(--ok); }
.segundos { color: #fff; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pregunta {
  background: var(--card); border-radius: var(--radio); width: 100%; padding: 24px 12px;
  font-size: clamp(3rem, 16vw, 6rem); font-weight: 800; line-height: 1; margin-top: auto;
}
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin: auto 0; }
.opciones button { font-size: clamp(1.8rem, 9vw, 3rem); min-height: 100px; padding: 10px; }
.opciones button.ok { background: var(--ok); color: #fff; }
.opciones button.mal { background: var(--mal); color: #fff; }
.flotante {
  position: fixed; left: 50%; top: 40%; transform: translateX(-50%);
  color: #fff; font-size: 2.6rem; font-weight: 900; pointer-events: none; opacity: 0;
  text-shadow: 0 3px 0 rgba(0,0,0,.25); white-space: nowrap;
}
.flotante.anim { animation: subir .9s ease-out forwards; }
@keyframes subir {
  0% { opacity: 1; transform: translate(-50%, 0) scale(.8); }
  100% { opacity: 0; transform: translate(-50%, -120px) scale(1.2); }
}
.temblor { animation: temblar .4s; }
@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* Fin */
.resultado { background: var(--card); border-radius: var(--radio); padding: 20px 48px; font-weight: 700; }
.resultado .num { font-size: 4.5rem; font-weight: 900; line-height: 1; }
#finDetalle { color: #fff; font-size: 1.8rem; font-weight: 800; margin: 0; }
.stats { color: #fff; font-size: 1.1rem; }
#formNombre { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#formNombre p { color: #fff; margin: 0; font-size: 1.2rem; font-weight: 700; }
#nombre {
  font: inherit; font-size: 1.5rem; font-weight: 700; text-align: center; padding: 14px;
  border-radius: var(--radio); border: 0; width: 100%; color: var(--texto);
}
#finBotones { display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* Ranking */
#lista { list-style: none; padding: 0; margin: 0; width: 100%; background: var(--card); border-radius: var(--radio); overflow: hidden; }
#lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #eee; font-size: 1.1rem; cursor: pointer; }
#lista li:active { background: #eef2ff; }
#lista li:last-child { border-bottom: 0; }
#lista li.nuevo { background: #fef3c7; }
#lista .pos { width: 2.2em; font-weight: 800; text-align: left; }
#lista .nom { flex: 1; text-align: left; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista .det { color: var(--suave); font-size: .85rem; text-align: right; }
#lista .pts { font-weight: 900; font-size: 1.2rem; min-width: 3em; text-align: right; }
#lista .ver { background: #eef2ff; color: var(--bg1); min-width: 44px; min-height: 44px; padding: 0; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; }
.icono { width: 1.1em; height: 1.1em; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -0.15em; }
#lista .ver .icono { width: 22px; height: 22px; }
.pista .icono { width: 1em; height: 1em; }
.pista { color: #fff; opacity: .85; margin: 0; font-size: 1rem; }
.modos { font-size: .95rem; line-height: 1.4; margin-top: -8px; }
.version { color: #fff; opacity: .6; font-size: .8rem; margin: 0; }

/* Detalle de un puntaje */
.tarjetaPuntaje {
  background: var(--card); border-radius: 28px; padding: 28px 20px 20px; width: 100%;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tpPos { font-size: 4rem; line-height: 1; }
.tpPos.num { font-size: 2.4rem; font-weight: 900; color: var(--bg1); background: #eef2ff; border-radius: 999px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.tpNombre { font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 800; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpPuntos { font-size: clamp(4rem, 22vw, 6.5rem); font-weight: 900; line-height: 1; margin-top: 8px; color: var(--bg1); font-variant-numeric: tabular-nums; }
.tpLabel { color: var(--suave); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; }
.tpStats { display: flex; gap: 8px; width: 100%; margin-top: 18px; }
.tpStats > div { flex: 1; background: #f3f4ff; border-radius: 16px; padding: 10px 4px; display: flex; flex-direction: column; }
.tpStats b { font-size: 1.5rem; font-weight: 900; }
.tpStats span { color: var(--suave); font-size: .8rem; font-weight: 700; }
.tpFecha { color: var(--suave); font-size: .95rem; margin-top: 14px; }
.tpPie { color: var(--suave); font-size: .85rem; font-weight: 700; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; width: 100%; line-height: 1.5; }
.tpPie span { font-weight: 400; }

/* Inicio */
.logo { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.juegoBtn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; }
.juegoBtn .emoji { font-size: 2.4rem; }
.juegoBtn .txt { display: flex; flex-direction: column; gap: 4px; }
.juegoBtn b { font-size: 1.15rem; line-height: 1.2; }
.juegoBtn small { color: var(--suave); font-weight: 500; font-size: .9rem; }