/* El perro de Juancho — estilos propios (sin Tailwind).
   Toda la interfaz se mide en cqw (ancho del contenedor .app), así el layout 9:16
   escala igual en un celular, en escritorio y en la vista de video 1080×1920. */

:root {
  --cafe-noche: #140902;
  --cafe-oscuro: #1c0e05;
  --cafe: #2e1606;
  --chocolate: #3d1d0a;
  --borde: #6b3a17;
  --naranja: #f7931e;
  --naranja-oscuro: #c2560c;
  --amarillo: #ffd23f;
  --crema: #fff4dc;
  --crema-suave: #e8cfa8;
  --rojo: #e53935;
  --verde: #3ecf7a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 15%, #3a1a07 0%, var(--cafe-noche) 70%);
  color: var(--crema);
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 0.6cqw solid var(--amarillo); outline-offset: 0.4cqw; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Marco 9:16 ---------- */
.app {
  position: relative;
  width: min(100vw, 100vh * 9 / 16, 540px);
  width: min(100vw, 100dvh * 9 / 16, 540px);
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cafe) 0%, var(--cafe-oscuro) 55%, var(--cafe-noche) 100%);
}
@media (min-width: 600px) {
  .app { border-radius: 4cqw; box-shadow: 0 0 0 0.5cqw var(--borde), 0 2cqw 8cqw rgba(0, 0, 0, 0.6); }
}

.interior {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  font-size: 3.8cqw;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- HUD ---------- */
.hud { padding: 2.5cqw 3cqw 1.5cqw; }
.hud-arriba { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.hud-logo { height: 13cqw; width: auto; display: block; filter: drop-shadow(0 0.6cqw 0.8cqw rgba(0,0,0,.5)); }
.hud-botones { display: flex; gap: 2cqw; }
.boton-icono {
  width: 11cqw; height: 11cqw; border-radius: 3cqw; font-size: 5cqw; line-height: 1;
  background: var(--chocolate); border: 0.5cqw solid var(--borde); display: grid; place-items: center;
}
.boton-icono:active { transform: translateY(0.4cqw); }
.marcador {
  margin-top: 2cqw;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw;
  background: rgba(0, 0, 0, 0.45); border: 0.4cqw solid rgba(247, 147, 30, 0.45); border-radius: 3cqw;
  padding: 1.5cqw 2cqw; text-align: center;
}
.marcador > div { display: grid; }
.etiqueta { font-size: 2.6cqw; color: var(--crema-suave); letter-spacing: 0.2cqw; font-weight: 600; }
.valor { font-size: 4.6cqw; font-weight: 700; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.valor.rojo { color: #ff8a65; }
.valor.vidas { font-size: 3.6cqw; letter-spacing: -0.3cqw; }

/* ---------- Tablero ---------- */
.tablero { position: relative; min-height: 0; margin: 0 1.5cqw; touch-action: none; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.medidor {
  position: absolute; top: 1cqw; left: 12%; right: 12%; text-align: center; pointer-events: none;
  font-size: 2.8cqw; font-weight: 700; color: var(--amarillo); text-shadow: 0 0.3cqw 0 #000;
}
.medidor .barra { height: 1.6cqw; margin-top: 0.6cqw; border-radius: 1cqw; background: #000; border: 0.3cqw solid var(--amarillo); overflow: hidden; }
#barraSuper { height: 100%; width: 100%; background: linear-gradient(90deg, var(--rojo), var(--naranja), var(--amarillo)); }
[hidden] { display: none !important; }

/* ---------- D-pad ---------- */
.controles { display: grid; justify-items: center; padding: 1cqw 0 2.5cqw; }
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 15cqw);
  grid-template-rows: repeat(3, 12.5cqw);
  gap: 1cqw;
  grid-template-areas: ". ar ." "iz ce de" ". ab .";
}
.flecha {
  touch-action: manipulation;
  border-radius: 3.5cqw; font-size: 5.5cqw; color: var(--amarillo);
  background: linear-gradient(160deg, var(--chocolate), #1f0d03);
  border: 0.5cqw solid var(--naranja);
  box-shadow: 0 1cqw 0 var(--naranja-oscuro);
}
.flecha:active, .flecha.activa { transform: translateY(0.8cqw); box-shadow: 0 0.2cqw 0 var(--naranja-oscuro); background: var(--naranja); color: var(--cafe-oscuro); }
.arriba { grid-area: ar; } .abajo { grid-area: ab; } .izquierda { grid-area: iz; } .derecha { grid-area: de; }
.dpad-centro { grid-area: ce; display: grid; place-items: center; opacity: 0.45; font-size: 5cqw; }
.ayuda-controles { margin: 1.2cqw 0 0; font-size: 2.6cqw; color: var(--crema-suave); opacity: 0.8; }
.promo-video { display: none; }

/* ---------- Capas (inicio, fin, ranking, pausa) ---------- */
.capa {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  gap: 2.2cqw; padding: 5cqw 6cqw; text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(61, 29, 10, 0.97), rgba(20, 9, 2, 0.98));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Centrado vertical que no corta el contenido de arriba cuando no cabe (a diferencia de justify-content: center). */
.capa > :first-child { margin-top: auto; }
.capa > :last-child { margin-bottom: auto; }
.capa.translucida { background: rgba(20, 9, 2, 0.82); }
.capa h2 { margin: 0; color: var(--amarillo); font-size: 8cqw; text-shadow: 0 0.6cqw 0 var(--naranja-oscuro); }
.logo-grande { width: 82cqw; height: auto; filter: drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.55)); }
.mascota { width: 46cqw; height: auto; filter: drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.55)); }
.mascota.pequena { width: 30cqw; }
.intro { margin: 0; max-width: 80cqw; line-height: 1.35; color: var(--crema); }
.intro b { color: #ff7a59; }
.leyenda {
  list-style: none; margin: 0; padding: 2cqw 3cqw; display: flex; gap: 4cqw; justify-content: center;
  background: rgba(0,0,0,.35); border-radius: 3cqw; border: 0.3cqw solid var(--borde);
  font-size: 3cqw; font-weight: 600; color: var(--crema-suave);
}
.leyenda li { display: grid; justify-items: center; gap: 0.5cqw; }
.leyenda span { font-size: 4.5cqw; }
.info-semana { margin: 0; font-size: 3.2cqw; color: var(--crema-suave); min-height: 1.2em; }
.aviso { margin: 0; padding: 2cqw 3cqw; border-radius: 3cqw; background: rgba(229, 57, 53, .2); border: 0.3cqw solid var(--rojo); }

.boton-principal, .boton-secundario {
  border: 0.5cqw solid var(--amarillo); border-radius: 4cqw; font-weight: 700; letter-spacing: 0.3cqw;
  touch-action: manipulation;
}
.boton-principal {
  padding: 3cqw 8cqw; font-size: 5cqw; color: var(--crema);
  background: linear-gradient(180deg, #ef4b2a, #c62828);
  box-shadow: 0 1.4cqw 0 #7f1d1d, 0 2.5cqw 4cqw rgba(0,0,0,.5);
}
.boton-secundario {
  padding: 2.4cqw 5cqw; font-size: 4cqw; color: var(--cafe-oscuro);
  background: linear-gradient(180deg, var(--amarillo), var(--naranja));
  box-shadow: 0 1cqw 0 var(--naranja-oscuro);
}
.boton-principal:active, .boton-secundario:active { transform: translateY(1cqw); box-shadow: 0 0.3cqw 0 #7f1d1d; }
.boton-principal:disabled, .boton-secundario:disabled { opacity: 0.55; cursor: default; }
.enlace { background: none; border: 0; color: var(--amarillo); text-decoration: underline; font-size: 3.4cqw; padding: 1cqw; }
.enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw; }

.titulo-fin { font-size: 8cqw; }
.subtitulo { margin: 0; color: var(--crema-suave); }
.resumen { margin: 0; width: 100%; max-width: 80cqw; display: grid; gap: 1cqw; padding: 3cqw 4cqw;
  background: rgba(0,0,0,.4); border-radius: 3cqw; border: 0.3cqw solid rgba(247,147,30,.5); }
.resumen div { display: flex; justify-content: space-between; gap: 2cqw; }
.resumen dt { color: var(--crema-suave); text-align: left; }
.resumen dd { margin: 0; font-weight: 700; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.resumen div:first-child dd { font-size: 5.5cqw; }
.estado-envio { margin: 0; font-size: 3.3cqw; min-height: 1.3em; }
.estado-envio.ok { color: var(--verde); }
.estado-envio.malo { color: #ff8a65; }
.botones-fin { display: flex; gap: 3cqw; flex-wrap: wrap; justify-content: center; align-items: center; }

.form-usuario { width: 100%; max-width: 82cqw; display: grid; gap: 1.6cqw; text-align: left;
  padding: 3cqw; border-radius: 3cqw; background: rgba(0,0,0,.35); border: 0.3cqw dashed var(--naranja); }
.form-usuario > label:first-child { font-weight: 600; }
.campo-ig { display: flex; align-items: center; background: #0e0601; border: 0.4cqw solid var(--borde); border-radius: 2.5cqw; padding: 0 2.5cqw; }
.campo-ig span { color: var(--crema-suave); font-weight: 700; }
.campo-ig input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--crema);
  /* 16px mínimo evita el zoom automático de iOS al enfocar */
  font: 600 max(16px, 4cqw) 'Fredoka', system-ui, sans-serif; padding: 2cqw 1cqw;
  user-select: text; -webkit-user-select: text;
}
.autorizacion { display: flex; gap: 2cqw; align-items: flex-start; font-size: 2.9cqw; line-height: 1.35; color: var(--crema-suave); }
.autorizacion input { width: 5cqw; height: 5cqw; flex: none; margin: 0; accent-color: var(--naranja); }
.autorizacion a { color: var(--amarillo); }
.error { margin: 0; color: #ff8a65; font-size: 3cqw; min-height: 1em; }
.form-usuario .boton-secundario { justify-self: center; }

.lista-ranking { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 80cqw; display: grid; gap: 1.2cqw; counter-reset: pos; }
.lista-ranking li {
  display: flex; justify-content: space-between; padding: 2cqw 3cqw; border-radius: 2.5cqw;
  background: rgba(0,0,0,.4); border: 0.3cqw solid var(--borde); font-weight: 600; counter-increment: pos;
}
.lista-ranking li::before { content: counter(pos) '.'; color: var(--crema-suave); width: 8cqw; text-align: left; }
.lista-ranking li span:first-child { flex: 1; text-align: left; }
.lista-ranking li:first-child { border-color: var(--amarillo); background: rgba(255, 210, 63, .15); }
.lista-ranking .vacio { justify-content: center; color: var(--crema-suave); }
.lista-ranking .vacio::before { content: none; }
.nota { margin: 0; font-size: 2.8cqw; color: var(--crema-suave); max-width: 80cqw; }

.toast {
  position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); z-index: 30;
  padding: 2.4cqw 4cqw; border-radius: 3cqw; background: rgba(0,0,0,.85); border: 0.3cqw solid var(--naranja);
  font-size: 3.2cqw; max-width: 90cqw; text-align: center;
}

/* ---------- Vista para grabar contenido: ?modo=video (1080×1920) ---------- */
body.modo-video { overflow: hidden; background: #000; }
body.modo-video .app {
  position: absolute; left: 50%; top: 50%;
  width: 1080px; aspect-ratio: auto; height: 1920px;
  border-radius: 0; box-shadow: none;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
}
body.modo-video .hud-logo { height: 20cqw; }
body.modo-video .hud-botones, body.modo-video .controles { display: none; }
body.modo-video .promo-video {
  display: flex; align-items: center; justify-content: center; gap: 4cqw; padding: 2cqw 5cqw 5cqw;
}
body.modo-video .promo-video img { width: 26cqw; height: auto; }
body.modo-video .promo-video p { margin: 0; font-size: 8cqw; font-weight: 700; color: var(--amarillo); line-height: 1.1; text-shadow: 0 0.6cqw 0 var(--naranja-oscuro); }
body.modo-video .promo-video p span { display: block; font-size: 4cqw; color: var(--crema); text-shadow: none; font-weight: 600; margin-top: 1cqw; }

@media (prefers-reduced-motion: reduce) {
  .boton-principal:active, .boton-secundario:active, .flecha:active { transform: none; }
}