/*--------------------------------------------------------------
# minigames/blocos/blocos.css
--------------------------------------------------------------*/
#app{background:radial-gradient(ellipse 90% 70% at 50% 0%,#241050,#07040f 70%)}
#fundoLobby{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(8px) brightness(.45) saturate(1.1);pointer-events:none}
#telaLobby > :not(canvas){position:relative}
.topo{justify-content:space-between}
.lb-voltar{display:grid;place-items:center;width:2.5rem;height:2.5rem;color:var(--cinza);font-size:1.2rem;border:1px solid var(--borda2);background:var(--vidro)}
.ic-est{font-size:1.05rem;color:#ffd66b;line-height:1}
.bl-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;padding:1rem}
.bl-centro .marca{margin:0}
.bl-bts{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.bl-bts .modo{height:8rem}
.bl-bts .modo.principal{width:17rem}
.bl-ajuda{max-width:34rem;text-align:center;font:400 .8rem/1.6 var(--ui);color:var(--cinza)}
.bl-ajuda b{color:#fff;font-weight:500}

.mundos{flex:1;overflow-y:auto;padding:1.2rem 1.4rem 2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem;align-content:start;touch-action:pan-y}
.mundo{padding:1rem;background:var(--vidro);border:1px solid var(--borda);border-top:3px solid var(--m)}
.mundo-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.8rem}
.mundo-cab b{font:600 1.15rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--m)}
.mundo-cab small{font:400 .66rem var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.mundo-niveis{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.nivel{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  background:rgba(0,0,0,.3);border:1px solid var(--borda2);transition:border-color .2s,transform .2s}
.nivel:hover:not(.preso){border-color:var(--m);transform:translateY(-2px)}
.nivel b{font:700 1.2rem var(--num);color:#fff}
.nivel .est{display:flex;gap:1px;font-size:.62rem}
.nivel .est i{font-style:normal;color:rgba(255,255,255,.18)}
.nivel .est i.on{color:#ffd66b}
.nivel small{position:absolute;bottom:.15rem;font:500 .5rem var(--num);color:var(--mut)}
.nivel.preso{opacity:.4;cursor:default}
.nivel.preso b{font-size:.9rem}
.nivel.atual{border-color:var(--m);box-shadow:0 0 0 1px var(--m),0 0 1rem color-mix(in srgb,var(--m) 40%,transparent)}

#telaJogo{background:#05030b}
#cv{position:absolute;inset:0;display:block;touch-action:none;cursor:none}
.bl-pausa{position:absolute;z-index:5;right:max(.7rem,env(safe-area-inset-right));top:max(.7rem,env(safe-area-inset-top));width:2.6rem;height:2.6rem;
  display:grid;place-items:center;font-size:1.1rem;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18)}
.bl-pausa-cx{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:rgba(4,3,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bl-pausa-cx h3{font:600 2rem var(--ui);letter-spacing:.3em;text-transform:uppercase;margin-bottom:.8rem}
.bl-pausa-cx .btn{min-width:15rem}

.estrelas{display:flex;gap:.6rem;font-size:3rem;line-height:1}
.estrelas i{font-style:normal;color:rgba(255,255,255,.14);transform:scale(.4);animation:estrela .45s var(--ease) forwards}
.estrelas i.on{color:#ffd66b;text-shadow:0 0 1.2rem rgba(255,214,107,.7)}
@keyframes estrela{to{transform:scale(1)}}
.fim-pontos{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.fim-pontos b{font:700 2.2rem var(--num)}
.fim-pontos small{font:400 .72rem var(--ui);color:var(--mut)}
.recorde{color:#ffd66b!important;font-weight:500}
.dlg-cx.fim .fim-bts{flex-wrap:wrap;justify-content:center}

@media (max-width:700px){
  .bl-bts .modo,.bl-bts .modo.principal{width:min(17rem,80vw);height:6.8rem}
  .marca.grande b{font-size:3rem}
  .bl-ajuda{display:none}
}