/* Kids Routines — hoja de estilo única.
   La app está pensada EN HORIZONTAL: así las chicas tienen sitio para moverse
   por el escenario. Colores y medidas, todos aquí arriba. */

:root{
  --bg:#120a2a;
  --bg2:#2a1052;
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.72);
  --pink:#ff5fb0;
  --purple:#9b5cff;
  --cyan:#3fe0ff;
  --lime:#7dff9b;
  --gold:#ffd447;
  --card:rgba(255,255,255,.10);
  --card-line:rgba(255,255,255,.18);
  --r-lg:24px;
  --r-md:18px;
  --tap:56px;
  --font: "Baloo 2", "Segoe UI Rounded", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* sin esto, cualquier display:flex de más abajo gana a hidden y se ve todo a la vez */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(120% 80% at 10% 0%, #46157a 0%, transparent 60%),
    radial-gradient(100% 70% at 90% 10%, #0e6b8f 0%, transparent 55%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg2) 60%, #170b33 100%);
  background-attachment:fixed;
  overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
button,input,select,textarea{font-family:inherit}

/* estrellitas de fondo */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(2px 2px at 20% 15%, #fff, transparent),
    radial-gradient(2px 2px at 70% 8%, #ffe9a8, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #bff5ff, transparent),
    radial-gradient(2px 2px at 85% 45%, #ffd0ec, transparent),
    radial-gradient(1.5px 1.5px at 12% 75%, #fff, transparent),
    radial-gradient(2px 2px at 58% 88%, #ffe9a8, transparent);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.25}to{opacity:.7}}

/* ───────── pantallas ───────── */
.screen{
  position:fixed; inset:0; display:none; flex-direction:column; gap:8px;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 14px)
          calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 14px);
  overflow:hidden;
}
.screen.show{display:flex; animation:fadein .28s ease}
@keyframes fadein{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* ───────── casa ───────── */
.topbar{display:flex; align-items:center; gap:10px; flex:none}
.hello{margin:0; font-size:20px; font-weight:800; white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.25)}
.stars-badge{
  display:flex; align-items:center; gap:6px; font-size:18px; font-weight:800; flex:none;
  background:linear-gradient(135deg,#ffb020,#ff6ab0); padding:6px 12px; border-radius:999px;
  box-shadow:0 6px 18px rgba(255,96,160,.35);
}
.stars-badge .star{filter:drop-shadow(0 0 6px #ffe08a)}
.gear{
  width:44px;height:44px;border-radius:50%;border:none;position:relative;flex:none;
  background:rgba(255,255,255,.12); font-size:20px; color:#fff; overflow:hidden;
}
.gear-ring{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--cyan) var(--hold,0deg), transparent 0); opacity:.9}
.gear-glyph{position:relative}

.periods{display:flex; gap:8px; margin-left:auto}
.period{
  border:none; border-radius:999px; padding:7px 14px; color:var(--ink-soft);
  background:rgba(255,255,255,.07); font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.period span{font-size:16px}
.period.on{background:linear-gradient(135deg,var(--purple),var(--pink)); color:#fff;
  box-shadow:0 6px 16px rgba(155,92,255,.4)}

.home-main{flex:1; display:flex; gap:12px; min-height:0}
.cards{
  flex:1; min-width:0; display:grid; gap:10px; overflow-y:auto; padding-right:2px;
  grid-template-columns:repeat(auto-fill, minmax(124px,1fr));
  grid-auto-rows:min-content; align-content:start;
}
.card{
  position:relative; border:none; border-radius:var(--r-lg); padding:10px 8px 9px;
  background:var(--card); border:2px solid var(--card-line); color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:4px; min-height:104px;
  box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease;
}
.card:active{transform:scale(.94)}
.card .art{font-size:36px; line-height:1; filter:drop-shadow(0 5px 9px rgba(0,0,0,.35))}
.card .art img{width:48px;height:48px;object-fit:cover;border-radius:12px;display:block}
.card .name{font-size:14px; font-weight:800; text-align:center; line-height:1.15}
.card .word{font-size:11px; color:var(--ink-soft)}
.card.done{opacity:.55}
.card .tick{position:absolute; top:-8px; right:-6px; font-size:22px;
  filter:drop-shadow(0 0 8px #ffd447); animation:pop .4s ease}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.card.c0{background:linear-gradient(150deg,rgba(255,95,176,.35),rgba(255,255,255,.07))}
.card.c1{background:linear-gradient(150deg,rgba(63,224,255,.32),rgba(255,255,255,.07))}
.card.c2{background:linear-gradient(150deg,rgba(155,92,255,.35),rgba(255,255,255,.07))}
.card.c3{background:linear-gradient(150deg,rgba(125,255,155,.28),rgba(255,255,255,.07))}
.card.c4{background:linear-gradient(150deg,rgba(255,212,71,.30),rgba(255,255,255,.07))}

.band{flex:none; width:200px; display:flex; align-items:flex-end; justify-content:center}
.band svg{height:100%; max-height:100%; margin:0 -14px}
@media (max-width:700px){ .band{display:none} }

.home-foot{flex:none; text-align:center; color:var(--ink-soft); font-size:13px; min-height:18px}

/* ───────── escenario: donde se mueven las chicas ───────── */
.scene{
  position:relative; flex:1; min-height:0; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 106%, rgba(255,212,71,.18), transparent 70%),
    radial-gradient(40% 60% at 15% 0%, rgba(155,92,255,.30), transparent 70%),
    radial-gradient(40% 60% at 85% 0%, rgba(63,224,255,.24), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border:1px solid var(--card-line);
}
.scene::after{   /* el suelo */
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-top:1px solid rgba(255,255,255,.14);
}
.walker{
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%); height:88%; z-index:2;
}
.walker svg{height:100%; width:auto}
.walker.right{position:relative; left:auto; bottom:auto; transform:none; height:100%}

.back{
  position:absolute; top:calc(env(safe-area-inset-top) + 6px); left:8px; z-index:9;
  width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.14);
  color:#fff;font-size:26px;line-height:1
}

/* ───────── llamada entrante ───────── */
.call{align-items:stretch}
.ringing{flex:1; display:flex; align-items:center; justify-content:center; gap:26px; min-height:0}
.avatar-pulse{position:relative; height:88%; aspect-ratio:1; display:grid; place-items:center}
.avatar{height:88%; display:grid; place-items:center}
.avatar svg{height:100%}
.ring{position:absolute; border-radius:50%; border:3px solid rgba(255,255,255,.3); inset:6%;
  animation:ringpulse 4s ease-out infinite}
.ring.r2{animation-delay:1.33s} .ring.r3{animation-delay:2.66s}
@keyframes ringpulse{
  0%{transform:scale(.68); opacity:.75; border-color:rgba(63,224,255,.7)}
  100%{transform:scale(1.16); opacity:0; border-color:rgba(255,95,176,.1)}
}
.ringing-side{display:flex; flex-direction:column; align-items:center; gap:4px}
.caller-name{font-size:30px; font-weight:800}
.caller-sub{color:var(--ink-soft); font-size:15px; margin-bottom:6px}
.answer{
  width:78px;height:78px;border-radius:50%;border:none;
  background:linear-gradient(140deg,#49e06a,#17a94a); font-size:34px; color:#fff;
  box-shadow:0 12px 30px rgba(30,200,90,.45);
  animation:shake 2.6s ease-in-out infinite;
}
@keyframes shake{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-7deg) scale(1.04)}70%{transform:rotate(7deg) scale(1.04)}}
.answer-hint{color:var(--ink-soft); font-size:14px; margin-top:4px}

/* ───────── llamada en curso ───────── */
.incall{flex:1; display:flex; flex-direction:column; gap:8px; min-height:0}
.incall-head{position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ink-soft);
  background:rgba(0,0,0,.30); padding:4px 12px; border-radius:999px; font-size:14px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#49e06a;box-shadow:0 0 10px #49e06a;
  animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.media-video{position:absolute; inset:4%; margin:auto; max-width:92%; max-height:92%;
  border-radius:var(--r-md); background:#000; z-index:4}

.call-bottom{flex:none; display:flex; align-items:center; gap:10px}
.bubble{
  flex:1; min-width:0;
  background:rgba(255,255,255,.95); color:#241046; border-radius:18px; padding:10px 16px;
  font-size:21px; font-weight:800; line-height:1.2;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}
.bubble em{font-style:normal; color:#d81b7d; text-decoration:underline; text-decoration-color:#ffd447;
  text-decoration-thickness:4px}
.bubble:empty{display:none}
.turn{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:10px; background:rgba(40,20,70,.85);
  border:2px dashed var(--gold); border-radius:var(--r-md); padding:8px 18px;
}
.turn .mic{font-size:28px; animation:bob 1.6s ease-in-out infinite alternate}
.turn-text{font-size:20px; font-weight:800}
@keyframes bob{to{transform:translateY(-5px) scale(1.04)}}

.call-actions,.act-actions{display:flex; gap:10px; justify-content:flex-end; flex:none}
.btn{
  border:none; border-radius:999px; padding:0 20px; height:var(--tap); min-width:104px;
  font-size:17px; font-weight:800; color:#fff; background:rgba(255,255,255,.16);
  box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .12s ease; white-space:nowrap;
}
.btn:active{transform:scale(.94)}
.btn.go{background:linear-gradient(140deg,var(--cyan),#1f8bd8)}
.btn.win{background:linear-gradient(140deg,#ffcc33,#ff7ab0); color:#3a1030}
.btn.big{height:60px; font-size:20px; padding:0 30px}

/* ───────── actividad ───────── */
.activity{align-items:stretch}
.act-scene{display:flex; align-items:stretch; gap:14px; padding:14px 18px}
.act-left{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; min-width:0; background:rgba(18,10,42,.42); border-radius:20px;
  padding:10px 14px; backdrop-filter:blur(3px)}
.act-emoji{font-size:64px; line-height:1; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));
  animation:bob 2.6s ease-in-out infinite alternate}
.act-text{font-size:26px; font-weight:800; line-height:1.2}
.counter{font-size:84px; font-weight:800; color:var(--gold); line-height:1;
  text-shadow:0 0 24px rgba(255,212,71,.6); animation:pop .3s ease}
.act-dots{display:flex; gap:7px}
.act-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.act-dots i.on{background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
.act-scene .walker.right{flex:none; width:40%; display:flex; align-items:flex-end; justify-content:center; z-index:2}
@media (max-width:700px){ .act-scene .walker.right{display:none} }

/* ───────── celebración ───────── */
.win{align-items:stretch}
#confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6}
.win-scene{display:flex; align-items:flex-end; padding:0}
.win-text{position:absolute; right:5%; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  max-width:56%}
.win-title{font-size:34px; font-weight:800;
  background:linear-gradient(120deg,#ffd447,#ff5fb0,#3fe0ff); -webkit-background-clip:text;
  background-clip:text; color:transparent; animation:pop .4s ease}
.win-sub{font-size:19px; font-weight:700; color:var(--ink-soft)}
.win-star{font-size:40px; animation:starfly .9s ease}
@keyframes starfly{0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.35) rotate(10deg)}100%{transform:none}}

/* ───────── zona de padres (español) ───────── */
.parents{background:linear-gradient(180deg,#1a0f38,#150c2c); text-align:left; overflow-y:auto}
.p-top{display:flex; align-items:center; gap:12px; flex:none}
.p-top h2{font-size:19px; margin:0}
.p-close{background:none; border:none; color:var(--cyan); font-size:16px; font-weight:700; padding:8px}
.p-close.save{color:var(--lime); margin-left:auto}
.p-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px;
  align-content:start; padding-bottom:24px; overflow-y:auto}
.p-card{background:rgba(255,255,255,.06); border:1px solid var(--card-line); border-radius:var(--r-md); padding:13px}
.p-label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--ink-soft); font-weight:800; margin:10px 0 6px}
.p-card .p-label:first-child{margin-top:0}
.p-input{
  width:100%; padding:11px 13px; border-radius:13px; border:1px solid var(--card-line);
  background:rgba(0,0,0,.28); color:#fff; font-size:15px;
}
.p-help{color:var(--ink-soft); font-size:12.5px; margin:8px 0 0; line-height:1.45}
.p-row{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap}
.p-row .p-btn{flex:1}
.p-slider{flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft)}
.p-slider input{width:100%}
.p-btn{
  margin-top:10px; padding:11px 15px; border-radius:13px; border:1px solid var(--card-line);
  background:rgba(255,255,255,.12); color:#fff; font-size:14px; font-weight:700;
}
.p-btn.warn{background:rgba(255,80,110,.22); border-color:rgba(255,80,110,.5)}
.p-btn.tiny{padding:8px 12px; font-size:13px}
.p-btn.rec{background:rgba(255,60,60,.35); border-color:#ff5a5a}
.p-list{display:flex; flex-direction:column; gap:8px; margin-top:8px; max-height:40vh; overflow-y:auto}
.p-item{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:13px;
  background:rgba(0,0,0,.22); border:1px solid var(--card-line)}
.p-item .emo{font-size:24px}
.p-item .txt{flex:1; min-width:0}
.p-item .txt b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.p-item .txt small{color:var(--ink-soft); font-size:11.5px}
.p-item .mini{width:32px;height:32px;flex:none;border-radius:10px;border:1px solid var(--card-line);
  background:rgba(255,255,255,.1); color:#fff; font-size:14px; padding:0}
.p-item.off{opacity:.45}
.p-media{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.p-media input[type=file]{flex:1; min-width:170px; color:var(--ink-soft); font-size:12.5px}
.p-foot{color:rgba(255,255,255,.35); font-size:12px; text-align:center; grid-column:1/-1}

.sheet{position:fixed; inset:0; z-index:40; background:rgba(8,4,20,.6); display:flex; align-items:center;
  justify-content:center; padding:12px}
.sheet-inner{background:#1b1038; width:min(760px,100%); max-height:96vh; border-radius:22px;
  display:flex; flex-direction:column; animation:up .25s ease; border:1px solid var(--card-line)}
@keyframes up{from{transform:translateY(24px); opacity:.4}to{transform:none;opacity:1}}
.sheet-top{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--card-line)}
.sheet-top h3{flex:1; text-align:center; font-size:16px; margin:0}
.sheet-body{padding:12px 16px 20px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 18px; align-content:start}
.sheet-body > .p-btn.warn{grid-column:1/-1}

/* ───────── aviso de girar el móvil ───────── */
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:820px){
  .rotate-hint{
    display:flex !important; position:fixed; inset:0; z-index:100; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; text-align:center;
    background:linear-gradient(170deg,#1a0f38,#2a1052); font-size:24px; font-weight:800;
  }
  .rotate-icon{font-size:72px; animation:turnphone 2s ease-in-out infinite}
  @keyframes turnphone{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
}

/* ───────── cómo se mueven las chicas ─────────
   Regla de la casa: LENTO, PEQUEÑO y SUAVE. Es para una niña de 5 años: tiene
   que dar ternura, no nervio. Nada de deslizarse por el suelo, nada de
   sacudidas, ángulos de pocos grados y ciclos largos. Si dudas, más lento. */

.kchar{overflow:visible}
.kchar .body-g{transform-origin:100px 350px}
.kchar .head{transform-origin:100px 112px}
.kchar .arm-l{transform-origin:80px 132px}
.kchar .arm-r{transform-origin:120px 132px}
.kchar .leg-l{transform-origin:92px 216px}
.kchar .leg-r{transform-origin:108px 216px}
.kchar .mouth{transform:scale(1,.5)}

/* quieta: respira hondo y despacio, y parpadea de vez en cuando */
.idle .body-g{animation:respira 6s ease-in-out infinite}
.idle .head{animation:cabecea 9s ease-in-out infinite}
.idle .arm-l{animation:brazoQuieto 9s ease-in-out infinite}
.idle .arm-r{animation:brazoQuieto 9s ease-in-out infinite reverse}
@keyframes respira{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%    {transform:translateY(-2px) scaleY(1.01)}
}
@keyframes cabecea{
  0%,100%{transform:rotate(0deg)}
  40%    {transform:rotate(1.4deg)}
  75%    {transform:rotate(-1deg)}
}
@keyframes brazoQuieto{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(2.5deg)}
}

/* el parpadeo: cierra rápido, abre, y se toma su tiempo hasta el siguiente */
.kchar .blink{transform-box:fill-box; transform-origin:center top; transform:scaleY(0);
  animation:parpadea 6.5s ease-in-out infinite}
@keyframes parpadea{
  0%, 95.5%, 100%{transform:scaleY(0)}
  96.5%, 98.5%   {transform:scaleY(1)}
}

/* hablando: mueve la boca con calma y asiente un poquito */
.speaking .mouth{animation:boca .42s ease-in-out infinite alternate}
.speaking .head{animation:asiente 3.2s ease-in-out infinite}
@keyframes boca{
  from{transform:scale(1,.45)}
  to  {transform:scale(1.03,1.02)}
}
@keyframes asiente{
  0%,100%{transform:rotate(-1deg)}
  50%    {transform:rotate(1.6deg)}
}

/* celebrando: un balanceo alegre, no un temblor */
.dance .body-g{animation:balanceo 2s ease-in-out infinite}
.dance .head{animation:cabezaBaile 2s ease-in-out infinite}
.dance .arm-l{animation:brazoBaileA 2s ease-in-out infinite}
.dance .arm-r{animation:brazoBaileB 2s ease-in-out infinite}
.dance .leg-l{animation:piernaBaileA 2s ease-in-out infinite}
.dance .leg-r{animation:piernaBaileB 2s ease-in-out infinite}
@keyframes balanceo{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  25%    {transform:translateY(-7px) rotate(0deg)}
  50%    {transform:translateY(0) rotate(1.5deg)}
  75%    {transform:translateY(-7px) rotate(0deg)}
}
@keyframes cabezaBaile{
  0%,100%{transform:rotate(-3deg)}
  50%    {transform:rotate(3deg)}
}
@keyframes brazoBaileA{
  0%,100%{transform:rotate(-26deg)}
  50%    {transform:rotate(-6deg)}
}
@keyframes brazoBaileB{
  0%,100%{transform:rotate(-6deg)}
  50%    {transform:rotate(-26deg)}
}
@keyframes piernaBaileA{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(-4deg)}
}
@keyframes piernaBaileB{
  0%,100%{transform:rotate(-4deg)}
  50%    {transform:rotate(0deg)}
}

/* saluda con la mano al descolgar: dos veces y para */
.wave .arm-r{animation:saluda 2.4s ease-in-out 2}
@keyframes saluda{
  0%,100%{transform:rotate(0deg)}
  25%,65%{transform:rotate(-44deg)}
  45%    {transform:rotate(-28deg)}
}

/* los destellos, muy despacio */
.kchar .sparkle{animation:brilla 5s ease-in-out infinite}
.kchar .sparkle.s2{animation-delay:1.7s} .kchar .sparkle.s3{animation-delay:3.4s}
@keyframes brilla{
  0%,100%{opacity:.35; transform:scale(.9)}
  50%    {opacity:.9; transform:scale(1.06)}
}

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

/* ───────── gestos: la chica HACIENDO la rutina ───────── */
.set-layer{position:absolute; inset:0; z-index:1; pointer-events:none}
.set-layer svg{position:absolute; left:0; right:0; bottom:0; width:100%; height:74%;
  opacity:.95; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
/* en la actividad el decorado se va a la derecha, detrás de la chica */
.act-scene .set-layer svg{left:auto; right:-2%; width:46%; height:62%}
.scene .act-left{position:relative; z-index:3}

/* el brazo que cepilla: arriba y abajo, deprisa */
.do-brush .arm-r{animation:gBrush 1.1s ease-in-out infinite alternate; transform-origin:120px 132px}
@keyframes gBrush{from{transform:rotate(-100deg)}to{transform:rotate(-118deg)}}
.do-brush .arm-l{animation:none; transform:rotate(6deg)}

/* frotarse las manos / enjabonarse */
.do-scrub .arm-r{animation:gScrubR 1s ease-in-out infinite alternate; transform-origin:120px 132px}
.do-scrub .arm-l{animation:gScrubL 1s ease-in-out infinite alternate; transform-origin:80px 132px}
@keyframes gScrubR{from{transform:rotate(-42deg)}to{transform:rotate(-54deg)}}
@keyframes gScrubL{from{transform:rotate(42deg)}to{transform:rotate(30deg)}}
.do-scrub .body-g{animation:respira 6s ease-in-out infinite}

/* llevarse la cuchara a la boca */
.do-eat .arm-r{animation:gEat 3.4s ease-in-out infinite; transform-origin:120px 132px}
@keyframes gEat{0%,100%{transform:rotate(-10deg)} 45%{transform:rotate(-112deg)} 60%{transform:rotate(-112deg)}}

/* agacharse a recoger */
.do-pickup .body-g{animation:gPick 4.4s ease-in-out infinite; transform-origin:100px 350px}
@keyframes gPick{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(10px) rotate(-5deg)}}
.do-pickup .arm-r{animation:gPickArm 4.4s ease-in-out infinite; transform-origin:120px 132px}
@keyframes gPickArm{0%,100%{transform:rotate(0)} 50%{transform:rotate(-26deg)}}

/* leer: el libro quieto y la cabeza asintiendo */
.do-read .arm-r{transform:rotate(-62deg); transform-origin:120px 132px}
.do-read .arm-l{transform:rotate(62deg); transform-origin:80px 132px}
.do-read .body-g{animation:gRead 6s ease-in-out infinite}
@keyframes gRead{0%,100%{transform:rotate(0)} 50%{transform:rotate(3deg)}}

/* dormir: se acurruca y respira despacio */
.do-sleep .body-g{animation:gSleep 7s ease-in-out infinite; transform-origin:100px 350px}
@keyframes gSleep{0%,100%{transform:rotate(-8deg) translateY(4px)} 50%{transform:rotate(-8deg) translateY(-4px)}}
.do-sleep .arm-r,.do-sleep .arm-l{animation:none}

/* estirarse al levantarse */
.do-stretch .arm-r{animation:gStretchR 5s ease-in-out infinite; transform-origin:120px 132px}
.do-stretch .arm-l{animation:gStretchL 5s ease-in-out infinite; transform-origin:80px 132px}
@keyframes gStretchR{0%,100%{transform:rotate(0)} 40%,60%{transform:rotate(-140deg)}}
@keyframes gStretchL{0%,100%{transform:rotate(0)} 40%,60%{transform:rotate(140deg)}}

/* saltar (jugar fuera) */
.do-jump .body-g{animation:gJump 2.4s ease-in-out infinite; transform-origin:100px 350px}
@keyframes gJump{0%,100%{transform:translateY(0)} 45%{transform:translateY(-16px)} 60%{transform:translateY(-16px)}}

/* el agua que cae del grifo */
.drops ellipse{animation:gDrop 2.4s ease-in infinite}
.drops ellipse:nth-child(2){animation-delay:1.2s}
@keyframes gDrop{0%{transform:translateY(-14px); opacity:0}20%{opacity:1}100%{transform:translateY(26px); opacity:0}}

/* retrato propio: si los padres cargan una imagen, manda ella */
.portrait{height:100%; width:auto; max-width:100%; object-fit:contain; display:block;
  border-radius:18px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation:respira 6s ease-in-out infinite}
.talking .portrait{animation:portraitTalk 1.2s ease-in-out infinite alternate}
@keyframes portraitTalk{from{transform:scale(1)}to{transform:scale(1.02)}}
.band-slot{flex:1; min-width:0; display:flex; align-items:flex-end; justify-content:center; height:100%}
.band-slot svg,.band-slot .portrait{height:100%; width:auto; margin:0 -10px}

.warn-line{color:#ffd447; font-weight:700}

.p-item .txt .voz-de{display:block; color:var(--cyan); font-size:11.5px}

/* ═════════════ LA ESCENA: la llamada y la fiesta ═════════════
   La chica en primer plano, ocupando la pantalla. Encima, lo justo: quién
   llama, lo que dice (bocadillo) y dos botones enormes. */
.show-screen{padding:0; overflow:hidden}
.show-screen .stage{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(55% 70% at 30% 110%, rgba(255,79,163,.30), transparent 70%),
    radial-gradient(45% 60% at 12% 0%, rgba(155,92,255,.40), transparent 70%),
    radial-gradient(45% 60% at 60% 0%, rgba(63,224,255,.28), transparent 70%),
    linear-gradient(180deg, #1c0f3d 0%, #120a2a 100%);
}
.show-screen .stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.stage-2d{position:absolute; left:4%; bottom:0; height:96%; width:52%;
  display:flex; align-items:flex-end; justify-content:center}
.stage-2d svg{height:100%; width:auto}
.show-screen #confetti{z-index:6}
.show-screen .back{z-index:9}
.show-screen .media-video{z-index:5}

/* quién llama */
.call-badge{
  position:absolute; z-index:4; top:calc(env(safe-area-inset-top) + 10px); left:50%;
  transform:translateX(-50%); display:flex; align-items:center; gap:10px;
  background:rgba(12,6,30,.62); border:1px solid rgba(255,255,255,.18);
  padding:7px 18px 7px 10px; border-radius:999px; backdrop-filter:blur(6px);
}
.call-badge .phone-ico{width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#49e06a,#17a94a); font-size:18px}
.call-who{display:flex; flex-direction:column; line-height:1.1}
.call-who b{font-size:19px}
.call-who span{font-size:13px; color:var(--ink-soft)}
[data-state="ringing"] .call-badge .phone-ico{animation:llamando 1.6s ease-in-out infinite}
@keyframes llamando{
  0%,100%{transform:rotate(0) scale(1); box-shadow:0 0 0 0 rgba(73,224,106,.6)}
  20%{transform:rotate(-14deg) scale(1.08)}
  40%{transform:rotate(14deg) scale(1.08); box-shadow:0 0 0 12px rgba(73,224,106,0)}
  60%{transform:rotate(-8deg) scale(1.04)}
}
[data-state="party"] .call-badge,[data-state="bye"] .call-badge{opacity:0; transition:opacity .4s}

/* lo que dice */
.show-screen .bubble{
  position:absolute; z-index:4; right:4%; top:22%; width:40%; max-width:460px;
  background:rgba(255,255,255,.96); color:#241046; border-radius:22px; padding:14px 20px;
  font-size:24px; font-weight:800; line-height:1.25; box-shadow:0 14px 30px rgba(0,0,0,.35);
  animation:burbuja .35s ease-out;
}
.show-screen .bubble::before{content:""; position:absolute; left:-12px; top:26px;
  border:12px solid transparent; border-right-color:rgba(255,255,255,.96); border-left:0}
.show-screen .bubble:empty{display:none}
@keyframes burbuja{from{opacity:0; transform:translateY(8px) scale(.96)}to{opacity:1; transform:none}}

/* los dos botones: enormes, para un dedo de cinco años */
.big-actions{position:absolute; z-index:4; right:4%; bottom:calc(env(safe-area-inset-bottom) + 6%);
  width:40%; max-width:460px; display:flex; flex-direction:column; gap:14px;
  animation:burbuja .45s ease-out}
.big-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  height:78px; border:none; border-radius:999px; font-size:25px; font-weight:800;
  color:#fff; box-shadow:0 12px 26px rgba(0,0,0,.35); transition:transform .15s ease;
}
.big-btn:active{transform:scale(.95)}
.big-btn .ico{font-size:32px}
.big-btn.yes{background:linear-gradient(140deg,#ffcc33 0%,#ff7ab0 55%,#b86bff 100%); color:#3a1030;
  animation:invita 2.6s ease-in-out infinite}
.big-btn.later{height:62px; font-size:20px; background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.28)}
@keyframes invita{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* la fiesta */
.party-text{position:absolute; z-index:4; right:4%; top:50%; transform:translateY(-50%);
  width:42%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.party-title{font-size:44px; font-weight:800; line-height:1.05;
  background:linear-gradient(120deg,#ffd447,#ff5fb0,#3fe0ff); -webkit-background-clip:text;
  background-clip:text; color:transparent; animation:pop .5s ease;
  filter:drop-shadow(0 4px 14px rgba(255,95,176,.35))}
.party-sub{font-size:21px; font-weight:700; color:#fff}
.party-stars{font-size:44px; letter-spacing:4px; animation:starfly .9s ease}
[data-state="party"] .bubble{top:auto; bottom:8%}

@media (max-height:380px){
  .big-btn{height:62px; font-size:21px} .big-btn.later{height:50px; font-size:17px}
  .show-screen .bubble{font-size:20px; top:20%}
  .party-title{font-size:36px}
}

/* 2D, «I'll try later»: baja el brazo con el objeto y ladea la cabeza */
.skip .arm-r{animation:suelta 2.6s ease-in-out forwards}
.skip .head{animation:encoge 2.6s ease-in-out forwards}
@keyframes suelta{0%{transform:rotate(-70deg)} 45%{transform:rotate(-80deg)} 100%{transform:rotate(8deg)}}
@keyframes encoge{0%,40%{transform:rotate(0)} 100%{transform:rotate(-7deg)}}

/* en la fiesta, la frase la dice el bocadillo: no la repetimos debajo del título */
[data-state="party"] .party-sub{display:none}

/* mientras llegan la chica y su habitación: un brillo que gira en el centro */
.stage.cargando::after{
  content:""; position:absolute; left:28%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; border:5px solid rgba(255,255,255,.18); border-top-color:#ff5fb0;
  border-right-color:#3fe0ff; animation:gira 1s linear infinite; z-index:3;
}
@keyframes gira{to{transform:rotate(360deg)}}