/* Opening worlds: one little planet per game, the same frame as the homepage.
   Each game sets its own colours with --w-* and draws its own scene. */
.w-world{position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--w-bg,#9fd6f7);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .7s cubic-bezier(.6,0,.2,1),opacity .7s}
.w-world.w-out{transform:translateY(-100%);opacity:.6;pointer-events:none}
.w-world.drag{cursor:grabbing}
.w-world svg.w-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.w-world .w-title{position:absolute;left:20px;top:calc(18px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:3px;pointer-events:none;color:var(--w-ink,#1c2024)}
.w-world .w-title b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em}
.w-world .w-title span{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;opacity:.85}
.w-world .w-title i{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:italic;opacity:.6;max-width:32ch;line-height:1.35;margin-top:2px}
.w-world .w-back{position:absolute;right:20px;top:calc(18px + env(safe-area-inset-top,0px));font:700 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.04em;color:var(--w-ink,#1c2024);text-decoration:none;padding:8px 10px;background:rgba(255,255,255,.55)}
.w-world .w-go{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));margin-left:-28px;width:56px;height:56px;border-radius:50%;border:0;background:var(--w-go,#f0c93a);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);animation:w-nudge 2.4s ease-in-out infinite}
.w-world .w-go svg{display:block}
.w-world .w-go span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font:700 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--w-ink,#1c2024);white-space:nowrap}
@media (min-width:700px){.w-world .w-go{left:auto;margin-left:0;right:40px;bottom:48px}.w-world .w-title{left:40px;top:36px}.w-world .w-title b{font-size:44px}.w-world .w-back{right:40px;top:36px}}
@keyframes w-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* motion kit, driven by custom properties set on each element */
@keyframes w-spin{to{transform:rotate(360deg)}}
@keyframes w-spinr{to{transform:rotate(-360deg)}}
@keyframes w-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--a,-4px))}}
@keyframes w-sway{0%,100%{transform:rotate(calc(-1 * var(--deg,8deg)))}50%{transform:rotate(var(--deg,8deg))}}
@keyframes w-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.6)}}
@keyframes w-drift{to{transform:translateX(var(--dx,60px))}}
@keyframes w-tw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes w-blink{0%,49%{opacity:1}50%,100%{opacity:.1}}
@keyframes w-fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--fx,10px),var(--fy,60px)) rotate(var(--fr,180deg));opacity:0}}
@keyframes w-rise{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(var(--fx,4px),var(--fy,-24px));opacity:0}}
@keyframes w-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--a,-10px))}}
@keyframes w-arc{0%,6%{transform:rotate(0)}46%,54%{transform:rotate(var(--deg,25deg))}94%,100%{transform:rotate(0)}}
@keyframes w-face{0%,49.9%{transform:scaleX(var(--f1,1))}50%,100%{transform:scaleX(var(--f2,-1))}}
@keyframes w-draw{0%,6%{stroke-dashoffset:var(--L);opacity:1}40%,86%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:var(--L);opacity:0}}
@keyframes w-wipe{0%,8%{transform:scaleY(0);opacity:1}55%,88%{transform:scaleY(1);opacity:1}96%{transform:scaleY(1);opacity:0}100%{transform:scaleY(0);opacity:0}}
@keyframes w-pulse{0%,100%{transform:scale(1)}50%{transform:scale(var(--s,1.15))}}
@keyframes w-show{0%,10%{opacity:0}20%,80%{opacity:1}90%,100%{opacity:0}}
@keyframes w-punch{0%,60%,100%{transform:rotate(0)}70%,80%{transform:rotate(var(--deg,-70deg))}}
@keyframes w-pop{0%,60%{transform:scale(0);opacity:0}66%{transform:scale(1.25);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes w-path{to{offset-distance:100%}}
@keyframes w-slide{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx,20px),var(--dy,0px))}}
.w-world .spin{animation:w-spin var(--t,160s) linear infinite;transform-box:view-box;transform-origin:0 0}
.w-world .orb{animation:w-spin var(--t,34s) linear infinite;transform-box:view-box;transform-origin:640px 400px}
.w-world .orbr{animation:w-spinr var(--t,34s) linear infinite;transform-box:view-box;transform-origin:640px 400px}
.w-world .lap{animation:w-spin var(--t,40s) linear infinite;transform-box:view-box;transform-origin:0 0}
.w-world .lapr{animation:w-spinr var(--t,40s) linear infinite;transform-box:view-box;transform-origin:0 0}
.w-world .rot{animation:w-spin var(--t,1s) linear infinite;transform-box:fill-box;transform-origin:center}
.w-world .rotv{animation:w-spin var(--t,30s) linear infinite;transform-box:view-box}
.w-world .bob{animation:w-bob var(--t,1.4s) ease-in-out infinite}
.w-world .sway{animation:w-sway var(--t,2s) ease-in-out infinite;transform-box:view-box}
.w-world .swayf{animation:w-sway var(--t,3s) ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.w-world .flap{animation:w-flap var(--t,.5s) ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.w-world .drift{animation:w-drift var(--t,40s) ease-in-out infinite alternate}
.w-world .tw{animation:w-tw var(--t,3s) ease-in-out infinite}
.w-world .blink{animation:w-blink var(--t,1s) steps(1) infinite}
.w-world .fall{animation:w-fall var(--t,4s) linear infinite}
.w-world .rise{animation:w-rise var(--t,2.4s) ease-out infinite}
.w-world .hop{animation:w-hop var(--t,.8s) ease-in-out infinite}
.w-world .arc{animation:w-arc var(--t,16s) ease-in-out infinite;transform-box:view-box;transform-origin:0 0}
.w-world .face{animation:w-face var(--t,16s) steps(1) infinite;transform-box:view-box;transform-origin:0 0}
.w-world .draw{stroke-dasharray:var(--L);animation:w-draw var(--t,12s) ease-in-out infinite}
.w-world .wipe{animation:w-wipe var(--t,12s) ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.w-world .pulse{animation:w-pulse var(--t,1.6s) ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.w-world .pop{animation:w-pop var(--t,3s) ease-out infinite;transform-box:fill-box;transform-origin:center}
.w-world .path{animation:w-path var(--t,24s) linear infinite;offset-rotate:0deg}
.w-world .show{animation:w-show var(--t,6s) ease-in-out infinite}
.w-world .punch{animation:w-punch var(--t,1.2s) ease-in-out infinite;transform-box:view-box}
.w-world .slide{animation:w-slide var(--t,4s) ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.w-world *{animation-play-state:paused!important}.w-world .w-go{animation:none}}
