/*
 * ¡A dibujar! — estilos de la interfaz.
 * Compatibilidad: navegadores móviles actuales y TV LG webOS 5+ (Chromium 68).
 * Por eso se evitan: CSS Grid (webOS 4 y anteriores no lo soportan), gap en flexbox, aspect-ratio, clamp()/min()/max(), inset, :focus-visible.
 */
/* Tipo de letra incluido en la app para que se vea igual en todos los dispositivos (TV incluida) */
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; src: url("../fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; src: url("../fonts/nunito-900.woff2") format("woff2"); }

:root {
  --bg: #fff4df;
  --ink: #2b2738;
  --hl: #ff3d81;
  --sun: #ffc93c;
  --sky: #4cc3ff;
  --grass: #5ad06b;
  --tomato: #ff6b5b;
  --paper: #ffffff;
  --radius: 1.4rem;
  --border: 0.25rem;
}

html { font-size: 16px; height: 100%; }
@media (min-width: 700px) and (min-height: 500px) { html { font-size: 19px; } }
@media (min-width: 1100px) and (min-height: 700px) { html { font-size: 22px; } }
@media (min-width: 1700px) and (min-height: 950px) { html { font-size: 30px; } }

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(#f2d6a2 0.09rem, transparent 0.11rem);
  background-size: 1.4rem 1.4rem;
  font-family: "Nunito", "Varela Round", ui-rounded, "Segoe UI Rounded", "Trebuchet MS", "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
button::-moz-focus-inner { border: 0; }

/* Iconos de línea */
button svg, .title-icon, .done-sub svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg .dot { fill: currentColor; stroke: none; }

/* Botón "pegatina" con relieve */
.chunky, .big-btn, .icon-btn, .nav-btn, .act-btn, .card-btn, .lang-btn {
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 0.35rem 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s;
}
.big-btn:active, .icon-btn:active, .nav-btn:active, .act-btn:active, .card-btn:active, .lang-btn:active {
  transform: translateY(0.3rem);
  box-shadow: 0 0.05rem 0 var(--ink);
}

/* Foco visible con mando/teclado (TV) */
body.using-keys button:focus {
  box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.55rem var(--hl);
  transform: scale(1.06);
  position: relative;
  z-index: 2;
}

/* ---------- Pantallas ---------- */
.screen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.screen.active { display: flex; animation: screen-in 0.28s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }

/* Margen de seguridad (overscan) en televisores */
.tv .screen { padding: 2.5vh 3vw; }

/* ---------- Barra superior ---------- */
.bar {
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem 0.7rem;
  flex: 0 0 auto;
}
.bar-title {
  flex: 1 1 auto;
  margin: 0 0.8rem;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.15;
}
.icon-btn {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg { width: 1.9rem; height: 1.9rem; }
.btn-random-sm { background: var(--sun); }

/* ---------- INICIO ---------- */
#screen-home { align-items: center; justify-content: space-around; padding: 1rem; }

.lang {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  z-index: 3;
}
.lang-btn {
  margin-left: 0.5rem;
  min-width: 3.2rem;
  height: 2.6rem;
  padding: 0 0.6rem;
  border-radius: 1rem;
  background: var(--paper);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 0.25rem 0 var(--ink);
}
.lang-btn.is-active { background: var(--hl); color: #fff; }

.home-hero { text-align: center; margin-top: 2.5rem; }
.stickers { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 1rem; }
.sticker {
  width: 7rem;
  height: 7rem;
  margin: 0 0.4rem;
  padding: 0.5rem;
  background: var(--paper);
  border: var(--border) solid var(--ink);
  border-radius: 1.4rem;
  box-shadow: 0 0.35rem 0 var(--ink);
  animation: bob 3.2s ease-in-out infinite;
}
.sticker.s1 { transform: rotate(-8deg); background: #ffdcbc; }
.sticker.s2 { width: 8.5rem; height: 8.5rem; animation-delay: -1s; background: #ffe08a; }
.sticker.s3 { transform: rotate(9deg); animation-delay: -2s; background: #fff0a8; }
@keyframes bob {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 0.7rem; }
}
.home-title {
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0.12rem 0.12rem 0 #fff;
}
.title-icon { width: 2.8rem; height: 2.8rem; margin-right: 0.6rem; color: var(--hl); stroke-width: 2.4; }

.home-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  padding: 0 0.5rem 1rem;
}
.big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.5rem;
  padding: 0 1.2rem;
  font-size: 1.75rem;
  font-weight: 900;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 0 var(--ink);
}
.big-btn + .big-btn { margin-top: 1.2rem; }
.big-btn:active { transform: translateY(0.45rem); }
.big-icon { width: 3.6rem; height: 3.6rem; margin-right: 1rem; flex: 0 0 auto; stroke-width: 2.4; }
.btn-choose { background: var(--sky); }
.btn-random { background: var(--sun); }
.btn-random .big-icon { animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-14deg); }
  84% { transform: rotate(12deg); }
  92% { transform: rotate(-6deg); }
}

@media (orientation: landscape) {
  .home-actions { flex-direction: row; max-width: 44rem; }
  .big-btn { flex: 1 1 0; min-width: 0; flex-direction: column; height: 10rem; font-size: 1.6rem; }
  .big-btn + .big-btn { margin-top: 0; margin-left: 1.2rem; }
  .big-icon { margin: 0 0 0.6rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .home-hero { margin-top: 0.5rem; }
  .sticker { width: 4.5rem; height: 4.5rem; }
  .sticker.s2 { width: 5.5rem; height: 5.5rem; }
  .home-title { font-size: 2.2rem; }
  .big-btn { height: 7rem; font-size: 1.3rem; }
  .big-icon { width: 2.6rem; height: 2.6rem; }
}
@media (orientation: portrait) and (max-width: 440px) {
  .sticker { width: 5.6rem; height: 5.6rem; margin: 0 0.3rem; }
  .sticker.s2 { width: 6.8rem; height: 6.8rem; }
  .home-title { font-size: 2.5rem; }
  .title-icon { width: 2.2rem; height: 2.2rem; }
}
@media (orientation: portrait) and (max-height: 640px) {
  .sticker { width: 5rem; height: 5rem; }
  .sticker.s2 { width: 6rem; height: 6rem; }
  .home-title { font-size: 2.4rem; }
  .big-btn { height: 6rem; font-size: 1.5rem; }
}

/* ---------- GALERÍA ---------- */
.scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 1rem 2rem;
}
.cards {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 80rem;
  display: flex;
  flex-wrap: wrap;
}
.cards > li { box-sizing: border-box; width: 50%; padding: 0.55rem; min-width: 0; }
@media (min-width: 480px) { .cards > li { width: 33.3333%; } }
@media (min-width: 700px) { .cards > li { width: 25%; } }
@media (min-width: 1000px) { .cards > li { width: 20%; } }
@media (min-width: 1200px) { .cards > li { width: 16.6666%; } }
.tv .cards > li { width: 16.6666%; }
.card-btn {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.55rem 0.5rem;
  background: var(--paper);
  text-align: center;
}
.card-art {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.card-art .art { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; }
.card-name {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- PASOS ---------- */
.progress { flex: 1 1 auto; text-align: center; margin: 0 0.6rem; min-width: 0; }
.progress-name {
  font-size: 1.25rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.35rem;
}
.dots { display: flex; justify-content: center; flex-wrap: wrap; }
.dot-step {
  width: 1rem;
  height: 1rem;
  margin: 0.2rem;
  border-radius: 50%;
  border: 0.18rem solid var(--ink);
  background: var(--paper);
  transition: transform 0.25s, background-color 0.25s;
}
.dot-step.is-done { background: var(--ink); }
.dot-step.is-current { background: var(--hl); border-color: var(--hl); transform: scale(1.35); }

.goal {
  flex: 0 0 auto;
  width: 3.8rem;
  height: 3.8rem;
  padding: 0.25rem;
  background: var(--paper);
  border: var(--border) solid var(--ink);
  border-radius: 1rem;
  box-shadow: 0 0.35rem 0 var(--ink);
}

.stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.stage .paper {
  position: absolute;
  top: 0.4rem; left: 1rem; right: 1rem; bottom: 7.4rem;
}
.paper {
  position: relative;
  min-height: 0;
  background: var(--paper);
  border: var(--border) solid var(--ink);
  border-radius: 1.8rem;
  box-shadow: 0 0.45rem 0 var(--ink);
  overflow: hidden;
}
.paper-art { position: absolute; top: 1.4rem; right: 1rem; bottom: 1rem; left: 1rem; }
.paper.pop { animation: pop 0.35s ease-out; }
@keyframes pop { 0% { transform: scale(0.97); } 60% { transform: scale(1.01); } 100% { transform: scale(1); } }

.step-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  padding: 0.15rem 0.8rem 0.2rem;
  border-radius: 2rem;
  background: var(--hl);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
}
.step-badge small { font-size: 1rem; opacity: 0.85; margin-left: 0.1rem; }

.nav-btn {
  height: 5.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  box-shadow: 0 0.45rem 0 var(--ink);
}
.nav-btn svg { width: 3rem; height: 3rem; stroke-width: 3.4; }
.stage .nav-btn { position: absolute; bottom: 1.2rem; width: 45%; }
.nav-btn.prev { left: 1rem; background: var(--paper); }
.nav-btn.next { right: 1rem; background: var(--grass); }
.nav-btn[disabled] { opacity: 0.3; box-shadow: none; transform: translateY(0.35rem); cursor: default; }
.nav-btn .ic-check { display: none; }
.nav-btn.is-finish { background: var(--sun); animation: nudge 1.6s ease-in-out infinite; }
.nav-btn.is-finish .ic-check { display: block; }
.nav-btn.is-finish .ic-next { display: none; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (orientation: landscape) {
  .stage { display: flex; flex-direction: row; align-items: stretch; padding: 0.2rem 1.2rem 1.2rem; }
  .stage .paper { position: relative; top: auto; left: auto; right: auto; bottom: auto; flex: 1 1 auto; min-width: 0; }
  .stage .nav-btn { position: static; bottom: auto; flex: 0 0 auto; align-self: center; width: 6.5rem; height: 11rem; }
  .nav-btn.prev { margin-right: 1.2rem; }
  .nav-btn.next { margin-left: 1.2rem; }
  .nav-btn svg { width: 3.4rem; height: 3.4rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .bar { padding: 0.5rem 1rem 0.3rem; }
  .icon-btn { width: 2.8rem; height: 2.8rem; }
  .goal { width: 3rem; height: 3rem; }
  .progress-name { font-size: 1rem; margin-bottom: 0.15rem; }
  .stage .nav-btn { width: 5rem; height: 8rem; }
  .step-badge { font-size: 1.2rem; }
}

/* ---------- TERMINADO ---------- */
#screen-done { align-items: center; justify-content: center; padding: 1rem; overflow: hidden; }
.done-main { display: flex; flex-direction: column; align-items: center; }
.done-title {
  margin: 0 0 0.8rem;
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--hl);
  text-shadow: 0.14rem 0.14rem 0 var(--ink);
  animation: tada 0.9s ease-out;
}
@keyframes tada {
  0% { transform: scale(0.4); opacity: 0; }
  55% { transform: scale(1.15); opacity: 1; }
  75% { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.done-paper { width: 72vw; height: 72vw; max-width: 46vh; max-height: 46vh; animation: pop 0.6s ease-out; }
.done-paper .paper-art { top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; }
.done-sub {
  display: flex;
  align-items: center;
  margin: 1.1rem 0 1rem;
  font-size: 1.4rem;
  font-weight: 900;
}
.done-sub svg { width: 2rem; height: 2rem; margin-right: 0.5rem; color: var(--hl); }
.done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 30rem;
}
.done-actions .act-btn { width: 48%; margin-bottom: 1.1rem; }
.act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0.5rem 0.8rem;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
}
.act-btn svg { width: 2rem; height: 2rem; margin-right: 0.6rem; flex: 0 0 auto; }
@media (max-width: 440px) {
  .act-btn { font-size: 1rem; padding: 0.5rem 0.6rem; }
  .act-btn svg { width: 1.7rem; height: 1.7rem; margin-right: 0.45rem; }
}
.act-again { background: var(--grass); }
.act-random { background: var(--sun); }
.act-another { background: var(--sky); }
.act-home { background: var(--paper); }

@media (orientation: landscape) {
  #screen-done { flex-direction: row; }
  .done-paper { width: 58vh; height: 58vh; max-width: none; max-height: none; }
  .done-title { font-size: 2.4rem; margin-bottom: 0.5rem; }
  .done-actions { flex-direction: column; flex-wrap: nowrap; width: 17rem; margin-left: 3rem; }
  .done-actions .act-btn { width: 100%; margin-bottom: 1.1rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .done-paper { width: 52vh; height: 52vh; }
  .done-title { font-size: 1.8rem; }
  .done-sub { font-size: 1.1rem; margin: 0.6rem 0 0; }
  .act-btn { min-height: 3rem; }
  .done-actions .act-btn { margin-bottom: 0.8rem; }
}

/* Confeti */
.confetti { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.confetto {
  position: absolute;
  top: -2rem;
  width: 0.7rem;
  height: 1.1rem;
  border-radius: 0.2rem;
  animation: fall linear forwards;
}
@keyframes fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

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