@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-s.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-s.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--t:#2b2119;--t2:#5c4d41;--p:#f8eddb;--p2:#f0dfc2;--b:#1e3a2f;--b2:#2f5846;--a:#c4512e;--a2:#b84a29;--sol:#f3b72f;--sal:#bccdaf;--ro:#f2c5b0;--mad:#c98b5a;--blanco:#fffaf0;
  --d:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--f:"Figtree",system-ui,sans-serif;color-scheme:light;--pared:#f6e0a6;--toldo1:#c4512e;--toldo2:#fffaf0}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--p);color:var(--t)}
body{font:700 20px/1.25 var(--f);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-text-size-adjust:100%}
h1,h2,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
svg{display:block}
[hidden]{display:none!important}
.cargando{text-align:center;padding:30vh 0;font:800 28px var(--d)}
#raiz{position:fixed;inset:0}
.adulto{-webkit-user-select:text;user-select:text}

/* ---------- botones ---------- */
.btn{min-height:64px;min-width:64px;border:3px solid var(--t);border-radius:20px;background:var(--blanco);box-shadow:0 5px 0 var(--t);font:800 26px/1 var(--d);letter-spacing:.01em;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .08s,box-shadow .08s,background-color .2s;position:relative;color:var(--t)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--t)}
.btn.prim{background:var(--a);color:var(--blanco)}
.btn.suave{background:var(--p2)}
.btn.grande{min-height:76px;font-size:30px;border-radius:24px;padding:0 30px}
.btn.ico{padding:0;width:64px;height:64px;border-radius:18px;flex:none}
.btn.ico svg{width:38px;height:38px}
.btn.mini{min-height:64px;min-width:64px;font-size:34px;padding:0;border-radius:18px}
.btn:disabled{opacity:.4}
.btn:focus-visible,.voz:focus-visible,.perfil:focus-visible,.juego:focus-visible{outline:4px dashed var(--sol);outline-offset:3px}
.voz{flex:none;width:64px;height:64px;border-radius:50%;border:3px solid var(--t);background:var(--sol) center/36px no-repeat;box-shadow:0 4px 0 var(--t);padding:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 15h7l9-7v24l-9-7H6z' fill='%23fffaf0' stroke='%232b2119' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M27 14q4 6 0 12M31 10q7 10 0 20' fill='none' stroke='%232b2119' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.voz:active{transform:translateY(3px);box-shadow:0 1px 0 var(--t)}
body.sin-voz .voz{display:none}
.fila-btn{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- pantallas del modo niño ---------- */
.pantalla{position:absolute;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);animation:entra .3s ease;overflow:hidden}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.esquina{display:flex;gap:10px;align-items:center;padding:14px 16px 0;flex:none}
.esquina .mini-salir{font:700 18px/1 var(--f);min-height:56px;padding:0 16px;gap:6px;box-shadow:0 4px 0 var(--t)}
.esquina .mini-salir svg{width:28px;height:28px}
.esquina .mini-salir:first-of-type{margin-left:auto}
.av-mini svg{width:46px;height:46px}
.cabeza{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 20px;flex:none;text-align:center}
.cabeza h1{font:800 clamp(30px,5vmin,56px)/1.05 var(--d);letter-spacing:-.01em}
.cabeza .logo svg{width:clamp(56px,9vmin,90px);height:auto}
.perfiles{flex:1;display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,30px);justify-content:center;align-content:center;padding:10px 20px 40px;overflow:auto}
.perfil{width:clamp(150px,22vmin,230px);border:3px solid var(--t);border-radius:28px;background:var(--blanco);box-shadow:0 6px 0 var(--t);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.perfil:active{transform:translateY(5px);box-shadow:0 1px 0 var(--t)}
.perfil .av svg{width:clamp(90px,14vmin,150px);height:auto}
.perfil b{font:800 clamp(24px,3.4vmin,34px)/1 var(--d)}
.perfil small{font:700 18px/1 var(--f);color:var(--t2)}
.aviso-caja{max-width:620px;margin:auto;background:var(--blanco);border:3px solid var(--t);border-radius:24px;padding:24px;text-align:center;display:flex;flex-direction:column;gap:18px;font:600 22px/1.35 var(--f)}
.aviso-caja .btn{font:800 22px/1 var(--d)}
.edades{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:14px}
.edad{width:96px;height:96px;font-size:44px}
.mision-caja{display:flex;align-items:center;gap:16px;margin:0 auto 6px;max-width:min(980px,calc(100% - 32px));width:100%;background:var(--blanco);border:3px solid var(--t);border-radius:22px;padding:10px 16px;flex:none}
.mision-caja p{font:700 clamp(16px,2.2vmin,20px)/1.25 var(--f);color:var(--t2)}
.mision-caja>div:nth-child(2){flex:1;min-width:0}
.mision-caja>div:nth-child(2)>b{font:800 22px/1.1 var(--d)}
.anillo{--p:0;width:62px;height:62px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--sol) calc(var(--p)*1%),#ece2cf 0);border:3px solid var(--t)}
.anillo b{width:42px;height:42px;border-radius:50%;background:var(--blanco);border:3px solid var(--t);display:grid;place-items:center;font:800 18px/1 var(--d)}
.mision-caja.hecha .anillo{background:var(--sal)}
.pend{display:flex;align-items:center;gap:6px;font:800 26px/1 var(--d);flex:none}
.pend svg{width:34px;height:34px}
.juegos{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,42vw),1fr));gap:clamp(12px,2vw,22px);padding:10px 16px 8px;overflow:auto;align-content:start;max-width:1200px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch}
.juego{border:3px solid var(--t);border-radius:26px;background:var(--blanco);box-shadow:0 6px 0 var(--t);padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.juego:active{transform:translateY(5px);box-shadow:0 1px 0 var(--t)}
.juego .ic svg{height:clamp(80px,13vmin,130px);width:auto;max-width:100%}
.juego b{font:800 clamp(20px,2.8vmin,28px)/1.05 var(--d)}
.juego small{font:700 16px/1 var(--f);color:var(--t2)}
.juego.lejos{opacity:.72}
.juego.esqueleto{border-style:dashed;opacity:.6}
.nota-estrellas{text-align:center;font:600 16px/1.3 var(--f);color:var(--t2);padding:4px 20px 14px;flex:none}
body.sin-red .p-menu::after{content:"Sin conexión · el progreso se guardará al volver internet";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--sol);border:3px solid var(--t);border-radius:999px;padding:6px 14px;font:700 15px var(--f);white-space:nowrap}

/* ---------- motor: barra ---------- */
.mj{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--p)}
.barra{display:flex;align-items:center;gap:12px;padding:12px 16px 10px;flex:none}
.escalon{flex:1;display:flex;align-items:center;gap:12px;font:800 clamp(20px,2.6vw,30px)/1 var(--d);min-width:0;flex-wrap:wrap}
.puntos{display:flex;gap:7px}
.puntos i{width:22px;height:22px;border-radius:50%;border:3px solid var(--t);background:var(--blanco)}
.puntos i.lleno{background:var(--sol)}
.puntos i.nuevo{animation:salta .5s ease}
.marcador{display:flex;align-items:center;gap:8px;background:var(--blanco);border:3px solid var(--t);border-radius:999px;height:64px;padding:0 18px 0 12px;font:800 30px/1 var(--d);flex:none}
.marcador svg,.estrella svg{width:38px;height:38px}
.marcador.salta{animation:salta .5s ease}
@keyframes salta{40%{transform:scale(1.25)}}
.mision-chip{position:relative;width:64px;height:64px;flex:none}
.mision-chip svg{width:64px;height:64px}
.mision-chip b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px/1 var(--d)}
.mision-chip.hecha{border:3px solid var(--t);border-radius:50%;background:var(--sal)}

/* ---------- motor: mesa y escena ---------- */
.mesa{flex:1;display:grid;gap:14px;padding:2px 16px 16px;min-height:0}
@media (orientation:landscape){.mesa{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (orientation:portrait){.mesa{grid-template-rows:minmax(0,.62fr) minmax(0,1fr)}}
.escena{position:relative;container-type:size;border:3px solid var(--t);border-radius:24px;overflow:hidden;background:var(--pared);min-height:0}
.toldo{position:absolute;left:0;right:0;top:0;height:clamp(24px,7cqh,46px);border-bottom:3px solid var(--t);background:repeating-linear-gradient(90deg,var(--toldo1) 0 40px,var(--toldo2) 40px 80px)}
.toldo::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:12px;
  background:radial-gradient(circle at 20px 0,var(--toldo1) 0 17px,var(--t) 17px 20px,transparent 20.5px) 0 0/80px 12px repeat-x,
             radial-gradient(circle at 20px 0,var(--toldo2) 0 17px,var(--t) 17px 20px,transparent 20.5px) 40px 0/80px 12px repeat-x}
.escena.sin-toldo .toldo{display:none}
.estante{position:absolute;right:3%;width:42%;bottom:calc(16% + min(30cqh,26cqw) + 4cqh);height:11cqh;display:flex;justify-content:space-around;align-items:flex-end;border-bottom:8px solid var(--mad);opacity:.5}
.estante:empty{display:none}
.estante svg{height:100%;width:auto}
.mostrador{position:absolute;left:-3px;right:-3px;bottom:-3px;height:16%;background:var(--mad);border-top:3px solid var(--t)}
.mostrador::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:#b07448;border-bottom:3px solid var(--t)}
.persona{position:absolute;left:2%;bottom:15%;height:min(44cqh,46cqw);aspect-ratio:200/222}
.persona svg{width:100%;height:100%}
.persona .boca{transform-box:fill-box;transform-origin:50% 0}
.persona.habla .boca{animation:boca .22s ease-in-out infinite alternate}
@keyframes boca{from{transform:scaleY(.35)}to{transform:scaleY(1.1)}}
.persona .ojos{transform-box:fill-box;transform-origin:center;animation:parpadeo 4.5s infinite}
@keyframes parpadeo{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
.persona.entra{animation:entraP .5s ease}
@keyframes entraP{from{transform:translateY(30%)}to{transform:none}}
.bocadillo{position:absolute;left:3%;right:3%;top:calc(clamp(24px,7cqh,46px) + 3cqh);display:flex;align-items:center;gap:12px;background:var(--blanco);border:3px solid var(--t);border-radius:22px;padding:10px 16px 10px 10px;box-shadow:0 5px 0 rgba(43,33,25,.18);max-height:44cqh;z-index:2}
.escena.sin-toldo .bocadillo{top:3cqh}
.bocadillo::before{content:"";position:absolute;left:min(14cqw,90px);bottom:-22px;width:30px;height:25px;background:var(--t);clip-path:polygon(0 0,100% 0,8% 100%);transform:translate(-3px,3px)}
.bocadillo::after{content:"";position:absolute;left:min(14cqw,90px);bottom:-19px;width:27px;height:21px;background:var(--blanco);clip-path:polygon(0 0,100% 0,8% 100%)}
.bocadillo .voz{width:54px;height:54px;background-size:30px}
.frase{font:800 clamp(18px,min(5cqw,7cqh),40px)/1.13 var(--d);overflow:hidden}
.nivel-mayor .frase{font:700 clamp(16px,min(4.2cqw,6cqh),30px)/1.25 var(--f)}
.nivel-medio .frase{font:700 clamp(17px,min(4.6cqw,6.5cqh),34px)/1.2 var(--d)}
.frase span{display:block}
.bocadillo.pop{animation:pop .35s ease}
@keyframes pop{from{transform:scale(.92);opacity:.3}to{transform:none;opacity:1}}
.productos{position:absolute;right:3%;left:42%;bottom:16%;height:min(30cqh,26cqw);display:flex;justify-content:flex-end;align-items:flex-end;gap:3cqw}
.productos[data-n="3"],.productos[data-n="4"]{left:34%;gap:1.5cqw;height:min(24cqh,18cqw)}
.prod{position:relative;height:100%;aspect-ratio:1/1.05;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0}
.prod svg{width:100%;flex:1;min-height:0}
.prod.nuevo{animation:pop .45s ease}
.etiqueta{position:absolute;right:-10%;top:-6%;background:var(--blanco);border:3px solid var(--t);border-radius:12px;padding:4px 8px;font:800 clamp(16px,min(4cqw,5.4cqh),34px)/1 var(--d);transform:rotate(6deg);white-space:nowrap;box-shadow:0 3px 0 var(--t);z-index:1}
.etiqueta s{font-size:.7em;opacity:.7;text-decoration-thickness:3px;text-decoration-color:var(--a)}
.oferta{position:absolute;left:-8%;bottom:6%;background:var(--sol);border:3px solid var(--t);border-radius:999px;padding:3px 10px;font:800 clamp(14px,min(3.4cqw,4.6cqh),28px)/1 var(--d);transform:rotate(-8deg);white-space:nowrap;z-index:1}
.cant{position:absolute;left:0;top:0;background:var(--b2);color:var(--blanco);border:3px solid var(--t);border-radius:999px;padding:3px 9px;font:800 clamp(14px,3.4cqw,26px)/1 var(--d)}
.prod.dinero{aspect-ratio:auto;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:4px;width:auto;max-width:48cqw}
.prod.dinero span{display:block;height:58%}
.prod.dinero span.b{height:58%;aspect-ratio:1.75}
.prod.dinero span.m{aspect-ratio:1}
.prod.dinero.varios span{height:44%}
.prod.dinero svg{width:100%;height:100%}
.extra{position:absolute;inset:0;pointer-events:none}
.extra:empty{display:none}
.frascos-escena{position:absolute;right:3%;bottom:16.5%;width:58%;height:44cqh;display:flex;gap:2%;align-items:flex-end}
.frascos-escena .fr{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;height:100%}
.frascos-escena .fr-svg{flex:1;min-height:0;width:100%}
.frascos-escena svg{width:100%;height:100%}
.frascos-escena b{font:800 clamp(16px,4cqw,30px)/1 var(--d)}
.frascos-escena span{font:800 clamp(11px,2.6cqw,18px)/1 var(--d);letter-spacing:.03em}
.meta{position:absolute;left:30%;bottom:58cqh;width:16cqw;height:16cqw;max-height:18cqh}
.meta svg{width:100%;height:100%}
[data-extra="frascos"] .persona{height:min(36cqh,30cqw)}
[data-extra="frascos"] .productos{display:none}
.cola{position:absolute;right:3%;bottom:16%;display:flex;flex-direction:row-reverse;gap:0;height:22cqh;opacity:.9}
.cola .cli{height:100%;aspect-ratio:200/222;margin-left:-4cqw}
.cola svg,.hermanos svg{width:100%;height:100%}
[data-extra="cola"] .productos{left:auto;right:3%;bottom:40cqh;height:20cqh}
.hermanos{position:absolute;right:3%;bottom:16%;height:26cqh;display:flex;gap:1cqw}
.hermanos .cli{height:100%;aspect-ratio:200/222}
[data-extra="hermanos"] .productos{bottom:44cqh;height:18cqh}
.calendario{position:absolute;right:3%;left:40%;bottom:18%;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1.5cqw}
.calendario .sem{background:var(--blanco);border:3px solid var(--t);border-radius:12px;padding:4px 2px;text-align:center;display:flex;flex-direction:column;gap:2px}
.calendario .sem.hecha{background:var(--sal)}
.calendario small{font:800 clamp(10px,2.2cqw,16px)/1 var(--d)}
.calendario b{font:800 clamp(13px,3.2cqw,24px)/1 var(--d)}
[data-extra="calendario"] .productos{bottom:42cqh;height:20cqh}
.caja-reg{position:absolute;right:4%;bottom:16%;width:24cqw;display:flex;flex-direction:column;align-items:center}
.caja-reg svg{width:100%}
.caja-reg b{position:absolute;top:30%;font:800 clamp(14px,4cqw,28px)/1 var(--d)}
[data-extra="caja"] .productos{right:32%;left:36%}

/* ---------- motor: zona de respuesta ---------- */
.zona{display:flex;flex-direction:column;gap:10px;min-height:0}
.consigna{display:flex;align-items:center;gap:12px;min-height:64px;flex:none}
.consigna p{font:800 clamp(22px,3.3vmin,32px)/1.1 var(--d)}
.nivel-mayor .consigna p{font:700 clamp(19px,2.8vmin,26px)/1.2 var(--f)}
.consigna .c-ico{width:52px;height:52px;flex:none}
.consigna .c-ico:empty,.consigna.vacia .c-ico,.consigna.vacia .voz{display:none}
.consigna.aviso-pista p{color:var(--a)}
.consigna.pop{animation:pop .35s ease}
.operacion{flex:none;display:flex;justify-content:center}
.operacion:empty{display:none}
.opr{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;background:var(--blanco);border:3px solid var(--t);border-radius:20px;padding:10px 16px;font:800 clamp(26px,4.4vmin,46px)/1.1 var(--d);box-shadow:0 4px 0 rgba(43,33,25,.2);max-width:100%}
.opr .num{white-space:nowrap}
.opr .num[style]{color:var(--c)}
.opr .sig{color:var(--a)}
.opr .sig.par{color:var(--t2)}
.opr .hueco{min-width:1.6em;padding:0 .3em;border:3px dashed var(--a);border-radius:12px;text-align:center;color:var(--a)}
.opr .res{background:var(--sal);border:3px solid var(--t);border-radius:12px;padding:0 .3em}
.opr.resuelta{background:#eef4ea;animation:pop .35s ease}
.opr.late{animation:late .6s ease}
@keyframes late{30%{transform:scale(1.05)}60%{transform:scale(.98)}}
.opr .meta-total{color:var(--t2)}
.pizarra{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;flex:none}
.pizarra:empty{display:none}
.pizarra .chip{background:var(--sal);border:3px solid var(--t);border-radius:999px;padding:6px 14px;font:800 22px/1 var(--d)}
.panel{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;justify-content:center}
.pista{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.pista:empty{display:none}
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:none}
.opciones.o2{grid-template-columns:repeat(2,1fr)}
.opciones.o4{grid-template-columns:repeat(2,1fr)}
.op.btn,.btn.op{min-height:clamp(96px,17vh,180px);border-radius:24px;font-size:clamp(34px,6vmin,62px);flex-direction:column;gap:6px;padding:8px}
.opciones.o4 .btn.op{min-height:clamp(80px,12vh,130px);font-size:clamp(30px,5vmin,52px)}
.btn.op small{font:800 clamp(16px,2.4vmin,24px)/1.1 var(--d);letter-spacing:.02em}
.btn.op svg{width:min(140px,90%);height:auto;max-height:72px}
.btn.op.razon{min-height:clamp(120px,19vh,170px);font-size:22px}
.btn.op.mal{background:#e7ddd0;opacity:.5;animation:no .4s ease}
.btn.op.bien{background:var(--sal);animation:salta .5s ease}
.btn.op.guia{animation:brilla 1s ease-in-out infinite;box-shadow:0 5px 0 var(--t),0 0 0 6px var(--sol),0 0 24px 8px rgba(243,183,47,.7)}
@keyframes no{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes brilla{50%{transform:translateY(-6px) scale(1.04)}}
.apoyo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.apoyo .grupo{display:flex;align-items:center;background:var(--blanco);border:3px solid var(--t);border-radius:16px;padding:6px 10px}
.apoyo .grupo svg{height:56px;width:auto}

/* monedas */
.bandeja,.monedero{position:relative;flex:1;min-height:110px;border:3px solid var(--t);border-radius:22px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:30px 10px 10px}
.bandeja{background:var(--blanco);border-style:dashed;border-width:4px}
.bandeja.llena{border-style:solid}
.monedero{background:var(--b2)}
.monedero .etq{background:var(--sal)}
.etq{position:absolute;left:14px;top:-3px;transform:translateY(-50%);background:var(--sol);border:3px solid var(--t);border-radius:999px;padding:4px 14px;font:800 17px/1 var(--d);letter-spacing:.04em;pointer-events:none;white-space:nowrap}
.suma-bandeja{position:absolute;right:12px;top:-3px;transform:translateY(-50%);background:var(--blanco);border:3px solid var(--t);border-radius:999px;padding:4px 12px;font:800 18px/1 var(--d);white-space:nowrap;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.suma-bandeja:empty{display:none}
.panel .btn.grande{flex:none;align-self:stretch}
.din{border:0;background:none;padding:0;width:78px;height:78px;touch-action:none;position:relative;flex:none;border-radius:50%}
.din.cent{width:66px;height:66px}
.din.billete{width:136px;border-radius:12px}
.monedero.muchas .din{width:62px;height:62px}.monedero.muchas .din.cent{width:54px;height:54px}.monedero.muchas .din.billete{width:110px}
.din svg{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(43,33,25,.35));pointer-events:none}
.din.arrastra{z-index:20;filter:drop-shadow(0 10px 8px rgba(0,0,0,.25))}
.din.brilla{animation:brilla 1s ease-in-out infinite}
.din.brilla::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:5px solid var(--sol);box-shadow:0 0 18px 6px rgba(243,183,47,.85)}
.din:focus-visible{outline:4px dashed var(--sol);outline-offset:3px}
.bandeja.encima,.monedero.encima{box-shadow:inset 0 0 0 6px var(--sol)}

/* teclado */
.display{align-self:center;min-width:min(340px,90%);height:84px;border:3px solid var(--t);border-radius:20px;background:var(--blanco);display:flex;align-items:center;justify-content:center;gap:8px;font:800 52px/1 var(--d);padding:0 18px}
.display.bien{background:var(--sal)}
.display .suf,.display .pref{color:var(--t2);font-size:.7em}
.teclado{display:flex;flex-direction:column;gap:8px;align-items:center}
.teclado .fila{display:flex;gap:10px;justify-content:center}
.tecla{width:clamp(70px,9vw,92px);height:clamp(58px,8vh,72px);border:3px solid var(--t);border-radius:14px;background:var(--blanco);box-shadow:0 4px 0 var(--t);font:800 32px/1 var(--d);padding:0}
.tecla:active{transform:translateY(3px);box-shadow:0 1px 0 var(--t)}
.tecla.ancha{font-size:22px;background:var(--p2)}
.tecla.ok{background:var(--a);color:var(--blanco)}
.tecla.oculta{display:none}

/* reparto */
.reparto-top{text-align:center;font:800 24px/1 var(--d)}
.reparto-top b{background:var(--sol);border:3px solid var(--t);border-radius:999px;padding:4px 14px;display:inline-block}
.reparto{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1;min-height:0}
.rf{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--blanco);border:3px solid var(--t);border-radius:20px;padding:8px;min-height:0}
.rf-svg{flex:1;min-height:60px;width:100%;max-width:130px}
.rf-svg svg{width:100%;height:100%}
.rf b{font:800 28px/1 var(--d)}
.rf span{font:800 15px/1 var(--d);letter-spacing:.03em}
.rf-btn{display:flex;gap:10px}

/* ---------- avisos y festejo ---------- */
.aviso{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);z-index:35;background:var(--sol);border:3px solid var(--t);border-radius:26px;box-shadow:0 6px 0 var(--t);padding:16px 30px;font:800 clamp(34px,6.5vmin,64px)/1.05 var(--d);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);text-align:center;max-width:92vw}
.aviso.ver{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vuela{position:fixed;left:0;top:0;z-index:36;width:70px;height:70px;pointer-events:none}
.vuela svg{width:100%;height:100%}
#confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.festejo{position:fixed;inset:0;z-index:40;background:rgba(43,33,25,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.festejo-caja{background:var(--p);border:3px solid var(--t);border-radius:30px;box-shadow:0 8px 0 var(--t);padding:26px 30px 30px;text-align:center;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:14px;animation:pop .45s ease}
.festejo-estrella svg{width:120px;height:120px;animation:gira 1.4s ease}
@keyframes gira{from{transform:rotate(-200deg) scale(.2)}to{transform:none}}
.festejo h2{font:800 clamp(32px,5vmin,50px)/1.05 var(--d)}
.festejo p{font:800 clamp(20px,3vmin,28px)/1.2 var(--d);color:var(--b2)}

/* ---------- candado ---------- */
.candado{position:fixed;inset:0;z-index:70;background:rgba(43,33,25,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.candado-caja{background:var(--p);border:3px solid var(--t);border-radius:26px;padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;width:100%}
.candado .pq{font:700 22px/1.3 var(--f);text-align:center}
.respuesta{min-width:200px;height:72px;border:3px solid var(--t);border-radius:18px;background:var(--blanco);font:800 46px/66px var(--d);text-align:center}
.candado .btn{font:700 20px/1 var(--f);min-height:56px}

/* ---------- vertical y pantallas bajas ---------- */
@media (orientation:portrait){
  .escena .persona{height:min(48cqh,40cqw)}
  .op.btn,.btn.op{min-height:clamp(90px,11vh,150px)}
  .btn.op.razon{min-height:clamp(110px,13vh,160px)}
}
@media (max-height:640px){
  .barra{padding:8px 12px 6px}.btn.ico,.marcador,.mision-chip,.mision-chip svg{height:54px}.btn.ico{width:54px}.mision-chip,.mision-chip svg{width:54px}
  .btn.grande{min-height:64px;font-size:26px}
  .din{width:64px;height:64px}.din.cent{width:56px;height:56px}.din.billete{width:112px}
}
@media (max-width:560px){
  .escalon{font-size:18px}.puntos i{width:16px;height:16px}
  .opciones{gap:8px}.btn.op{font-size:30px}
  .esquina .mini-salir span{display:none}
}

/* ---------- mini-lección ---------- */
.btn.ico.ayuda{font:800 34px/1 var(--d);background:var(--sol)}
.leccion{position:fixed;inset:0;z-index:45;background:rgba(43,33,25,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.leccion-caja{background:var(--p);border:3px solid var(--t);border-radius:30px;box-shadow:0 8px 0 var(--t);padding:20px;max-width:1040px;width:100%;max-height:100%;display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;gap:20px;align-items:center;animation:pop .4s ease;overflow:auto}
.lec-persona svg{width:100%;height:auto;max-height:46vh}
.lec-persona.habla .boca{animation:boca .22s ease-in-out infinite alternate}
.lec-persona .boca{transform-box:fill-box;transform-origin:50% 0}
.lec-der{display:flex;flex-direction:column;gap:14px;min-width:0}
.lec-titulo{font:800 clamp(18px,2.4vmin,24px)/1 var(--d);color:var(--a);letter-spacing:.03em}
.lec-texto{font:800 clamp(24px,3.6vmin,38px)/1.15 var(--d);background:var(--blanco);border:3px solid var(--t);border-radius:22px;padding:14px 18px;min-height:3.6em}
.nivel-mayor .lec-texto,.nivel-medio .lec-texto{font:700 clamp(21px,3vmin,30px)/1.25 var(--f)}
.lec-texto.pop{animation:pop .35s ease}
.lec-op:empty{display:none}
.lec-op{display:flex;justify-content:center}
.lec-cosas{display:flex;gap:12px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.lec-cosas:empty{display:none}
.lec-cosas .lc{display:flex;flex-direction:column;align-items:center;gap:4px;font:800 22px/1 var(--d)}
.lec-cosas .lc svg{height:64px;width:auto}
.lec-cosas .lc.b svg{height:52px}
.leccion .fila-btn .btn{min-height:72px;font-size:26px}
@media (orientation:portrait){.leccion-caja{grid-template-columns:1fr}.lec-persona{max-width:220px;margin:0 auto}.lec-persona svg{max-height:24vh}}
.puntos i.actual{box-shadow:0 0 0 3px var(--sol)}
.mj .puntos:has(i:nth-child(6)) i{width:18px;height:18px}
/* ---------- examen ---------- */
.ex-portada,.ex-final{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center}
.ex-portada h1,.ex-final h1{font:800 clamp(34px,6vmin,62px)/1.05 var(--d)}
.ex-portada p,.ex-final p{font:800 clamp(20px,3vmin,30px)/1.2 var(--d);color:var(--b2)}
.ex-monedas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px}
.ex-monedas span{width:clamp(54px,8vmin,80px);height:clamp(54px,8vmin,80px)}
.ex-monedas span svg{width:100%;height:100%}
.ex-monedas span.vacia{border:4px dashed #cbbfa8;border-radius:50%}
.ex-monedas span.nueva{animation:pop .5s ease both}
.juego.examen{background:var(--sol);border-width:4px}
.lec-svg svg{max-height:30vh;width:auto;max-width:100%}