html,body,#app,canvas,button,.panel,.card{ -webkit-tap-highlight-color: transparent; }
canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171e48;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#26304c}body{-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100dvh;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}.hidden{display:none!important}#hud{position:absolute;top:calc(9px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;text-shadow:0 2px 5px #14243d;pointer-events:none;font-size:clamp(13px,1.8vw,19px);font-weight:1000}#hud span{background:#1527419e;border:1px solid #ffffff80;border-radius:999px;padding:5px 12px;white-space:nowrap}#hud .small{pointer-events:auto;border:1px solid #ffffff8a;background:#152741bb;color:white;border-radius:15px;font-size:23px;min-width:44px;min-height:39px;cursor:pointer}#progress{position:absolute;left:14%;right:14%;height:7px;top:calc(53px + env(safe-area-inset-top));border-radius:40px;border:1px solid #ffffffa0;background:#16284280;overflow:hidden;pointer-events:none}#progressFill{width:0;height:100%;background:linear-gradient(90deg,#ffdb66,#ff8fb4);border-radius:40px;transition:width .12s}#toast{position:absolute;left:50%;top:17%;transform:translateX(-50%) translateY(-12px);text-align:center;color:white;font-weight:950;font-size:clamp(16px,2.6vw,27px);white-space:nowrap;text-shadow:0 2px 8px #18364e;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;background:#172a51a8;border-radius:30px;padding:8px 18px}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:linear-gradient(125deg,#111948b0,#38317b9e);backdrop-filter:blur(7px)}.card{border-radius:28px;border:3px solid white;box-shadow:0 17px 0 #131a3e50,0 32px 60px #10133e9c;max-width:610px;width:min(610px,96vw);max-height:calc(100dvh - 22px);overflow-y:auto;background:linear-gradient(160deg,#fffefc,#eaf6ff);padding:clamp(14px,3vh,25px) clamp(15px,3vw,30px);text-align:center}.characters{height:clamp(65px,16vh,125px);display:flex;justify-content:center;align-items:center;gap:11px}.characters img{height:100%;width:auto;max-width:36%;object-fit:contain;filter:drop-shadow(0 6px 6px #a8b6d4)}.heart{color:#ff6e91;font-size:38px;animation:beat 1s infinite alternate}@keyframes beat{to{transform:scale(1.22)}}.tag{font-size:clamp(10px,1.7vw,12px);font-weight:1000;letter-spacing:1px;color:#8b5db8;margin-top:4px}h1{font-size:clamp(25px,5vw,44px);line-height:1.1;margin:7px 0 12px;color:#2a4284}p{font-size:clamp(13px,2vw,17px);line-height:1.5;margin:7px auto 15px;max-width:520px}.instructions{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:9px 0 17px}.instructions span{background:#dceaff;color:#294874;padding:7px 10px;border-radius:14px;font-size:clamp(11px,1.7vw,13px);font-weight:800}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}button{font-family:inherit}#primary{border:0;border-radius:17px;background:linear-gradient(#ffc84f,#ff9b3d);padding:12px 25px;color:#64380f;font-weight:1000;font-size:clamp(15px,2.3vw,20px);box-shadow:0 5px 0 #cc712c;cursor:pointer}#primary:disabled{opacity:.58;cursor:wait}#primary:active{transform:translateY(3px);box-shadow:0 2px 0 #cc712c}.secondary{border:0;border-radius:17px;background:#dae8ff;padding:12px 23px;color:#324f86;font-weight:850;cursor:pointer}.sound{display:block;margin:19px auto 0;border:0;color:#41608a;background:transparent;text-decoration:underline;font-size:13px;cursor:pointer}.fineprint{margin-top:10px;font-size:11px;color:#657797}#rotate{display:none;position:absolute;inset:0;background:#172149f5;z-index:12;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px}.rotateCard{border:2px solid #ffffff93;border-radius:24px;padding:30px 20px;background:#344887;width:min(340px,100%)}.rotateIcon{font-size:64px;margin-bottom:12px}.rotateCard strong{font-size:24px}.rotateCard p{font-size:16px;color:#e5edff}@media (pointer:coarse) and (orientation:portrait) and (max-width:900px){#rotate{display:flex}}@media(max-height:470px){.card{padding:10px 14px;border-radius:20px}.characters{height:55px}.tag{font-size:10px}h1{font-size:23px;margin:3px 0 6px}.card p{font-size:12px;line-height:1.25;margin:4px auto}.instructions{margin:4px auto 7px}.instructions span{font-size:10px;padding:4px 7px}#primary,.secondary{font-size:13px;padding:8px 16px}.sound{margin-top:8px}.fineprint{display:none}#hud #world{font-size:11px}}@media(max-width:580px){#hud #world{display:none}#progress{top:calc(56px + env(safe-area-inset-top));left:11%;right:11%}}

 
.loading-screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(12px,4vh,30px);text-align:center;color:#fff;background:radial-gradient(ellipse at 50% 76%,#b967ac 0%,#6259ad 35%,#252e73 72%,#161b48 100%);isolation:isolate}
.loading-screen:before,.loading-screen:after{content:"";position:absolute;inset:0;pointer-events:none}
.loading-screen:before{background:radial-gradient(circle at 15% 24%,#fff4 0 1px,transparent 2px),radial-gradient(circle at 79% 30%,#fff8 0 2px,transparent 3px),radial-gradient(circle at 39% 15%,#fff7 0 2px,transparent 3px),radial-gradient(circle at 87% 77%,#ffe2aa9f 0 2px,transparent 3px),radial-gradient(circle at 23% 72%,#fff7 0 2px,transparent 3px);background-size:260px 200px;opacity:.9}
.loading-screen:after{background:linear-gradient(0deg,#0c1847aa,transparent 36%);z-index:-1}
.loading-orb{position:absolute;aspect-ratio:1;border-radius:50%;filter:blur(3px);pointer-events:none}
.loading-orb-one{width:37vmax;top:-25vmax;left:-10vmax;background:radial-gradient(circle,#a4b8ff70,transparent 68%)}
.loading-orb-two{width:40vmax;right:-15vmax;bottom:-25vmax;background:radial-gradient(circle,#ffc18072,transparent 68%)}
.loading-content{width:min(500px,100%);position:relative;z-index:1;display:flex;align-items:center;flex-direction:column}
.loading-tag{font-size:clamp(10px,1.5vw,13px);font-weight:900;letter-spacing:.14em;color:#fbe4a5;text-shadow:0 2px 10px #272665;margin:0 0 5px}
.loading-art{height:clamp(90px,27vh,214px);width:min(310px,72vw);position:relative;display:flex;align-items:center;justify-content:center}
.loading-leo{position:relative;z-index:2;height:95%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 9px 8px #16214da6);animation:leo-loading-bob .8s ease-in-out infinite alternate}
.loading-ground{position:absolute;z-index:1;bottom:3%;left:24%;width:52%;height:10px;border-radius:50%;background:#11224d75;filter:blur(5px)}
.loading-spark{position:absolute;color:#ffe48b;text-shadow:0 0 12px #ffe480,0 0 24px #ffc050;font-size:clamp(17px,3.2vw,32px);animation:loading-sparkle 1.5s ease-in-out infinite alternate}
.loading-spark-one{top:15%;left:8%}.loading-spark-two{right:9%;top:23%;animation-delay:.6s}.loading-spark-three{right:13%;bottom:18%;animation-delay:.3s}
.loading-content h2{font-size:clamp(24px,4.4vw,41px);line-height:1.08;color:#fff;text-shadow:0 3px 0 #26335b,0 8px 18px #171d60a6;margin:4px 0 6px;font-weight:1000}
.loading-subtitle{color:#e9f4ff;font-size:clamp(12px,1.7vw,16px);font-weight:650;line-height:1.3;margin:3px 0 clamp(10px,2.6vh,20px)}
.loading-track{height:clamp(13px,2.5vh,20px);width:min(370px,90%);padding:3px;border:2px solid #ffefc4;border-radius:99px;background:#172b64a8;box-shadow:0 3px 20px #121e64a1,inset 0 2px 6px #14265b}
.loading-bar{width:0%;height:100%;border-radius:99px;background:linear-gradient(90deg,#fff1a4,#ffc553 48%,#ff9bb5);box-shadow:0 0 14px #ffdc8c;transition:width .2s ease}
.loading-details{width:min(370px,90%);display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;color:#f2eeff;font-size:clamp(11px,1.5vw,13px);font-weight:700;text-shadow:0 1px 8px #172258}
.loading-details strong{font-size:clamp(13px,1.9vw,17px);color:#fff3be;white-space:nowrap}
.loading-retry{border:2px solid #fff;border-radius:16px;background:#ffc75e;color:#563a36;font-weight:900;padding:9px 20px;margin-top:13px;cursor:pointer}
.loading-screen.is-ready{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s}
@keyframes leo-loading-bob{to{transform:translateY(-7px)}}
@keyframes loading-sparkle{from{transform:scale(.65) rotate(-10deg);opacity:.4}to{transform:scale(1.2) rotate(20deg);opacity:1}}
@media(max-height:420px){.loading-art{height:clamp(68px,24vh,118px)}.loading-tag{font-size:10px}.loading-subtitle{margin-bottom:7px}.loading-content h2{font-size:clamp(20px,3.3vw,27px)}}
@media(prefers-reduced-motion:reduce){.loading-leo,.loading-spark{animation:none}.loading-bar{transition:none}}

 
.intro-video-screen{position:absolute;inset:0;z-index:18;background:#09080d;display:flex;align-items:center;justify-content:center;overflow:hidden}
.intro-video-screen video{width:100%;height:100%;object-fit:contain;background:#09080d}
.intro-video-screen.is-black{background:#000}
.intro-video-screen.is-black video,.intro-video-screen.is-black .skip-intro-video{display:none!important}
.skip-intro-video{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(15px + env(safe-area-inset-bottom));z-index:1;border:1px solid #ffffffb5;border-radius:999px;background:#172448c9;color:#fff;padding:11px 18px;font-size:clamp(13px,1.8vw,17px);font-weight:800;cursor:pointer;box-shadow:0 4px 16px #0009}
.skip-intro-video:hover,.skip-intro-video:focus-visible{background:#334785;outline:2px solid #fff;outline-offset:2px}
#rotate{z-index:30}

 

 
#finalVideoScreen{opacity:1;transition:opacity .65s ease .8s}
#finalVideoScreen.final-zoom-start{opacity:0;transition:none;pointer-events:none}
#game.final-camera-zoom{transition:transform 1.45s cubic-bezier(.4,0,.2,1);will-change:transform}
@media(prefers-reduced-motion:reduce){
 #finalVideoScreen{transition-duration:.01s;transition-delay:0s}
 #game.final-camera-zoom{transition:none;transform:none!important}
}

 
.fullscreen-toggle{display:block;margin:7px auto 0;border:0;background:transparent;color:#41608a;text-decoration:underline;font-size:13px;cursor:pointer;padding:5px 10px;border-radius:8px}
.fullscreen-toggle:hover,.fullscreen-toggle:focus-visible{background:#dceaff;outline:2px solid #7593c8;outline-offset:1px}
#app:fullscreen,#app:-webkit-full-screen{width:100%;height:100%;background:#171e48}