/* v24 · Mundos: as listas de texto saem do espaço; embaixo fica uma fileira com os sete mundos (a Yggverse e os seis vórtices das fotos). Tocar num mundo leva até ele e abre o cartão desse mundo, com os lugares que existem nele. */
#constel{display:none!important}
.vlista{display:none!important}
/* fileira dos mundos */
#mundos{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:7;display:flex;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(6,8,20,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 40px rgba(232,180,74,.10),0 10px 40px rgba(0,0,0,.4);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
#mundos button{all:unset;box-sizing:border-box;cursor:pointer;width:62px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:18px;padding:4px 0 2px;-webkit-tap-highlight-color:transparent}
#mundos button i{display:block;width:38px;height:38px;border-radius:50%;background:var(--f) center/contain no-repeat;transition:scale .5s cubic-bezier(.2,.8,.2,1),filter .5s;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
#mundos button.esfera i{background-size:118%;box-shadow:0 0 16px rgba(246,217,138,.35)}
#mundos button:not(.esfera) i{animation:mgira 40s linear infinite}
#mundos button b{font:400 7.5px "Michroma","Jost",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,246,220,.6);white-space:nowrap;transition:color .4s}
#mundos button:hover i,#mundos button:focus-visible i,#mundos button.on i{scale:1.16;filter:brightness(1.2) drop-shadow(0 0 12px var(--g))}
#mundos button:hover b,#mundos button:focus-visible b,#mundos button.on b{color:#fff6dc}
#mundos button:focus-visible{box-shadow:0 0 0 2px rgba(246,217,138,.5)}
@keyframes mgira{to{transform:rotate(-360deg)}}
#mundos button.on i,#mundos button:hover i{animation-play-state:paused}
/* entra devagar depois do emblema */
#mundos button{opacity:0;transform:translateY(10px);animation:msobe .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--n) * 70ms + .3s)}
body.entrando #mundos button{animation-delay:calc(var(--n) * 90ms + 2.9s)}
@keyframes msobe{to{opacity:1;transform:none}}
body.vortex #mundos,body.warp #mundos,body.closing #mundos,body.ceu-on #mundos,body.jw-on #mundos,body.acting #mundos{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px)}
/* cartão do mundo */
#mundo{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);z-index:7;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:16px 16px 12px;border-radius:22px;background:rgba(8,10,26,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 0 60px var(--g,rgba(232,180,74,.2)),0 20px 60px rgba(0,0,0,.5);color:#ece5d8;
 opacity:0;pointer-events:none;transform:translateX(-50%) translateY(16px) scale(.97);transform-origin:50% 100%;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
body.mundo-on #mundo{opacity:1;pointer-events:auto;transform:translateX(-50%)}
body.vortex #mundo,body.warp #mundo,body.ceu-on #mundo,body.jw-on #mundo{opacity:0!important;pointer-events:none!important}
#mundo header{display:flex;align-items:center;gap:14px;margin-bottom:10px}
#mundo header i{flex:none;width:58px;height:58px;border-radius:50%;background:var(--f) center/contain no-repeat;animation:mgira 50s linear infinite;filter:drop-shadow(0 0 14px var(--g))}
#mundo header i.esfera{background-size:118%;animation:none;box-shadow:0 0 22px rgba(246,217,138,.4)}
#mundo h4{margin:0;font:400 12px "Michroma","Jost",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f6d98a}
#mundo header small{display:block;margin-top:6px;font:400 9.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,229,216,.5)}
#mundo .mfecha{all:unset;cursor:pointer;margin-left:auto;align-self:flex-start;width:44px;height:28px;display:grid;place-items:center;border-radius:999px}
#mundo .mfecha::before{content:"";width:22px;height:5px;border-radius:999px;background:#000;box-shadow:0 0 12px rgba(232,180,74,.45),inset 0 1px 2px rgba(0,0,0,.9)}
#mundo .mfecha:hover::before,#mundo .mfecha:focus-visible::before{box-shadow:0 0 20px rgba(246,217,138,.8)}
#mundo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(46vh,340px);overflow:auto;scrollbar-width:none}
#mundo ul::-webkit-scrollbar{display:none}
#mundo li a,#mundo li span{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:14px;text-decoration:none;color:#ece5d8;font:400 14px "Jost",sans-serif;transition:background .3s,box-shadow .3s}
#mundo li a::before,#mundo li span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#f6d98a;box-shadow:0 0 10px rgba(246,217,138,.9);transform:translateY(-1px)}
#mundo li a em,#mundo li span em{margin-left:auto;font:400 10px "IBM Plex Mono",monospace;font-style:normal;color:rgba(236,229,216,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
#mundo li a:hover,#mundo li a:focus-visible{background:rgba(246,217,138,.08);box-shadow:0 0 24px rgba(232,180,74,.18);outline:none}
#mundo li span{color:rgba(236,229,216,.5)}
#mundo li span::before{background:rgba(246,217,138,.3);box-shadow:none}
/* rótulo dos vórtices pequenos some (sem texto embolado em volta da esfera) */
.vtx.mini b{opacity:0}
.vtx b{transition:opacity .4s}
/* o "toque para inverter" fica legível embaixo da esfera */
#ygg small{color:rgba(246,217,138,.8)!important;text-shadow:0 0 8px #000,0 0 16px #000!important}
/* dica de voo: acima da fileira, e some sozinha */
#voo{bottom:calc(env(safe-area-inset-bottom,0px) + 100px)!important;transition:opacity .8s}
body.voo-some #voo,body.mundo-on #voo{opacity:0!important;pointer-events:none}
body:not(.vortex):not(.warp):not(.closing) .cr-info{top:calc(env(safe-area-inset-top,0px) + 22px);bottom:auto}
@media (max-width:599px){
 #mundos{gap:0;padding:6px 4px;width:calc(100vw - 16px);box-sizing:border-box;justify-content:space-between;border-radius:26px}
 #mundos button{width:calc((100vw - 24px) / 7)}
 #mundos button i{width:34px;height:34px}
 #mundos button b{font-size:6.5px;letter-spacing:.08em}
 #mundo{bottom:calc(env(safe-area-inset-bottom,0px) + 92px)}
 body:not(.vortex) .cr-info{opacity:0;pointer-events:none}
 body:not(.vortex):not(.warp) .ceubt{left:16px;top:calc(env(safe-area-inset-top,0px) + 16px);bottom:auto}
 body.mundo-on #avancar,body.mundo-on #ldBt,body.mundo-on .lado{opacity:0!important;pointer-events:none!important}
}
@media (prefers-reduced-motion:reduce){#mundos button i,#mundo header i{animation:none}#mundos button{animation:none;opacity:1;transform:none}}