:root{
 --belumi-morado:#4B247E;
 --belumi-morado-medio:#7B4FD0;
 --belumi-lavanda:#D9BDFA;
 --belumi-lavanda-clara:#E5CEFC;
 --belumi-crema:#FDF4ED;
 --belumi-amarillo:#FED549;
 --belumi-menta:#9FDBC8;
 --belumi-rosa:#FACDC8;
 --belumi-blanco:#F4F1FC;
 --belumi-ink:#2b1d5c;
 --belumi-font-display:'Nunito',Fredoka,system-ui,sans-serif;
 --belumi-font-body:Fredoka,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:var(--belumi-font-body);background:var(--belumi-crema);color:var(--belumi-ink);font-size:22px}
header{display:flex;justify-content:space-between;align-items:center;background:var(--belumi-morado);color:#fff;padding:10px 20px}
header h1{margin:0;font-size:30px;font-family:var(--belumi-font-display)}
#hdr button{background:#fff3;color:#fff;font-size:18px}
main{max-width:1000px;margin:auto;padding:16px}
button{font:inherit;border:0;border-radius:18px;padding:14px 22px;cursor:pointer;background:#ffd34d;color:#223;box-shadow:0 4px 0 #0002;min-height:60px}
button:active{transform:translateY(3px);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:#fff;border-radius:24px;padding:20px;box-shadow:0 6px 16px #0001;text-align:center}
.kid{font-size:28px;padding:30px}.kid .av{font-size:80px}
.topic{font-size:24px;background:#fff;min-height:120px}
.topic small{display:block;font-size:16px;color:#567}
.tutor{display:flex;gap:14px;align-items:flex-start;margin:12px 0}
.owl{font-size:64px;line-height:1}
.bubble{background:#fff;border-radius:22px;padding:14px 18px;flex:1;border:3px solid #4a7cff;min-height:70px}
.q{font-size:44px;text-align:center;margin:10px 0;font-weight:bold}
.ans{font-size:44px;width:220px;text-align:center;border-radius:16px;border:3px solid #4a7cff;padding:6px}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:520px;margin:12px auto}
.pad button{font-size:30px}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.ok{background:#5bd17a}.hint{background:#ffb4d0}.back{background:#cfe0ff}
.stars{font-size:26px}
.good{animation:pop .5s}@keyframes pop{50%{transform:scale(1.15)}}
.manip{background:#fff;border-radius:20px;padding:12px;margin:10px 0;min-height:100px}
.tray{display:flex;gap:16px;justify-content:center;align-items:flex-end}
.mat{border:3px dashed #4a7cff;border-radius:16px;min-height:150px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;padding:8px;margin-top:8px}
.b100{width:70px;height:70px;background:repeating-linear-gradient(0deg,#ff8a3d 0 6px,#e56a1f 6px 7px);border-radius:4px;touch-action:none}
.b10{width:14px;height:70px;background:repeating-linear-gradient(0deg,#3dc3ff 0 6px,#1a9ad6 6px 7px);border-radius:3px;touch-action:none}
.b1{width:14px;height:14px;background:#7bd34d;border-radius:3px;touch-action:none}
.src{padding:10px;border-radius:12px;background:#f3f7ff;cursor:grab;display:flex;flex-direction:column;align-items:center;font-size:16px}
.count{text-align:center;font-size:24px;margin-top:6px}
svg text{font-size:16px;font-family:inherit}
.fbar{display:flex;height:60px;border:3px solid #333;border-radius:8px;overflow:hidden;margin:8px 0}
.fbar div{flex:1;border-right:2px solid #333;cursor:pointer}.fbar div:last-child{border:0}
.fbar .on{background:#ff6fa8}
table{width:100%;border-collapse:collapse;font-size:18px}td,th{border-bottom:1px solid #ddd;padding:8px}
.bar{height:16px;background:#ddd;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:#5bd17a}
#stage{width:100%;border-radius:24px;overflow:hidden;box-shadow:0 6px 16px #0002;margin:8px 0;touch-action:manipulation}
#stage canvas{display:block;width:100%;height:100%}
.d3 .manip{padding:6px}
.tcell{display:flex;flex-direction:column;gap:6px}.tcell .topic{flex:1}
.lesbtn{min-height:44px;font-size:17px;background:#cfe0ff}
.new{color:#d23a7a!important;font-weight:bold}
.dots{display:flex;gap:8px;justify-content:center;margin:6px}.dots i{width:14px;height:14px;border-radius:50%;background:#cfe0ff}.dots i.on{background:#4a7cff}
button:disabled{opacity:.5}

#sndbar{position:fixed;right:12px;bottom:12px;display:flex;gap:8px;z-index:20}
#sndbar button{min-height:52px;width:56px;padding:0;font-size:26px;background:#fff;border-radius:50%;box-shadow:0 3px 10px #0003}
#sndbar button.off{opacity:.45;filter:grayscale(1)}

/* ===== UI Belumi (kit de marca) ===== */
@font-face{font-family:Fredoka;src:url(fredoka-500.ttf) format("truetype");font-weight:500}
@font-face{font-family:Fredoka;src:url(fredoka-600.ttf) format("truetype");font-weight:600}
@font-face{font-family:Fredoka;src:url(fredoka-700.ttf) format("truetype");font-weight:700}
@font-face{font-family:Nunito;src:url(nunito-900.ttf) format("truetype");font-weight:900}
body{font-family:var(--belumi-font-body);font-weight:500;color:var(--belumi-ink);font-size:24px;
 background:
  radial-gradient(ellipse 80% 50% at 10% -10%,var(--belumi-lavanda) 0%,transparent 55%),
  radial-gradient(ellipse 70% 45% at 100% 0%,var(--belumi-lavanda-clara) 0%,transparent 50%),
  linear-gradient(180deg,var(--belumi-crema) 0%,#fff8f2 45%,var(--belumi-lavanda-clara) 100%) fixed;
 min-height:100vh;overflow-x:hidden}
#bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#bgfx i{position:absolute;bottom:-160px;border-radius:50%;opacity:.55;animation:floatUp linear infinite;font-style:normal}
#bgfx i.cloud{background:#fff;border-radius:999px;opacity:.7;bottom:auto;animation:drift linear infinite}
#bgfx i.cloud:before,#bgfx i.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
#bgfx i.cloud:before{width:55%;height:150%;left:15%;top:-60%}#bgfx i.cloud:after{width:40%;height:120%;right:12%;top:-40%}
@keyframes floatUp{to{transform:translateY(-130vh) rotate(360deg)}}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
header{background:linear-gradient(90deg,var(--belumi-morado),var(--belumi-morado-medio),#a888e8);box-shadow:0 6px 0 #0002;border-radius:0 0 28px 28px;padding:10px 18px}
header h1{font-size:0;font-weight:900;color:#fff;display:flex;align-items:center;gap:10px;line-height:0}
header h1 .brand-mark{height:52px;width:auto;max-width:min(220px,52vw);object-fit:contain;display:block;filter:drop-shadow(0 2px 0 #2a0f5588)}
header h1 .brand-logo{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 2px 0 #0003;background:var(--belumi-crema)}
.owl{display:flex;align-items:flex-end;justify-content:center;min-width:96px}
.owl .belumi-tutor{width:110px;height:auto;max-height:150px;object-fit:contain;filter:drop-shadow(0 8px 14px #4B247E33);animation:belumiFloat 3.2s ease-in-out infinite;transform-origin:50% 90%}
.owl .pet-emoji{font-size:64px;line-height:1}
@keyframes belumiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes belumiPop{0%{transform:scale(1)}45%{transform:scale(1.12) rotate(-3deg)}100%{transform:scale(1)}}
.owl.good .belumi-tutor{animation:belumiPop .55s ease}
.bubble{border-color:var(--belumi-morado-medio)!important;background:var(--belumi-blanco)}
.home-hero{display:flex;justify-content:center;margin:4px 0 8px}
.home-hero .belumi-saludo{width:min(200px,42vw);height:auto;filter:drop-shadow(0 12px 24px #4B247E33);animation:belumiFloat 3.6s ease-in-out infinite}
.d3 .home-hero{display:flex}
@media (max-height:700px){.home-hero .belumi-saludo{width:min(140px,34vw)}}
#hdr .stars{font-size:32px;font-weight:700;background:#fff;color:#ffd23f;border-radius:999px;padding:4px 16px;box-shadow:0 4px 0 #0002;display:inline-block;-webkit-text-stroke:1px #c9a010;paint-order:stroke fill}
#hdr button{background:#ffffff40;color:#fff;font-size:20px;min-height:52px;box-shadow:0 4px 0 #0002}
button{font-family:inherit;font-weight:700;border-radius:22px;min-height:60px;padding:12px 22px;font-size:22px;color:var(--belumi-morado);
 background:#fff;border:2px solid #4B247E22;box-shadow:0 6px 18px #4B247E18;
 transition:transform .1s,box-shadow .1s,background .1s}
button:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 8px #4B247E14}
.ok{background:var(--belumi-menta);color:var(--belumi-morado);border-color:transparent;box-shadow:0 6px 16px #9FDBC866}
.ok:active{box-shadow:0 2px 8px #9FDBC844}
.hint{background:var(--belumi-rosa);color:var(--belumi-morado);border-color:transparent}
.back{background:var(--belumi-blanco);color:var(--belumi-morado-medio);border-color:#7B4FD033}
.btn-play,.play-cta{background:var(--belumi-amarillo)!important;color:var(--belumi-morado)!important;border:0!important;box-shadow:0 8px 20px #FED54966!important}
.pulse-cta{animation:ctaPulse 2.4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 20px #FED54966}50%{box-shadow:0 10px 28px #FED549aa;transform:translateY(-1px)}}
.card,.manip,.bubble{border-radius:24px;box-shadow:0 10px 28px #4B247E14}
.kid{font-size:38px;color:var(--belumi-morado);text-shadow:none;background:#fff;box-shadow:0 10px 28px #4B247E14}
.kid .av{font-size:110px;animation:bob 2.2s ease-in-out infinite}
.kid small,.topic small{color:#7a5cc4;font-weight:500}
.topic{font-size:30px;color:#2b1d5c;text-shadow:none;background:#fff;min-height:140px;box-shadow:0 8px 0 #c9b4ff,0 12px 22px #0002}
.tcell:nth-child(6n+1) .topic{background:linear-gradient(180deg,#fff,#ffe3f0)}
.tcell:nth-child(6n+2) .topic{background:linear-gradient(180deg,#fff,#e0f3ff)}
.tcell:nth-child(6n+3) .topic{background:linear-gradient(180deg,#fff,#fff4cc)}
.tcell:nth-child(6n+4) .topic{background:linear-gradient(180deg,#fff,#dcffe7)}
.tcell:nth-child(6n+5) .topic{background:linear-gradient(180deg,#fff,#efe3ff)}
.lesbtn{font-size:20px;min-height:52px}
.bubble{border:4px solid #b9a4ff;font-size:24px}
.q{font-size:clamp(54px,11vw,104px);font-weight:700;line-height:1.15;margin:18px 0;text-align:center;
 background:#ffffffd9;border-radius:36px;padding:18px 12px;box-shadow:0 10px 0 #0001,0 14px 30px #2b1d5c22}
.q.long{font-size:clamp(28px,5vw,44px)}
.q.long .dg{font-size:1.5em}
.dg{display:inline-block;font-weight:700;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 5px 0 #0002;
 animation:popIn .55s cubic-bezier(.3,1.8,.5,1) both;cursor:pointer}
.dg.op{color:#2b1d5c!important}
.dg.wig{animation:wiggle .5s}
.c0{color:#ff3d7f}.c1{color:#ff8a00}.c2{color:#ffc400}.c3{color:#20c45a}.c4{color:#00a8ff}.c5{color:#7a4dff}.c6{color:#ff4dd2}.c7{color:#00c9b7}.c8{color:#ff5a36}.c9{color:#3d6bff}
@keyframes popIn{0%{transform:scale(0) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes wiggle{20%{transform:rotate(-14deg) scale(1.2)}40%{transform:rotate(12deg) scale(1.25)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
.bump{display:inline-block;animation:bump .5s cubic-bezier(.3,1.8,.5,1)}
.ans{position:absolute;opacity:0;pointer-events:none;width:1px}
#ansv{min-width:260px;min-height:120px;font-size:96px;line-height:110px;text-align:center;background:#fff;border-radius:30px;
 border:6px dashed #b9a4ff;padding:4px 20px;box-shadow:0 8px 0 #0001}
#ansv:empty:before{content:"?";color:#d8ccff;font-weight:700}
.pad{max-width:640px;gap:14px}
.pad button{font-size:56px;min-height:96px;border-radius:30px}
.pad button:nth-child(10n+1){background:linear-gradient(180deg,#ff7aa8,#ff3d7f);box-shadow:0 7px 0 #b81e55}
.pad button:nth-child(10n+2){background:linear-gradient(180deg,#ffb35c,#ff8a00);box-shadow:0 7px 0 #b86200}
.pad button:nth-child(10n+3){background:linear-gradient(180deg,#ffe066,#ffbf00);box-shadow:0 7px 0 #b88a00}
.pad button:nth-child(10n+4){background:linear-gradient(180deg,#6ef59a,#20c45a);box-shadow:0 7px 0 #138a3d}
.pad button:nth-child(10n+5){background:linear-gradient(180deg,#5cd0ff,#00a8ff);box-shadow:0 7px 0 #0074b3}
.pad button:nth-child(10n+6){background:linear-gradient(180deg,#a98bff,#7a4dff);box-shadow:0 7px 0 #4f2bc2}
.pad button:nth-child(10n+7){background:linear-gradient(180deg,#ff8de6,#ff4dd2);box-shadow:0 7px 0 #b8239a}
.pad button:nth-child(10n+8){background:linear-gradient(180deg,#5ff0e2,#00c9b7);box-shadow:0 7px 0 #008a7e}
.pad button:nth-child(10n+9){background:linear-gradient(180deg,#ff9277,#ff5a36);box-shadow:0 7px 0 #b8341a}
.pad button:nth-child(10n+10){background:linear-gradient(180deg,#7f9cff,#3d6bff);box-shadow:0 7px 0 #2341b8}
.pad button:active{box-shadow:0 1px 0 #0003}
.count{font-size:28px;font-weight:700}
.count .big{font-size:56px}
#burst{position:fixed;inset:0;pointer-events:none;z-index:50;display:flex;align-items:center;justify-content:center}
#burst .zoom{font-size:min(40vw,320px);font-weight:700;animation:zoomOut 1.3s cubic-bezier(.2,1.4,.4,1) forwards;-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 12px 0 #0003}
#burst .cf{position:absolute;left:50%;top:50%;width:16px;height:22px;border-radius:4px;animation:cf 1.4s ease-out forwards}
#burst .st{position:absolute;left:50%;top:50%;font-size:60px;animation:cf 1.5s ease-out forwards}
@keyframes zoomOut{0%{transform:scale(0) rotate(-20deg);opacity:0}35%{transform:scale(1.15) rotate(6deg);opacity:1}70%{transform:scale(1)}100%{transform:scale(1.6);opacity:0}}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.row>span{font-size:22px;font-weight:700;background:#fff9;border-radius:999px;padding:6px 16px}
@media (prefers-reduced-motion:reduce){#bgfx{display:none}}
/* ===== materias + mascota ===== */
.sgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.subj{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--sc) 25%,#fff))!important;box-shadow:0 8px 0 var(--sc),0 12px 22px #0002!important}
.subj .si{font-size:64px;animation:bob 2.4s ease-in-out infinite}
.sh{color:#fff;text-shadow:0 3px 0 #0003;margin:18px 4px 8px;font-size:30px}
.pethero{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:center}
@media(max-width:760px){.pethero{grid-template-columns:1fr}}
.petside{background:#fff;border-radius:30px;padding:16px;box-shadow:0 8px 0 #0001}.petside h2{margin:0 0 8px;font-size:38px}
.pet2d{font-size:180px;text-align:center;animation:bob 2s ease-in-out infinite}
.lv{font-size:30px;font-weight:700;color:#ff8a00}
.pbar{position:relative;height:30px;background:#eee6ff;border-radius:999px;overflow:hidden;margin:7px 0}.pbar i{display:block;height:100%;border-radius:999px;transition:width .6s}
.pbar span{position:absolute;inset:0;font-size:17px;line-height:30px;padding-left:12px;font-weight:700}
.xp i{background:linear-gradient(90deg,#ffd84d,#ff8a00)}.mood i{background:linear-gradient(90deg,#ff8fc8,#ff3d8f)}.en i{background:linear-gradient(90deg,#5cd0ff,#3d6bff)}.goal i{background:linear-gradient(90deg,#6ef59a,#20c45a)}
.cta{font-size:28px;font-weight:700;color:#20a04a;text-align:center;margin:10px 0;animation:bob 2s infinite}
.petc.sel{outline:6px solid #ff3d8f;transform:scale(1.04)}.petc{font-size:26px}.petc .av{font-size:90px;display:flex;align-items:center;justify-content:center;min-height:80px}
.petc .av img{width:80px;height:80px;object-fit:contain;border-radius:50%;background:#fff8;display:block}
.petc .petn{display:block;line-height:1.15;margin-top:4px}
.pet-picker{max-height:min(58vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 12px;margin:8px 0;scrollbar-width:thin}
.pet-sec{color:var(--belumi-morado);font-size:22px;margin:14px 6px 8px;text-shadow:none}
.petgrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.pet-av,.pet-av-sm,.pet-av-xs,.pet2d-img{object-fit:contain;display:inline-block;vertical-align:middle;border-radius:50%;background:transparent}
.pet-av{width:72px;height:72px}.pet-av-sm{width:44px;height:44px}.pet-av-xs{width:28px;height:28px}
.pet2d-img{width:min(220px,55vw);height:auto;max-height:240px;border-radius:0;animation:bob 2s ease-in-out infinite}
.owl .pet-av{width:78px;height:78px;filter:drop-shadow(0 6px 10px #4B247E28);animation:belumiFloat 3.2s ease-in-out infinite}
.petside h2 .pet-h2{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px}
.acc-note{font-size:18px;background:#fff6;border-radius:18px;padding:10px 14px;margin:8px 0}
.pname{font:inherit;font-size:32px;border-radius:24px;border:5px solid #b9a4ff;padding:10px 18px;width:300px;text-align:center}
.accrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.acc{font-size:17px;min-height:46px;padding:8px 14px;background:linear-gradient(180deg,#cfe0ff,#8fb4ff)}.acc.on{background:linear-gradient(180deg,#5ff28b,#18c45a)}
#toast{position:fixed;left:50%;top:90px;transform:translateX(-50%);background:#fff;border:5px solid #ffd34d;border-radius:28px;padding:14px 24px;font-size:26px;font-weight:700;z-index:60;box-shadow:0 10px 30px #0003;animation:popIn .5s}
.sq{font-size:clamp(30px,5.5vw,52px);font-weight:700;text-align:center;background:#ffffffd9;border-radius:30px;padding:14px;margin:12px 0;box-shadow:0 8px 0 #0001}
.bigpic{font-size:clamp(110px,22vw,190px);text-align:center;line-height:1.1;animation:popIn .6s cubic-bezier(.3,1.8,.5,1)}
.story{background:#fffbe8;border-radius:30px;padding:16px 22px;box-shadow:0 8px 0 #0001;font-size:28px;line-height:1.5}.story h3{margin:4px 0}.spic{font-size:64px;text-align:center}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:10px 0}.opt{font-size:30px;min-height:90px}
.opts.emo .opt,.emo{font-size:70px}
.o0{background:linear-gradient(180deg,#ff7aa8,#ff3d7f);box-shadow:0 7px 0 #b81e55}.o1{background:linear-gradient(180deg,#5cd0ff,#00a8ff);box-shadow:0 7px 0 #0074b3}
.o2{background:linear-gradient(180deg,#6ef59a,#20c45a);box-shadow:0 7px 0 #138a3d}.o3{background:linear-gradient(180deg,#a98bff,#7a4dff);box-shadow:0 7px 0 #4f2bc2}.o4{background:linear-gradient(180deg,#ffb35c,#ff8a00);box-shadow:0 7px 0 #b86200}
.opt.bad{filter:grayscale(1);opacity:.5}.shake{animation:wiggle .5s}
.match{display:grid;grid-template-columns:1fr 1fr;gap:20px}.match>div{display:flex;flex-direction:column;gap:12px}.mo{min-height:90px;font-size:30px}.mo.emo{font-size:56px}
.mo.sel{outline:6px solid #ff3d8f}.mo.done{background:linear-gradient(180deg,#5ff28b,#18c45a);opacity:.7}
.lcard .lpic{font-size:clamp(60px,12vw,110px);text-align:center;background:#fff;border-radius:30px;padding:14px;margin:10px 0}
.bonebtns .bb{font-size:17px;min-height:46px;padding:8px 14px}
.bline{min-height:100px;border:5px dashed #b9a4ff;border-radius:28px;background:#fff;display:flex;flex-wrap:wrap;gap:10px;padding:10px;align-items:center;justify-content:center;margin:10px 0}
.bline:empty:before{content:"👆 Tap the words in order";color:#b9a4ff;font-size:22px}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.chip{min-height:72px;font-size:30px}
/* ===== versión móvil (360–430 px vertical, móviles en horizontal) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{min-height:100vh;min-height:100dvh}
button,.src,.chip,.mo,.opt{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.src{touch-action:none}
.src.drag{outline:4px solid #ff3d8f}
.droptarget{outline:6px dashed #ff3d8f;outline-offset:-6px}
.drag-ghost{position:fixed;pointer-events:none;opacity:.85;z-index:70;transform:translate(-50%,-110%) scale(1.4)}
header{padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(22px + env(safe-area-inset-left));padding-right:calc(22px + env(safe-area-inset-right))}
main{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:calc(84px + env(safe-area-inset-bottom))}
#sndbar{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:55}
#sndbar button{min-height:52px;min-width:52px}
#toast{top:calc(90px + env(safe-area-inset-top));max-width:calc(100vw - 24px)}
#stage{max-width:100%}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:600px){
 body{font-size:19px;background-attachment:scroll}
 header{padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));border-radius:0 0 22px 22px;gap:8px}
 header h1{font-size:21px;line-height:1.1;flex:1;min-width:0;letter-spacing:0}
 #hdr{display:flex;gap:6px;align-items:center;flex-shrink:0}
 #hdr .stars{font-size:20px;padding:4px 10px}
 #hdr button{min-height:48px;min-width:48px;padding:6px 10px;font-size:20px;border-radius:18px}
 #hdr .lbl{display:none}
 main{padding-top:10px;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
 button{min-height:52px;padding:10px 16px;font-size:20px;border-radius:20px;box-shadow:0 5px 0 #c97a00,0 8px 14px #0003}
 .ok{box-shadow:0 5px 0 #0e8c3e,0 8px 14px #0003}.hint{box-shadow:0 5px 0 #b8195c,0 8px 14px #0003}.back{box-shadow:0 5px 0 #2a41b8,0 8px 14px #0003}
 .row{gap:8px;margin:8px 0}
 .row>button{flex:1 1 auto}
 .row[style*="flex-start"]>button,.row[style*="space-between"]>button{flex:0 0 auto}
 .row>span{font-size:15px;padding:5px 10px;min-width:0;overflow-wrap:anywhere}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .card{padding:12px;border-radius:24px}
 .kid{font-size:24px;padding:16px 8px}.kid .av{font-size:64px}
 .kid small{font-size:15px}
 .pet-picker{max-height:min(52vh,420px)}
 .petgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .petc{font-size:15px;padding:8px 4px}.petc .av{font-size:40px;min-height:56px}
 .petc .av img{width:56px;height:56px}
 .pet-sec{font-size:18px;margin:10px 4px 6px}
 .pname{width:100%;max-width:260px;font-size:24px;padding:8px 12px}
 .topic{font-size:20px;min-height:96px;padding:10px 8px;overflow-wrap:anywhere}
 .topic small{font-size:14px}
 .lesbtn{font-size:16px;min-height:48px;padding:8px 10px}
 .subj .si{font-size:46px}
 .sh{font-size:23px;margin:14px 4px 6px}
 .tutor{gap:8px;margin:8px 0}.owl{font-size:44px}
 .bubble{font-size:18px;padding:10px 14px;min-height:0;border-width:3px;border-radius:22px}
 .q{font-size:clamp(40px,12vw,58px);margin:10px 0;padding:10px 8px;border-radius:26px}
 .q.long{font-size:clamp(20px,6vw,28px)}
 .dg{-webkit-text-stroke:1.5px #fff}
 #ansv{min-width:180px;min-height:76px;font-size:60px;line-height:68px;border-width:5px;border-radius:24px}
 .pad{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px auto}
 .pad button{font-size:34px;min-height:60px;padding:0;border-radius:20px;min-width:0}
 .manip{padding:8px;border-radius:22px}
 .tray{gap:6px;flex-wrap:wrap;align-items:stretch}
 .src{padding:6px;font-size:13px;min-width:64px;min-height:64px;justify-content:flex-end;gap:4px}
 .b100{width:44px;height:44px}.b10{width:10px;height:44px}.b1{width:12px;height:12px}
 #clr{min-height:48px!important;align-self:center}
 .count{font-size:17px}.count .big{font-size:36px}
 .sq{font-size:clamp(22px,6.5vw,30px);padding:10px;border-radius:24px}
 .bigpic{font-size:clamp(84px,26vw,120px)}
 .story{font-size:20px;padding:12px 14px}.spic{font-size:48px}
 .opts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.opt{font-size:22px;min-height:60px}
 .opts.emo .opt,.emo{font-size:46px}
 .match{gap:10px}.mo{min-height:60px;font-size:19px;padding:8px 6px;overflow-wrap:anywhere}.mo.emo{font-size:40px}
 .chip{min-height:56px;font-size:21px}.chips{gap:8px}
 .bline{min-height:72px;padding:8px}
 .lcard .lpic{font-size:clamp(56px,18vw,90px)}
 .pethero{gap:10px}.petside{padding:12px}.petside h2{font-size:26px}.pet2d{font-size:120px}
 .lv{font-size:22px}.cta{font-size:20px}
 .acc,.bonebtns .bb{min-height:48px;font-size:16px}
 #toast{font-size:19px;padding:10px 16px;top:calc(70px + env(safe-area-inset-top))}
 table{font-size:14px}td,th{padding:5px}
 h2{font-size:26px}
}
@media (max-width:370px){header h1{font-size:18px}.pad button{font-size:30px}}

/* PWA: banner instalar en tablet/escritorio */
#pwa-install{
 position:fixed;z-index:9999;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
 transform:translateX(-50%);width:min(420px,calc(100% - 24px));
 background:#fff;color:var(--belumi-ink);border:3px solid var(--belumi-morado);border-radius:20px;
 padding:14px 16px;box-shadow:0 12px 40px rgba(75,36,126,.25);
 font-size:16px;line-height:1.35;animation:pwaIn .35s ease-out
}
#pwa-install p{margin:0 0 10px}
#pwa-install .pwa-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@keyframes pwaIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (display-mode:standalone){#pwa-install{display:none}}

/* móvil en horizontal */
@media (max-height:500px) and (orientation:landscape){
 #sndbar{flex-direction:column}
 main{padding-right:calc(74px + env(safe-area-inset-right));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
 body{font-size:18px;background-attachment:scroll}
 header{padding:calc(4px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 4px calc(16px + env(safe-area-inset-left));border-radius:0 0 18px 18px}
 header h1{font-size:22px}
 #hdr .stars{font-size:20px;padding:2px 12px}
 #hdr button{min-height:48px;font-size:17px;padding:6px 12px}
 main{padding-top:8px;max-width:none}
 button{min-height:48px;padding:8px 16px;font-size:19px;border-radius:18px}
 .row{margin:6px 0;gap:8px}.row>span{font-size:15px}
 .grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
 .pet-picker{max-height:min(62vh,280px)}
 .petgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 .kid{font-size:22px;padding:10px}.kid .av{font-size:52px}
 .petc .av{font-size:36px;min-height:48px}.petc .av img{width:48px;height:48px}.petc{font-size:14px;padding:6px 3px}
 .pet-sec{font-size:16px;margin:6px 4px}
 .topic{font-size:20px;min-height:84px;padding:8px}.topic small{font-size:14px}
 .subj .si{font-size:40px}.sh{font-size:22px;margin:10px 4px 4px}
 .tutor{margin:6px 0}.bubble{font-size:17px;padding:8px 12px;min-height:0}
 .q{font-size:44px;margin:6px 0;padding:6px}.q.long{font-size:24px}
 #ansv{min-height:64px;font-size:50px;line-height:56px;min-width:160px}
 .pad{grid-template-columns:repeat(10,minmax(0,1fr));max-width:none;gap:6px;margin:6px 0}
 .pad button{font-size:30px;min-height:56px;padding:0;min-width:0}
 .sq{font-size:24px;padding:8px;margin:6px 0}.bigpic{font-size:80px}
 .opts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.opt{font-size:21px;min-height:56px}
 .opts.emo .opt,.emo{font-size:40px}
 .mo{min-height:52px;font-size:19px}.chip{min-height:52px;font-size:20px}
 .petside h2{font-size:26px}.pet2d{font-size:100px}
 .src{padding:6px;font-size:13px}.b100{width:44px;height:44px}.b10{width:10px;height:44px}.b1{width:12px;height:12px}
 #clr{min-height:48px!important}
 .lcard .lpic{font-size:70px}
 .acc,.bonebtns .bb{min-height:48px}
}

/* ===== Calm Adventure (UI app) ===== */
#app.view-enter>*{animation:riseIn .42s ease both}
#app.view-enter .kid-row{animation:riseIn .45s ease both}
#app.view-enter .kid-row:nth-child(1){animation-delay:.04s}
#app.view-enter .kid-row:nth-child(2){animation-delay:.1s}
#app.view-enter .kid-row:nth-child(3){animation-delay:.16s}
#app.view-enter .kid-row:nth-child(4){animation-delay:.22s}
#app.view-enter .subj-hub .subj{animation:riseIn .4s ease both}
#app.view-enter .subj-hub .subj:nth-child(1){animation-delay:.05s}
#app.view-enter .subj-hub .subj:nth-child(2){animation-delay:.1s}
#app.view-enter .subj-hub .subj:nth-child(3){animation-delay:.15s}
#app.view-enter .subj-hub .subj:nth-child(4){animation-delay:.2s}
#app.view-enter .subj-hub .subj:nth-child(5){animation-delay:.25s}
#app.view-enter .subj-hub .subj:nth-child(6){animation-delay:.3s}
#app.view-enter .play-shell{animation:shellIn .4s ease both}
#app.view-enter .pethero{animation:shellIn .45s ease both}
#app.view-enter .report{animation:riseIn .4s ease both}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shellIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.kid-list{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:12px auto 24px}
.kid-row{
 display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:14px 18px;min-height:88px;
 background:#fff;border:2px solid #D9BDFA;border-radius:24px;box-shadow:0 8px 22px #4B247E12;color:var(--belumi-morado);
 transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kid-row:hover{transform:translateY(-2px);box-shadow:0 14px 28px #4B247E18;border-color:var(--belumi-morado-medio)}
.kid-row .av{font-size:48px;line-height:1;flex:none}
.kid-row .meta{display:flex;flex-direction:column;gap:2px;font-size:22px;font-weight:700}
.kid-row small{font-size:15px;font-weight:600;color:var(--belumi-morado-medio)}
.kid-row:active{transform:scale(.99)}
.hub-note{max-width:520px;margin:8px auto 0;font-size:16px;color:#5a4a88;text-align:center}
.subj-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:12px 0 8px}
.subj-hub .subj{min-height:120px;border-radius:24px;border:2px solid #E5CEFC;box-shadow:0 8px 20px #4B247E12!important;transition:transform .15s ease,box-shadow .15s ease}
.subj-hub .subj:hover{transform:translateY(-3px);box-shadow:0 14px 26px #4B247E1c!important}
.pethero{background:#fff8;border:2px solid #E5CEFC;border-radius:28px;padding:12px;box-shadow:0 12px 28px #4B247E10}
#stage{border-radius:24px;overflow:hidden;box-shadow:0 14px 32px #4B247E16;border:2px solid #E5CEFC;background:var(--belumi-crema);animation:stageIn .55s ease both}
@keyframes stageIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.play-shell{display:flex;flex-direction:column;gap:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.play-shell .play-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.play-shell .play-main{display:flex;flex-direction:column;gap:10px}
.play-shell .tutor{margin:0}
.play-shell .owl .belumi-tutor{width:84px;max-height:110px}
.play-shell .bubble{font-size:18px;min-height:0;padding:10px 14px;animation:riseIn .35s ease}
.play-shell .q{margin:4px 0;box-shadow:0 8px 22px #4B247E12;border:2px solid #E5CEFC;background:#fff}
.play-actions{
 position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
 padding:12px 8px calc(12px + env(safe-area-inset-bottom));margin:0 -8px;
 background:linear-gradient(180deg,transparent,#FDF4EDee 28%,var(--belumi-crema));
}
.play-actions .ok{flex:1 1 160px;max-width:280px}
.report{text-align:left;margin:0 auto 18px;max-width:640px;padding:18px;background:#fff;border:2px solid #E5CEFC;border-radius:24px;box-shadow:0 10px 28px #4B247E12}
.report h3{margin:0 0 8px;font-family:var(--belumi-font-display);font-weight:900;color:var(--belumi-morado);font-size:24px}
.report-summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.report-chip{background:var(--belumi-lavanda-clara);color:var(--belumi-morado);border-radius:999px;padding:6px 12px;font-size:15px;font-weight:700}
.report-list{list-style:none;margin:0;padding:0}
.report-list li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #E5CEFC88}
.report-list li:last-child{border-bottom:0}
.report-list .bar{width:110px;height:10px;background:#eee;border-radius:999px;overflow:hidden}
.report-list .bar i{display:block;height:100%;background:var(--belumi-menta)}
.report details{margin-top:10px}
.report .subs-enabled{font-size:15px;color:#5a4a88;margin:0 0 10px}
.topic{box-shadow:0 8px 20px #4B247E12;border:2px solid #E5CEFC;min-height:110px;font-size:24px}
.lesbtn{background:var(--belumi-blanco);color:var(--belumi-morado-medio);border:2px solid #7B4FD033;box-shadow:none}
.sh{color:var(--belumi-morado);text-shadow:none;font-family:var(--belumi-font-display);font-weight:900}
#hdr .stars{color:#c9a010;-webkit-text-stroke:0;background:var(--belumi-amarillo)}
.pad button{color:#fff;border:0}
#padres h2{font-family:var(--belumi-font-display);font-weight:900;color:var(--belumi-morado);letter-spacing:-.01em}
.kids-admin .card{border:2px solid #E5CEFC;box-shadow:0 10px 24px #4B247E12;border-radius:24px;background:#fff}
.kids-admin .addkid{border:2px dashed #7B4FD066!important;background:var(--belumi-blanco)!important;color:var(--belumi-morado)!important}
@media (min-width:900px){
 .play-shell .play-main{display:grid;grid-template-columns:1.2fr .8fr;align-items:start}
 .play-shell .tutor{order:2}
 .play-shell .q,.play-shell .manip{order:1;grid-column:1}
}
@media (prefers-reduced-motion:reduce){
 #app.view-enter>*,#app.view-enter .kid-row,#app.view-enter .subj-hub .subj,#app.view-enter .play-shell,#app.view-enter .pethero,#app.view-enter .report,#stage,.pulse-cta{animation:none!important}
 .kid-row,.subj-hub .subj{transition:none}
}