.cube-scene{--scene-tone:#eab555;perspective:900px}
.portal-world{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transform:scale(.55);transition:opacity .6s,transform 1s cubic-bezier(.2,.7,.2,1)}
.arranged .portal-world{opacity:1;transform:scale(1)}
.portal-art{position:absolute;right:-12%;top:9%;width:108%;height:80%;object-fit:contain;filter:drop-shadow(0 14px 20px #cc95362b)}
.portal-glow{position:absolute;width:76%;height:62%;left:18%;top:16%;border-radius:24%;transform:rotate(-15deg);background:radial-gradient(ellipse,#fffce9 8%,color-mix(in srgb,var(--scene-tone) 33%,transparent) 45%,transparent 72%);box-shadow:0 0 70px color-mix(in srgb,var(--scene-tone) 20%,transparent)}
.portal-ribbon{position:absolute;inset:26% 1% 20% 8%;border:2px solid #fff2c5;border-left-color:transparent;border-radius:48%;transform:rotate(-28deg);box-shadow:0 4px 4px #ffc24477,0 0 18px #ffce6b88}
.portal-ribbon.second{inset:21% 0 29% 2%;transform:rotate(34deg);opacity:.65}
.portal-star{position:absolute;width:6px;height:6px;background:#fff8d2;box-shadow:0 0 13px 4px #ffc650bb;transform:rotate(45deg);left:var(--sx);top:var(--sy)}
.space-cube{position:absolute;left:var(--cx);top:var(--cy);width:var(--size);height:var(--size);transform:rotate(var(--rot));border-radius:18%;background:linear-gradient(135deg,#ffffff77,var(--shade) 35%,color-mix(in srgb,var(--shade) 65%,#152c36));box-shadow:inset 2px 2px 4px #ffffff88,inset -4px -5px 7px #142b4033,0 12px 15px #4c35231a;opacity:.85}
.space-cube:after{content:'';position:absolute;inset:4px -8px 2px 78%;transform:skewY(-32deg);transform-origin:left;background:color-mix(in srgb,var(--shade) 60%,#172c36);border-radius:2px 9px 8px 2px;opacity:.65}
.cube-scene .cube{position:relative;z-index:3}
.tile-depth{opacity:0;transition:opacity .3s;pointer-events:none}
.arranged .tile-depth{opacity:1}
.arranged .tile{transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.63);opacity:.8;filter:drop-shadow(0 8px 5px #15395830)}
.arranged .tile.selected{transform:translate(var(--dx),var(--dy)) rotate(-5deg) scale(1.45);filter:drop-shadow(0 14px 9px #56351c55) drop-shadow(0 0 4px #fff1ab)}
@keyframes cube-scatter{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}50%{opacity:.9}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.63);opacity:.8}}
@keyframes cube-forward{0%{transform:translate(0,0) rotate(0) scale(1)}65%{transform:translate(var(--dx),var(--dy)) rotate(-7deg) scale(1.6)}100%{transform:translate(var(--dx),var(--dy)) rotate(-5deg) scale(1.45)}}
.world-hero{grid-template-columns:.85fr 1.15fr!important;gap:35px;position:relative;isolation:isolate}
.world-hero:before{content:'';position:absolute;inset:-25px -30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 78% 50%,#f9d49044,transparent 62%)}
.world-hero .cube-scene{max-width:570px}
.world-hero .cube{width:360px;max-width:72%;margin:auto}
.world-hero .scene-note{display:block;top:-38px;right:24%;font-size:25px;max-width:245px;transform:rotate(-6deg);z-index:5}
.world-hero .cube-help{max-width:380px;font-size:12px;margin-top:25px}
.world-hero .decor{display:none}
.arranged.opening .portal-world{transition-delay:.18s}
@media(max-width:1000px) and (min-width:701px){.world-hero{gap:15px}.world-hero .scene-note{font-size:21px}.world-hero .cube{max-width:80%}}
@media(max-width:700px){.world-hero{grid-template-columns:1fr!important;gap:44px}.world-hero .cube-scene{max-width:350px}.world-hero .cube{width:260px;max-width:76%}.world-hero .scene-note{font-size:22px;top:-20px;right:6%}.portal-art{right:-5%;width:103%}.space-cube{width:calc(var(--size)*.7);height:calc(var(--size)*.7)}.arranged .tile.selected{transform:translate(var(--dx),var(--dy)) rotate(-5deg) scale(1.45)}}
@media(prefers-reduced-motion:reduce){.portal-world,.tile-depth{transition:none}}