/* El mundo de Pipo: el cielo de la foto de perfil del canal y el amarillo de Pipo. Pensado para el pulgar. */
@font-face { font-family: "Baloo 2"; src: url("/fuentes/baloo-2-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/fuentes/baloo-2-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --cielo-1: #62b6f6;
  --cielo-2: #2f86e0;
  --amarillo: #ffc83d;
  --amarillo-sombra: #c99700;
  --cafe: #3a2a00;
  --tinta: #13233a;
  --vidrio: rgba(255, 255, 255, 0.16);
  --sombra: rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--cielo-1), var(--cielo-2)) fixed;
  color: #fff;
  font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

.barra { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.marca { font-weight: 800; letter-spacing: 0.06em; font-size: 14px; opacity: 0.9; }
.idioma { background: var(--sombra); color: #fff; border: 0; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; }

main { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px 24px; }
.pantalla { display: flex; flex-direction: column; gap: 14px; }

.pipo {
  display: block; width: min(60vw, 250px); height: auto; aspect-ratio: 1; margin: 2px auto 0; object-fit: cover;
  border-radius: 50%; border: 5px solid var(--amarillo); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
h1, h2 { margin: 0; text-align: center; font-weight: 800; line-height: 1.05; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
h1 { font-size: clamp(30px, 8.5vw, 40px); }
h2 { font-size: clamp(24px, 7vw, 32px); }
.bajada { margin: 0; text-align: center; font-size: 17px; line-height: 1.3; }

.contador { background: var(--sombra); border-radius: 18px; padding: 12px; text-align: center; }
.contador b { display: block; color: var(--amarillo); font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.barra-progreso { height: 10px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.3); }
.barra-progreso i { display: block; height: 100%; width: 0; min-width: 6px; background: var(--amarillo); transition: width 0.6s; }

.podio { list-style: none; margin: 0; padding: 10px 14px; background: var(--vidrio); border-radius: 16px; }
.podio li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 17px; }
.podio .puesto { width: 1.4em; opacity: 0.8; }
.podio img { width: 32px; height: 24px; border-radius: 4px; object-fit: cover; }
.podio .n { margin-left: auto; font-variant-numeric: tabular-nums; }
.podio .vacio { justify-content: center; opacity: 0.9; }
.lista { max-height: 60dvh; overflow: auto; margin: 12px 0; }

.boton {
  appearance: none; width: 100%; border: 0; border-radius: 18px; padding: 16px; cursor: pointer;
  background: var(--amarillo); color: var(--cafe); font: inherit; font-weight: 800; font-size: 21px;
  box-shadow: 0 5px 0 var(--amarillo-sombra);
}
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--amarillo-sombra); }
.boton[disabled] { opacity: 0.6; }
.boton.secundario { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; font-size: 17px; padding: 13px; }
.enlace, .atras { align-self: center; background: none; border: 0; padding: 4px; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; }
.atras { align-self: flex-start; text-decoration: none; opacity: 0.9; }
.atras::before { content: "← "; }

form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
input, select { width: 100%; padding: 14px; border: 0; border-radius: 14px; background: #fff; color: var(--tinta); font: inherit; font-size: 18px; }
.pais-elegido { display: flex; align-items: center; gap: 10px; }
.pais-elegido img { flex: 0 0 auto; border-radius: 4px; }

.aviso { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sombra); font-size: 14px; line-height: 1.35; }
.chico { margin: 0; text-align: center; font-size: 13px; opacity: 0.92; }
.chico a, footer a { color: #fff; }
.error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; color: #b3261e; }
.aviso-global { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--tinta); }

dialog { width: min(92vw, 420px); max-height: 85dvh; border: 0; border-radius: 20px; padding: 18px; background: var(--cielo-2); color: #fff; }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

/* 3. Armar */
h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.marco-foto {
  width: min(72vw, 300px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 50%;
  border: 5px solid var(--amarillo); background: var(--sombra); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.marco-foto canvas, .marco-foto img { display: block; width: 100%; height: 100%; }
.grupo { background: var(--vidrio); border-radius: 16px; padding: 10px 12px; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion {
  position: relative; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px;
  border: 3px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, 0.15); color: #fff;
  font: inherit; font-size: 11px; line-height: 1.05; cursor: pointer;
}
.opcion img { width: 44px; height: 44px; }
.opcion[aria-pressed="true"] { border-color: var(--amarillo); background: rgba(255, 255, 255, 0.32); }
.opcion.bloqueada img { opacity: 0.45; filter: grayscale(1); }
.opcion .candado { position: absolute; top: 0; right: 2px; font-size: 14px; }
.frase { margin: 8px 0 0; font-size: 15px; line-height: 1.3; }
.resaltar { animation: resaltar 0.6s; }
/* Al tocar la vincha de fundador bloqueada: qué es y el botón para ganarla. */
.recuadro-fundador {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 14px; border-radius: 16px;
  background: var(--sombra); border: 2px solid var(--amarillo); text-align: center; scroll-margin: 20px;
}
.recuadro-fundador p { margin: 0; font-size: 15px; line-height: 1.35; }
.recuadro-fundador .recuadro-titulo { font-size: 18px; }
.recuadro-fundador .recuadro-titulo b { color: var(--amarillo); font-weight: 800; }
@keyframes resaltar { 30% { transform: scale(1.04); color: var(--amarillo); } }
/* Cómo pelea cada tropa (el campo de batalla): la ficha de la elegida, la tabla plegable y la composición de tu ejército. */
.espera-tropa { color: var(--amarillo); font-weight: 800; }
.opcion .reloj { position: absolute; top: 0; right: 2px; font-size: 14px; }
.ficha-tropa, .ficha { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); text-align: left; }
.ficha-tropa p, .ficha p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.ficha-tropa .numeros, .ficha .numeros { font-weight: 800; }
.tabla-tropas { margin-top: 10px; text-align: left; }
.tabla-tropas summary { cursor: pointer; font-weight: 800; font-size: 15px; color: var(--amarillo); }
.lista-tropas { display: flex; flex-direction: column; gap: 6px; }
.tu-ejercito { margin-top: 12px; text-align: left; }
.tu-ejercito h3 { margin: 0 0 6px; }
.tu-ejercito .chico { margin: 6px 0 0; }
.composicion { margin-top: 4px; }
.barra-composicion { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.leyenda { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.punto { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }

/* 4. Carnet */
.carnet-nombre { margin: -6px 0 0; text-align: center; color: var(--amarillo); font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.carnet-pais { margin: -8px 0 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 18px; }
.carnet-pais img { border-radius: 4px; object-fit: cover; }
.puesto-pais { margin: 0; text-align: center; font-size: 17px; }
.pila { display: flex; flex-direction: column; gap: 10px; }
.seguir { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--vidrio); }
.seguir p { margin: 0; text-align: center; font-size: 17px; font-weight: 800; line-height: 1.3; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones > * { flex: 1; }
a.boton { display: block; text-align: center; text-decoration: none; }
.llave { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--sombra); }
.llave p { margin: 0; font-size: 15px; line-height: 1.35; }
.llave input { font-size: 14px; padding: 10px 12px; }
.boton.peligro { background: #fff; color: #b3261e; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2); }
#imagen-grande { display: block; width: 100%; height: auto; margin-bottom: 10px; border-radius: 12px; }
#ver-imagen .chico { margin-bottom: 12px; }

/* Privacidad y términos: texto largo, alineado a la izquierda */
.legal main { max-width: 720px; padding-bottom: 32px; }
.legal a.marca, .legal a.idioma { color: #fff; text-decoration: none; }
.legal h1, .legal h2 { text-align: left; text-shadow: none; }
.legal h1 { margin: 4px 0 12px; font-size: clamp(28px, 7vw, 36px); }
.legal h2 { margin: 26px 0 8px; font-size: 21px; }
.legal p, .legal li { font-size: 16px; line-height: 1.55; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal main a { color: #fff; }
.legal .fecha { margin: 8px 0 0; font-size: 13px; opacity: 0.85; }
.legal hr { margin: 36px 0 20px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.4); }

footer { padding: 16px; text-align: center; font-size: 13px; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }