#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.camada { position: fixed; inset: 0; }
.tela-clara { background: url("../assets/fundos/lobby/longe.png") center / cover; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: 2.2vh; padding: 2vh 4vw; }
kbd { font: 700 .9em Fredoka, sans-serif; background: var(--marinho); color: #fff; border-radius: .5vh; padding: 0 .6vh; }

/* ---------- menu (início, equipe, fase, oficina) ---------- */
.menu { justify-content: flex-start; padding: 12vh 6vw 3vh; gap: 2.4vh; }
.menu > * { animation: aparece .35s ease-out both; }
.menu > *:nth-child(2) { animation-delay: .05s; } .menu > *:nth-child(3) { animation-delay: .1s; } .menu > *:nth-child(4) { animation-delay: .15s; }
@keyframes aparece { from { opacity: 0; transform: translateY(1.2vh); } }
.menu .dica { font-size: 1.8vh; opacity: .65; }
.slogan { margin: 0; font: 600 2.6vh Nunito, sans-serif; color: var(--azul); font-style: italic; }

/* barra de passos */
.passos { position: fixed; top: 3vh; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: .6vw; margin: 0; padding: .6vh;
          list-style: none; background: #fff; border-radius: 999px; box-shadow: var(--sombra); }
.passos li { display: flex; align-items: center; gap: .7vh; padding: .7vh 1.8vh .7vh .7vh; border-radius: 999px;
             font: 600 2vh Fredoka, sans-serif; color: #1E2A4A80; transition: background .25s, color .25s; }
.passos li span { width: 3.4vh; height: 3.4vh; border-radius: 50%; display: grid; place-items: center; font-size: 1.8vh;
                  background: #1E2A4A12; color: #1E2A4A99; }
.passos li.feito { color: var(--marinho); }
.passos li.feito span { background: var(--verde); color: #fff; font-size: 0; }
.passos li.feito span::after { content: '✓'; font-size: 1.9vh; }
.passos li.atual { background: var(--azul); color: #fff; }
.passos li.atual span { background: #fff; color: var(--azul); }

/* cabeçalho e rodapé de cada passo */
.cab-passo { text-align: center; }
.cab-passo h2 { font-size: 5vh; display: flex; align-items: center; justify-content: center; gap: 1.2vh; }
.cab-passo h2 img { height: 7vh; }
.cab-passo p { margin: .6vh 0 0; font-size: 2.1vh; opacity: .75; display: flex; align-items: center; justify-content: center; gap: 1vh; }
.cab-passo .pilula img { height: 2.4vh; }
.rodape { margin-top: auto; width: min(100%, 150vh); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw; }
.rodape > :first-child { justify-self: start; }
.rodape > :last-child { justify-self: end; }
.rodape .btn.grande::after { content: ' →'; }
.rodape .btn:disabled { filter: grayscale(1); opacity: .45; cursor: not-allowed; transform: none; }
.status { font: 600 2.1vh Fredoka, sans-serif; text-align: center; opacity: .8; }

/* início */
#inicio { justify-content: center; gap: 2.6vh; padding-top: 4vh; }
.logo-grande { height: 34vh; filter: drop-shadow(0 1.2vh 2vh #1E2A4A26); animation: flutua 4s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-1vh) rotate(-1deg); } }
.turma { display: flex; align-items: flex-end; height: 22vh; }
.turma img { height: 100%; margin: 0 -1vh; animation: pulinho 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes pulinho { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-1.6vh); } }
#inicio .btn.grande { font-size: 4vh; padding: 1.6vh 8vh; }

/* passo 1: times */
.corpo-times { display: flex; gap: 2.4vw; align-items: stretch; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vh; }
.card { all: unset; position: relative; width: 22vh; background: #fff; border-radius: 2.4vh; overflow: hidden; cursor: pointer;
        box-shadow: var(--sombra); outline: .5vh solid transparent; outline-offset: -.5vh; transition: transform .15s, outline-color .15s; }
.card:hover { transform: translateY(-.5vh); }
.card .faixa { background: var(--cor); color: #fff; font: 700 2vh Fredoka, sans-serif; padding: .8vh 0; text-align: center; letter-spacing: .04em; }
.card .arte { height: 17vh; display: grid; place-items: center; padding: 1vh;
              background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cor) 18%, #fff), #fff 70%); }
.card .arte img { width: 100%; height: 15vh; object-fit: contain; transition: filter .2s, opacity .2s; }
.card .dono { font: 500 1.8vh Fredoka, sans-serif; text-align: center; padding: .6vh .6vh 1.2vh; min-height: 3.8vh; }
.card .dono b { font-weight: 700; color: var(--cor); }
.card.livre .arte img { filter: grayscale(.7); opacity: .5; }
.card.livre .dono span { opacity: .5; }
.card.livre:hover .arte img { filter: none; opacity: .9; }
.card:not(.livre) { outline-color: var(--cor); }
.card.meu::after { content: 'Você'; position: absolute; top: 4.6vh; right: 1vh; background: var(--marinho); color: #fff;
                   font: 700 1.5vh Fredoka, sans-serif; padding: .2vh 1vh; border-radius: 999px; }
.como-entrar { display: flex; flex-direction: column; gap: 2vh; width: 36vh; }
.modo { padding: 2vh; display: flex; flex-direction: column; align-items: center; gap: 1vh; text-align: center; }
.modo-tit { font: 700 2.3vh Fredoka, sans-serif; display: flex; align-items: center; gap: 1vh; }
.modo-tit img { height: 3.6vh; }
.modo p { margin: 0; font-size: 1.9vh; line-height: 1.7; }
.modo .qr { height: 17vh; border-radius: 1vh; }
.codigo-sala { font: 600 2vh Fredoka, sans-serif; }
.codigo-sala b { font-size: 3.2vh; letter-spacing: .25em; color: var(--rosa); margin-left: .6vh; }
.url { font: 500 1.4vh Nunito, sans-serif; opacity: .55; word-break: break-all; }

/* passo 2: trilha de fases */
/* escolha de mundo: um por vez, com setas dos lados, cartão do nome e bolinhas */
.planetas { position: relative; width: min(100%, 150vh); height: 31vh; flex-shrink: 0; margin: -1.5vh 0 -.5vh; --cor: var(--azul); }
.planetas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.seta-mundo { all: unset; position: absolute; top: 42%; transform: translateY(-50%); display: flex; align-items: center; gap: 1vh; cursor: pointer;
              font: 700 1.9vh Fredoka, sans-serif; color: var(--marinho); line-height: 1.1; z-index: 2; }
.seta-mundo.esq { left: 4%; } .seta-mundo.dir { right: 4%; text-align: right; }
.seta-mundo svg { width: 9vh; height: 9vh; padding: 1.8vh; border-radius: 50%; background: var(--cor); stroke: #fff; stroke-width: 3.4; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; border: .45vh solid var(--marinho); box-shadow: 0 .6vh 0 var(--marinho);
                  transition: background .4s, transform .15s; }
.seta-mundo.esq svg { animation: chama-esq 1.6s ease-in-out infinite; }
.seta-mundo.dir svg { animation: chama-dir 1.6s ease-in-out infinite; }
.seta-mundo:hover svg { transform: scale(1.1); }
.seta-mundo:active svg { transform: scale(.92); box-shadow: 0 .1vh 0 var(--marinho); }
@keyframes chama-esq { 0%, 60%, 100% { translate: 0; } 75% { translate: -1.4vh; } 88% { translate: .3vh; } }
@keyframes chama-dir { 0%, 60%, 100% { translate: 0; } 75% { translate: 1.4vh; } 88% { translate: -.3vh; } }
.cartao-mundo { position: absolute; left: 50%; bottom: .6vh; translate: -50% 0; display: flex; align-items: center; gap: 1.2vh; z-index: 2;
                background: #fff; border: .4vh solid var(--cor); border-radius: 999px; padding: .5vh 2.4vh .5vh .6vh; white-space: nowrap;
                box-shadow: 0 .8vh 2vh #1E2A4A26; }
.cartao-mundo img { height: 6vh; }
.cartao-mundo div { display: flex; flex-direction: column; line-height: 1.15; }
.cartao-mundo b { font: 700 1.4vh Fredoka, sans-serif; color: var(--cor); text-transform: uppercase; letter-spacing: .06em; }
.cartao-mundo strong { font: 700 2.6vh Fredoka, sans-serif; }
.cartao-mundo i { font: 600 1.5vh Nunito, sans-serif; font-style: normal; opacity: .65; }
.cartao-mundo.trancado { border-color: #9aa3b5; } .cartao-mundo.trancado img { filter: grayscale(1); opacity: .6; }
.cartao-mundo.entra { animation: cartao-entra .7s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
@keyframes cartao-entra { from { opacity: 0; transform: translateX(var(--de, 0)) scale(.6) rotate(calc(var(--de, 0) / 10vh * 3deg)); } }
.pontos-mundo { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; gap: .9vh; z-index: 2; }
.pontos-mundo i { width: 1.4vh; height: 1.4vh; border-radius: 999px; background: color-mix(in srgb, var(--c) 35%, #fff); border: .25vh solid #1E2A4A33;
                  transition: width .35s, background .35s; }
.pontos-mundo i.sel { width: 4.4vh; background: var(--c); border-color: var(--marinho); }
.pontos-mundo i.trancado { background: #d5d9e1; }
.trilha { position: relative; width: min(100%, 140vh); height: 21vh; flex-shrink: 0; }
.parada.tres-d .bola { width: 9.5vh; height: 9.5vh; border-radius: 2.2vh; transform: rotate(45deg); font: 700 3vh Fredoka, sans-serif; }
.parada.tres-d .bola > * { transform: rotate(-45deg); }
.parada.tres-d:not(.trancada):not(.feita) .bola { background: var(--cor); color: #fff; border-color: var(--marinho); }
.parada.tres-d.sel .bola { transform: rotate(45deg) scale(1.2); }
.trilha > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trilha path { fill: none; stroke: #C9A66B; stroke-width: 6; stroke-dasharray: 2 16; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.parada { all: unset; position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .8vh;
          cursor: pointer; width: 18vh; text-align: center; }
.parada .bola { width: 8vh; height: 8vh; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--azul);
                font: 700 3.6vh Fredoka, sans-serif; border: .5vh solid var(--azul); box-shadow: 0 .6vh 0 #1E2A4A22; transition: transform .2s; }
.parada .bola svg { width: 3.4vh; height: 3.4vh; }
.parada .nome { font: 600 1.8vh Fredoka, sans-serif; background: #fffd; padding: .2vh 1vh; border-radius: 999px; }
.parada:hover .bola { transform: scale(1.08); }
.parada.feita .bola { background: var(--verde); border-color: var(--verde); color: #fff; }
.parada.sel .bola { background: var(--azul); color: #fff; transform: scale(1.3); box-shadow: 0 0 0 1.2vh #3E93D033, 0 .6vh 0 #1E2A4A22; }
.parada.sel .nome { color: var(--azul); font-weight: 700; }
.parada.trancada { cursor: not-allowed; }
.parada.trancada .bola { color: #1E2A4A55; border-color: #1E2A4A22; background: #f3efe6; }
.parada.trancada .nome { opacity: .5; }
.detalhe { display: grid; grid-template-columns: auto 1fr auto; gap: 2.4vw; align-items: center; padding: 2vh 3vh; width: min(100%, 110vh); }
.detalhe .num { font: 700 4.4vh Fredoka, sans-serif; color: #fff; background: var(--azul); border-radius: 1.6vh; padding: .6vh 1.8vh; }
.detalhe h3 { font-size: 3vh; }
.detalhe p { margin: .4vh 0 0; font-size: 2vh; opacity: .8; }
.detalhe .vidas { text-align: center; font: 600 1.7vh Fredoka, sans-serif; opacity: .85; }
.detalhe .cors { display: flex; gap: .3vh; justify-content: center; margin-bottom: .4vh; }
.detalhe .cors img { height: 3vh; }

/* passo 3: oficina */
.carteira { font-size: 3vh; padding: .5vh 2vh .5vh 1vh; }
.carteira img { height: 4.4vh; }
.itens { display: flex; gap: 2vw; }
.item { padding: 2.2vh 1.6vw; width: 32vh; display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.item .ic { height: 10vh; }
.item h3 { font-size: 2.8vh; }
.item .desc { font-size: 1.8vh; text-align: center; min-height: 4.6vh; opacity: .8; }
.item .preco { display: flex; align-items: center; gap: .4vw; font: 700 2.4vh Fredoka, sans-serif; }
.item .preco img { height: 3.2vh; }
.item .compradores { display: flex; gap: .8vw; flex-wrap: wrap; justify-content: center; margin-top: .6vh; }
.comprar { position: relative; width: 7vh; height: 7vh; border-radius: 50%; border: .5vh solid; cursor: pointer; padding: 0; background: #fff; transition: transform .1s; }
.comprar:not(:disabled):hover { transform: scale(1.08); }
.comprar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.comprar:disabled { cursor: not-allowed; filter: grayscale(.9); opacity: .4; }
.comprar.cheio:disabled { filter: none; opacity: 1; }
.comprar .qt { position: absolute; right: -.8vh; bottom: -.6vh; background: var(--verde); color: #fff; font: 700 1.5vh Fredoka, sans-serif;
               border: 2px solid #fff; border-radius: 999px; padding: 0 .7vh; }
.info-fase { padding: 1.2vh 2.4vh; font-size: 2vh; }
.info-fase b { color: var(--azul); }

/* ---------- HUD ---------- */
#hud { pointer-events: none; }
#hud .barra { position: absolute; top: 1.6vh; left: 50%; transform: translateX(-50%); display: flex; gap: .7vw; align-items: center; }
#hud .caixa { display: flex; align-items: center; gap: .5vw; background: #fffE; color: var(--marinho); border-radius: 999px;
              padding: .5vh 1.2vw; font: 700 2.3vh Fredoka, sans-serif; white-space: nowrap; box-shadow: var(--sombra); }
#hud .caixa img { height: 3vh; }
#hud .times { position: absolute; top: 1.6vh; left: 1vw; display: flex; flex-direction: column; gap: .8vh; }
.time { display: grid; grid-template-columns: auto 1fr; gap: .1vh .7vw; align-items: center; background: #fffE;
        border-radius: 1.6vh; padding: .6vh 1vw .6vh .6vh; min-width: 24vh; box-shadow: var(--sombra); border-left: .9vh solid; }
.time .ret { grid-row: span 3; height: 6vh; border-radius: 50%; border: 3px solid; }
.time .ret.inativo { filter: grayscale(.6); opacity: .6; }
.time .nome { font: 700 1.8vh Fredoka, sans-serif; line-height: 1.1; }
.time .nome small { font-weight: 500; color: var(--marinho); opacity: .75; }
.time .cors { display: flex; gap: .2vw; align-items: center; }
.time .cors img { height: 2.2vh; }
.time .extras { display: flex; gap: .5vw; align-items: center; font: 600 1.6vh Fredoka, sans-serif; min-height: 2.4vh; }
.time .extras img { height: 2.4vh; }
.time.morto { opacity: .5; }
.rotulo { position: absolute; transform: translate(-50%, -100%); font: 700 1.8vh Fredoka, sans-serif; color: #fff;
          padding: .2vh .9vh; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px #1E2A4A40; }
.balao { position: absolute; transform: translate(-50%, -100%); background: #fff; border-radius: 1.4vh; border: 3px solid;
         padding: .6vh 1.1vh; font: 700 1.9vh Fredoka, sans-serif; display: flex; gap: .6vh; align-items: center; white-space: nowrap;
         box-shadow: var(--sombra); animation: sobe 1.6s ease-out forwards; }
.balao img { height: 3.2vh; border-radius: 50%; }
@keyframes sobe { from { opacity: 0; margin-top: 1vh; } 15% { opacity: 1; margin-top: 0; } 80% { opacity: 1; } to { opacity: 0; margin-top: -2vh; } }

/* ---------- contagem e fim ---------- */
#contagem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; pointer-events: none; }
#contagem span { font: 700 22vh Fredoka, sans-serif; color: #fff; text-shadow: 0 .8vh 0 var(--marinho); animation: pulso 1s ease-out infinite; }
#contagem .dica-fase { padding: 1.4vh 2vw; font: 700 2.5vh Fredoka, sans-serif; max-width: 70vw; text-align: center; }
@keyframes pulso { from { transform: scale(1.3); opacity: 0; } 20% { opacity: 1; } to { transform: scale(.92); opacity: .9; } }

#fim { display: grid; place-items: center; background: #1E2A4A66; }
#fim .painel { padding: 3.4vh 4vw; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; min-width: 60vh;
               animation: entra .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes entra { from { transform: scale(.7); opacity: 0; } }
#fim .selo { height: 14vh; }
#fim h2 { font-size: 6vh; }
#fim .sub { font: 600 2.4vh Fredoka, sans-serif; color: var(--azul); margin-top: -1vh; }
#fim .placar { display: flex; gap: 1.4vw; font: 700 2.6vh Fredoka, sans-serif; flex-wrap: wrap; justify-content: center; }
#fim .placar span { display: flex; align-items: center; gap: .4vw; }
#fim .placar img { height: 3.6vh; }
#fim .derrotados { display: flex; gap: 1vw; }
#fim .derrotados img { height: 14vh; }
#fim .acoes { display: flex; gap: 1.2vw; }
#fim .dica { font-size: 1.8vh; opacity: .7; text-align: center; max-width: 70vh; }

#pausa { display: grid; place-items: center; background: #1E2A4A80; z-index: 6; }
#pausa .painel { padding: 3.4vh 4vw; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; min-width: 50vh;
                 animation: entra .3s cubic-bezier(.2, 1.5, .4, 1); }
#pausa h2 { font-size: 6vh; }
#pausa .sub { font: 600 2.2vh Fredoka, sans-serif; color: var(--azul); margin-top: -1vh; }
#pausa .opcoes { display: flex; flex-direction: column; gap: 1.4vh; width: 100%; }
#pausa .opcoes .btn { width: 100%; }
#pausa .dica { font-size: 1.8vh; opacity: .7; text-align: center; max-width: 60vh; }
#btnPausa { position: fixed; right: calc(2.4vw + 6vh); top: 1.6vh; width: 6vh; height: 6vh; border-radius: 50%; border: 0; background: #fffE;
            box-shadow: var(--sombra); cursor: pointer; padding: 1.3vh; z-index: 5; }
#btnPausa svg { width: 100%; height: 100%; display: block; fill: var(--marinho); }

#aviso { position: fixed; bottom: 2vh; left: 50%; transform: translateX(-50%); background: var(--rosa); color: #fff;
         font: 700 2.2vh Fredoka, sans-serif; padding: 1vh 2vw; border-radius: 999px; }
#som { position: fixed; right: 1.4vw; top: 1.6vh; width: 6vh; height: 6vh; border-radius: 50%; border: 0; background: #fffE;
       box-shadow: var(--sombra); cursor: pointer; padding: 1.2vh; z-index: 5; }
#som img { width: 100%; height: 100%; display: block; }

/* ---------- Mundo 2 (mapa 3D isométrico) ---------- */
#cenaIso { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #DCEFD0; }
#divisor { position: absolute; top: 0; bottom: 0; left: 50%; width: .6vh; margin-left: -.3vh; background: #fff; box-shadow: 0 0 1.2vh #1E2A4A40; }
.missoes { position: absolute; right: 1.4vw; top: 10vh; padding: 1.2vh 1.4vh; display: flex; flex-direction: column; gap: .7vh; min-width: 17vw; }
.missoes h4 { margin: 0 0 .3vh; font: 700 2vh Fredoka, sans-serif; display: flex; align-items: center; gap: .6vh; }
.missoes h4 img { height: 2.6vh; }
.missoes .m { display: flex; align-items: flex-start; gap: .9vh; font: 600 1.8vh Fredoka, sans-serif; max-width: 24vw; }
.missoes .m small { display: block; font: 600 1.5vh Nunito, sans-serif; opacity: .8; line-height: 1.25; margin-top: .2vh; }
.missoes .m b { width: 3vh; height: 3vh; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-size: 1.7vh; flex: none; }
.missoes .m.feita { opacity: .55; text-decoration: line-through; }
.missoes .m.feita b { background: var(--verde); }
.missoes .m.trancada b { background: #1E2A4A40; }
.bussola { position: absolute; left: 50%; bottom: 2.4vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2vh;
           background: #fff; border-radius: 999px; padding: .7vh 2.4vh .7vh .7vh; box-shadow: var(--sombra); max-width: 60vw; }
.bussola .seta { width: 5.4vh; height: 5.4vh; border-radius: 50%; background: var(--amarelo); display: grid; place-items: center; flex: none; font: 700 3vh Fredoka; }
.bussola .seta svg { width: 3.4vh; height: 3.4vh; transition: transform .15s; }
.bussola b { font: 700 2.2vh Fredoka, sans-serif; display: block; }
.bussola small { font: 600 1.7vh Nunito, sans-serif; }
.mundos { display: flex; gap: 1vw; justify-content: center; margin-top: 1vh; }
.mundos button { all: unset; cursor: pointer; display: flex; align-items: center; gap: .8vh; font: 700 2vh Fredoka, sans-serif; padding: .6vh 1.8vh .6vh .6vh;
                 border-radius: 999px; background: #fff; border: 3px solid transparent; box-shadow: var(--sombra); }
.mundos button img { height: 4vh; }
.mundos button.sel { border-color: var(--azul); }
.mundos button:disabled { opacity: .45; cursor: default; }
.aviso-missao { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); background: #fff; border: .5vh solid var(--verde);
                border-radius: 3vh; padding: 2vh 4vh; font: 700 4.4vh Fredoka, sans-serif; text-align: center; box-shadow: var(--sombra);
                animation: surge .5s cubic-bezier(.3,1.6,.5,1); }
.aviso-missao small { display: block; font: 600 2.2vh Nunito, sans-serif; }
@keyframes surge { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }

/* início: progresso salvo, novo jogo e modo livre (cheat) */
.opcoes-inicio { position: absolute; bottom: 2.4vh; left: 50%; transform: translateX(-50%); display: flex; gap: 1.4vw; align-items: center;
                 font: 600 1.8vh Fredoka, sans-serif; white-space: nowrap; }
.opcoes-inicio .link { all: unset; cursor: pointer; padding: .6vh 1.6vh; border-radius: 999px; background: #fff; box-shadow: var(--sombra);
                       border: 2px solid var(--linha); }
.opcoes-inicio .link:hover { border-color: var(--azul); }
.opcoes-inicio .link.ligado { background: var(--amarelo); border-color: var(--marinho); }
#progressoInfo { opacity: .7; }
.pilula.livre { background: var(--amarelo); border-color: var(--marinho); }

/* Mundo 2, mais limpo: missões como bolinhas na barra de cima e uma bússola só */
#hudFase .rot-missoes { font: 700 1.9vh Fredoka, sans-serif; margin-right: .4vw; }
#hudFase .mbola { display: inline-grid; place-items: center; width: 3.2vh; height: 3.2vh; border-radius: 50%; margin: 0 .15vw;
                  background: var(--azul); color: #fff; font: 700 1.7vh Fredoka, sans-serif; vertical-align: middle; }
#hudFase .mbola.feita { background: var(--verde); }
#hudFase .mbola.trancada { background: #1E2A4A33; }
#bussolaPc .bussola { border: .4vh solid; width: max-content; max-width: 52vw; }
#bussolaPc .bussola b i { font: 600 1.6vh Nunito, sans-serif; opacity: .65; margin-left: .4vw; }

/* escolha de fase mais compacta (mundos + trilha de 11 paradas) */
#fase { gap: 1.2vh; padding-top: 10vh; }
.parada .bola b { font: inherit; display: grid; place-items: center; }
#fase .parada .nome { font-size: 1.5vh; max-width: 18vh; text-align: center; white-space: normal; line-height: 1.2; }
#fase .parada .bola { width: 6.6vh; height: 6.6vh; font-size: 3vh; }
#fase .parada.tres-d .bola { width: 7.6vh; height: 7.6vh; }
.detalhe h3 .pilula { font-size: 1.6vh; vertical-align: middle; padding: .1em .7em; }