/* Each whole island has independent entrance, idle and interaction layers. */
.world.layered-world{height:clamp(720px,55vw,840px);min-height:720px;background:#a9ddff url('assets/world-layers/sky.webp') center/cover no-repeat}
.layered-world .headline{top:102px;left:32%;width:36%;z-index:6}
.headline-line{display:block;animation:scene-in .7s cubic-bezier(.22,1,.36,1) both}
.headline-line+.headline-line{animation-delay:.12s}
.layered-world .headline p{animation:scene-in .7s .24s both;font-size:16px}
.layered-world .islands{position:absolute;inset:0;max-width:1480px;margin:auto;z-index:3;transition:opacity .45s;pointer-events:none}
.layered-world .island{position:absolute;display:block;width:25%;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:none;transform:none;translate:none;scale:none;pointer-events:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.layered-world .island::before{display:none!important}
.layered-world .island:hover{background:none;transform:none;box-shadow:none}
.layered-world .puzzle{left:4%;right:auto;top:12%;--period:5.2s;--phase:0s;--rise:-9px;--angle:.35deg;--entry:.30s}
.layered-world .chase{left:0;right:auto;top:44%;width:22%;--period:6.1s;--phase:-1.3s;--rise:-7px;--angle:-.35deg;--entry:.38s}
.layered-world .survivor{left:15%;right:auto;top:63%;width:22%;--period:4.8s;--phase:-2.7s;--rise:-8px;--angle:.25deg;--entry:.46s}
.layered-world .tower{right:4%;left:auto;top:10%;width:26%;--period:6.8s;--phase:-.8s;--rise:-10px;--angle:-.3deg;--entry:.54s}
.layered-world .music{right:0;left:auto;top:48%;width:25%;--period:5.7s;--phase:-3.2s;--rise:-6px;--angle:.4deg;--entry:.62s}
.island-enter,.island-float,.island-hover{display:block;width:100%;height:100%;position:relative}
.island-enter{animation:island-in .85s var(--entry) cubic-bezier(.22,1,.36,1) both}
.island-float{animation:island-float var(--period) var(--phase) ease-in-out infinite;transform-origin:50% 60%}
.island-hover{transition:transform .25s cubic-bezier(.22,1,.36,1);transform-origin:50% 65%}
.island-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 18px 14px #195c7f22)}
.island-sign{position:absolute;top:62%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 17px;border:1px solid #fff4cd;border-bottom:3px solid #d7b881;border-radius:12px;background:linear-gradient(#fffdf2,#fff0d3);box-shadow:0 5px 12px #163e6726;color:#17365c;font-size:17px;font-weight:900;transition:background .2s,box-shadow .2s}
.island-sign::after{content:'›';font-size:20px;color:#dd9535;opacity:0;width:0;overflow:hidden;transition:width .2s,opacity .2s}
.layered-world .island:focus-visible{outline:none}
.layered-world .island:focus-visible .island-sign{outline:3px solid #1476ff;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.island:hover .island-hover{transform:translateY(-8px) scale(1.035)}.island:hover .island-sign{background:#fffdf3;box-shadow:0 6px 19px #ffc7556e}.island:hover .island-sign::after{opacity:1;width:10px}}
.island.is-pressed .island-hover{transform:translateY(2px) scale(.96);transition-duration:.09s}
@keyframes island-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes island-float{0%,100%{transform:translateY(0) rotate(0) scale(.998)}50%{transform:translateY(var(--rise)) rotate(var(--angle)) scale(1.004)}}
@keyframes scene-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.layered-world .cloud{position:absolute;pointer-events:none;background:url('assets/world-layers/cloud.webp') center/contain no-repeat;z-index:2;filter:none;height:180px;width:44%;opacity:.48}
.layered-world .cloud-back{left:-6%;top:15%;width:40%;height:210px;opacity:.78;animation:cloud-sail 72s -20s ease-in-out infinite alternate}
.layered-world .cloud-middle{right:-4%;top:36%;width:39%;height:190px;opacity:.7;animation:cloud-sail 62s -28s ease-in-out infinite alternate-reverse}
.layered-world .cloud-front{left:9%;bottom:6%;width:48%;height:200px;opacity:.76;z-index:2;animation:cloud-sail 48s -18s ease-in-out infinite alternate-reverse}
@keyframes cloud-sail{from{transform:translateX(-14%)}to{transform:translateX(36%)}}
.layered-world .surprise{top:38%;width:410px;height:345px;z-index:5}
.layered-world .mystery{top:0;left:94px;width:310px;height:310px;animation:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .22s,filter .25s;filter:drop-shadow(0 12px 20px #ffb12855);opacity:1}
.layered-world .question-enter{display:block;width:100%;height:100%;animation:question-in .8s .78s cubic-bezier(.22,1,.36,1) both}
.layered-world .mystery img{animation:question-breathe 2.4s ease-in-out infinite;object-fit:contain}
.layered-world .mystery::before{content:'';position:absolute;inset:5%;border:0;border-radius:50%;background:radial-gradient(ellipse,#fff4b8a6,#ffdc5629 45%,transparent 70%);transform:scale(1.2);opacity:.6;animation:energy-breathe 2.4s ease-in-out infinite;z-index:-1}
.layered-world .mystery::after{content:'';position:absolute;inset:10%;border:2px solid #fff1b1;border-radius:50%;opacity:0;pointer-events:none;z-index:-1}
@keyframes question-in{from{opacity:0;transform:translateY(20px) scale(.85)}to{opacity:1;transform:none}}
@keyframes question-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes energy-breathe{0%,100%{opacity:.4;transform:scale(1.12)}50%{opacity:.85;transform:scale(1.3)}}
.layered-world .surprise.approaching .mystery{filter:drop-shadow(0 8px 26px #ffd15b99)}
.layered-world .surprise.near:not(.exploding):not(.revealed) .mystery{animation:none;transform:translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.06);filter:drop-shadow(0 8px 28px #ffd15baa)}
.layered-world .surprise.near .mystery::after{animation:energy-ring 1.8s ease-out infinite}
@keyframes energy-ring{0%{transform:scale(.85);opacity:.5}55%,100%{transform:scale(1.5);opacity:0}}
.layered-world .surprise.exploding .mystery{animation:question-impact .48s cubic-bezier(.2,.7,.3,1) both}
.layered-world .surprise.exploding .mystery img{animation:none}
@keyframes question-impact{0%{transform:scale(1.06);opacity:1}25%{transform:scale(.9)}58%{transform:scale(1.13);opacity:1}100%{transform:scale(1.02);opacity:0}}
.layered-world .surprise.revealed .mystery{animation:none;opacity:0;pointer-events:none}
.layered-world .surprise.revealed .mystery *,.layered-world .surprise.revealed .mystery::before,.layered-world .surprise.revealed .mystery::after{animation:none}
.layered-world .mascot{left:-38px;top:70px;width:230px;height:265px;transform-origin:85% 85%;animation:none;opacity:1;transform:rotate(-8deg)}
.layered-world.mascot-intro .mascot{animation:mascot-arrive 1s 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes mascot-arrive{from{opacity:0;transform:translate(85px,16px) rotate(12deg) scale(.9)}to{opacity:1;transform:rotate(-8deg)}}
.layered-world .surprise.near .mascot{animation:none;transform:translate(-7px,-4px) rotate(-12deg);transition:transform .4s}
.layered-world .surprise.exploding .mascot{animation:mascot-react .48s both}
@keyframes mascot-react{0%,100%{transform:rotate(-8deg)}50%{transform:translate(-12px,-15px) rotate(-15deg)}}
.layered-world .surprise.revealed .mascot{left:-65px;top:80px;animation:none;transform:rotate(-10deg)}
.layered-world .draw{bottom:42px;padding:16px 45px;border-radius:45px;font-size:23px;transition:filter .2s,box-shadow .2s,scale .2s;animation:scene-in .65s 1s both;translate:-50% 0;transform:none}
.layered-world:has(.surprise.near) .draw{filter:brightness(1.1);box-shadow:0 5px 0 #cc6223,0 0 32px #fff0bd}
.layered-world .draw:active{scale:.96}
.layered-world .reveal-card{left:63px;top:-10px;width:305px;min-height:330px;padding:19px 20px;border:2px solid #ffe3a4;border-radius:24px;box-shadow:0 20px 40px #153e7935,0 0 30px #fff0b744;animation:reveal-arrive .52s cubic-bezier(.22,1,.36,1) both}
.layered-world .reveal-card .game-art{height:120px}
@keyframes reveal-arrive{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.layered-world.has-result .islands{opacity:.8;pointer-events:auto}
.layered-world.has-result .island-float,.layered-world.has-result .cloud{animation-play-state:paused}
.layered-world.motion-paused *,.layered-world.motion-paused *::before,.layered-world.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:950px) and (min-width:601px){.world.layered-world{height:720px}.layered-world .puzzle{left:1%;width:29%}.layered-world .tower{right:0;width:30%}.layered-world .chase{top:43%;width:26%}.layered-world .music{top:46%;width:28%}.layered-world .survivor{left:6%;top:67%;width:27%}.island-sign{font-size:14px;padding:7px 12px}.layered-world .headline{left:29%;width:42%}.layered-world .headline p{font-size:13px;margin-inline:-10px}.layered-world .mascot{width:205px;left:-12px}}
@media(max-width:600px){
 .world.layered-world{height:860px;min-height:860px;background-size:auto 860px;background-position:center bottom}
 .layered-world .headline{top:84px;left:12%;width:76%}.layered-world .headline h1{font-size:44px}.layered-world .headline p{font-size:12px;margin:13px -10px 0}
 .layered-world .island{width:42%;--rise:-4px;--angle:.2deg}.layered-world .puzzle{top:24%;left:-3%}.layered-world .tower{top:24%;right:-3%;width:43%}
 .layered-world .chase{top:67%;left:-2%;width:35%}.layered-world .music{top:67%;right:-2%;width:35%}.layered-world .survivor{top:70%;left:32.5%;width:35%}
 .island-sign{top:62%;padding:5px 10px;font-size:12px;gap:0;border-radius:9px}.island-sign::after{display:none}
 .layered-world .surprise{top:345px;width:320px;height:280px}.layered-world .mystery{left:67px;top:0;width:235px;height:235px}
 .layered-world .mascot{left:-7px;top:70px;width:145px;height:165px}.layered-world .surprise.revealed .mascot{left:-29px;top:98px;width:150px}
 .layered-world .draw{bottom:34px;font-size:20px;padding:14px 34px}.layered-world .reveal-card{left:24px;top:-11px;width:274px;min-height:300px;padding:15px}.layered-world .reveal-card .game-art{height:100px}
 .layered-world .cloud-back{left:-12%;top:20%;width:78%;height:150px;opacity:.75}.layered-world .cloud-middle{right:-15%;top:43%;width:78%;height:160px;opacity:.68}.layered-world .cloud-front{left:-10%;bottom:15%;height:150px;width:90%;opacity:.72}
 .layered-world.has-result .islands{opacity:.7;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.layered-world *,.layered-world *::before,.layered-world *::after{animation:none!important;transition:none!important}.layered-world .mascot{opacity:1;transform:rotate(-8deg)}.layered-world .mystery{transform:none}.layered-world .mystery::after{display:none}.layered-world .island-enter,.layered-world .question-enter{opacity:1;transform:none}}