:root {
  --bg: #0a373d;     /* teal profundo y mate, poco deslumbre */
  --bg2: #0f535b;
  --accent: #ef9b46; /* naranja cálido algo apagado */
  --accent-sh: #c9772e;
  --text: #eaf0ec;   /* blanco hueso, no blanco puro */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 30%, var(--bg2), var(--bg));
  color: var(--text);
  user-select: none;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh;
  padding: 4vh 5vw;
  text-align: center;
}

.hidden { display: none !important; }

/* ---------- ¿Quién eres? ---------- */
.chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6vh;
}
.chooser-title {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.chooser-btns { display: flex; gap: 6vw; flex-wrap: wrap; justify-content: center; }
.kid-btn {
  border: none;
  border-radius: 28px;
  padding: 30px 44px;
  min-width: 38vw;
  background: #119aa8;
  color: var(--text);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  box-shadow: 0 9px 0 #0b6e78, 0 16px 26px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.kid-btn:active { transform: translateY(6px); box-shadow: 0 3px 0 #0b6e78, 0 8px 14px rgba(0,0,0,.3); }

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
}
.change-btn {
  margin-top: 1vh;
  border: none;
  background: transparent;
  color: var(--text);
  opacity: .55;
  font-size: 16px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Robot Milo ---------- */
#milo svg {
  width: min(52vw, 260px);
  height: auto;
  display: block;
  animation: float 4s ease-in-out infinite;
}

/* las partes que animan giran/escalan respecto a sí mismas */
.m-glow, .m-eye, .m-mouth, .m-antenna-ball {
  transform-box: fill-box;
  transform-origin: center;
}

.m-glow { opacity: 0; }
.m-eye  { animation: blink 5s infinite; }

/* Estado: escuchando */
.state-listening .m-glow { opacity: .85; animation: pulse 1.1s ease-in-out infinite; }
.state-listening .m-antenna-ball { fill: #7fe9ff; animation: ballpulse 1s ease-in-out infinite; }
.state-listening .m-mouth { transform: scaleY(.5); }

/* Estado: pensando */
.state-thinking .m-antenna-ball { fill: #ffd36b; animation: ballpulse .5s ease-in-out infinite; }
.state-thinking .m-eye { animation: scan 1.2s ease-in-out infinite; }

/* Estado: hablando */
.state-speaking .m-mouth { animation: talk .26s ease-in-out infinite; }

/* ---------- Texto ---------- */
.caption {
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  max-width: 18ch;
  margin: 0;
  min-height: 2.6em;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ---------- Botón ---------- */
.talk-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 40px;
  padding: 20px 40px;
  background: var(--accent);
  color: #4a2400;
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 800;
  box-shadow: 0 10px 0 var(--accent-sh), 0 18px 30px rgba(0,0,0,.3);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .2s ease;
}
.talk-btn:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--accent-sh), 0 8px 16px rgba(0,0,0,.3); }
.talk-btn:disabled { opacity: .5; }
.talk-btn.is-on { background: #ff6b6b; color: #fff; box-shadow: 0 10px 0 #c0392b, 0 18px 30px rgba(0,0,0,.3); }
.talk-label { letter-spacing: .3px; }

/* ---------- Animaciones ---------- */
@keyframes float    { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes blink    { 0%,92%,100%{ transform: scaleY(1); } 96%{ transform: scaleY(.1); } }
@keyframes pulse    { 0%,100%{ transform: scale(1); opacity:.85; } 50%{ transform: scale(1.05); opacity:.4; } }
@keyframes ballpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes scan     { 0%,100%{ transform: translateX(-4px);} 50%{ transform: translateX(4px);} }
@keyframes talk     { 0%,100%{ transform: scaleY(.6);} 50%{ transform: scaleY(1.9);} }

@media (prefers-reduced-motion: reduce) {
  #milo svg, .m-glow, .m-eye, .m-mouth, .m-antenna-ball { animation: none !important; }
}