:root{font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#342b47;background:#f8f5ef;--violet:#6752ca;--dark:#49369e;--paper:#fffefa;--line:#ede7dd;--qa-height:0px}
#gameShell{display:none}
#orientationGate{position:fixed;inset:var(--qa-height) 0 0;z-index:20;display:flex;align-items:center;justify-content:center;overflow:auto;padding:calc(16px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));background:linear-gradient(#58c7df,#b9eee1);text-align:center}
.orientation-card{width:100%;max-width:350px;background:#fffefa;border:2px solid #9bcbd1;border-radius:30px;padding:20px;box-shadow:0 6px 0 #37889933}
.rotate-phone{width:150px;height:134px;margin:0 auto 8px}
.orientation-card h1{font-size:28px;color:#2f596c;margin:0 0 8px;outline:none}.orientation-card p{color:#466875;font-size:17px;line-height:1.4;margin-bottom:16px}.orientation-card .orientation-help{font-size:13px;line-height:1.5;margin:16px 0 0}.orientation-card button{width:100%;font-size:16px}
.turn-phone{transform-box:fill-box;transform-origin:center;animation:turn-phone 2.5s ease-in-out infinite}
@keyframes turn-phone{0%,15%{transform:rotate(0deg)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}
@media (orientation:landscape) and (min-width:540px){#gameShell{display:block}#orientationGate{display:none}}
@media(max-height:550px){.orientation-card{padding:14px 20px}.rotate-phone{width:120px;height:106px}.orientation-card h1{font-size:24px}.orientation-card p{font-size:15px;margin-bottom:10px}}
body[data-channel="qa"]{--qa-height:20px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0%,#ece5ff,transparent 45%),#f8f5ef;min-height:100dvh}button,input,summary{font:inherit}button{border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:48px;min-height:48px;font-weight:750}button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--dark);outline-offset:3px}button:active{transform:scale(.97)}button:disabled{opacity:.35;cursor:default}button svg{width:30px;height:30px;display:block}button span[data-icon]{display:flex;align-items:center}svg{display:block}h1,h2,p{margin-top:0}h1{line-height:1.15;font-weight:850;letter-spacing:-.7px}h2{font-size:21px;letter-spacing:-.4px}.hidden{display:none!important}
#qaBanner{text-align:center;font-size:11px;line-height:20px;background:#fff1c6;color:#654b25;min-height:20px}.app-header{height:76px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;box-sizing:content-box;height:44px;display:flex;align-items:center;justify-content:space-between;max-width:640px;margin:auto;gap:8px}.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:850;color:var(--dark);line-height:1.1}.brand>span[data-icon]{width:35px;color:var(--dark)}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:#716686}.starcount{display:flex;align-items:center;gap:5px;background:var(--paper);border:1px solid #ede1bb;border-radius:18px;padding:8px 10px;font-weight:850;min-width:83px;font-size:18px}.starcount svg{width:27px;height:27px;color:#8b631c}.total{font-size:13px;color:#74697d}.screen{max-width:640px;margin:auto;padding:10px 16px calc(24px + env(safe-area-inset-bottom))}.welcome{position:relative;overflow:hidden;background:#e9e2fb;border:1px solid #ddd2f1;border-radius:28px;padding:25px 22px;min-height:225px}.eyebrow{display:block;color:#5d4e7c;font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:12px}.welcome h1{font-size:29px;max-width:210px;margin-bottom:10px}.welcome p{font-size:14px;color:#625476;max-width:175px;line-height:1.5;margin-bottom:16px}.welcome #heroArt{position:absolute;width:175px;height:175px;right:-40px;bottom:-20px;transform:rotate(-5deg);opacity:.95;pointer-events:none}.welcome .mainbtn{position:relative;z-index:1}.mainbtn,.finish{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;border-radius:18px;background:var(--violet);color:white;padding:13px 20px;font-size:17px;box-shadow:0 4px 0 var(--dark)}.mainbtn:active,.finish:active{box-shadow:0 2px 0 var(--dark)}.secondary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 15px;border-radius:16px;background:var(--paper);border:1px solid #e5ded2;color:#574b6c;font-size:14px}.screen>h2{margin:23px 2px 12px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.story{position:relative;background:var(--paper);border:1px solid #e7dfd2;border-radius:23px;padding:9px 9px 12px;text-align:left;color:#382f47;box-shadow:0 4px 0 #ede5d8;overflow:hidden}.story-art{aspect-ratio:1.05;border-radius:17px;overflow:hidden;background:#eee}.story-art svg{width:100%;height:100%}.story strong{display:block;font-size:15px;margin:9px 4px 4px;line-height:1.25}.story small{display:block;font-size:11px;margin:0 4px;color:#766a7b}.done{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:3px;background:#fff9e6;border-radius:50%;color:#926717;border:1px solid #eacfa1}.home-bottom{display:flex;gap:10px;margin:24px 0 12px}.home-bottom button{flex:1;font-size:12px}.home-bottom svg{width:23px;height:23px}.footnote{font-size:12px;color:#776c7a;text-align:center;line-height:1.5;margin:18px 0 0}
body[data-screen="play"]{overflow-x:hidden}.screen#play{height:calc(100dvh - 68px - var(--qa-height) - env(safe-area-inset-top));min-height:475px;display:grid;grid-template-rows:48px minmax(140px,1fr) auto;gap:7px;padding:2px 12px calc(8px + env(safe-area-inset-bottom));max-width:550px}.playtop{display:flex;align-items:center;justify-content:space-between;gap:10px}.playtop h1{margin:0;font-size:19px;text-align:center;flex:1}.iconbutton{width:50px;height:48px;border-radius:16px;background:var(--paper);border:1px solid #e4ddcf;color:#60507c;display:flex;align-items:center;justify-content:center;flex-shrink:0}.iconbutton svg{width:27px;height:27px}.paper-wrap{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.paper{isolation:isolate;position:relative;width:100%;max-width:420px;aspect-ratio:1;max-height:100%;border-radius:26px;overflow:hidden;background:white;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 5px 18px #75695517;outline:0;container-type:size}.paper>.base-art{position:absolute;inset:0;width:100%;height:100%}.paper>.ink-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.paper>.outline-art{mix-blend-mode:multiply;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.outline-art *{pointer-events:none!important}.detail{pointer-events:none}.paintable{cursor:pointer;transition:none}.paintable:focus-visible{stroke:#19131f;stroke-width:7;outline:none}.paper[data-tool="pencil"],.paper[data-tool="brush"]{cursor:crosshair}.paint-dock{background:var(--paper);border:1px solid #e9e1d4;border-radius:24px;padding:7px 10px 9px;box-shadow:0 4px 14px #84705a0d}.paint-hint{text-align:center;font-size:12px;line-height:16px;color:#6a5a7b;margin:0 0 6px}.tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:5px 2px;border-radius:15px;background:#f4f0e9;border:2px solid transparent;color:#6c5a83;font-size:11px}.tool svg{width:27px;height:27px}.tool[aria-pressed=true]{background:#e9e2fa;border-color:var(--violet);color:var(--dark)}.colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:5px;padding:8px 2px}.swatch{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;border:4px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px #e5ddd0;padding:0;color:#342441}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--violet)}.swatch[aria-pressed=true]::after{content:'✓';font-size:23px;color:white;text-shadow:0 1px 3px #39234b}.swatch[data-color="#ffffff"][aria-pressed=true]::after,.swatch[data-color="#ffe476"][aria-pressed=true]::after{color:#48364f;text-shadow:none}.actions{display:flex;gap:8px;margin-top:4px}.actions .finish{flex:1;min-height:48px;font-size:16px;padding:8px;border-radius:16px;box-shadow:0 3px 0 var(--dark)}.actions .finish svg{width:23px;height:23px}.actions .iconbutton{width:48px}
.intro,.reward,.adult{max-width:500px;text-align:center}.intro h1{font-size:27px;margin:20px 0 12px}.intro #introArt{max-width:300px;margin:auto}.intro p{line-height:1.65;color:#685b76}.reference{font-size:13px}.intro button,.reward button{margin:15px auto;min-width:200px}.reward{padding-top:30px}.bigstar{width:125px;margin:0 auto 15px;color:#9d7536;animation:celebrate .6s ease-out}.reward h1{color:var(--dark);font-size:34px;margin-bottom:12px}.reward p{color:#70647c;line-height:1.6}.lesson{padding:18px;border-radius:20px;background:#fff1ce;color:#6f5533!important;margin:22px 0}.adult{text-align:left;padding:22px}.adult h1{font-size:27px}.adult label{display:block;font-weight:700;margin-bottom:12px}.adult input{display:block;width:100%;min-height:56px;margin-top:10px;border:2px solid #cbc0e7;border-radius:14px;font-size:17px;padding:12px;background:var(--paper);color:#39264b}.adult p,.adult details{font-size:14px;line-height:1.6;color:#6d5d7b}.adult button{width:100%;margin:15px 0}.danger{color:#874452;background:#fff2f0}.adult details{margin-top:25px}.adult summary{min-height:48px;cursor:pointer;padding:12px;border-radius:12px;background:#eee8f7}.adult details p{padding:0 12px}
dialog{max-width:min(380px,calc(100vw - 32px));width:100%;border:1px solid #e4d9cd;border-radius:27px;padding:25px;color:#41334f;background:var(--paper);box-shadow:0 25px 90px #30214338;text-align:center}dialog::backdrop{background:#30244766}dialog h2{margin:0 0 15px;font-size:23px}dialog p{font-size:14px;line-height:1.6;color:#77657e}dialog button{width:100%;margin:12px 0 0}.dialog-icon{width:55px;margin:0 auto 15px;color:#7b5ca2}#status{max-width:550px;font-size:13px;text-align:center;color:#604987;padding:0 16px;line-height:1.5;margin:0 auto}#status:empty{display:none}body[data-screen="play"] #status:not(:empty){position:fixed;bottom:calc(9px + env(safe-area-inset-bottom));left:16px;right:16px;background:#fff7da;border:1px solid #e6d093;box-shadow:0 3px 20px #4b305330;border-radius:15px;padding:10px;z-index:5;pointer-events:none}
@keyframes celebrate{from{transform:scale(.7)}to{transform:scale(1)}}@media(min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.welcome #heroArt{right:5px;width:220px;height:220px}.welcome h1{max-width:350px}.welcome p{max-width:350px}}@media(max-height:700px){.screen#play{min-height:450px}.tool{min-height:56px}.paint-hint{font-size:11px;margin-bottom:3px}.colors{gap:4px;padding:6px 2px}.paint-dock{padding:5px 8px 7px}.paper{border-radius:20px}}@media(max-width:350px){.brand{font-size:15px}.app-header{padding-left:12px;padding-right:12px}.welcome h1{font-size:26px}.welcome #heroArt{width:145px;right:-47px;opacity:.65}.story strong{font-size:13px}.playtop h1{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Una muestra grande abre los acabados; conserva espacio para el papel. */
#texturePreview{display:block;width:30px;height:30px;border-radius:9px;border:1px solid #9a8caa;background-size:48px 48px;background-position:center}
.texture-open{background:#fff5dd;border-color:#ecddb2;color:#72592e}
.texture-open[data-texture]:not([data-texture="solid"]){border-color:#cfac59}
.swatch{background-size:48px 48px;background-position:center}
#textureChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
dialog .texture-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0;min-height:84px;border-radius:17px;padding:7px 3px;background:#f4f0e9;color:#59496b;border:2px solid transparent;font-size:12px}
.texture-choice[aria-pressed="true"]{background:#ece5fc;border-color:var(--violet)}
.texture-sample{display:block;width:48px;height:48px;border-radius:13px;border:1px solid #d7c9dd;background-size:48px 48px;background-position:center}
@media(max-width:350px){.tool{font-size:10px}}

/* Referencia de uso: cielo tranquilo, instrumentos reconocibles y papel limpio.
   Las ilustraciones y las nubes son propias; todas las herramientas funcionan. */
body[data-screen="play"]{background-color:#60d1db;background-image:radial-gradient(ellipse 170px 95px at 5% 97%,#b7eee099 98%,transparent),radial-gradient(ellipse 170px 110px at 94% 98%,#b7eee080 98%,transparent),radial-gradient(ellipse 55px 18px at 7% 14%,#ffffff25 98%,transparent),radial-gradient(ellipse 35px 28px at 9% 12%,#ffffff25 98%,transparent),radial-gradient(ellipse 60px 18px at 83% 14%,#ffffff25 98%,transparent),linear-gradient(#37b9d5,#7cdccf)}
body[data-screen="play"] .brand,body[data-screen="play"] .brand small{color:#214b5e}
body[data-screen="play"] .paper{border-radius:12px;box-shadow:0 4px 18px #236f8325}
#inlineTextures{display:none}
#tools [data-tool-art]{display:block;width:100%;max-width:120px}
#tools [data-tool-art] svg{width:100%;height:30px;overflow:visible}
#play #complete{background:#a4df37;color:#245318;box-shadow:0 3px 0 #548631;border:2px solid #41612e}
#play #complete svg{fill:none;stroke-width:3}
#eraseDirect{color:#a34960;background:#fff4f1}
#play .tool[aria-pressed="true"]{background:#def7b9;border-color:#578238;color:#294e29}
#play .actions{gap:6px}
@media(max-width:350px){#play .finish-label{display:none}#play #complete{min-width:52px}}

/* Horizontal: muestras al lado del papel, sin exigir precisión ni lectura. */
@media (orientation:landscape) and (min-width:540px){
 :root{--header-landscape:48px;--paper-limit:900px;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
 .app-header{height:40px;padding:calc(4px + var(--safe-top)) calc(12px + var(--safe-right)) 4px calc(12px + var(--safe-left));max-width:none}
 .brand{font-size:15px}.brand small{font-size:8px;margin-top:2px}.brand>span[data-icon]{width:29px}.starcount{padding:4px 10px;font-size:16px;border-radius:14px}.starcount svg{width:23px;height:23px}
 .screen{max-width:none;padding-left:calc(8px + var(--safe-left));padding-right:calc(8px + var(--safe-right))}
 /* Inicio: bienvenida a un lado y las cinco aventuras visibles al otro. */
 #home{height:calc(100dvh - var(--header-landscape) - var(--qa-height) - var(--safe-top));display:grid;grid-template-columns:clamp(135px,22vw,200px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 48px;gap:8px;padding-top:4px;padding-bottom:calc(6px + var(--safe-bottom))}
 #home>h2,#home>.footnote,.welcome .eyebrow,.welcome p,.welcome #heroArt{display:none}
 .welcome{grid-column:1;grid-row:1;min-height:0;padding:12px;display:flex;flex-direction:column;justify-content:center;border-radius:22px}
 .welcome h1{font-size:clamp(19px,2.8vw,26px);max-width:none;margin-bottom:12px;overflow-wrap:anywhere}
 .welcome .mainbtn{font-size:15px;min-height:52px;padding:8px 10px;gap:6px;border-radius:16px;width:100%}.welcome .mainbtn svg{width:24px;height:24px}
 #stories{grid-column:2;grid-row:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-self:center}
 .story{padding:5px 5px 8px;border-radius:17px;min-width:48px}.story-art{border-radius:12px;max-height:28dvh;aspect-ratio:1}.story strong{font-size:clamp(11px,1.6vw,15px);margin:6px 1px 3px}.story small{font-size:10px;margin:0 1px}.done{width:25px;height:25px;right:7px;top:7px;padding:1px}
 .home-bottom{grid-column:1/-1;grid-row:2;margin:0;gap:8px}.home-bottom button{min-height:48px;font-size:13px;padding:6px}

 body[data-screen="play"]{overflow:hidden}
 body[data-screen="play"] .app-header{display:none}
 #play.screen{--actions-width:56px;--colors-width:100px;--texture-width:0px;--tools-width:96px;--title-gap:6px;position:relative;height:calc(100dvh - var(--qa-height));min-height:0;max-width:none;grid-template-columns:var(--actions-width) minmax(0,1fr) var(--colors-width) var(--tools-width);grid-template-rows:repeat(6,minmax(48px,1fr));column-gap:6px;row-gap:0;padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left))}
 #play .playtop,#play .paint-dock,#play .actions{display:contents}
 #play .paint-hint{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%)}
 #play .paper-wrap{grid-column:2;grid-row:1/-1;min-width:0;min-height:0}
 #play .paper{max-width:var(--paper-limit);border-radius:8px}
 #playTitle{position:absolute;left:calc(50% + (var(--safe-left) - var(--safe-right) + var(--actions-width) - var(--colors-width) - var(--texture-width) - var(--tools-width) - var(--title-gap))/2);top:calc(8px + var(--safe-top));transform:translateX(-50%);max-width:40%;z-index:1;pointer-events:none;margin:0;padding:3px 10px;border-radius:0 0 12px 12px;background:#ffffffed;color:#46616c;font-size:11px;line-height:16px;text-align:center}
 #play .iconbutton{width:52px;height:48px;min-height:48px;justify-self:center;align-self:center;border:2px solid #37788a;border-radius:14px;background:#e5faf8;color:#2c6577;box-shadow:0 3px 0 #27758a55}
 #play .iconbutton svg{width:29px;height:29px}
 #complete{grid-column:1;grid-row:1}#back{grid-column:1;grid-row:2}#listen{grid-column:1;grid-row:3}#eraseDirect{grid-column:1;grid-row:4}#undo{grid-column:1;grid-row:4}#playSound{grid-column:1;grid-row:5}#playOptions{grid-column:1;grid-row:6}
 #play #complete{width:54px;height:52px;min-height:48px;justify-self:center;align-self:center;flex:none;padding:8px;border-radius:15px;font-size:0;gap:0}
 #play #complete svg{width:32px;height:32px}#play .finish-label{display:none}
 #play #eraseDirect{color:#984962;background:#fff1f0;border-color:#9b6876;box-shadow:0 3px 0 #8a5a7255}
 #play #playOptions{background:#ffffff90;color:#366578;border-color:#598799;box-shadow:none}
 #play #colors{grid-column:3;grid-row:1/-1;grid-template-columns:repeat(2,minmax(48px,1fr));grid-template-rows:repeat(5,minmax(48px,1fr));gap:0;padding:0;align-self:stretch;box-shadow:0 3px 0 #28738960;border:2px solid #335e6e;border-radius:9px}
 #play .swatch{width:100%;height:100%;min-width:48px;min-height:48px;border:1px solid #ffffff66;border-radius:0;box-shadow:none;background-size:48px 48px}
 #play .swatch:nth-child(1){border-top-left-radius:6px}#play .swatch:nth-child(2){border-top-right-radius:6px}#play .swatch:nth-child(9){border-bottom-left-radius:6px}#play .swatch:nth-child(10){border-bottom-right-radius:6px}
 #play .swatch[aria-pressed="true"]{outline:3px solid #335e6e;outline-offset:-3px;z-index:1}
 #play #tools{grid-column:4;grid-row:1/-1;grid-template-columns:minmax(48px,1fr);grid-template-rows:repeat(5,minmax(48px,1fr));gap:2px;align-self:stretch;background:#e3f5ea;border:2px solid #335e6e;border-radius:12px;padding:2px;box-shadow:0 3px 0 #28738960}
 #play .tool{position:relative;width:100%;height:100%;min-height:48px;padding:2px;gap:0;border:2px solid transparent;border-radius:8px;background:transparent;font-size:11px;line-height:13px;color:#395866;justify-content:center}
 #play .tool [data-tool-art] svg{height:40px}
 #play .tool[aria-pressed="true"]{background:#f4ffc7;border-color:#4b723e;box-shadow:inset 0 0 0 1px #fff;transform:translateX(-3px)}
 #play #texturePreview{width:36px;height:28px;border-radius:5px;border:2px solid #466975}
 body[data-screen="play"] #status:not(:empty){left:calc(72px + var(--safe-left));right:calc(220px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));max-width:none;font-size:12px;padding:7px}
 /* Diálogos compactos: todos los acabados visibles incluso en teléfonos bajos. */
 dialog{max-width:min(600px,calc(100vw - var(--safe-left) - var(--safe-right) - 24px));max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);padding:12px 18px;border-radius:22px}
 dialog h2{font-size:20px;margin-bottom:10px}dialog button{min-height:48px;padding:8px 10px;margin-top:8px}
 #textureChoices{grid-template-columns:repeat(6,minmax(48px,1fr));gap:6px}dialog .texture-choice{min-height:82px;padding:6px 2px;font-size:11px}
 #optionsDialog[open]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#optionsDialog h2{grid-column:1/-1}#optionsDialog button{font-size:13px;margin:0;gap:5px}#optionsDialog button svg{width:24px;height:24px}
 #clearDialog[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#clearDialog .dialog-icon{grid-column:1/-1;width:38px;margin:0 auto}#clearDialog h2,#clearDialog p{grid-column:1/-1;margin:0}#clearDialog p{font-size:13px}#clearDialog button{margin:0;font-size:14px}
 /* Historia y celebración también aprovechan el ancho. */
 #intro{height:calc(100dvh - var(--header-landscape) - var(--qa-height) - var(--safe-top));display:grid;grid-template-columns:48px minmax(0,1fr) minmax(180px,1fr);grid-template-rows:auto minmax(0,1fr) auto 48px 48px;gap:6px;padding-top:6px;padding-bottom:calc(6px + var(--safe-bottom))}
 #introBack{grid-column:1;grid-row:1;width:48px;min-width:48px;min-height:48px;margin:0;font-size:0;padding:8px}
 #introArt{grid-column:2;grid-row:1/-1;max-width:none!important;min-height:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin:0!important}#introArt svg{width:100%;height:100%;max-height:100%}
 #introTitle{grid-column:3;grid-row:1;font-size:20px;line-height:1.15;margin:0}#introText{grid-column:3;grid-row:2;font-size:13px;line-height:1.4;margin:0;align-self:center}#introBook{grid-column:3;grid-row:3;font-size:11px;margin:0}
 #introListen{grid-column:3;grid-row:4}#paintStart{grid-column:3;grid-row:5}#intro button:not(#introBack){min-height:48px;min-width:48px;width:100%;font-size:14px;padding:7px;margin:0}
 #reward{height:calc(100dvh - var(--header-landscape) - var(--qa-height) - var(--safe-top));display:grid;grid-template-columns:110px repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) 48px;gap:8px;padding-top:10px;padding-bottom:calc(8px + var(--safe-bottom));text-align:center}
 #reward .bigstar{grid-column:1;grid-row:1/4;width:90px;margin:auto;align-self:center}#reward h1{grid-column:2/-1;grid-row:1;font-size:28px;margin:0}#rewardNote{grid-column:2/-1;grid-row:2;font-size:13px;margin:0}#rewardLesson{grid-column:2/-1;grid-row:3;align-self:center;font-size:15px;line-height:1.4;padding:12px;margin:0}
 #rewardListen{grid-column:1;grid-row:4}#again{grid-column:2;grid-row:4}#keepPainting{grid-column:3;grid-row:4}#reward button{min-width:48px;min-height:48px;width:100%;margin:0;padding:7px 8px;font-size:13px;gap:5px}#reward button svg{width:23px;height:23px}
 .adult{max-width:900px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.adult h1,.adult #voiceHelp,.adult details,.adult .footnote{grid-column:1/-1}.adult button{margin:8px 0;min-height:48px}
 #intro{grid-template-rows:auto minmax(0,1fr) auto 48px}
 #introBack{grid-row:1/-1;align-self:start}
 #intro .intro-actions{grid-column:3;grid-row:4;display:flex;gap:6px;min-width:0}
 #intro .intro-actions button{flex:1;width:auto;font-size:13px;gap:4px;min-width:48px;padding:7px}
 #intro .intro-actions button svg{width:23px;height:23px}
 #introText{min-height:0;overflow:auto}
 .welcome h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}

/* En iPhone horizontal amplio, los seis acabados se eligen con un solo toque.
   Diez colores en dos columnas evitan franjas demasiado estrechas para el dedo. */
@media (orientation:landscape) and (min-width:740px) and (min-height:350px){
 #play.screen{--texture-width:52px;--title-gap:12px;grid-template-columns:var(--actions-width) minmax(0,1fr) var(--colors-width) var(--texture-width) var(--tools-width)}
 #play #inlineTextures{display:grid;grid-column:4;grid-row:1/-1;grid-template-rows:repeat(6,minmax(48px,1fr));border:2px solid #335e6e;border-radius:9px;box-shadow:0 3px 0 #28738960}
 .material-swatch{position:relative;width:100%;height:100%;min-width:48px;min-height:48px;padding:0;border:1px solid #ffffff66;background-size:48px 48px;background-position:center}
 .material-swatch:first-child{border-radius:6px 6px 0 0}.material-swatch:last-child{border-radius:0 0 6px 6px}
 .material-swatch>span{display:block;position:absolute;bottom:2px;left:1px;right:1px;padding:2px 0;border-radius:5px;background:#fffdf1dd;color:#395360;font-size:9px;line-height:10px}
 .material-swatch[aria-pressed="true"]{outline:3px solid #335e6e;outline-offset:-3px;z-index:1}
 .material-swatch[aria-pressed="true"]::after{content:"";position:absolute;left:-8px;top:50%;width:12px;height:20px;transform:translateY(-50%);clip-path:polygon(0 0,100% 50%,0 100%);background:#335e6e}
 #play #tools{grid-column:5;grid-template-rows:repeat(4,minmax(48px,1fr))}
 #play #textureOpen{display:none}
 #play .tool [data-tool-art] svg{height:46px}
 body[data-screen="play"] #status:not(:empty){right:calc(278px + var(--safe-right))}
}
/* Espacio reducido por barras: dos columnas de acciones mantienen cada botón
   grande. Las texturas siguen accesibles desde su muestra, sin encogerlas. */
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){
 #play.screen{--actions-width:104px;--tools-width:80px;grid-template-rows:repeat(3,minmax(48px,1fr));padding-top:calc(4px + var(--safe-top));padding-bottom:calc(4px + var(--safe-bottom))}
 #play #complete{grid-row:1;justify-self:start;width:48px;height:48px}#play #back{grid-row:1;justify-self:end;width:48px}
 #play #listen{grid-row:2;justify-self:start;width:48px}#play #undo{grid-row:2;justify-self:end;width:48px}
 #play #eraseDirect{grid-row:3;justify-self:start;width:48px}#play #playSound{grid-row:3;justify-self:start;width:48px}#play #playOptions{grid-row:3;justify-self:end;width:48px}
 #playTitle{top:calc(4px + var(--safe-top))}
 #play .tool [data-tool-art] svg{height:30px}#play .tool{font-size:10px;line-height:11px}
 .welcome{padding:8px}.welcome h1{font-size:18px;margin-bottom:8px;-webkit-line-clamp:2}.welcome .mainbtn{font-size:13px;min-height:48px}
 .story strong{font-size:11px}.story small{font-size:9px}
}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){
 #play.screen{--colors-width:148px;--tools-width:104px;grid-template-rows:repeat(4,minmax(48px,1fr))}
 #play #colors{grid-template-columns:repeat(3,minmax(48px,1fr));grid-template-rows:repeat(4,minmax(48px,1fr))}
 #play #tools{grid-template-columns:repeat(2,minmax(48px,1fr));grid-template-rows:repeat(3,minmax(48px,1fr))}
 #play .swatch{border-radius:0}#play .swatch:nth-child(1){border-top-left-radius:6px}#play .swatch:nth-child(3){border-top-right-radius:6px}#play .swatch:nth-child(10){border-bottom-left-radius:6px}
 #play .tool{font-size:9px}.tool [data-tool-art] svg{height:24px!important}
 #introTitle{font-size:18px}#introText{font-size:12px;line-height:1.35}
 body[data-screen="play"] #status:not(:empty){right:calc(270px + var(--safe-right))}
}

/* ===================== 0.8 «Mundo vivo» ===================== */
h1:focus{outline:none}
.artwork,.art-holder{width:100%;height:100%}.artwork svg{width:100%;height:100%;display:block}
/* Obra en capas, igual que el papel: rellenos, trazos y contornos que multiplican. */
.artwork.layered{position:relative}.artwork.layered>svg{position:absolute;inset:0}.artwork .outline-copy{mix-blend-mode:multiply;pointer-events:none}
/* Ojos que parpadean (base y contorno comparten retraso, nunca se desfasan). */
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
/* La obra terminada cobra vida. En el papel nunca se mueve: los trazos quedarían fuera de lugar. */
.alive .live{transform-box:fill-box;transform-origin:50% 100%;animation:3s ease-in-out var(--live-delay,0s) infinite alternate}
.alive .live[data-live="sun"]{transform-origin:center;animation-name:live-sun;animation-duration:2.6s}
.alive .live[data-live="cloud"]{animation-name:live-cloud;animation-duration:5.5s}
.alive .live[data-live="hop"]{animation:live-hop 2.8s ease-in-out var(--live-delay,0s) infinite}
.alive .live[data-live="sheep"]{animation:live-sheep 1.9s ease-in-out .3s infinite}
.alive .live[data-live="rainbow"]{animation-name:live-rainbow;animation-duration:2.2s}
.alive .live[data-live="ark"]{transform-origin:50% 85%;animation-name:live-rock;animation-duration:2.8s}
.alive .live[data-live="lion"]{animation-name:live-lion;animation-duration:1.5s}
.alive .live[data-live="fish"]{transform-origin:center;animation-name:live-fish;animation-duration:2.2s}
.alive .live[data-live="bubbles"]{animation:live-bubbles 2.6s ease-in infinite}
.alive .live[data-live="boat"]{transform-origin:50% 90%;animation-name:live-boat;animation-duration:2.6s}
.alive .live[data-live="waves"]{animation-name:live-cloud;animation-duration:2.4s}
@keyframes live-sun{from{transform:scale(.96) rotate(-6deg)}to{transform:scale(1.08) rotate(8deg)}}
@keyframes live-cloud{from{transform:translateX(-9px)}to{transform:translateX(9px)}}
@keyframes live-hop{0%,58%,100%{transform:translateY(0) scale(1)}64%{transform:translateY(0) scale(1.04,.95)}74%{transform:translateY(-10px) scale(.98,1.03)}84%{transform:translateY(0) scale(1.03,.97)}90%{transform:translateY(-3px)}}
@keyframes live-sheep{0%,62%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(1px) scale(1.04,.95)}80%{transform:translateY(-16px) rotate(-5deg)}90%{transform:translateY(0) scale(1.03,.96) rotate(1deg)}}
@keyframes live-rainbow{from{transform:scale(.985);opacity:.82}to{transform:scale(1.025);opacity:1}}
@keyframes live-rock{from{transform:rotate(-2.4deg) translateY(1px)}to{transform:rotate(2.4deg) translateY(-3px)}}
@keyframes live-lion{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-2px)}}
@keyframes live-fish{from{transform:translateY(-7px) rotate(-2.5deg)}to{transform:translateY(6px) rotate(2.5deg)}}
@keyframes live-bubbles{0%{transform:translateY(16px);opacity:0}18%{opacity:1}78%{transform:translateY(-24px);opacity:1}100%{transform:translateY(-34px);opacity:0}}
@keyframes live-boat{from{transform:rotate(-3deg)}to{transform:rotate(3deg) translateY(-2px)}}

/* Lanita, la ovejita guía. */
.lamb{display:block;width:100%;height:100%;min-width:48px;min-height:48px;padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer}
.lamb:active{transform:none}.lamb-art{width:100%;height:100%;overflow:visible;transform-origin:50% 92%}
.lamb-body{transform-box:fill-box;transform-origin:50% 100%;animation:lamb-breathe 3.4s ease-in-out infinite}
.lamb-head{transform-box:fill-box;transform-origin:25% 85%;animation:lamb-head 5s ease-in-out infinite}
.lamb-tail{transform-box:fill-box;transform-origin:100% 50%;animation:lamb-tail 1.4s ease-in-out infinite}
.lamb.hop .lamb-art{animation:lamb-hop .75s cubic-bezier(.3,.7,.4,1)}
.lamb.cheer .lamb-art{animation:lamb-cheer 1.45s ease-in-out}
@keyframes lamb-breathe{50%{transform:translateY(-1.5px) scale(1.012,.99)}}
@keyframes lamb-head{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}55%{transform:rotate(4deg)}}
@keyframes lamb-tail{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}}
@keyframes lamb-hop{0%,100%{transform:none}20%{transform:scale(1.08,.9)}55%{transform:translateY(-24%) scale(.95,1.06)}82%{transform:scale(1.06,.94)}}
@keyframes lamb-cheer{0%,100%{transform:none}12%{transform:scale(1.08,.9)}30%{transform:translateY(-26%) rotate(-8deg)}46%{transform:scale(1.06,.94)}64%{transform:translateY(-22%) rotate(8deg)}82%{transform:scale(1.05,.95)}}

/* Partículas, confeti, estrella que vuela y aro de ayuda. */
.screen-fx{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.particle{position:absolute;display:block;pointer-events:none;will-change:transform,opacity}.particle svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 1px 1px #3a2a5030)}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:29}
.flying-star{position:fixed;z-index:31;pointer-events:none;color:#9d7536;will-change:transform}.flying-star svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px #c78b1d66)}
.hint-ring{position:absolute;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:5px solid #fff;box-shadow:0 0 0 4px #ffcf4d,0 0 22px 6px #ffd16699;animation:hint-ring 1.35s ease-out 2 both}
.hint-ring::after{content:"";position:absolute;inset:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffcf4d}
@keyframes hint-ring{0%{transform:scale(.4);opacity:0}25%{opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* Estrellas de la cabecera: el cielo se llena con cada aventura. */
.starcount{gap:7px}.star-row{display:flex;gap:1px}.star-slot{display:block;width:24px;height:24px;color:#c9bfa7}.star-slot svg{width:100%;height:100%}
.star-slot:not(.lit) svg path{fill:#f2ece0}.star-slot.lit{color:#a8781f;filter:drop-shadow(0 0 4px #ffcd4d99)}
.star-slot.pop{animation:star-pop .7s cubic-bezier(.3,1.6,.5,1)}@keyframes star-pop{0%{transform:scale(.3)}60%{transform:scale(1.45)}100%{transform:scale(1)}}
.star-number{display:flex;align-items:baseline;gap:1px;font-size:14px}.star-number .total{font-size:11px}

/* Botón Terminé: invita a tocarlo cuando el dibujo avanza. */
#play #complete.ready{animation:done-glow 2.4s ease-in-out infinite}
#play #complete.pulse{animation:done-ring .9s ease-in-out 3}#play #complete.pulse svg{animation:check-bounce .9s ease-in-out 3}
@keyframes done-glow{0%,100%{box-shadow:0 3px 0 #548631,0 0 0 0 #c6f36c00}50%{box-shadow:0 3px 0 #548631,0 0 0 7px #c6f36c88}}
@keyframes done-ring{0%,100%{box-shadow:0 3px 0 #548631,0 0 0 0 #c6f36c00}45%{box-shadow:0 3px 0 #548631,0 0 0 11px #c6f36cbb}}
@keyframes check-bounce{0%,100%{transform:none}35%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(.95)}}
/* Colores como gotas de pintura con brillo; rebotan al elegirlos. */
#play .swatch{overflow:visible}
#play .swatch::before{content:"";position:absolute;top:16%;left:18%;width:24%;height:15%;border-radius:50%;background:#ffffffa6;transform:rotate(-28deg);pointer-events:none}
#play .swatch.picked{animation:swatch-pick .38s cubic-bezier(.3,1.5,.5,1);z-index:2}
@keyframes swatch-pick{0%{transform:scale(.86)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
#play .tool[aria-pressed="true"] [data-tool-art] svg{animation:tool-wiggle .5s ease-out}
@keyframes tool-wiggle{30%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}}
#play .paper-wrap{position:relative}
.play-lamb{position:absolute;left:0;bottom:2px;z-index:2}

@media (orientation:landscape) and (min-width:540px){
 /* Cielo suave para inicio, historia y celebración. */
 body[data-screen="home"],body[data-screen="reward"],body[data-screen="intro"]{background:radial-gradient(ellipse 70px 22px at 9% 17%,#ffffffc8 97%,transparent),radial-gradient(ellipse 46px 26px at 12% 13%,#ffffffc8 97%,transparent),radial-gradient(ellipse 90px 22px at 64% 13%,#ffffffa0 97%,transparent),radial-gradient(ellipse 56px 24px at 67% 9%,#ffffffa0 97%,transparent),radial-gradient(ellipse 75% 90px at 50% 112%,#cdeebd 97%,transparent),linear-gradient(#bde6f6,#eaf8fd 55%,#fbf7ec)}
 .starcount{background:#fffefae8;border-color:#efdfae;box-shadow:0 2px 0 #e6d39c}
 /* Bienvenida con Lanita. */
 .welcome{background:linear-gradient(170deg,#f3eeff,#e3d9fb);border:3px solid #fff;box-shadow:0 5px 0 #cfc1f2,0 10px 22px #6752ca1f;justify-content:space-between;gap:4px;padding:8px 10px 10px;overflow:visible}
 .welcome-lamb{flex:1 1 auto;min-height:0;max-height:128px;width:86%;margin:0 auto;display:flex;justify-content:center}
 .welcome .lamb{min-height:0;min-width:0;max-width:100%}
 .welcome h1{flex:0 0 auto;text-align:center;margin-bottom:6px;color:#3b2c66;font-size:clamp(17px,2.5vw,23px)}.welcome .mainbtn{flex:0 0 auto}
 /* Invita a tocar con un halo; el botón no se mueve bajo el dedo. */
 .welcome .mainbtn{position:relative;overflow:visible}
 .welcome .mainbtn::after{content:"";position:absolute;inset:-3px;border-radius:20px;border:3px solid #9c88ec;opacity:0;pointer-events:none;animation:start-ring 2.6s ease-out infinite}
 @keyframes start-ring{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.12,1.3)}}
 /* Tarjetas: la obra del niño, insignias sin texto y un vaivén tranquilo. */
 #stories{gap:8px}
 /* El botón no se mueve (objetivo táctil fijo); flota la tarjeta de adentro. */
 .story{background:none;border:0;padding:0;box-shadow:none;overflow:visible;border-radius:17px}
 .story-card{display:block;position:relative;height:100%;background:var(--paper);border:3px solid #fff;border-radius:17px;padding:5px 5px 7px;box-shadow:0 5px 0 var(--shade,#e3d8c4),0 9px 18px #4b6a8a1c;animation:card-float 4.2s ease-in-out var(--float-delay,0s) infinite;transition:scale .12s ease-out}
 .story:active .story-card{scale:.93}
 .story-art{display:block}
 .story:nth-child(1){--shade:#a3dcc8}.story:nth-child(2){--shade:#adc9f2}.story:nth-child(3){--shade:#f2cf9b}.story:nth-child(4){--shade:#9fdcea}.story:nth-child(5){--shade:#d0bbf0}
 .story-art{max-height:min(44dvh,calc(100dvh - 182px));background:#fff;box-shadow:inset 0 0 0 1px #00000010}
 .story strong{color:#3a2e57;text-align:center}.story small{text-align:center}
 @keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
 .badge-new,.badge-progress{position:absolute;top:7px;right:7px;width:26px;height:26px;padding:3px;border-radius:50%}
 .badge-new{background:#f1ecff;color:#6752ca;border:1px solid #d7ccf6}.badge-progress{background:#fff1e4;color:#d27b40;border:1px solid #f2d0b4}
 .badge-new svg,.badge-progress svg,.done svg{width:100%;height:100%}
 .home-bottom button{background:#fffefaf0}
 /* Celebración: la obra en un marco dorado, viva. */
 #reward{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(10px,2.4vw,24px);padding-top:4px;padding-bottom:calc(10px + var(--safe-bottom));align-items:stretch}
 .frame-wrap{position:relative;height:100%;aspect-ratio:1;min-height:0;max-width:52vw}
 .gold-frame{width:100%;height:100%;padding:clamp(6px,1.8vh,12px);border-radius:16px;background:linear-gradient(145deg,#fff0bc,#e3a83d 32%,#fff3c4 52%,#cf9028 78%,#f6d675);box-shadow:0 5px 0 #b07a1d,0 12px 26px #6b4a1238,inset 0 0 0 2px #fff6d6;animation:frame-in .55s cubic-bezier(.3,1.4,.5,1)}
 #rewardArt{border-radius:9px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 3px #b98a2e2e}
 @keyframes frame-in{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
 .reward-lamb{position:absolute;right:-13%;bottom:0;width:clamp(64px,30%,112px);aspect-ratio:1.08;z-index:2}
 #reward .lamb{padding:0;min-height:48px;width:100%;height:100%}#reward .lamb .lamb-art{width:100%;height:100%}
 .reward-side{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(4px,1.4vh,10px);min-width:0;padding-left:clamp(8px,4vw,30px)}
 #reward .bigstar{position:relative;isolation:isolate;width:clamp(50px,13vh,78px);margin:0 auto;align-self:center}
 #reward .bigstar::before{content:"";position:absolute;inset:-40%;z-index:-1;border-radius:50%;background:repeating-conic-gradient(#ffe39a 0 9deg,#ffe39a00 9deg 30deg);-webkit-mask:radial-gradient(circle,#000 30%,#0000 70%);mask:radial-gradient(circle,#000 30%,#0000 70%);animation:rays 10s linear infinite}
 #reward .bigstar.spin-in{animation:star-spin 1s cubic-bezier(.2,.9,.3,1.25)}#reward .bigstar.sent{transform:scale(.9);transition:transform .4s}
 @keyframes star-spin{from{transform:scale(0) rotate(-200deg)}to{transform:scale(1) rotate(0)}}@keyframes rays{to{transform:rotate(360deg)}}
 #reward h1{font-size:clamp(24px,4.4vw,34px);margin:0}#rewardNote{margin:0;font-size:13px}
 #rewardLesson{margin:0;padding:10px 12px;font-size:clamp(14px,2vw,17px);font-weight:750;line-height:1.35;border:2px solid #f5dc9c}
 .reward-actions{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px}
 #reward .reward-actions button{width:auto;min-height:50px;margin:0;font-size:13px;padding:6px 10px}
 #reward #again{background:var(--violet);color:#fff}
 /* Historia con su obra viva. */
 #introArt .artwork{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 4px #fff,0 6px 16px #4b6a8a24;aspect-ratio:1;width:auto;max-width:100%}
}
@media (orientation:landscape) and (min-width:540px) and (max-width:700px){
 #reward #rewardListen{font-size:0;gap:0;width:50px}
 #reward .reward-actions button{font-size:12px;padding:6px}
}
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){
 .welcome-lamb{max-height:84px}.welcome .mainbtn::after{animation:none}
 .welcome h1{font-size:16px;-webkit-line-clamp:3;margin-bottom:4px}
 #rewardNote{display:none}
}
/* Modo pequeñito: solo brocha mágica y colores grandes. */
body[data-little="on"] #play #tools,body[data-little="on"] #play #inlineTextures,body[data-little="on"] #play #textureOpen{display:none}
@media (orientation:landscape) and (min-width:540px){
 body[data-little="on"] #play.screen{--tools-width:0px;--texture-width:0px;--colors-width:clamp(120px,19vw,170px);--title-gap:0px;grid-template-columns:var(--actions-width) minmax(0,1fr) var(--colors-width)}
}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){
 body[data-little="on"] #play.screen{--colors-width:148px}
}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){
 .welcome-lamb{display:none}.welcome{justify-content:center}
 #reward .bigstar{width:36px}#reward h1{font-size:21px}#rewardLesson{padding:6px 10px;font-size:13px}.reward-side{gap:5px}
 #reward .reward-actions button{min-height:48px}
}

/* 0.9: tres mundos abiertos, ilustrados con las mismas láminas para pintar. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.world-art{width:100%;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.world-art>svg{display:block;width:100%;height:100%;max-height:100%;filter:drop-shadow(0 4px 3px #487c8015)}
.world{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;min-height:48px;background:none;border-radius:24px;padding:2px 4px 6px;box-shadow:none;color:#314b60}
.world>strong{font-size:clamp(14px,2.1vw,23px);line-height:1.12;text-align:center;max-width:100%;min-height:2.24em;display:flex;align-items:center;justify-content:center;color:#2e5162}
.world:active .world-art{scale:.95}.world:focus-visible{outline:4px solid var(--world-accent);outline-offset:0;background:#ffffff80}
.world-progress{display:flex;gap:4px;align-items:center;justify-content:center;background:#fffefadd;padding:3px 10px;border-radius:20px;color:#655227;font-size:12px;font-weight:750;margin-top:4px}
.world-progress svg{width:19px;height:19px}
.gallery-top{display:flex;align-items:center;gap:12px;min-width:0}.gallery-top h1{font-size:clamp(18px,3vw,26px);margin:0;line-height:1.1;color:#31536b;flex:1}
.gallery-top p{font-size:12px;color:#446179;background:#fffdf1;border:1px solid #e3d8c0;border-radius:20px;padding:6px 10px;white-space:nowrap;margin:0}
#galleryBack,.page-arrow{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;border:2px solid #7aa7ba;background:#fffefa;color:#3d728a;border-radius:17px;box-shadow:0 3px 0 #6f9eaa40;padding:7px}
.page-arrow svg{width:30px;height:30px}.page-arrow:disabled{opacity:.3;box-shadow:none}.page-arrow.no-pages{visibility:hidden}
.gallery-caption{display:flex;gap:14px;align-items:center;justify-content:center;margin:0;color:#496780;font-size:13px;font-weight:700}
#pageDots{display:flex;gap:8px}#pageDots i{width:9px;height:9px;border-radius:50%;background:#a7c9ce}#pageDots .selected{background:#6752ca;width:18px;border-radius:8px}
.alive .live[data-live="bird"]{animation-name:live-cloud;animation-duration:3.8s}
.alive .live[data-live="tree"],.alive .live[data-live="flower"]{animation-name:live-rock;animation-duration:4.2s}
.alive .live[data-live="butterfly"]{animation-name:live-fish;animation-duration:3.1s}
.alive .live[data-live="moon"]{animation-name:live-rock;animation-duration:5.2s}
@media (orientation:landscape) and (min-width:540px){
 body[data-screen="gallery"]{background:radial-gradient(ellipse 85px 25px at 12% 12%,#fff9 97%,transparent),radial-gradient(ellipse 110px 30px at 78% 18%,#fffa 97%,transparent),radial-gradient(ellipse 75% 90px at 50% 112%,#cdeebd 97%,transparent),linear-gradient(#bde6f6,#eaf8fd 55%,#fbf7ec)}
 #home{grid-template-columns:clamp(120px,19vw,175px) minmax(0,1fr);gap:8px}
 #worlds{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;min-height:0;gap:3px;align-self:stretch}
 #home .welcome h1{font-size:clamp(16px,2.3vw,22px)}
 #gallery{height:calc(100dvh - var(--header-landscape) - var(--qa-height) - var(--safe-top));display:grid;grid-template-rows:48px minmax(0,1fr) 24px;gap:6px;padding-top:0;padding-bottom:calc(8px + var(--safe-bottom))}
 .gallery-shelf{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:10px;align-items:center;min-height:0}
 #gallery #stories{grid-column:2;grid-row:auto;grid-template-columns:repeat(var(--cards),minmax(0,1fr));gap:10px;align-self:center;width:100%;min-height:0;max-width:1050px;justify-self:center}
 #gallery .story{min-height:48px;min-width:48px}
 #gallery .story-card{padding:5px 5px 7px}
 #gallery .story-art{aspect-ratio:1;max-height:calc(100dvh - var(--qa-height) - var(--safe-top) - var(--safe-bottom) - 205px);min-height:48px;background:#fff;overflow:hidden}
 #gallery .story strong{font-size:clamp(11px,1.7vw,16px);line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center;margin:4px 0 0}
 #gallery .story small{font-size:10px;margin:3px 0 0}
}
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){
 #gallery{gap:3px;grid-template-rows:48px minmax(0,1fr) 20px;padding-bottom:calc(5px + var(--safe-bottom))}
 #gallery #stories{gap:6px}.gallery-shelf{gap:6px}
 #gallery .story-card{padding:3px 3px 5px}#gallery .story small{display:none}
 .world>strong{font-size:14px}.world-progress{font-size:10px;padding:2px 7px;margin-top:0}
 .world-progress svg{width:16px;height:16px}.world{padding:0 0 2px}
 .gallery-top h1{font-size:19px}.gallery-top p{font-size:11px;padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){.world:active .world-art{scale:1}}

/* El toque pinta sin la capa azul de selección del navegador móvil. */
.paper,.paper *{-webkit-tap-highlight-color:transparent}
/* El objetivo táctil conserva su tamaño incluso mientras el dedo lo presiona. */
button:active{transform:none}

/* 0.10: treinta colores en una franja estrecha; el dedo desliza solo la paleta. */
@media (orientation:landscape) and (min-width:540px){
 #play.screen{--colors-width:60px}
 #play .color-rail{grid-column:3;grid-row:1/-1;position:relative;min-height:0;min-width:0;align-self:stretch;overflow:hidden;border:2px solid #335e6e;border-radius:10px;box-shadow:0 3px 0 #28738960;background:#fffefa}
 #play #colors{display:grid;grid-template-columns:minmax(48px,1fr);grid-template-rows:none;grid-auto-rows:64px;align-content:start;gap:0;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 0 2px;border:0;border-radius:0;box-shadow:none;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:none}
 #play #colors::-webkit-scrollbar{display:none}
 #play #colors .swatch{height:64px;min-height:64px;border-radius:0;scroll-snap-align:none;touch-action:pan-y}
 #play #colors .swatch[aria-pressed="true"]::after{width:26px;height:26px;line-height:26px;border-radius:50%;background:#fffefa;color:#335e6e;font-size:22px;text-shadow:none;box-shadow:0 1px 4px #335e6e44}
 #play #colors .swatch.picked{animation:color-pick .35s ease-out}
 .color-scroll-up,.color-scroll-down{display:none;position:absolute;z-index:3;left:0;right:0;height:22px;text-align:center;color:#264e61;font-size:29px;line-height:24px;font-weight:900;pointer-events:none;text-shadow:0 1px #fff}
 .color-scroll-up{top:0;background:linear-gradient(#fffefaee,#fffefa00)}.color-scroll-down{bottom:0;background:linear-gradient(#fffefa00,#fffefaee)}
 .more-above .color-scroll-up,.more-below .color-scroll-down{display:block}
 body[data-little="on"] #play.screen{--colors-width:72px}
 body[data-little="on"] #play #colors .swatch{height:72px;min-height:72px}
 body[data-little="on"] #play #colors{grid-auto-rows:72px}
}
@keyframes color-pick{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}

/* ===================== 1.0 · Fase 1: mapa, candado, niveles y Lanita guía ===================== */
body[data-screen="home"] .app-header{display:none}
#home.map-screen{position:relative;max-width:none;margin:0;padding:0;height:calc(100dvh - var(--qa-height));min-height:0;overflow:hidden;background:linear-gradient(#a9e2f5 0%,#d8f3f4 58%,#eaf8e6 100%)}
.map-scene{position:absolute;inset:0;pointer-events:none}.map-scene svg{width:100%;height:100%}
.places{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3.2vw,40px);padding:0 calc(76px + var(--safe-right)) 0 calc(76px + var(--safe-left))}
.place{--size:min(25vw,54dvh,260px);position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--size);padding:0;background:none;color:#2f4858;animation:place-float 4.2s ease-in-out infinite}
.place:nth-child(2){animation-delay:-1.4s}.place:nth-child(3){animation-delay:-2.8s}
.place:active{transform:scale(.96)}
.place-art{display:block;width:var(--size);height:var(--size);border-radius:34%;overflow:hidden;background:var(--world-color);border:6px solid #fff;box-shadow:0 0 0 4px var(--world-accent),0 10px 0 4px color-mix(in srgb,var(--world-accent) 55%,transparent),0 18px 26px #2c5a6a33;transition:transform .18s ease}
.place-art .artwork,.place-art svg{width:100%;height:100%}
.place-name{font-size:clamp(14px,2.1vw,19px);font-weight:850;letter-spacing:-.3px;color:#34505d;text-shadow:0 2px 0 #ffffffb0;margin-top:6px}
.place-stars{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;gap:2px;min-width:44px;height:36px;padding:0 9px 0 5px;border-radius:18px;background:#fffdf3;border:2px solid #ecd58c;font-size:16px;font-weight:850;color:#7a5a19;box-shadow:0 3px 0 #d9bf6d}
.place-stars svg{width:24px;height:24px;color:#a77a1d}.place-stars.none{opacity:0}
.map-lamb{position:absolute;left:calc(10px + var(--safe-left));bottom:calc(8px + var(--safe-bottom));width:min(19dvh,100px);height:min(19dvh,100px);z-index:2}
.gallery-lamb{position:fixed;left:calc(8px + var(--safe-left));bottom:calc(6px + var(--safe-bottom));width:min(17dvh,86px);height:min(17dvh,86px);z-index:3}
.adult-lock{position:absolute;top:calc(10px + var(--safe-top));right:calc(12px + var(--safe-right));width:56px;height:56px;border-radius:50%;padding:0;background:#ffffff8c;color:#6f8a96;display:grid;place-items:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;z-index:3}
.adult-lock>span[data-icon] svg{width:24px;height:24px}
.adult-lock:active{transform:none}
.lock-ring{position:absolute;inset:0;width:56px;height:56px;transform:rotate(-90deg)}
.lock-ring circle{fill:none;stroke:#ffffffb0;stroke-width:4}
.lock-ring .lock-progress{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.adult-lock.holding .lock-progress{stroke-dashoffset:0;transition:stroke-dashoffset 3s linear}
.adult-lock.holding{background:#fff;color:var(--dark)}
.lock-tip{position:absolute;top:calc(26px + var(--safe-top));right:calc(84px + var(--safe-right));margin:0;font-size:12px;font-weight:750;color:#4d6873;background:#ffffffd9;border-radius:10px;padding:5px 9px;opacity:0;pointer-events:none}
.lock-tip.show{animation:lock-tip 2.4s ease both}
@keyframes lock-tip{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
@keyframes place-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.guide-nudge .place-art,.guide-nudge .story-card{animation:guide-nudge .9s ease-in-out 2}
@keyframes guide-nudge{0%,100%{transform:scale(1)}40%{transform:scale(1.06) rotate(-1.5deg)}70%{transform:scale(1.03) rotate(1deg)}}
/* Mundo: sin textos para el niño; el progreso vive en la estrella de cada tarjeta. */
#gallery #worldProgress,#gallery .story-card small{display:none}
#gallery .gallery-top h1{font-size:clamp(18px,2.6vw,24px)}
.back-button svg{width:26px;height:26px}
/* Espacio de adultos */
.adult-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}.adult-top h1{margin:0}
.level-picker{border:0;padding:0;margin:4px 0 14px;display:grid;gap:8px}
.level-picker legend{font-weight:850;font-size:16px;margin-bottom:8px;color:#3f3458}
.level-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid #e3dcef;color:#3f3458}
.level-option strong{font-size:17px}.level-option span{font-size:13px;font-weight:650;color:#6c6380}
.level-option[aria-pressed="true"]{border-color:var(--violet);background:#f1edff;box-shadow:0 3px 0 #cfc4f3}
.level-note{font-size:12px;line-height:1.45;color:#6c6380;margin:2px 0 0}
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){.places{transform:translateY(-50%)}.place{gap:4px}.place-name{margin-top:2px}.place-stars{height:30px;min-width:38px;font-size:14px}.place-stars svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.place{animation:none}.guide-nudge .place-art,.guide-nudge .story-card{animation:none}.adult-lock.holding .lock-progress{transition-duration:3s}}
.adult-top,.level-picker{grid-column:1/-1}
.adult .adult-top button{width:56px;min-width:56px;margin:0;flex:none}
.level-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
.level-picker legend,.level-note{grid-column:1/-1}
.adult .level-option{margin:0;width:100%;min-height:64px}
.lock-ring .lock-progress{opacity:0}.adult-lock.holding .lock-progress{opacity:1}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){.place{--size:min(25vw,40dvh)}.place-name{font-size:13px;margin-top:0}.places{transform:translateY(-58%)}}

/* ===================== 1.0 · Fase 2: pintar por nivel ===================== */
/* «Terminé» espera avance real; al aparecer, salta para que el niño lo note. */
#play #complete.waiting{visibility:hidden;opacity:0;transform:scale(.4)}
#play #complete{transition:opacity .25s ease,transform .25s ease}
#play #complete.arrive{animation:finish-arrive .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes finish-arrive{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
#play #complete svg{stroke:currentColor;stroke-width:2.2}
#play #complete{background:#fff6d8;color:#8a5a12;border-color:#c9952b;box-shadow:0 3px 0 #c9952b}
#play #eraseDirect{display:none!important}
#play .hold-lock{position:relative;display:grid;place-items:center;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
#play .hold-lock .lock-ring{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px}
#play .hold-lock>span[data-icon] svg{width:22px;height:22px}
#play .hold-lock:active{transform:none}
.hold-lock.holding .lock-progress{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 3s linear}
/* Semilla: 8 colores grandes en dos columnas, sin desplazamiento. */
@media (orientation:landscape) and (min-width:540px){
 body[data-level="semilla"][data-little="on"] #play #colors{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:auto;overflow:hidden;height:100%;touch-action:manipulation}
 body[data-level="semilla"][data-little="on"] #play #colors .swatch{height:auto;min-height:0;touch-action:manipulation}
 /* Brote: texturas en un cajón aparte, no como segunda columna. */
 body[data-level="brote"] #play.screen{--texture-width:0px;grid-template-columns:var(--actions-width) minmax(0,1fr) var(--colors-width) var(--tools-width)}
 body[data-level="brote"] #play #inlineTextures{display:none}
 body[data-level="brote"] #play #textureOpen{display:flex}
}

/* ===================== 1.0 · Fase 3: Escucho, Celebro, álbum y descanso ===================== */
.round-button{display:grid;place-items:center;width:68px;height:68px;min-width:68px;border-radius:50%;padding:0;background:#fffefa;color:#3b6475;border:3px solid #3b6475;box-shadow:0 4px 0 #3b647555}
.round-button svg{width:34px;height:34px}
.round-button.main{width:84px;height:84px;background:#6752ca;color:#fff;border-color:#49369e;box-shadow:0 5px 0 #49369e}
.round-button.main svg{width:42px;height:42px}
.round-button.ready{animation:round-ready 1.3s ease-in-out infinite}
@keyframes round-ready{0%,100%{transform:scale(1);box-shadow:0 5px 0 #49369e,0 0 0 0 #6752ca66}50%{transform:scale(1.08);box-shadow:0 5px 0 #49369e,0 0 0 14px #6752ca00}}
.round-button.sleepy{opacity:.55}
/* Escucho: la escena ocupa la pantalla; dos acciones grandes a la derecha. */
.escucho,.album-view{position:relative;max-width:none;margin:0;height:calc(100dvh - var(--qa-height));display:grid;grid-template-columns:72px minmax(0,1fr) 110px;align-items:center;gap:12px;padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));background:linear-gradient(#bfe9f5,#e7f7ef)}
.escucho>.back-button,.album-view>.back-button{align-self:start}
.escucho-stage,.album-view-stage{position:relative;height:100%;min-height:0;display:grid;place-items:center}
.escucho #escuchoArt,.album-view .gold-frame{width:auto;height:min(100%,calc(100vw - 260px));aspect-ratio:1;max-height:100%;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 0 0 6px #fff,0 0 0 9px #8ccfe0,0 18px 30px #2c5a6a33}
.album-view .gold-frame{display:grid}.album-view #albumViewArt{width:100%;height:100%}
.escucho #escuchoArt .artwork,.escucho #escuchoArt svg{width:100%;height:100%}
.escucho-lamb{position:absolute;left:-6px;bottom:0;width:min(22dvh,108px);height:min(22dvh,108px)}
.escucho-actions{display:flex;flex-direction:column;align-items:center;gap:18px}
/* Celebro: acciones solo con íconos; la pregunta es para el adulto. */
#reward .reward-actions{display:flex;align-items:center;justify-content:center;gap:12px;grid-template-columns:none}
#reward .reward-actions .round-button{width:60px;height:60px;min-width:60px;min-height:60px;padding:0;margin:0}
#reward .reward-actions .round-button.main{width:76px;height:76px;min-width:76px}
#reward .talk{margin:10px 0 0;font-size:13px;line-height:1.45;color:#5d5470;background:#fff9e8;border-radius:12px;padding:8px 12px;text-align:left}
#reward .talk:empty{display:none}
/* Álbum */
body[data-screen="album"] .app-header,body[data-screen="albumView"] .app-header,body[data-screen="escucho"] .app-header,body[data-screen="rest"] .app-header{display:none}
.album{max-width:none;margin:0;height:calc(100dvh - var(--qa-height));display:flex;flex-direction:column;gap:10px;padding:calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(14px + var(--safe-left));background:linear-gradient(#f6efff,#fff9ef)}
.album-top{display:flex;align-items:center;gap:12px}.album-top h1{margin:0;font-size:clamp(18px,2.6vw,24px);color:#4a3a7a}
.album-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(30dvh,150px),1fr));gap:14px;align-content:start;padding:4px 4px 12px}
.album-card{position:relative;padding:0;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px #d9c98f,0 8px 14px #6b5a2a22}
.album-art,.album-art .artwork,.album-art svg{display:block;width:100%;height:100%}
.album-star{position:absolute;top:4px;right:4px;width:34px;height:34px;color:#a77a1d}.album-star svg{width:34px;height:34px}
.album-empty{flex:1;display:grid;place-items:center}.album-empty-lamb{width:min(40dvh,180px);height:min(40dvh,180px)}
.album-open{position:absolute;top:calc(10px + var(--safe-top));left:calc(12px + var(--safe-left));width:60px;height:60px;border-radius:18px;padding:0;background:#fffefa;color:#6752ca;border:3px solid #b9a6ee;box-shadow:0 4px 0 #b9a6ee;display:grid;place-items:center;z-index:3}
.album-open svg{width:32px;height:32px}
/* Descanso */
.rest{position:relative;max-width:none;margin:0;height:calc(100dvh - var(--qa-height));display:grid;place-items:center;background:linear-gradient(#2d3f7a,#5a6fb3 70%,#8aa0d6);overflow:hidden}
.rest-sky{position:absolute;top:8%;right:12%;width:90px;height:90px;color:#ffe27a}.rest-sky svg{width:90px;height:90px}
.rest-lamb{width:min(46dvh,220px);height:min(46dvh,220px)}
.rest #restHome{position:absolute;right:calc(18px + var(--safe-right));bottom:calc(16px + var(--safe-bottom))}
/* Gestos de Lanita */
.lamb.yawn .lamb-art{animation:lamb-yawn 2.1s ease-in-out}
@keyframes lamb-yawn{0%,100%{transform:none}30%,60%{transform:rotate(-6deg) translateY(2px)}}
.lamb.yawn .eyes,.lamb.sleep .eyes{transform-box:fill-box;transform-origin:center;transform:scaleY(.18);animation:none}
.lamb.sleep .lamb-art{animation:lamb-breathe 3.6s ease-in-out infinite}
.lamb.sleep::after{content:"z z z";position:absolute;right:4%;top:2%;font-weight:850;color:#fff;font-size:clamp(16px,4dvh,26px);letter-spacing:3px;animation:zzz 2.4s ease-in-out infinite}
.lamb{position:relative}
@keyframes zzz{0%{opacity:0;transform:translate(0,8px)}40%{opacity:1}100%{opacity:0;transform:translate(10px,-14px)}}
.lamb.point .lamb-art{animation:lamb-point 1.7s ease-in-out}
@keyframes lamb-point{0%,100%{transform:none}25%,70%{transform:translateX(8px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.round-button.ready{animation:none;box-shadow:0 5px 0 #49369e,0 0 0 6px #6752ca44}.lamb.sleep::after{animation:none;opacity:1}}

/* ===================== 1.0 · Fase 4: minijuegos ===================== */
body[data-screen="juego"] .app-header{display:none}
.juego{position:relative;max-width:none;margin:0;height:calc(100dvh - var(--qa-height));padding:calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(14px + var(--safe-left));overflow:hidden;background:linear-gradient(#bfe9f5,#e9f8e6)}
.juego-host{position:absolute;inset:calc(10px + var(--safe-top)) calc(78px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(78px + var(--safe-left))}
.juego-lamb{position:absolute;left:calc(6px + var(--safe-left));bottom:calc(6px + var(--safe-bottom));width:min(19dvh,92px);height:min(19dvh,92px);z-index:2}
.juego-skip{position:absolute;top:calc(10px + var(--safe-top));right:calc(12px + var(--safe-right));opacity:.7;z-index:3}
.game-stage{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,3dvh,22px);--calm:0}
.g-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(8px,2.4vw,22px)}
.g-item{position:relative;padding:0;border-radius:22px;background:#fffefa;border:3px solid #fff;box-shadow:0 0 0 3px #8ccfe0,0 6px 12px #2c5a6a26;overflow:hidden;transition:transform .2s ease}
.g-item:active{transform:scale(.97)}
.g-pic{display:block;width:100%;height:100%}.g-pic svg,.g-pic .artwork{display:block;width:100%;height:100%}
.g-good{animation:g-good .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes g-good{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.g-bad{animation:g-bad .5s ease}
@keyframes g-bad{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}45%{transform:translateX(8px)}70%{transform:translateX(-5px)}}
.g-glow{box-shadow:0 0 0 4px #ffd166,0 0 24px 8px #ffd16699!important;animation:g-glow 1.1s ease-in-out infinite}
@keyframes g-glow{50%{transform:scale(1.05)}}
/* David */
.g-bush{width:min(20vw,34dvh,170px);aspect-ratio:1.2;background:transparent;border:0;box-shadow:none;overflow:visible}
.g-bush>.g-pic{position:relative;z-index:1}
.g-bush .g-peek{position:absolute;left:12%;top:-40%;width:76%;height:auto;aspect-ratio:1;z-index:0;animation:g-peek .6s cubic-bezier(.3,1.5,.5,1) both;border-radius:50%;overflow:hidden;background:#e3f8d4}
@keyframes g-peek{from{transform:translateY(60%)}to{transform:none}}
.g-rustle>.g-pic{animation:g-bad .5s ease}
/* Noé */
.g-ark{flex-direction:row;gap:clamp(10px,3vw,30px)}
.g-grid{display:grid;gap:clamp(6px,1.6vw,14px)}
.g-cards-4{grid-template-columns:repeat(2,min(16vw,26dvh))}.g-cards-8{grid-template-columns:repeat(4,min(13vw,21dvh))}.g-cards-12{grid-template-columns:repeat(4,min(11vw,19dvh))}
.g-card{aspect-ratio:1;width:100%}
.g-card.g-picked{box-shadow:0 0 0 4px #6752ca,0 6px 12px #2c5a6a26;transform:translateY(-4px)}
.g-card.g-down>.g-pic{visibility:hidden}.g-card.g-down{background:repeating-linear-gradient(45deg,#b9a6ee 0 10px,#cfc2f5 10px 20px)}
.g-card.g-board{opacity:.35;transform:scale(.9)}
.g-arkbox{width:min(24vw,40dvh);flex:none}.g-arkbox svg{width:100%;height:auto}
/* Daniel */
.g-den{background:radial-gradient(ellipse at 50% 80%,#f3dcb3,transparent 70%)}
.g-lion{width:min(19vw,32dvh,160px);aspect-ratio:1}
.g-lion.g-sleep>.g-pic{filter:saturate(.6) brightness(.95);transform:rotate(-6deg) scale(.95)}
.g-lion.g-sleep::after{content:"z z";position:absolute;right:8%;top:6%;font-weight:850;color:#6752ca;font-size:20px}
.g-lion.g-counted{box-shadow:0 0 0 5px #ffd166,0 6px 12px #2c5a6a26}
.g-num{position:absolute;left:6px;top:6px;width:34px;height:34px;border-radius:50%;background:#6752ca;color:#fff;font-weight:850;font-size:19px;display:grid;place-items:center}
/* Ordenar escenas */
.g-slots .g-slot{width:min(14vw,24dvh);aspect-ratio:1;border-radius:20px;border:3px dashed #8ccfe0;display:grid;place-items:center;color:#8ccfe0;font-weight:850;font-size:24px;background:#ffffff80;overflow:hidden}
.g-slot.g-filled{border-style:solid;border-color:#7bd99d;background:#fff}
.g-scene{width:min(14vw,24dvh);aspect-ratio:1}
.g-scene.g-gone{visibility:hidden}
/* Creación: arcoíris */
.g-rainbow{position:relative;width:min(56vw,92dvh);aspect-ratio:2/1;overflow:hidden}
.g-band{position:absolute;left:calc(var(--i)*5.5%);right:calc(var(--i)*5.5%);top:calc(var(--i)*11%);height:calc(200% - var(--i)*22%);border-radius:50%;border:clamp(10px,2.4vw,22px) solid var(--band);box-sizing:border-box}
.g-band.g-missing{border-color:#ffffff;border-style:dashed;opacity:.9}
.g-swatch{width:min(13vw,22dvh);aspect-ratio:1;border-radius:50%}
/* Jesús */
.g-storm{transition:background 1s ease;background:linear-gradient(color-mix(in srgb,#55607d calc((1 - var(--calm))*100%),#9fdcf2),color-mix(in srgb,#7d8aa8 calc((1 - var(--calm))*100%),#d9f3fb));border-radius:24px}
.g-storm.g-clear{background:linear-gradient(#9fdcf2,#e4f7ff)}
.g-stormsky{position:relative;width:100%;height:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(10px,3vw,30px)}
.g-storm-cloud{width:min(20vw,32dvh);aspect-ratio:1.5;background:transparent;border:0;box-shadow:none;animation:g-shake 1.4s ease-in-out infinite}
.g-storm-cloud .cloud-body{fill:#6f7891}.g-storm-cloud.g-calm .cloud-body{fill:#fff}.g-storm-cloud.g-calm{animation:none}
.g-storm-wave,.g-breath{width:min(40vw,70dvh);aspect-ratio:3.3;background:transparent;border:0;box-shadow:none;animation:g-shake .9s ease-in-out infinite}
.g-storm-wave.g-calm{animation:none}.g-storm-wave.g-calm .wave-body{fill:#68c9f2}
.g-storm-wind{width:min(16vw,26dvh);aspect-ratio:1.3;background:#5b6683;border:0;animation:g-shake 1s ease-in-out infinite}.g-storm-wind.g-calm{animation:none;opacity:.35}
.g-breath{touch-action:none;animation-duration:calc(.9s + var(--calm)*3s)}
.g-meter{position:absolute;left:8%;right:8%;bottom:4px;height:10px;border-radius:5px;background:#ffffff66;overflow:hidden}
.g-meter::after{content:"";position:absolute;inset:0;width:calc(var(--p,0)*100%);background:#ffd166}
.g-boat{width:min(18vw,28dvh)}.g-boat svg{width:100%;height:auto}
.g-storm:not(.g-clear) .g-boat{animation:g-shake 1.2s ease-in-out infinite}
@keyframes g-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) translateY(2px)}75%{transform:rotate(3deg) translateY(-2px)}}
/* Animales */
.g-animal{width:min(20vw,34dvh,170px);aspect-ratio:1}
.g-replay{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#3b6475}.g-replay svg{width:34px;height:34px}
@media(prefers-reduced-motion:reduce){.g-storm-cloud,.g-storm-wave,.g-storm-wind,.g-breath,.g-storm .g-boat,.g-glow{animation:none!important}}
.g-slots,.g-pool{flex-wrap:nowrap;gap:10px;width:100%}
.g-slots .g-slot,.g-pool .g-scene{flex:0 0 auto;width:min(14vw,24dvh,calc((100% - (var(--n) - 1)*10px)/var(--n)))}

/* ===================== 1.0 · Fase 5: arte y ambiente ===================== */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
#ambient .backdrop,#ambient svg{position:absolute;inset:0;width:100%;height:100%}
#gameShell>.screen,#gameShell>.app-header{position:relative;z-index:1}
body[data-ambient] #home,body[data-ambient] #gallery,body[data-ambient] #escucho,body[data-ambient] #juego,body[data-ambient] #reward,body[data-ambient] #rest{background:transparent}
body[data-ambient] .app-header{position:relative;z-index:2}
.bd-cloud{animation:bd-drift 46s ease-in-out infinite alternate}.bd-cloud-2{animation-duration:60s;animation-direction:alternate-reverse}
@keyframes bd-drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.bd-star{animation:bd-twinkle 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes bd-twinkle{50%{opacity:.35}}
.bd-butterfly{animation:bd-flutter 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bd-flutter{0%,100%{transform:translate(0,0)}25%{transform:translate(24px,-14px) scaleX(.8)}50%{transform:translate(50px,4px)}75%{transform:translate(20px,10px) scaleX(.85)}}
/* Lugares del mapa: base de pasto y sombra de contacto, como si estuvieran en el paisaje. */
.place::after{content:"";position:absolute;left:12%;right:12%;top:calc(var(--size) - 4px);height:18px;border-radius:50%;background:radial-gradient(ellipse,#2c5a3a40,transparent 70%);z-index:-1}
.place-art{background:radial-gradient(circle at 50% 30%,#ffffff,var(--world-color))}
/* Celebro: luz cálida detrás del marco */
#reward .frame-wrap::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,#fff6c9cc,#fff6c900 65%);z-index:-1}
#reward .frame-wrap{position:relative}
/* Mundo: tarjetas con base de luz */
#gallery .story-card{box-shadow:0 0 0 3px #ffffffcc,0 10px 18px #2c5a6a24}
@media(prefers-reduced-motion:reduce){.bd-cloud,.bd-star,.bd-butterfly{animation:none}}
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){#reward .talk{display:none}#reward .reward-actions .round-button{width:52px;height:52px;min-width:52px;min-height:52px}#reward .reward-actions .round-button.main{width:62px;height:62px;min-width:62px}#reward .bigstar{max-height:54px}}
#reward.screen{overflow:clip}
@media (orientation:landscape) and (min-width:540px) and (max-width:740px){#reward .reward-actions{gap:8px}#reward .reward-actions .round-button{width:52px;height:52px;min-width:52px;min-height:52px}#reward .reward-actions .round-button.main{width:62px;height:62px;min-width:62px}#reward .reward-actions .round-button svg{width:28px;height:28px}}

/* ===================== 1.0 · Bocina junto al candado ===================== */
/* Controles de adultos agrupados en una cápsula discreta (candado + sonido), fuera del área de juego.
   El ícono es nota + globito, nunca una bocina: no se confunde con «escuchar al abuelito».
   Un toque: Todo → Sin voz → Silencio total; el color avisa si algo está apagado. */
#home .adult-dock{position:absolute;top:calc(8px + var(--safe-top));right:calc(10px + var(--safe-right));display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px;border-radius:34px;background:#ffffff4d;box-shadow:inset 0 0 0 1px #ffffff80;z-index:3}
#home .adult-dock .adult-lock{position:relative;top:auto;right:auto}
#home .sound-toggle{position:relative;width:56px;height:56px;border-radius:50%;padding:0;border:0;background:#ffffff8c;color:#5d7f8c;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
#home .sound-toggle .sound-icon svg{width:30px;height:30px}
/* Los lugares nunca invaden la franja de controles (88 px por lado + zona segura). */
#home .places{padding:0 calc(88px + var(--safe-right)) 0 calc(88px + var(--safe-left))}
#home .place{--size:min(calc((100vw - var(--safe-left) - var(--safe-right) - 176px - 2 * clamp(14px,3.2vw,40px)) / 3),54dvh,260px)}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){#home .place{--size:min(calc((100vw - var(--safe-left) - var(--safe-right) - 176px - 2 * clamp(14px,3.2vw,40px)) / 3),40dvh)}}
#play #playSound{background:#ffffff90;color:#366578;border-color:#598799;box-shadow:none}
#play #playSound .sound-icon svg{width:30px;height:30px}
.sound-icon{display:grid;place-items:center;line-height:0}
.sound-toggle[data-mode="sinvoz"]{color:#8a5a12}#home .sound-toggle[data-mode="sinvoz"],#play #playSound[data-mode="sinvoz"]{background:#fff4d6}
.sound-toggle[data-mode="silencio"]{color:#a1405a}#home .sound-toggle[data-mode="silencio"],#play #playSound[data-mode="silencio"]{background:#ffe9ec}
#play #playSound[data-mode="sinvoz"]{border-color:#c9952b}#play #playSound[data-mode="silencio"]{border-color:#b45d74}
.sound-toggle:active{transform:scale(.94)}
.sound-nudge{animation:sound-nudge 1.2s ease-in-out}
@keyframes sound-nudge{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ffd16600}30%{transform:scale(1.14);box-shadow:0 0 0 8px #ffd166aa}60%{transform:scale(.97);box-shadow:0 0 0 4px #ffd16666}}
@media(prefers-reduced-motion:reduce){.sound-nudge{animation:sound-glow 1.2s ease-in-out}@keyframes sound-glow{0%,100%{box-shadow:0 0 0 0 #ffd16600}40%{box-shadow:0 0 0 7px #ffd166aa}}}

/* ===================== 1.0.1 · Guía para adultos y actualizaciones ===================== */
/* Pantalla tranquila y legible para el adulto: sin Lanita, sin voz, tarjetas grandes y un solo botón principal. */
body[data-screen="setup"] .app-header{display:none}
#setup.screen{position:fixed;inset:0;z-index:5;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(6px,1.6dvh,12px);max-width:none;margin:0;
 padding:calc(10px + var(--safe-top)) calc(18px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(18px + var(--safe-left));background:#fbf8f1;color:#2f4858;overflow:auto}
#setup.screen.hidden{display:none}
.setup-top{display:flex;align-items:center;gap:12px;min-height:40px}
.setup-eyebrow{margin:0;font-size:12px;font-weight:750;letter-spacing:.02em;color:#6a7f88}
.setup-dots{display:flex;gap:6px;margin:0 auto 0 4px;padding:0;list-style:none}.setup-dots li{width:22px;height:6px;border-radius:3px;background:#e2dccf}.setup-dots li.on{background:var(--violet)}
.setup-skip{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:#5b6f78;font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.setup-page{display:grid;grid-template-rows:auto auto auto auto;align-content:start;gap:clamp(4px,1.2dvh,10px);min-height:0}.setup-page.hidden{display:none}
.setup-page h1,.setup-page h2{margin:0;font-size:clamp(19px,3.4dvh,26px);line-height:1.15;color:#2c3f4a;outline:none}
.setup-lead{margin:0;max-width:62ch;font-size:clamp(13px,2.3dvh,15px);line-height:1.4;color:#4e636c}
.setup-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,16px);min-height:0}
.setup-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;padding:10px 10px 12px;border:2px solid #e4ddcf;border-radius:18px;background:#fff;color:#2f4858;font:inherit;text-align:center;box-shadow:0 3px 0 #e9e2d4;transition:border-color .15s ease,transform .15s ease}
.setup-card strong{font-size:clamp(15px,2.7dvh,18px)}.setup-card em{font-style:normal;font-weight:750;font-size:13px;color:var(--violet)}
.setup-note{font-size:12px;line-height:1.3;color:#5d7079;max-width:22ch}
.setup-card[aria-checked="true"]{border:3px solid var(--violet);box-shadow:0 3px 0 #b9a6ee;background:#faf8ff}
.setup-card[aria-checked="true"]::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.setup-card:active{transform:scale(.98)}
.setup-art{display:block;width:clamp(56px,14dvh,96px);height:auto}.setup-art svg{width:100%;height:auto;display:block}
.setup-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eef6f8;color:#4f7684}.setup-icon svg{width:30px;height:30px}
.setup-card[data-setup-sound="sinvoz"] .setup-icon{background:#fff4d6;color:#8a5a12}.setup-card[data-setup-sound="silencio"] .setup-icon{background:#ffe9ec;color:#a1405a}
.setup-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#eef6f8;color:#3f6675;font-size:24px;font-weight:800;line-height:1}
.setup-extra{display:flex;flex-wrap:wrap;gap:10px}.setup-extra .secondary{min-height:48px;margin:0;width:auto;padding:0 16px}
.setup-extra .secondary:disabled{opacity:.45}
.setup-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.setup-nav .mainbtn,.setup-nav .secondary{min-height:48px;margin:0;width:auto;min-width:140px;padding:0 22px}
.invisible{visibility:hidden}
@media (max-height:360px){.setup-note{display:none}.setup-card{min-height:72px;padding:6px}.setup-art{width:48px}.setup-icon,.setup-num{width:38px;height:38px}.setup-icon svg{width:26px;height:26px}.setup-lead{font-size:12.5px;line-height:1.3}.setup-top{min-height:36px}.setup-extra .secondary,.setup-nav .mainbtn,.setup-nav .secondary{min-height:44px}#setup.screen{gap:6px}}
/* Recorrido: el mapa real oscurecido con un foco sobre cada control. */
.coach{position:fixed;inset:0;z-index:6;pointer-events:auto}
.coach.hidden{display:none}
.coach-hole{position:fixed;box-shadow:0 0 0 200vmax #17313dc2;outline:3px solid #ffd166;outline-offset:2px;transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease,border-radius .3s ease;pointer-events:none}
.coach-bubble{position:fixed;max-width:calc(100vw - 16px - var(--safe-left) - var(--safe-right));padding:14px 16px 12px;border-radius:18px;background:#fff;color:#2f4858;box-shadow:0 12px 30px #0b1f2a55}
#coachText{margin:6px 0 10px;font-size:clamp(14px,2.6dvh,16px);line-height:1.4;outline:none}
.coach-actions{display:flex;justify-content:space-between;gap:10px}.coach-actions .mainbtn,.coach-actions .secondary{min-height:44px;margin:0;width:auto;padding:0 16px}
#gameShell.coaching .place,#gameShell.coaching .map-lamb{animation:none}
@media(prefers-reduced-motion:reduce){.coach-hole{transition:none}}
/* Actualización: un punto discreto en el candado cuando hay versión nueva lista. */
.adult-lock.has-update::after{content:"";position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 2px #fff}
.adult-update{border:1px solid var(--line);border-radius:14px;padding:8px 12px 10px;margin:4px 0}.adult-update legend{font-weight:750;padding:0 4px}
#updateHelp{margin:6px 0 0;font-size:13px;color:#5d7079}
.coach-hole.off{left:50%!important;top:50%!important;width:0!important;height:0!important;outline:none}

/* ===================== 1.0.2 · Semilla con pincel y lápiz ===================== */
/* Tres herramientas grandes (mágica, pincel, lápiz); sin borrador ni texturas. */
body[data-little="on"] #play #tools{display:grid}
body[data-little="on"] #play #tools [data-tool="eraser"],body[data-little="on"] #play #textureOpen{display:none}
@media (orientation:landscape) and (min-width:540px){
 body[data-little="on"] #play.screen{--tools-width:clamp(80px,11vw,100px);--colors-width:clamp(104px,16vw,150px);grid-template-columns:var(--actions-width) minmax(0,1fr) var(--colors-width) var(--tools-width)}
 body[data-little="on"] #play #tools{grid-column:4;grid-row:1/-1;grid-template-rows:repeat(3,minmax(48px,1fr))}
 body[data-little="on"] #play #tools .tool [data-tool-art] svg{height:clamp(30px,9dvh,46px)}
}

/* ===================== 1.0.2 · Mapa deslizable ===================== */
/* Los lugares mantienen su tamaño (3 a la vista). La franja visible queda entre los controles,
   así nada se desliza por debajo del álbum ni del candado. */
#home .places{left:calc(88px + var(--safe-left));right:calc(88px + var(--safe-right));padding:16px 0 30px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}
#home .places::-webkit-scrollbar{display:none}
#home .place{flex:none;scroll-snap-align:start}
#home .places>.place:first-child{margin-left:auto}#home .places>.place:last-child{margin-right:auto}
.places-arrow{position:absolute;z-index:3;top:max(50%,calc(var(--safe-top) + 166px));transform:translateY(-50%)}
#placesPrev{left:calc(20px + var(--safe-left))}#placesNext{right:calc(20px + var(--safe-right))}
.places-arrow[hidden]{display:none}
.places-arrow.nudge{animation:arrow-nudge 1s ease-in-out 2}
@keyframes arrow-nudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(6px) scale(1.08)}}
.place-board .place-art{background:#fff4dc}
.place-board .place-art svg{display:block}

/* ===================== 1.0.2 · Pizarrón libre ===================== */
body[data-screen="pizarron"] .app-header{display:none}
#pizarron.screen{position:fixed;inset:0;max-width:none;margin:0;display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:8px;align-items:stretch;
 padding:calc(8px + var(--safe-top) + var(--qa-height)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));background:linear-gradient(#d7f0f7,#bfe6d2)}
#pizarron.screen.hidden{display:none}
.piz-actions{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:6px}
.piz-actions .iconbutton{width:52px;height:52px;border:2px solid #37788a;border-radius:14px;background:#e5faf8;color:#2c6577;box-shadow:0 3px 0 #27758a55}
.piz-actions .iconbutton:disabled{opacity:.4;box-shadow:none}
.piz-sponge svg{width:34px;height:34px}
.piz-sheet{position:relative;min-width:0;min-height:0;border-radius:12px;background:#fff;box-shadow:0 0 0 3px #335e6e,0 6px 0 #28738955;overflow:hidden;touch-action:none}
.free-canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair;transition:opacity .25s ease}
.piz-sheet.wiping .free-canvas{opacity:.15}
.piz-wipe{position:absolute;z-index:2;top:50%;left:-90px;width:90px;height:90px;margin-top:-45px;opacity:0;pointer-events:none}
.piz-wipe svg{width:100%;height:100%}
.piz-wipe.go{animation:piz-wipe 1s ease-in-out both}
@keyframes piz-wipe{0%{opacity:1;transform:translate(0,-30%) rotate(-10deg)}25%{transform:translate(35vw,25%) rotate(8deg)}50%{transform:translate(60vw,-25%) rotate(-8deg)}80%{opacity:1}100%{opacity:0;transform:translate(85vw,10%) rotate(6deg)}}
.piz-colors{display:grid;grid-template-columns:repeat(2,48px);grid-auto-rows:48px;gap:8px;align-content:start;overflow-y:auto;padding:8px;scrollbar-width:none;border-radius:16px;background:#ffffffb0}
.piz-colors::-webkit-scrollbar{display:none}
.piz-color{width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 2px #335e6e33,0 3px 0 #2873892e;padding:0}
.piz-color[data-color="#ffffff"]{box-shadow:0 0 0 2px #335e6e88,0 3px 0 #2873892e}
.piz-color[aria-pressed="true"]{box-shadow:0 0 0 4px #335e6e,0 3px 0 #2873892e;transform:scale(1.06)}
.piz-tools{display:grid;grid-auto-rows:minmax(48px,1fr);gap:4px;width:clamp(76px,10vw,96px);padding:3px;border:2px solid #335e6e;border-radius:12px;background:#e3f5ea;box-shadow:0 3px 0 #28738960}
.piz-tools .tool{display:grid;place-items:center;padding:2px;border-radius:10px;border:2px solid transparent;background:transparent}
.piz-tools .tool svg{width:100%;height:auto;max-height:44px}
.piz-tools .tool[aria-pressed="true"]{background:#f6ffd0;border-color:#41612e}
body[data-level="semilla"] .piz-color{width:52px;height:52px}body[data-level="semilla"] .piz-colors{grid-template-columns:repeat(2,52px);grid-auto-rows:52px}
@media (max-height:340px){.piz-actions .iconbutton{width:48px;height:48px}.piz-colors{grid-auto-rows:44px;grid-template-columns:repeat(2,44px)}.piz-color,body[data-level="semilla"] .piz-color{width:44px;height:44px}body[data-level="semilla"] .piz-colors{grid-template-columns:repeat(2,44px);grid-auto-rows:44px}}
@media(prefers-reduced-motion:reduce){.free-canvas{transition:none}}

/* 1.0.2 · Mismos colores y herramientas en todas las edades: Semilla usa la paleta normal. */

/* ===================== 1.0.3 · Esponja mágica al pintar ===================== */
/* Va con las herramientas, debajo del borrador: es una acción (limpia todo), no se queda elegida. */
#play #tools{grid-template-rows:none;grid-auto-rows:minmax(48px,1fr)}
#play #tools .paint-sponge{background:#fff6d8;border-color:#c9952b}
#play #tools .paint-sponge:disabled{opacity:.4}
#play #tools .paint-sponge [data-tool-art] svg{height:clamp(28px,8dvh,42px)}
#paperWrap{position:relative}
.paint-wipe{z-index:4}
#scene{transition:opacity .25s ease}#scene.wiping{opacity:.25}
#play #undo.glow{animation:undo-glow 1.3s ease-in-out 3}
@keyframes undo-glow{0%,100%{box-shadow:0 3px 0 #27758a55}50%{box-shadow:0 0 0 6px #ffd166,0 3px 0 #27758a55;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){#scene{transition:none}#play #undo.glow{animation:none;box-shadow:0 0 0 5px #ffd166}}
/* Alturas bajas: la esponja pasa a la columna de acciones (las herramientas no caben a ≥ 48 px con 6 filas). */
#play #paintSpongeAlt{display:none}
@media (orientation:landscape) and (min-width:540px) and (max-height:349px){
 #play #tools #paintSponge{display:none}
 #play #paintSpongeAlt{display:flex;grid-column:1;grid-row:3;justify-self:start;width:48px;color:#8a5a12;background:#fff6d8;border-color:#c9952b;box-shadow:0 3px 0 #c9952b80}
 #play #paintSpongeAlt svg{width:32px;height:32px}#play #paintSpongeAlt:disabled{opacity:.4;box-shadow:none}
 #play.screen{grid-template-rows:repeat(4,minmax(48px,1fr))}
 #play #playSound{grid-row:4}#play #playOptions{grid-row:4}
}

/* ===================== 1.0.3 · Carrusel de mundos ===================== */
/* El mundo del centro se ve grande; los laterales se achican y aclaran según su distancia (variables que pone app.js).
   Espaciadores al inicio y al final para que el primero y el último también lleguen al centro. */
#home .places{--big:min(60dvh,calc((100vw - var(--safe-left) - var(--safe-right) - 176px) * .42),280px);gap:0;padding:14px 0 28px}
#home .places::before,#home .places::after{content:"";flex:0 0 calc(50% - var(--big) / 2 + var(--big) * .05)}
#home .place,#home .places>.place:first-child,#home .places>.place:last-child{--size:var(--big);flex:none;margin:0 calc(var(--big) * -.05);scroll-snap-align:center;scroll-snap-stop:always;animation:none;transform:translateY(var(--ty,0px)) scale(var(--s,1));opacity:var(--o,1);transform-origin:50% 40%;will-change:transform,opacity}
#home .place.is-center{z-index:1}
#home .place:not(.is-center) .place-stars{opacity:0}
#home .place.is-center .place-art{animation:art-float 4.2s ease-in-out infinite}
@keyframes art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#home .place:active .place-art{transform:scale(.97)}
@media (orientation:landscape) and (min-width:540px) and (max-height:279px){#home .places{--big:min(46dvh,calc((100vw - var(--safe-left) - var(--safe-right) - 176px) * .42),280px)}}
@media(prefers-reduced-motion:reduce){#home .place.is-center .place-art{animation:none}}