:root{--red:#cf1238;--ink:#291619;--stage:min(96vw,560px,62vh)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden;font-family:Inter,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff8f4}.app{position:fixed;inset:0;overflow:hidden;background:url("assets/fondo.png") center/cover no-repeat}.screen{position:absolute;inset:0;transition:.45s}.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.985)}.intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:max(16px,env(safe-area-inset-top)) 18px 0}.intro header{display:flex;flex-direction:column;align-items:center}.brand{display:flex;flex-direction:column;line-height:1}.brand b{font-size:3rem}.brand strong{font-size:clamp(1.4rem,5vw,2.2rem);font-weight:950}.brand small{margin-top:10px;letter-spacing:.2em;text-transform:uppercase}.crown-mark{color:var(--red);font-size:clamp(3rem,13vw,5rem);line-height:1;margin-top:2vh}.intro h1{margin:0;color:var(--red);font-size:clamp(2rem,8vw,4rem);line-height:.94;letter-spacing:-.055em;font-weight:950;text-shadow:0 7px 22px #d81b3a20}.intro h1 span{white-space:nowrap}.start{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:18px}.start button{position:relative;display:grid;place-items:center;width:clamp(145px,38vw,215px);aspect-ratio:1;border:0;border-radius:50%;color:#fff;background:radial-gradient(circle at 33% 24%,#ffffff70,transparent 22%),linear-gradient(#ff7189,#eb3458 45%,#c70b32);box-shadow:inset 0 8px 16px #ffffff3d,inset 0 -18px 30px #73001b38,0 16px 40px #c11e4338,0 0 0 10px #ffb9c733;cursor:pointer}.start button i{position:absolute;inset:-10%;border:2px solid #ef436533;border-radius:50%;animation:pulse 2.7s infinite}.start svg{width:42%;fill:#fff}.start p{margin:0}.intro footer{width:calc(100% + 36px);padding:14px 22px max(14px,env(safe-area-inset-bottom));background:#ffffffcf;backdrop-filter:blur(12px);font-size:clamp(.72rem,2.35vw,.9rem)}footer a{color:inherit;text-decoration:none;border-bottom:1px solid #333}.queen-screen{display:grid;place-items:center}.scene{position:relative;width:min(96vw,560px,calc(96vh * .65));aspect-ratio:1024/1536;filter:drop-shadow(0 24px 35px #7d43522b)}.throne{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain}.rig{position:absolute;z-index:3;left:29.5%;top:22.5%;width:41%;transform-origin:50% 72%;will-change:transform}.queen{display:block;width:100%;overflow:visible}.float{transform-origin:180px 310px;animation:float 4.8s ease-in-out infinite}.pupil{transition:transform .1s}.lid{fill:#eb2b4d;opacity:0}.blink .lid{opacity:1}.crown{transform-origin:180px 68px;animation:tilt 4.8s ease-in-out infinite}.stop{position:absolute;z-index:5;left:34.4%;bottom:7.6%;width:31.2%;aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer}.stop:active{background:#8c00151a;transform:scale(.96)}.waves{position:absolute;inset:0}.waves i{position:absolute;top:34%;width:8%;height:20%;border-radius:50%;opacity:0}.waves i:nth-child(1){left:8%;border-left:7px solid #e51b4673}.waves i:nth-child(2){left:16%;border-left:5px solid #e51b4659}.waves i:nth-child(3){right:8%;border-right:7px solid #e51b4673}.waves i:nth-child(4){right:16%;border-right:5px solid #e51b4659}.queen-screen[data-state=speaking] .waves i{animation:wave .9s infinite}@keyframes pulse{0%{transform:scale(.88);opacity:0}20%{opacity:.6}100%{transform:scale(1.18);opacity:0}}@keyframes float{50%{transform:translateY(-5px) rotate(.5deg)}}@keyframes tilt{50%{transform:rotate(1deg)}}@keyframes wave{50%{transform:scale(1.12);opacity:.85}}@media(max-height:680px){.brand b{font-size:2rem}.crown-mark{font-size:2.8rem}.intro h1{font-size:1.8rem}.start button{width:130px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}
/* Queen v3: native 941 x 1672 throne coordinates. */
.scene{width:min(96vw,560px,calc(98vh * .5628));width:min(96vw,560px,calc(98dvh * .5628));aspect-ratio:941/1672}
.rig{left:24%;top:15.7%;width:52%;transform-origin:50% 91%}
.float{transform-origin:240px 525px;animation:queenBreathe 5.4s ease-in-out infinite}
.crown{transform-origin:240px 178px;animation:queenCrown 5.4s ease-in-out infinite}
.pupil{transition:none}
.eye-open{transform-box:view-box;transform-origin:0 0;transition:transform 90ms ease-out}
.closed-eye{opacity:0;transition:opacity 65ms ease}
.blink .eye-open{transform:scaleY(.035);opacity:0}
.blink .closed-eye{opacity:1}
.stop{left:33.3%;top:65.95%;bottom:auto;width:33.4%}
.stop:focus-visible{outline:3px solid #fff;outline-offset:4px}
.queen-screen[data-state=thinking] .brows{transform:translateY(-2px)}
@keyframes queenBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006,.997)}}
@keyframes queenCrown{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.45deg)}}
@media(prefers-reduced-motion:reduce){.eye-open,.closed-eye{transition:none}.float,.crown{animation:none}}