/* =========================================================
   PAYA, PO — estilo brutalista, colorido y juguetón
   Diseñado para caber completo en una pantalla de celular
   (sin scroll) desde 360×640 hasta 430×932.
   ========================================================= */
:root {
  --cream: #F6EEDC;
  --cream-2: #FFF8E8;
  --ink: #1B1B1F;
  --coral: #FF5A4E;
  --mustard: #F5C542;
  --blue: #3B6CF6;
  --green: #2FB36B;
  --border: 4px;
  --radius: 22px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gap: clamp(6px, 1.4vh, 14px);
  --alto-guirnalda: 38px;

  /* Patrón de banderitas chilenas (SVG en línea, tile de 180×180) */
  --patron-banderas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cg id='f'%3E%3Crect x='-15' y='-10' width='30' height='20' rx='2' fill='%23fff' stroke='%231B1B1F' stroke-width='1.6'/%3E%3Crect x='-15' y='-10' width='10' height='10' fill='%233B6CF6'/%3E%3Crect x='-15' y='0' width='30' height='10' fill='%23FF5A4E'/%3E%3Cpolygon points='-10,-8.4 -9.18,-6.13 -6.77,-6.05 -8.67,-4.57 -8,-2.25 -10,-3.6 -12,-2.25 -11.33,-4.57 -13.23,-6.05 -10.82,-6.13' fill='%23fff'/%3E%3Crect x='-15' y='-10' width='30' height='20' rx='2' fill='none' stroke='%231B1B1F' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='t'%3E%3Cpolygon points='-6,-5 6,-5 0,6' stroke='%231B1B1F' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3C/defs%3E%3Cg opacity='0.17'%3E%3Cuse href='%23f' transform='translate(34 30) rotate(-12)'/%3E%3Cuse href='%23f' transform='translate(128 58) rotate(10)'/%3E%3Cuse href='%23f' transform='translate(60 128) rotate(7)'/%3E%3Cuse href='%23f' transform='translate(150 150) rotate(-9)'/%3E%3Cuse href='%23t' fill='%23F5C542' transform='translate(96 16) rotate(20)'/%3E%3Cuse href='%23t' fill='%232FB36B' transform='translate(14 90) rotate(-25)'/%3E%3Cuse href='%23t' fill='%23FF5A4E' transform='translate(110 110) rotate(35)'/%3E%3Cuse href='%23t' fill='%233B6CF6' transform='translate(168 92) rotate(-15)'/%3E%3Cuse href='%23t' fill='%23F5C542' transform='translate(20 160) rotate(12)'/%3E%3Ccircle cx='80' cy='80' r='2.6' fill='%231B1B1F'/%3E%3Ccircle cx='160' cy='22' r='2.6' fill='%231B1B1F'/%3E%3Ccircle cx='100' cy='166' r='2.6' fill='%231B1B1F'/%3E%3C/g%3E%3C/svg%3E");

  /* Guirnalda de banderines (tile de 128×40, se repite horizontal) */
  --guirnalda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='40' viewBox='0 0 128 40'%3E%3Cpath d='M0 4 Q 32 12 64 4 T 128 4' fill='none' stroke='%231B1B1F' stroke-width='3'/%3E%3Cg stroke='%231B1B1F' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpolygon points='2,5 30,7.5 16,36' fill='%23FF5A4E'/%3E%3Cpolygon points='34,8 62,5 48,34' fill='%23F5C542'/%3E%3Cpolygon points='66,5 94,7.5 80,36' fill='%233B6CF6'/%3E%3Cpolygon points='98,8 126,5 112,34' fill='%232FB36B'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  background-color: var(--cream);
  background-image: var(--patron-banderas);
  background-size: 180px 180px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Columna móvil centrada en escritorio */
.app {
  position: relative;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--cream);
  background-image: var(--patron-banderas);
  background-size: 180px 180px;
  padding: calc(var(--alto-guirnalda) - 8px + env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
/* Guirnalda colgando del borde superior */
.app::before {
  content: "";
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: var(--alto-guirnalda);
  background-image: var(--guirnalda);
  background-repeat: repeat-x;
  background-size: 128px 40px;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
}
.app > .vista { position: relative; z-index: 1; }
@media (min-width: 480px) {
  .app {
    border-left: var(--border) solid var(--ink);
    border-right: var(--border) solid var(--ink);
  }
}

.vista {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
  min-height: 0;
}
.vista[hidden] { display: none; }
.vista-inicio { justify-content: space-between; }

/* ---------- Tipografía ---------- */
h1, h2, .btn, .logo, .palabra, .timer-num {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Hero / Inicio ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: clamp(10px, 2.2vh, 24px) 8px 0;
}
.logo {
  margin: 0;
  font-size: clamp(36px, 11vw, 50px);
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--mustard);
  display: inline-block;
  transform: rotate(-2deg);
}
.logo .bandera { text-shadow: none; display: inline-block; transform: rotate(8deg); }
.subtitulo {
  margin: clamp(6px, 1.2vh, 12px) auto 0;
  display: inline-block;
  background: var(--blue);
  color: #fff;
  border: var(--border) solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: clamp(13px, 1.7vh, 16px);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  transform: rotate(1.5deg);
}
.intro {
  margin: clamp(8px, 1.4vh, 14px) 0 0;
  font-size: clamp(14px, 1.8vh, 17px);
  font-weight: 700;
  line-height: 1.3;
}

.sticker {
  position: absolute;
  font-size: 28px;
  filter: drop-shadow(2px 2px 0 var(--ink));
  pointer-events: none;
  user-select: none;
}
.sticker-1 { top: 2px; left: 0; transform: rotate(-14deg); }
.sticker-2 { top: 0; right: 4px; transform: rotate(14deg); }

/* ---------- Mascota (el Huaso) ---------- */
.mascota-zona {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(150px, 34vh, 320px);
  flex: 0 0 auto;
}
.mascota {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(6px 6px 0 var(--ink));
}

.globo {
  position: absolute;
  right: clamp(4px, 8vw, 40px);
  top: 8%;
  background: var(--cream-2);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.8vh, 17px);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(6deg);
}
.globo::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  background: var(--cream-2);
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}

/* ---------- Tarjetas ---------- */
.card {
  position: relative;
  background: var(--cream-2);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(12px, 2vh, 22px) 18px;
}
.card-principal {
  background: var(--mustard);
  text-align: center;
  margin-right: 6px; /* espacio para la sombra */
}
.card-titulo {
  margin: clamp(8px, 1.4vh, 14px) 0 clamp(4px, 1vh, 10px);
  font-size: clamp(24px, 7.5vw, 34px);
}
.card-texto {
  margin: 0 0 clamp(10px, 1.8vh, 18px);
  font-size: clamp(14px, 1.8vh, 17px);
  line-height: 1.3;
}

.chip {
  display: inline-block;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
}
.chip-coral { background: var(--coral); color: #fff; }
.chip-ink { background: var(--ink); color: var(--mustard); }

.nota {
  margin: 0 0 6px;
  text-align: center;
  font-size: clamp(13px, 1.6vh, 15px);
  font-weight: 500;
}
.nota strong { font-weight: 900; }

/* ---------- Botones ---------- */
.btn {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  border: var(--border) solid var(--ink);
  border-radius: 18px;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 18px;
  padding: clamp(11px, 1.8vh, 16px) 16px;
  box-shadow: var(--shadow);
  transition: transform 90ms ease, box-shadow 90ms ease;
  touch-action: manipulation;
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-xl { font-size: clamp(22px, 6.5vw, 28px); padding: clamp(13px, 2.2vh, 20px) 16px; }
.btn-med { font-size: 17px; padding: 12px 14px; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-mustard { background: var(--mustard); color: var(--ink); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-cream { background: var(--cream-2); }
.btn-mini {
  width: auto;
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: none;
  font-size: 14px;
  padding: 8px 12px;
  border-width: 3px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.btn-mini:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

@keyframes rebote {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.94); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.btn.rebote { animation: rebote 260ms ease-out; }

/* ---------- Vista ruleta ---------- */
.vista-ruleta { justify-content: space-between; }
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.barra-titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  margin-left: auto;
}

.ruleta-zona {
  position: relative;
  width: min(92vw, 46dvh, 380px);
  margin: 0 auto;
  padding-top: 16px;
  flex: 0 0 auto;
}
.puntero {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 38px solid var(--ink);
}
.puntero::after {
  content: "";
  position: absolute;
  left: -13px;
  top: -36px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 25px solid var(--coral);
}
.ruleta-wrap {
  border-radius: 50%;
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--ink);
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
}
.ruleta {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.ruleta.girando {
  transition: transform 2.8s cubic-bezier(0.12, 0.8, 0.18, 1);
}
.ruleta text { font-family: var(--font-body); pointer-events: none; user-select: none; }
.ruleta .etiqueta {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@keyframes tiriton {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-4px, 2px) rotate(-1.5deg); }
  40% { transform: translate(4px, -2px) rotate(1.5deg); }
  60% { transform: translate(-3px, 1px) rotate(-1deg); }
  80% { transform: translate(3px, -1px) rotate(1deg); }
}
.ruleta-wrap.tiritando { animation: tiriton 380ms ease-out; }

.frase {
  margin: 0;
  text-align: center;
  font-size: clamp(15px, 2vh, 18px);
  font-weight: 900;
  min-height: 1.3em;
  transform: rotate(-1deg);
}
.frase-chica {
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  opacity: 0.85;
  transform: none;
}

/* ---------- Modo endiochado (interruptor) ---------- */
.modo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-2);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
  margin-right: 4px;
  transition: background 150ms ease;
}
.modo input { position: absolute; opacity: 0; width: 0; height: 0; }
.modo-switch {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 30px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  transition: background 150ms ease;
}
.modo-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 150ms ease;
}
.modo-texto { display: flex; flex-direction: column; line-height: 1.15; }
.modo-texto strong { font-size: 15px; font-weight: 900; }
.modo-texto small { font-size: 12px; font-weight: 500; }
.modo.activo { background: var(--ink); color: var(--mustard); }
.modo.activo .modo-switch { background: var(--coral); }
.modo.activo .modo-switch::after { transform: translateX(24px); background: var(--cream-2); }

/* ---------- Tarjeta de desafío ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet[hidden] { display: none; }
.sheet-fondo { position: absolute; inset: 0; background: rgba(27, 27, 31, 0.55); }
.desafio-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  border-bottom: 0;
  box-shadow: none;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  animation: subir 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.desafio-card.coral   { background: var(--coral); color: #fff; }
.desafio-card.mustard { background: var(--mustard); }
.desafio-card.blue    { background: var(--blue); color: #fff; }
.desafio-card.green   { background: var(--green); color: #fff; }
.desafio-card.ink     { background: var(--ink); color: var(--cream-2); border-color: var(--coral); }
.desafio-card.ink .chip { background: var(--coral); color: #fff; border-color: var(--cream-2); box-shadow: 3px 3px 0 var(--coral); }
.desafio-card.ink .texto { border-color: var(--coral); }

.desafio-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 28px;
}
.mascota-mini {
  position: absolute;
  right: 10px;
  top: -6px;
  height: 88px;
  width: auto;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform: rotate(6deg);
}
.mascota-mini[hidden] { display: none; }

.desafio-titulo {
  margin: 10px 0 4px;
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.05;
  padding-right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.icono-titulo {
  height: 1.5em;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.tema {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.tema span {
  display: inline-block;
  background: var(--cream-2);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 5px 11px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
}
.texto {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.9vh, 17px);
  line-height: 1.3;
  font-weight: 700;
  border-left: 5px solid var(--ink);
  padding-left: 12px;
}

.palabras {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 8px 0 4px;
}
.palabra {
  background: var(--cream-2);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: 14px;
  padding: clamp(8px, 1.3vh, 12px) 12px;
  text-align: center;
  font-size: clamp(22px, 6.5vw, 28px);
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}
.palabra:nth-child(1) { transform: rotate(-1.2deg); }
.palabra:nth-child(2) { transform: rotate(0.8deg); }
.palabra:nth-child(3) { transform: rotate(-0.6deg); }

.timer-zona { margin-top: 12px; }
.timer-display {
  background: var(--cream-2);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  padding: 6px;
}
.timer-num { font-size: 52px; line-height: 1; display: block; }
.timer-display.urgente { background: var(--coral); color: #fff; }
.timer-fin {
  margin: 8px 0 0;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.respuesta-zona { margin-top: 12px; }
.respuesta {
  margin: 8px 0 0;
  background: var(--cream-2);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 12px;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

/* Castigo: el sorbo */
.castigo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  background: var(--cream-2);
  color: var(--ink);
  border: var(--border) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}
.castigo[hidden] { display: none; }
.mascota-castigo { height: 96px; width: auto; flex: 0 0 auto; filter: drop-shadow(3px 3px 0 var(--ink)); }
.castigo p { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.25; }

.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.acciones .btn { font-size: 15px; padding: 13px 8px; }
.acciones .btn-ancho { grid-column: 1 / -1; font-size: 17px; }
.acciones .btn[hidden] { display: none; }

/* Pantallas cortas (celulares chicos): inicio y tarjeta más compactos */
@media (max-height: 700px) {
  .mascota-zona { height: clamp(140px, 29vh, 220px); }
  .hero { padding-top: 4px; }
  .intro { margin-top: 6px; }
  .nota { margin-bottom: 2px; }
  .desafio-card { padding-top: 12px; }
  .desafio-titulo { font-size: clamp(20px, 6vw, 26px); margin: 8px 0 2px; }
  .tema { font-size: 14px; margin: 2px 0 4px; }
  .palabras { gap: 5px; margin: 6px 0 2px; }
  .palabra { font-size: clamp(18px, 5.5vw, 22px); padding: 6px 10px; }
  .texto { font-size: 14px; margin-top: 6px; }
  .timer-zona, .respuesta-zona, .castigo { margin-top: 8px; }
  .timer-num { font-size: 38px; }
  .timer-fin { font-size: 15px; margin-top: 4px; }
  .mascota-castigo { height: 72px; }
  .acciones { margin-top: 10px; gap: 8px; }
  .acciones .btn { padding: 10px 8px; font-size: 14px; }
  .frase-chica { display: none; }
}

/* ---------- Accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .ruleta.girando { transition-duration: 1.2s; }
  .desafio-card { animation-duration: 120ms; }
  .btn.rebote, .ruleta-wrap.tiritando { animation: none; }
}