/* juego.css — «¿Qué pasaría si…? El juego del 29N». Una sola cosa en pantalla cada vez, en grande.
   Fondo azul de De Madrid a Europa, cartas blancas y amarillo para lo que se pulsa. Un único aspecto,
   igual en claro y en oscuro: todos los colores van fijados aquí. */
body.juego { background: #003399; color: #ffffff; margin: 0; font-family: "Roboto", "Segoe UI", system-ui, sans-serif; min-height: 100vh; }
.j { max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(28px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; }
.j a { color: inherit; }
.j-marca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-weight: 900; font-size: 1.15rem; }
.j-marca a { text-decoration: none; display: flex; align-items: center; gap: 8px; color: #ffffff; }
.j-marca .m29 { background: #ffde59; color: #000; padding: 1px 8px 3px; border-radius: 7px; transform: rotate(-2deg); display: inline-block; }
.j-marca .j-dmae { font-family: "Kalam", cursive; font-weight: 700; font-size: .95rem; color: #ffde59; }
.j-carta { background: #ffffff; color: #000000; border-radius: 24px; padding: 22px 20px 20px; display: grid; gap: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.j-mano { font-family: "Kalam", "Segoe Print", cursive; font-weight: 700; font-size: 1.25rem; margin: 0; }
.j-titular { font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 900; line-height: 1.05; margin: 0; color: #003399; letter-spacing: -.01em; text-wrap: balance; }
.j-sub { margin: 0; color: #4d5670; font-size: .92rem; }
.j-hemi svg { width: 100%; height: auto; display: block; }
.j-bloques { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; text-align: center; }
.j-bloques b { display: block; font-size: 2.6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.j-bloques span { font-size: .78rem; color: #4d5670; }
.j-bloques { align-items: start; }
.j-bloques .j-176 { align-self: center; }
.j-bloques .j-176 b { font-size: 1.1rem; color: #000; background: #ffde59; border-radius: 999px; padding: 4px 10px; }
.j-bloques .j-may b { color: #003399; }
.j-cta { font: inherit; font-weight: 900; font-size: 1.3rem; background: #ffde59; color: #000000; border: 3px solid #000000; border-radius: 18px; padding: 16px 18px; cursor: pointer; display: grid; gap: 2px; text-align: center; width: 100%; box-shadow: 0 6px 0 #000000; }
.j-cta small { font-weight: 500; font-size: .85rem; }
/* Reto: quien llega por el enlace de un amigo ve su nota; al final, quién ha ganado */
.j-reto { margin: 0; background: #003399; color: #ffffff; border-radius: 16px; padding: 12px 16px; font-weight: 900; font-size: 1.25rem; display: grid; gap: 2px; text-align: center; }
.j-reto small { font-weight: 500; font-size: .9rem; color: #ffde59; }
.j-duelo { margin: 0; font-weight: 900; font-size: 1.1rem; border-radius: 14px; padding: 10px 14px; text-align: center; }
.j-duelo.j-gana { background: #e3f3ea; color: #1f7a4a; }
.j-duelo.j-empata { background: #fff3b8; color: #000000; }
.j-duelo.j-pierde { background: #fbe4e1; color: #a12d22; }
.j-cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #000000; }
.j-cta:focus-visible, .j-opcion:focus-visible, .j-red:focus-visible, .j-sec:focus-visible { outline: 3px solid #ffde59; outline-offset: 3px; }
.j-mesa { display: grid; gap: 8px; }
.j-mesa label { font-weight: 900; font-size: 1.05rem; }
.j-mesa div { display: flex; gap: 8px; }
.j-mesa input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 14px; border: 2px solid #000; background: #fff; color: #000; }
.j-mesa button { font: inherit; font-weight: 900; padding: 0 16px; border-radius: 14px; border: 2px solid #000; background: #003399; color: #fff; cursor: pointer; }
.j-mesa p { margin: 0; font-size: .82rem; color: #4d5670; min-height: 1.2em; }
.j-pie { text-align: center; font-size: .82rem; color: #c9d3ea; display: grid; gap: 6px; }
.j-pie a { color: #ffffff; font-weight: 700; }
.j-pie .enlace-pie { color: #c9d3ea; }

/* Pregunta */
.j-barra { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #ffffff; }
.j-progreso { flex: 1; height: 8px; background: rgba(255, 255, 255, .25); border-radius: 999px; margin: 0 12px; overflow: hidden; }
.j-progreso span { display: block; height: 100%; background: #ffde59; border-radius: 999px; }
.j-puntos { background: #ffde59; color: #000; border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; }
.j-preg { font-size: clamp(1.7rem, 7.4vw, 2.4rem); font-weight: 900; line-height: 1.08; margin: 0; color: #003399; text-wrap: balance; }
.j-apuesta { margin: 0; font-weight: 700; font-size: 1.05rem; }
.j-opciones { display: grid; gap: 10px; }
.j-opcion { font: inherit; font-weight: 900; font-size: 1.35rem; padding: 14px; border-radius: 16px; border: 3px solid #003399; background: #ffffff; color: #003399; cursor: pointer; font-variant-numeric: tabular-nums; }
.j-opcion:hover { background: #eef2fb; }
.j-opcion[disabled] { cursor: default; opacity: .45; }
.j-opcion.j-ok { background: #1f7a4a; border-color: #1f7a4a; color: #fff; opacity: 1; }
.j-opcion.j-mal { background: #c0392b; border-color: #c0392b; color: #fff; opacity: 1; }
.j-veredicto { margin: 0; font-size: 1.5rem; font-weight: 900; }
.j-veredicto.j-si { color: #1f7a4a; }
.j-veredicto.j-no { color: #c0392b; }
.j-numero { margin: 0; font-size: 3.6rem; font-weight: 900; line-height: 1; color: #003399; font-variant-numeric: tabular-nums; }
.j-numero small { font-size: 1.1rem; font-weight: 700; color: #000; }
.j-frase { margin: 0; font-size: 1.08rem; font-weight: 500; line-height: 1.35; }
.j-carta details summary { cursor: pointer; font-weight: 700; color: #003399; }
.j-carta details p { margin: 8px 0 0; font-size: .88rem; color: #4d5670; }
.j-redes { display: flex; flex-wrap: wrap; gap: 6px; }
.j-comparte { margin: 6px 0 -6px; font-size: .85rem; color: #4d5670; font-weight: 700; }
.j-sec { font: inherit; font-weight: 900; font-size: 1.05rem; background: #fff; color: #003399; border: 3px solid #003399; border-radius: 16px; padding: 12px 16px; cursor: pointer; width: 100%; }
.j-sec:active { transform: translateY(2px); }
.j-msg { margin: 0; min-height: 1.2em; font-size: .88rem; font-weight: 700; color: #003399; }
.j-red { font-size: .85rem; font-weight: 700; text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 2px solid #003399; color: #003399; background: #fff; cursor: pointer; font-family: inherit; }
.j-revela { display: grid; gap: 12px; }
.j-oculto { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .j-carta { animation: j-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
  .j-revela { animation: j-entra .35s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes j-entra { from { opacity: 0; transform: translateY(14px); } }

/* Final */
.j-nota { margin: 0; font-size: 5rem; font-weight: 900; line-height: 1; color: #003399; font-variant-numeric: tabular-nums; }
.j-nota small { font-size: 1.6rem; color: #000; }
.j-rango { margin: 0; font-size: 1.6rem; font-weight: 900; }
.j-propon { display: grid; gap: 8px; }
.j-propon textarea { font: inherit; padding: 10px 12px; border-radius: 14px; border: 2px solid #000; min-height: 90px; resize: vertical; background: #fff; color: #000; }
.j-propon .check { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; }
.j-propon .check input { margin-top: 3px; }
.j-propon button { justify-self: start; font: inherit; font-weight: 900; padding: 10px 18px; border-radius: 999px; border: 2px solid #003399; background: #003399; color: #fff; cursor: pointer; }
.j-propon p { margin: 0; min-height: 1.2em; font-weight: 700; color: #003399; }
.j-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* La Porra del 29N: nombre, puntos y rapidez */
.j-titulo { margin: 0; font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #003399; }
.j-reglas { text-align: center; }
.j-rapidez { height: 6px; background: #e3e8f3; border-radius: 999px; overflow: hidden; }
.j-rapidez span { display: block; height: 100%; background: #003399; transform-origin: left center; animation: j-tiempo linear forwards; }
.j-rapidez.j-parado span { animation-play-state: paused; }
@keyframes j-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .j-rapidez { display: none; } }
.j-ganados { display: block; margin-top: 2px; font-size: 1rem; font-weight: 700; color: #000; }
.j-ganados small { font-weight: 400; color: #4d5670; }
.j-detalle { margin: -6px 0 0; font-weight: 700; color: #4d5670; }
.j-nota small { margin-left: 6px; }

/* Recibe tu resultado por correo */
.j-correo { display: grid; gap: 8px; }
.j-correo-campo { display: flex; gap: 8px; }
.j-correo-campo input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 14px; border: 2px solid #000; background: #fff; color: #000; }
.j-correo-campo button { font: inherit; font-weight: 900; padding: 0 16px; border-radius: 14px; border: 2px solid #000; background: #003399; color: #fff; cursor: pointer; }
.j-correo-campo button:disabled { opacity: .6; cursor: wait; }
.j-correo .check { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; }
.j-correo .check input { margin-top: 3px; flex: none; }
.j-correo p[role="status"] { margin: 0; min-height: 1.2em; font-weight: 700; color: #003399; }

/* Buscador de municipios en la portada del juego: mismos colores fijos que el resto del juego */
.j .ac-lista { background: #ffffff; color: #000000; border-color: #003399; }
.j .ac-op small { color: #4d5670; }
.j .ac-op[aria-selected="true"], .j .ac-op:hover { background: #eef2fb; }