/* Simuleitor: o jogo ocupa a tela. HUD fino em cima, barra de poderes embaixo, nada no meio. */
:root {
  --tinta: #141821; --noite: #0C0E15; --ouro: #FFD21F; --verde: #16A34A; --verde2: #4ADE80; --vermelho: #DC2626; --vermelho2: #F87171; --ceu: #5CB8E8;
  --pixel: "Eu Pixel", ui-monospace, monospace; --num: "Eu Numeros", "Eu Pixel", ui-monospace, monospace;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noite); color: #fff; font-family: var(--texto); user-select: none; -webkit-user-select: none; overscroll-behavior: none; touch-action: manipulation; font-variant-ligatures: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
img.ico, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#jogo { position: fixed; inset: 0; overflow: hidden; }
#palco { position: absolute; inset: 0; overflow: hidden; background: #c9dfae; }
#tela { display: block; touch-action: none; cursor: crosshair; outline: none; }
#tinta { position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background .6s; mix-blend-mode: multiply; }
#tinta.crise { background: rgba(200, 40, 40, .22); animation: crise 1.6s ease-in-out infinite; }
@keyframes crise { 50% { background: rgba(200, 40, 40, .32); } }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
#voadores, #baloes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- HUD ---------- */
#hud { position: absolute; top: 0; left: 0; right: 0; padding-top: var(--st); pointer-events: none; background: linear-gradient(rgba(20,24,33,.92), rgba(20,24,33,.78) 72%, rgba(20,24,33,0)); }
#hud > * { pointer-events: auto; }
.topo { display: flex; align-items: center; gap: 6px; height: 50px; padding: 4px 8px 0; }
.hb { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: #262B3B; border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; padding: 0; transition: transform .06s; }
.hb img { width: 32px; height: 32px; }
.hb.afunda, .hb:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
#b-vel { width: 52px; flex-basis: 52px; flex-direction: column; gap: 0; }
#b-vel img { width: 32px; height: 32px; margin-top: -4px; }
#b-vel small { font: 10px/1 var(--pixel); color: var(--ouro); margin-top: -5px; }
#titulo { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font: 18px/1 var(--pixel); white-space: nowrap; overflow: hidden; text-shadow: 0 2px 0 #000; }
#t-nome { color: var(--ouro); font-weight: 400; }
#t-ano { color: #fff; }
#t-ano.prazo { color: #FF8A7A; animation: pulsa .8s ease-in-out infinite; }
#contadores { display: flex; gap: 6px; padding: 6px 8px 10px; }
.cont { flex: 1; min-width: 0; overflow: hidden; color: #fff; text-align: left; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; background: rgba(20,24,33,.9); border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; padding: 3px 6px 3px 4px; }
.cont img { grid-row: 1 / 3; width: 32px; height: 32px; }
.cont b { font: 25px/1 var(--num); color: #fff; display: block; overflow: hidden; white-space: nowrap; text-overflow: clip; transition: color .3s; }
.cont small { font: 12px/1.15 var(--pixel); color: #E2E6EF; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.cont b.sobe { color: var(--verde2); animation: rola .35s ease-out; }
.cont b.desce { color: var(--vermelho2); animation: rolaB .35s ease-out; }
.cont.treme { animation: treme .3s; }
@keyframes rola { from { transform: translateY(60%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes rolaB { from { transform: translateY(-60%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes treme { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- base: missão e poderes ---------- */
#base { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: var(--sb); pointer-events: none; background: linear-gradient(rgba(20,24,33,0), rgba(20,24,33,.86) 44px, rgba(20,24,33,.97)); }
#base > * { pointer-events: auto; }
#missao { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px 8px; max-width: calc(100% - 16px); min-height: 40px; padding: 4px 14px 4px 6px; background: var(--ouro); color: var(--tinta); border: 2px solid #000; border-radius: 999px; box-shadow: 0 3px 0 #000; font: 13px/1.1 var(--pixel); text-align: left; transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .3s; }
#missao img { width: 32px; height: 32px; flex: 0 0 32px; }
#missao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#missao.oculto { transform: translateX(-120%); opacity: 0; pointer-events: none; }
#missao.some { opacity: 0; pointer-events: none; }
#missao.pulsa { animation: pulsa 1s ease-in-out 3; }
#missao:active { transform: translateY(3px); box-shadow: none; }
@keyframes pulsa { 50% { transform: scale(1.06); } }
#poderes { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; padding: 8px 10px 10px; scrollbar-width: none; scroll-behavior: smooth; }
#poderes::-webkit-scrollbar { display: none; }
/* folga no fim: o último poder (com o anel de selecionado) aparece inteiro; o padding do fim some na rolagem em alguns navegadores */
@media (max-width: 899px) { #poderes::after { content: ""; flex: 0 0 14px; } }
.pd { position: relative; flex: 0 0 70px; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: #fff; font: 11px/1 var(--pixel); text-shadow: 0 2px 0 #000; }
.pd .circ { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #262B3B); border: 3px solid #000; box-shadow: 0 4px 0 #000, inset 0 -5px 0 rgba(0,0,0,.28), inset 0 4px 0 rgba(255,255,255,.18); transition: transform .06s, box-shadow .06s; }
.pd .circ img { width: 48px; height: 48px; }
.pd .coroa { position: absolute; top: -9px; right: -9px; width: 32px; height: 32px; transform: scale(.75); filter: drop-shadow(0 2px 0 #000); }
.pd .pincel { position: absolute; top: -6px; left: -6px; font: 9px/1 var(--pixel); background: #fff; color: var(--tinta); border: 2px solid #000; border-radius: 6px; padding: 2px 3px; text-shadow: none; }
.pd.sel .circ { box-shadow: 0 4px 0 #000, 0 0 0 4px var(--ouro), 0 0 18px 6px rgba(255,210,31,.55), inset 0 -5px 0 rgba(0,0,0,.28), inset 0 4px 0 rgba(255,255,255,.18); animation: brilha 1.2s ease-in-out infinite; }
.pd.sel { color: var(--ouro); }
.pd.afunda .circ, .pd:active .circ { transform: translateY(4px); box-shadow: 0 0 0 #000, inset 0 -5px 0 rgba(0,0,0,.28); }
.pd.travado .circ img:first-child { filter: saturate(.7) brightness(.9); }
.pd.olhar { flex-basis: 58px; width: 58px; }
.pd.olhar .circ { width: 52px; height: 52px; margin-top: 6px; background: #2A3142; }
.pd.olhar .circ img { width: 32px; height: 32px; }
.pd.olhar.sel .circ { animation: none; box-shadow: 0 4px 0 #000, 0 0 0 3px #5CB8E8, inset 0 -5px 0 rgba(0,0,0,.28); }
.pd.olhar.sel { color: #fff; }
.pd.guia .circ { animation: guia .8s ease-in-out infinite; }
@keyframes brilha { 50% { transform: translateY(-3px); } }
@keyframes guia { 50% { transform: scale(1.1); } }

/* ---------- mão-guia ---------- */
#mao { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 30; pointer-events: none; }
#mao[hidden] { display: none; }
#mao .mao-img { position: absolute; width: 48px; height: 48px; transform: rotate(180deg); animation: bob .7s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)); }
#mao.cima .mao-img { transform: none; animation: bobC .7s ease-in-out infinite; }
#mao .mao-txt { position: absolute; font: 15px/1.1 var(--pixel); color: var(--tinta); background: #fff; border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; padding: 7px 10px; white-space: nowrap; }
@keyframes bob { 50% { transform: rotate(180deg) translateY(10px); } }
@keyframes bobC { 50% { transform: translateY(10px); } }

/* ---------- avisos, números, conquista ---------- */
#aviso { position: absolute; left: 50%; top: calc(178px + var(--st)); transform: translate(-50%, -50%); z-index: 20; pointer-events: none; font: clamp(22px, 7.6vw, 32px)/1.1 var(--pixel); color: #fff; text-align: center; width: max-content; max-width: calc(100vw - 24px); opacity: 0; text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0 6px 0 #000; }
#aviso.ve { animation: aviso var(--ms, 1.4s) ease-out forwards; }
#aviso.baixo { top: calc(272px + var(--st)); }
#aviso.ganho { color: var(--verde2); } #aviso.perda { color: var(--vermelho2); } #aviso.ouro { color: var(--ouro); }
@keyframes aviso { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64%) scale(1); } }
.voa { position: absolute; transform: translate(-50%, -50%); font: 17px/1 var(--num); color: #fff; white-space: nowrap; animation: voa 1.2s ease-out forwards; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; }
.voa.ganho { color: var(--verde2); } .voa.perda { color: var(--vermelho2); } .voa.ouro { color: var(--ouro); }
.voa.grande { font-size: 25px; animation-duration: 1.7s; z-index: 2; }
@keyframes voa { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -260%) scale(1); } }
#conquista { position: absolute; left: 50%; top: calc(124px + var(--st)); z-index: 25; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 10px 16px 10px 10px; background: var(--tinta); border: 3px solid var(--ouro); border-radius: 14px; box-shadow: 0 5px 0 #000, 0 0 30px rgba(255,210,31,.35); transform: translate(-50%, -30px) scale(.6); opacity: 0; pointer-events: none; }
#conquista.ve { animation: conq 2.6s cubic-bezier(.2,1.3,.4,1) forwards; }
#conquista img { width: 48px; height: 48px; flex: 0 0 48px; }
#conquista b { display: block; font: 20px/1.1 var(--pixel); color: var(--ouro); }
#conquista small { display: block; font: 13px/1.2 var(--pixel); color: #fff; margin-top: 3px; }
@keyframes conq { 0% { opacity: 0; transform: translate(-50%, -30px) scale(.6); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 22% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(.9); } }
.balao { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -100%); padding: 4px 8px; background: #fff; color: var(--tinta); border: 2px solid #000; border-radius: 8px; box-shadow: 0 2px 0 #000; font: 700 12px/1.15 var(--texto); white-space: nowrap; animation: balao .25s cubic-bezier(.2,1.5,.4,1); }
.balao::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -4px; border: 4px solid transparent; border-top-color: #000; }
@keyframes balao { from { transform: translate(-50%, -60%) scale(.3); } }

/* ---------- ficha do morador ---------- */
#ficha { position: absolute; left: 50%; bottom: calc(132px + var(--sb)); z-index: 22; width: min(360px, calc(100% - 16px)); transform: translateX(-50%); display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px 44px 10px 10px; background: #FFFDF5; color: var(--tinta); border: 3px solid #000; border-radius: 14px; box-shadow: 0 5px 0 #000; animation: sobe .22s cubic-bezier(.2,1.4,.4,1); }
#ficha[hidden] { display: none; }
#ficha canvas { width: 60px; height: 84px; background: #E7EEDB; border: 2px solid #000; border-radius: 8px; }
#ficha h3 { margin: 0; font: 18px/1.1 var(--pixel); }
#ficha .sub { font: 12px/1.2 var(--pixel); color: #5B6478; }
#ficha ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
#ficha li { display: flex; align-items: center; gap: 2px; font: 13px/1.2 var(--pixel); }
#ficha li img { width: 16px; height: 16px; margin-right: 2px; }
#ficha li.ganho { color: #15803D; } #ficha li.perda { color: #B91C1C; } #ficha li.ouro { color: #A16207; }
#ficha q { display: block; margin-top: 4px; font: italic 700 14px/1.2 var(--texto); }
#ficha .x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--tinta); border: 2px solid #000; border-radius: 8px; padding: 0; }
#ficha .x img { width: 32px; height: 32px; }
@keyframes sobe { from { transform: translate(-50%, 30px); opacity: 0; } }

/* ---------- folhas (missões, loja) ---------- */
#veu { position: absolute; inset: 0; z-index: 40; background: rgba(8,9,14,.55); }
#veu[hidden] { display: none; }
#folha { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 520px; margin: 0 auto; max-height: calc(100% - 12px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(16px + var(--sb)); background: var(--tinta); border: 3px solid #000; border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 0 rgba(0,0,0,.35); animation: folha .3s cubic-bezier(.2,1.2,.4,1); }
#folha[hidden] { display: none; }
@keyframes folha { from { transform: translateY(100%); } }
.alca { width: 44px; height: 5px; border-radius: 3px; background: #3A4056; margin: 0 auto 8px; }
.fx-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: #262B3B; border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; padding: 0; }
.fx-x img { width: 32px; height: 32px; }
.f-tit { font: 22px/1.1 var(--pixel); color: var(--ouro); margin: 2px 52px 10px 0; display: flex; align-items: center; gap: 8px; }
.f-tit img { width: 32px; height: 32px; }
.m-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-lista li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: #1F2432; border: 2px solid #000; border-radius: 10px; }
.m-lista li img { width: 32px; height: 32px; }
.m-lista li b { font: 14px/1.15 var(--pixel); }
.m-lista li .barra { grid-column: 2 / 3; height: 6px; background: #3A4056; border-radius: 3px; overflow: hidden; }
.m-lista li .barra i { display: block; height: 100%; background: var(--ouro); }
.m-lista li em { grid-row: 1 / 3; grid-column: 3; font: 14px/1 var(--num); font-style: normal; color: #C9CFDD; }
.m-lista li.feita { background: #1d3524; } .m-lista li.feita b { color: var(--verde2); }
.premio { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px dashed #3A4056; border-radius: 10px; font: 14px/1.2 var(--pixel); color: #C9CFDD; }
.premio img { width: 32px; height: 32px; }
.premio.ok { border-color: var(--verde); color: var(--verde2); }
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.recs div { background: #1F2432; border: 2px solid #000; border-radius: 10px; padding: 6px; text-align: center; }
.recs b { display: block; font: 20px/1 var(--num); color: #fff; }
.recs small { display: block; font: 10px/1.2 var(--pixel); color: #9AA3B8; margin-top: 3px; }
.f-sec { font: 12px/1 var(--pixel); color: #9AA3B8; margin: 12px 0 6px; }
.b-ouro, .b-cinza { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; margin-top: 10px; padding: 8px 14px; background: var(--ouro); color: var(--tinta); border: 3px solid #000; border-radius: 12px; box-shadow: 0 5px 0 #000; font: 20px/1.1 var(--pixel); }
.b-ouro:active, .b-cinza:active, .b-ouro.afunda, .b-cinza.afunda { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.b-cinza { background: #262B3B; color: #fff; font-size: 15px; min-height: 48px; box-shadow: 0 4px 0 #000; }
.b-linha { display: block; margin: 10px auto 0; min-height: 44px; padding: 8px 12px; background: none; border: 0; color: #9AA3B8; font: 12px/1.2 var(--pixel); text-decoration: underline; }

/* loja */
.loja-mundos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loja-mundos figure { margin: 0; background: #0C0E15; border: 3px solid #000; border-radius: 12px; overflow: hidden; position: relative; }
.loja-mundos canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.loja-mundos figcaption { position: absolute; left: 6px; bottom: 6px; font: 14px/1 var(--pixel); color: #fff; background: rgba(20,24,33,.85); border: 2px solid #000; border-radius: 6px; padding: 3px 6px; }
.loja-conta { display: flex; justify-content: center; gap: 8px; margin: 10px 0 2px; font: 16px/1.2 var(--pixel); color: #fff; }
.loja-conta b { color: var(--ouro); font-weight: 400; }
.loja-icos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 6px 0; }
.loja-icos img { width: 32px; height: 32px; }
.preco { text-align: center; margin-top: 4px; }
.preco b { font: 44px/1 var(--num); color: #fff; letter-spacing: .02em; }
.preco small { display: block; font: 12px/1.2 var(--pixel); color: #9AA3B8; margin-top: 2px; }
.demo { margin-top: 8px; padding: 6px; text-align: center; font: 12px/1.2 var(--pixel); color: var(--tinta); background: repeating-linear-gradient(-45deg, #FFD21F 0 10px, #F5C400 10px 20px); border: 2px solid #000; border-radius: 8px; }
.sempre { margin: 4px 0 10px; padding: 10px 12px; border: 2px dashed var(--ouro); border-radius: 12px; background: #1F2432; text-align: center; }
.sempre b { display: block; font: 16px/1.2 var(--pixel); color: var(--ouro); letter-spacing: .02em; }
.sempre span { display: block; margin-top: 4px; font: 700 14px/1.3 var(--texto); color: #FFFFFF; }
.devolve { text-align: center; font: 13px/1.3 var(--texto); color: #C9CFDD; margin: 8px 0 0; }
.rodape-loja { text-align: center; font: 11px/1.3 var(--texto); color: #7C8499; margin: 8px 0 0; }
.aberto { text-align: center; padding: 6px 0; }
.aberto b { display: block; font: 34px/1.1 var(--pixel); color: var(--verde2); }

/* ---------- tela de mundos ---------- */
#mundos { position: absolute; inset: 0; z-index: 45; overflow-y: auto; padding: calc(10px + var(--st)) 12px calc(16px + var(--sb)); background: radial-gradient(circle at 50% 0%, #1F2432, #0C0E15 70%); animation: fade .2s; }
#mundos[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.mu-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mu-topo h2 { margin: 0; flex: 1; font: 26px/1 var(--pixel); color: var(--ouro); }
.mu-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 900px; margin: 0 auto; }
.mu { position: relative; display: block; width: 100%; padding: 0; text-align: left; background: #1F2432; border: 3px solid #000; border-radius: 14px; box-shadow: 0 5px 0 #000; overflow: hidden; transition: transform .06s; }
.mu:active, .mu.afunda { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.mu canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #0C0E15; }
.mu .mu-txt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 10px; }
.mu b { font: 18px/1 var(--pixel); color: #fff; }
.mu .selo { font: 11px/1 var(--pixel); padding: 4px 6px; border: 2px solid #000; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.mu .selo img { width: 16px; height: 16px; }
.selo.gratis { background: var(--verde); color: #fff; } .selo.pago { background: var(--ouro); color: var(--tinta); } .selo.aberto { background: #2F6FB2; color: #fff; } .selo.nao { background: #3A4056; color: #C9CFDD; }
.mu.vitrine canvas { filter: saturate(.35) brightness(.7); }
.mu.vitrine .faixa { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: 13px/1.2 var(--pixel); color: #fff; background: rgba(20,24,33,.85); padding: 5px 4px; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.mu.atual { border-color: var(--ouro); }
.vitrine-modal { text-align: center; }
.vitrine-modal canvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 8 / 5; border: 3px solid #000; border-radius: 12px; filter: saturate(.5) brightness(.8); }
.vitrine-modal p { font: 18px/1.3 var(--pixel); color: #fff; margin: 12px 0 0; }

/* ---------- foto ---------- */
#foto { position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(10px + var(--st)) 16px calc(14px + var(--sb)); background: rgba(8,9,14,.92); animation: fade .2s; }
#foto[hidden] { display: none; }
#foto img { max-width: 100%; max-height: calc(100% - 140px); border: 3px solid #000; border-radius: 12px; box-shadow: 0 6px 0 #000; image-rendering: auto; }
#foto .acoes { display: flex; gap: 8px; width: min(420px, 100%); }
#foto .acoes button { margin-top: 0; }

@media (max-width: 374px) {
  .cont { grid-template-columns: 24px 1fr; padding: 3px 4px; column-gap: 4px; }
  .cont img { width: 24px; height: 24px; }
  .cont b { font-size: 21px; }
  .cont small { font-size: 12px; letter-spacing: -.02em; }
  #titulo { font-size: 15px; }
  .pd { flex-basis: 66px; width: 66px; }
}
@media (max-height: 700px) {
  #folha { padding-top: 6px; }
  .preco b { font-size: 36px; }
  .loja-mundos canvas { aspect-ratio: 2 / 1; }
  .b-ouro { min-height: 50px; }
  #conquista { top: calc(110px + var(--st)); }
}
@media (min-width: 900px) {
  .mu-grade { grid-template-columns: repeat(3, 1fr); max-width: 1000px; gap: 18px; }
  .mu b { font-size: 24px; } .mu .selo { font-size: 14px; }
  #mundos { padding-top: 28px; } .mu-topo { max-width: 1000px; margin: 0 auto 16px; }
  .topo { height: 58px; padding: 6px 14px 0; }
  #titulo { font-size: 22px; }
  #contadores { max-width: 640px; }
  #poderes { justify-content: center; }
}

/* ---------- rodada 2: poder ligado, barra que rola, relógio, missão, loja, coleção, pais ---------- */
#relogio { pointer-events: none; margin: -4px auto 6px; width: max-content; max-width: calc(100% - 16px); padding: 4px 10px; font: 13px/1.1 var(--pixel); color: var(--tinta); background: var(--ouro); border: 2px solid #000; border-radius: 999px; box-shadow: 0 3px 0 #000; animation: pulsa 1s ease-in-out infinite; }
#relogio[hidden] { display: none; }
.linha-chips { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 0 8px 2px; pointer-events: none; }
.linha-chips > * { pointer-events: auto; }
#missao { margin: 0; min-width: 0; flex: 0 1 auto; }
#missao .m-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#missao .m-p { flex: 0 0 auto; font: 13px/1 var(--num); background: var(--tinta); color: var(--ouro); border-radius: 999px; padding: 4px 7px; margin-left: 2px; }
#missao.festa { background: var(--verde2); animation: pulsa .5s ease-in-out 5; }
#poder-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; max-width: 46%; padding: 3px 10px 3px 4px; background: var(--tinta); color: var(--ouro); border: 2px solid var(--ouro); border-radius: 999px; box-shadow: 0 3px 0 #000; font: 12px/1.1 var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#poder-chip img { width: 32px; height: 32px; flex: 0 0 32px; }
#poder-chip[hidden] { display: none; }
#barra { position: relative; }
#barra::after, #barra::before { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; opacity: 0; transition: opacity .2s; }
#barra::after { right: 0; background: linear-gradient(90deg, rgba(20,24,33,0), rgba(20,24,33,.95)); }
#barra::before { left: 0; background: linear-gradient(270deg, rgba(20,24,33,0), rgba(20,24,33,.95)); z-index: 1; }
#barra.tem-mais::after, #barra.tem-antes::before { opacity: 1; }
#mais { position: absolute; right: 2px; top: 22px; z-index: 2; width: 26px; height: 40px; display: grid; place-items: center; font: 34px/1 var(--pixel); color: var(--ouro); text-shadow: 0 3px 0 #000; pointer-events: none; opacity: 0; transition: opacity .2s; }
#barra.tem-mais #mais { opacity: 1; animation: seta 1s ease-in-out infinite; }
@keyframes seta { 50% { transform: translateX(5px); } }
.pd .pincel { position: absolute; top: -8px; left: -9px; width: 32px; height: 32px; transform: scale(.8); filter: drop-shadow(0 2px 0 #000); background: none; border: 0; padding: 0; }
.pd.sel .circ { transform: scale(1.1); box-shadow: 0 4px 0 #000, 0 0 0 5px var(--ouro), 0 0 0 8px #000, 0 0 22px 8px rgba(255,210,31,.6), inset 0 -5px 0 rgba(0,0,0,.28), inset 0 4px 0 rgba(255,255,255,.18); animation: none; }
.pd.sel .nome { background: var(--ouro); color: var(--tinta); text-shadow: none; border-radius: 4px; padding: 1px 3px; }
#poderes { padding-top: 12px; }
#aviso .av-t { display: block; }
#aviso .av-s { display: block; margin-top: 6px; font-size: .55em; color: #fff; }
#mao.desliza .mao-img { animation: desliza 1.2s ease-in-out infinite; transform: none; }
@keyframes desliza { 0% { transform: translateX(-46px) rotate(-10deg); } 50% { transform: translateX(46px) rotate(10deg); } 100% { transform: translateX(-46px) rotate(-10deg); } }
.como { margin: 0 0 10px; padding: 8px 10px; background: var(--ouro); color: var(--tinta); border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; }
.como b { display: block; font: 11px/1 var(--pixel); margin-bottom: 4px; }
.como span { display: block; font: 700 15px/1.25 var(--texto); }
.m-lista li.atual { border-color: var(--ouro); }
.desafio { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; background: #2a2412; border: 2px solid var(--ouro); border-radius: 10px; }
.desafio img { width: 32px; height: 32px; }
.desafio small { display: block; font: 10px/1.2 var(--pixel); color: var(--ouro); }
.desafio b { display: block; font: 14px/1.2 var(--pixel); color: #fff; }
.desafio em { font: 13px/1 var(--pixel); font-style: normal; color: var(--verde2); }
.desafio.ok { border-color: var(--verde); background: #13281a; }
.b-mini { min-height: 44px; padding: 6px 10px; background: var(--ouro); color: var(--tinta); border: 2px solid #000; border-radius: 10px; box-shadow: 0 3px 0 #000; font: 13px/1 var(--pixel); }
.b-mini.afunda, .b-mini:active { transform: translateY(3px); box-shadow: none; }
.colecao { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.col-mundo { grid-column: 1 / -1; font: 13px/1 var(--pixel); color: var(--ouro); margin-top: 8px; }
.col-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: #1F2432; border: 2px solid #000; border-radius: 8px; font: 11px/1.2 var(--pixel); color: #7C8499; min-height: 44px; }
.col-item img { width: 32px; height: 32px; flex: 0 0 32px; }
.col-item.ok { color: #fff; background: #23301f; }
ul.pais, ul.fora { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.pais li { padding: 8px 10px; background: #1F2432; border: 2px solid #000; border-radius: 10px; }
ul.pais b { display: block; font: 13px/1.2 var(--pixel); color: var(--ouro); margin-bottom: 3px; }
ul.pais span { display: block; font: 15px/1.3 var(--texto); color: #fff; }
ul.fora li { padding: 10px 12px; background: #1F2432; border: 2px solid #000; border-radius: 10px; font: 700 17px/1.3 var(--texto); color: #fff; }
.loja-mundo { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; padding: 6px; background: #1F2432; border: 2px solid #000; border-radius: 12px; }
.loja-mundo canvas { width: 112px; height: 70px; border: 2px solid #000; border-radius: 8px; background: #0C0E15; }
.loja-mundo b { display: block; font: 18px/1.1 var(--pixel); color: #fff; }
.loja-mundo span { display: block; font: 700 14px/1.25 var(--texto); color: #C9CFDD; margin-top: 3px; }
.loja-pods { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.loja-pods div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: #1F2432; border-radius: 8px; }
.loja-pods img { width: 32px; height: 32px; }
.loja-pods span { font: 10px/1.1 var(--pixel); color: #fff; text-align: center; }
.aberto .gostou { display: block; font: 26px/1.1 var(--pixel); color: var(--ouro); margin-top: 4px; }
.mu .mu-linha { display: block; padding: 0 10px 10px; margin-top: -4px; font: 700 13px/1.25 var(--texto); color: #C9CFDD; }
.mu .prova { position: absolute; top: 8px; left: 8px; padding: 4px 7px; font: 11px/1 var(--pixel); background: var(--verde); color: #fff; border: 2px solid #000; border-radius: 6px; box-shadow: 0 2px 0 #000; }
.mu-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px; }
@media (max-width: 374px) { #poder-chip { font-size: 11px; } .colecao { grid-template-columns: 1fr; } }

#missao .m-pre { font-style: normal; }
@media (max-width: 430px) { #missao .m-pre { display: none; } }

/* aviso sempre legível, mesmo em cima dos números voando */
#aviso { padding: 6px 14px 8px; background: rgba(20,24,33,.86); border: 3px solid #000; border-radius: 14px; box-shadow: 0 4px 0 #000; }
#aviso .av-s { color: #E2E6EF; }

/* ---------- integração: 19 mundos (tela de Mundos, folha do mundo, cenários, loja, coleção) ---------- */
#mundos { padding: calc(8px + var(--st)) 12px calc(20px + var(--sb)); overflow-x: hidden; background: radial-gradient(120% 60% at 50% 0%, #26304a 0%, #141821 45%, #0C0E15 100%); }
.mu-topo { position: sticky; top: calc(-8px - var(--st)); z-index: 3; margin: -8px -12px 10px; padding: calc(8px + var(--st)) 12px 8px; background: linear-gradient(#141821 70%, rgba(20,24,33,0)); }
.mu-topo > img { width: 32px; height: 32px; flex: 0 0 32px; }
.mu-tit { flex: 1; min-width: 0; }
.mu-tit h2 { margin: 0; font: 26px/1 var(--pixel); color: var(--ouro); text-shadow: 0 3px 0 #000; }
.mu-tit small { display: block; margin-top: 4px; font: 12px/1 var(--pixel); color: #C9CFDD; letter-spacing: .03em; }
.mu-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
.mu { display: flex; flex-direction: column; min-width: 0; background: #1F2432; border: 3px solid #000; box-shadow: 0 5px 0 #000; }
.mu.grande { grid-column: 1 / -1; }
.mu.atual { border-color: var(--ouro); box-shadow: 0 5px 0 #000, 0 0 0 2px rgba(255,210,31,.35); }
.mu-fig { position: relative; display: block; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: #0C0E15; border-bottom: 3px solid var(--cor, #000); }
.mu.grande .mu-fig { aspect-ratio: 176 / 66; }
.mu-fig > img, .mu-fig > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; aspect-ratio: auto; background: none; }
.mu-fig > canvas { opacity: 0; transition: opacity .25s; }
.vivo .mu-fig > canvas, .mu-fig.vivo > canvas { opacity: 1; }
.mu .mu-txt { flex-wrap: nowrap; gap: 4px; padding: 8px 8px 4px; min-width: 0; }
.mu b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu.grande b { font-size: 22px; }
.mu .selo { flex: 0 0 auto; font-size: 10px; padding: 3px 5px; }
.mu.grande .selo { font-size: 13px; padding: 4px 8px; }
.mu .mu-linha { margin-top: 0; padding: 0 8px 10px; font: 700 12px/1.25 var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mu.grande .mu-linha { font-size: 14px; }
.mu .prova, .mu-chip { position: absolute; top: 6px; z-index: 1; padding: 3px 6px; font: 10px/1 var(--pixel); border: 2px solid #000; border-radius: 6px; box-shadow: 0 2px 0 #000; white-space: nowrap; }
.mu .prova { left: 6px; }
.mu-chip.jogando { left: 6px; background: var(--ouro); color: var(--tinta); }
.mu-chip.cens { right: 6px; background: rgba(20,24,33,.9); color: #fff; border-color: var(--cor, #000); }
.mu:not(.grande) .mu-chip.cens { top: auto; bottom: 6px; }
.mu-cta { display: block; max-width: 900px; margin: 16px auto 0; padding: 12px 14px; text-align: center; background: #2a2412; border: 3px dashed var(--ouro); border-radius: 14px; cursor: pointer; }
.mu-cta b { display: block; font: 20px/1.1 var(--pixel); color: var(--ouro); }
.mu-cta span { display: block; margin-top: 4px; font: 12px/1.2 var(--pixel); color: #fff; }
.mu-cta.afunda { transform: translateY(3px); }
.mu-rodape { margin-top: 10px; }

/* folha do mundo (abre por cima da tela de Mundos) */
.mu-veu { position: fixed; inset: 0; z-index: 47; background: rgba(8,9,14,.6); animation: fade .2s; }
.mu-folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; max-width: 520px; margin: 0 auto; max-height: calc(100% - 10px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(16px + var(--sb)); background: var(--tinta); border: 3px solid #000; border-top-color: var(--cor, #000); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 0 rgba(0,0,0,.35); animation: folha .28s cubic-bezier(.2,1.2,.4,1); }
.md-tit { display: flex; align-items: center; gap: 10px; margin: 0 52px 10px 0; min-height: 44px; }
.md-tit h3 { margin: 0; font: 26px/1 var(--pixel); color: #fff; text-shadow: 0 3px 0 #000; }
.md-tit .selo { font: 12px/1 var(--pixel); padding: 4px 7px; border: 2px solid #000; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.md-tit .selo img { width: 16px; height: 16px; }
.md-fig { aspect-ratio: 2 / 1; border: 3px solid #000; border-bottom: 3px solid var(--cor, #000); border-radius: 12px; box-shadow: 0 4px 0 #000; }
.md-prem { margin: 12px 0 0; padding: 10px 12px; background: #fff; color: var(--tinta); border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; }
.md-prem small { display: block; font: 11px/1 var(--pixel); color: #5B6478; letter-spacing: .04em; }
.md-prem q { display: block; margin-top: 5px; font: 800 18px/1.25 var(--texto); quotes: "“" "”"; }
.md-sec { font: 12px/1.2 var(--pixel); color: #C9CFDD; margin: 14px 0 6px; }
.md-cens { display: grid; gap: 8px; }
.cen { display: block; width: 100%; text-align: left; padding: 9px 12px; background: #1F2432; border: 3px solid #000; border-radius: 12px; box-shadow: 0 3px 0 #000; }
.cen b { display: block; font: 14px/1.1 var(--pixel); color: #fff; }
.cen span { display: block; margin-top: 4px; font: 700 13px/1.3 var(--texto); color: #C9CFDD; }
.cen.sel { border-color: var(--ouro); background: #2a2412; box-shadow: 0 3px 0 #000, 0 0 0 2px rgba(255,210,31,.4); }
.cen.sel b { color: var(--ouro); }
.cen.sel b::before { content: "✓ "; }
.cen.afunda { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.md-linha { margin: 10px 0 0; font: 700 14px/1.3 var(--texto); color: #C9CFDD; }
.md-aviso { margin: 10px 0 0; text-align: center; font: 12px/1.3 var(--pixel); color: var(--ouro); }
.md-entrar { margin-top: 14px; }

/* abrindo um mundo que ainda não baixou */
#abrindo { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(12,14,21,.88); animation: fade .15s; }
#abrindo[hidden] { display: none; }
#abrindo b { font: 22px/1.1 var(--pixel); color: var(--cor, var(--ouro)); text-shadow: 0 3px 0 #000; text-align: center; padding: 0 16px; }
#abrindo .pontos { display: flex; gap: 8px; }
#abrindo .pontos i { width: 12px; height: 12px; background: var(--cor, var(--ouro)); border: 2px solid #000; animation: pulo .9s ease-in-out infinite; }
#abrindo .pontos i:nth-child(2) { animation-delay: .15s; } #abrindo .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 40% { transform: translateY(-10px); } }

/* loja com todos os mundos */
.loja-conta { flex-wrap: wrap; margin: 0 0 10px; font: 15px/1.2 var(--pixel); }
.loja-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.lg { display: block; min-width: 0; padding: 0; text-align: left; background: #1F2432; border: 2px solid #000; border-radius: 10px; overflow: hidden; }
.lg .mu-fig { border-bottom-width: 2px; }
.lg b { display: block; padding: 4px 5px 5px; font: 10px/1.1 var(--pixel); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.lg { box-shadow: 0 3px 0 #000; }
button.lg.afunda { transform: translateY(2px); box-shadow: none; }
.loja-mais { color: #fff; font-size: 13px; text-align: center; }
.loja-icos img { width: 32px; height: 32px; image-rendering: pixelated; }
.loja-fixo { position: sticky; bottom: calc(-16px - var(--sb)); z-index: 2; margin: 10px -16px 0; padding: 8px 16px calc(12px + var(--sb)); background: var(--tinta); border-top: 2px solid #2A3142; box-shadow: 0 -10px 16px rgba(20,24,33,.9); }
.loja-fixo .preco { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 0; }
.loja-fixo .preco b { font-size: 36px; }
.loja-fixo .preco small { margin: 0; }
.loja-fixo .b-ouro { margin-top: 6px; }
.loja-fixo .demo { margin-top: 6px; }

/* coleção agrupada por mundo */
.colecao { display: grid; grid-template-columns: 1fr; gap: 8px; }
.col-bloco { padding: 8px; background: #1A1E2A; border: 2px solid #000; border-left: 5px solid var(--cor, #3A4056); border-radius: 10px; }
.col-mundo { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font: 13px/1 var(--pixel); color: var(--ouro); }
.col-mundo span { font: 13px/1 var(--num); color: #C9CFDD; }
.col-icos { display: flex; flex-wrap: wrap; gap: 4px; }
.col-icos .col-item { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
.col-icos .col-item.sel { border-color: var(--ouro); }
.col-txt { margin-top: 6px; font: 11px/1.3 var(--pixel); color: #C9CFDD; }

@media (min-width: 700px) {
  .mu-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loja-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .mu-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; gap: 14px; }
  .mu-topo { max-width: none; margin: -28px -12px 16px; padding-top: 28px; }
  .mu-topo > * { max-width: none; }
  .mu b { font-size: 18px; } .mu .selo { font-size: 12px; }
  .mu.grande { grid-column: span 2; grid-row: span 2; }
  .mu.grande .mu-fig { aspect-ratio: auto; flex: 1; min-height: 160px; }
}
@media (max-width: 374px) {
  .mu b { font-size: 14px; }
  .mu .selo { font-size: 9px; padding: 2px 4px; }
  .mu .selo img { width: 12px; height: 12px; }
  .mu-chip, .mu .prova { font-size: 9px; padding: 2px 4px; }
  .loja-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ajustes depois de olhar os prints: nome inteiro, preço em cima da miniatura, cabeçalho sólido */
.mu-topo { background: #141821; box-shadow: 0 6px 10px rgba(0,0,0,.45); border-bottom: 2px solid #000; }
.mu .selo.no-fig { position: absolute; left: 6px; bottom: 6px; z-index: 1; box-shadow: 0 2px 0 #000; }
.mu .mu-txt { padding: 8px 8px 3px; }
.mu b { font-size: 17px; overflow: visible; white-space: normal; }
.mu .mu-linha { padding: 0; margin: 0 8px 10px; }
.mu:not(.grande) .mu-chip.cens { top: 6px; bottom: auto; }
.mu:not(.grande) .mu-fig .prova + .mu-chip.cens, .mu:not(.grande) .mu-fig .jogando + .mu-chip.cens { top: auto; bottom: 6px; }
@media (max-height: 700px) { .md-fig { aspect-ratio: 3 / 1; } .md-prem q { font-size: 16px; } .md-tit h3 { font-size: 22px; } }
@media (max-width: 374px) { .mu b { font-size: 14px; } }

/* lançamento: loja no topo de MUNDOS e mundos EM BREVE */
.mu-tit { flex: 1; min-width: 0; }
.b-ouro.mu-loja { flex: 0 0 auto; width: auto; min-height: 40px; margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font: 15px/1 var(--pixel); }
.mu-loja img { width: 16px; height: 16px; }
.mu-cta { margin: 0 auto 12px; }
.selo.breve { background: #3A4152; color: #C9D1E0; }
.mu.breve > :first-child { filter: grayscale(.9) brightness(.7); }
.mu.breve { opacity: .9; }
.mu-sec-breve { max-width: 900px; margin: 18px auto 8px; font: 13px/1.3 var(--pixel); color: #C9D1E0; text-align: center; }
.md-breve { color: var(--ouro); }
.md-breve-sub { font: 13px/1.4 var(--pixel); color: #C9D1E0; margin: 6px 0 12px; }
.loja-breve { margin: 10px 0; padding: 10px; border: 2px dashed #5B6478; border-radius: 10px; }
.loja-breve b { display: block; font: 13px/1.2 var(--pixel); color: var(--ouro); margin-bottom: 6px; }
.loja-breve-l { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 11px/1.4 var(--pixel); color: #C9D1E0; }
.loja-breve-l span { display: inline-flex; align-items: center; gap: 3px; }
.loja-breve-l img { width: 12px; height: 12px; }

/* ---------- marca SIMULEITOR (09/11) ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; }
.logo > img { width: 28px; height: 28px; flex: 0 0 28px; filter: drop-shadow(0 2px 0 #000); }
.logo > b { font: 26px/1 var(--pixel); letter-spacing: .04em; color: #FFD21F;
  background: linear-gradient(#FFF6B8 0 34%, #FFD21F 34% 68%, #F59E0B 68% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 3px 0 #5B2A00); }
.mu-tit .logo > b { font-size: 24px; }
@media (max-width: 340px) { .mu-tit .logo > b { font-size: 19px; } .logo > img { width: 22px; height: 22px; flex-basis: 22px; } }

/* ---------- tela de carregamento ---------- */
#carga { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #0C0E15; transition: opacity .35s ease; overflow: hidden; }
#carga.sai { opacity: 0; pointer-events: none; }
#carga .ceu { position: absolute; inset: 0; pointer-events: none; }
#carga .ceu i { position: absolute; width: 3px; height: 3px; background: #fff; opacity: .2; animation: pisca 2.4s steps(3) infinite; }
@keyframes pisca { 50% { opacity: .9; } }
#carga-pl { width: 128px; height: 128px; image-rendering: pixelated; animation: flutua 2.2s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-8px); } }
#carga .logo { animation: entra .55s cubic-bezier(.2,1.6,.4,1) both .1s; }
#carga .logo > b { font-size: 38px; }
#carga .logo > img { display: none; }
@keyframes entra { from { transform: translateY(18px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.carga-barra { width: min(240px, 70vw); height: 18px; padding: 3px; border: 3px solid #000; background: #1C2230; box-shadow: 0 0 0 2px #3A4258, 0 4px 0 #000; }
.carga-barra > i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #FFD21F 0 12px, #F59E0B 12px 14px); transition: width .25s steps(6); }
.carga-tx { font: 12px/1 var(--pixel); color: #8A93A8; letter-spacing: .08em; min-height: 12px; }
#carga.pronto .logo { animation: estoura .4s ease-out both; }
@keyframes estoura { 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #carga-pl, #carga .logo, #carga .ceu i { animation: none; } }

/* limpeza dos avisos (10/11): faixa e caixinha nascem logo abaixo do topo (contadores e faíscas) e nunca juntas */
#aviso { top: calc(var(--topo-hud, 166px) + 10px); transform: translate(-50%, 0); }
#aviso.ve { animation-name: aviso2; }
#aviso.baixo { top: calc(var(--topo-hud, 166px) + 10px); }
@keyframes aviso2 { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 22% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px) scale(1); } }
#conquista, #conquista.ve { top: calc(var(--topo-hud, 166px) + 10px); }
@media (max-width: 430px) { #conquista { top: calc(var(--topo-hud, 152px) + 10px); } }
#aviso.baixo { top: calc(var(--topo-hud, 166px) + var(--conq-h, 90px) + 22px); }
#aviso.baixo { top: calc(var(--topo-hud, 166px) + var(--conq-h, 90px) + 10px); }
#conquista, #conquista.ve { top: calc(var(--topo-hud, 166px) + 10px + var(--sob, 0px)); }
/* 10/11: o tempo voltou a 1× sozinho por causa de um evento */
#b-vel { position: relative; }
#b-vel.volta::after { content: 'VOLTOU A 1×'; position: absolute; top: calc(100% + 4px); right: -4px; z-index: 30; padding: 3px 6px; background: #F43F5E; color: #fff; border: 2px solid #000; border-radius: 6px; font: 10px/1 var(--pixel); white-space: nowrap; pointer-events: none; animation: pulsa .8s ease-in-out 3; }
/* 10/11: mundo pago sem prova e o card de mundos novos todo mês */
.mu .prova.trancado { background: #3A4256; color: #E2E6EF; }
.mu-mensal { --cor: #FFD21F; cursor: default; border-style: dashed; }
.mu-mensal .mu-fig { display: flex; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at 50% 45%, #3A2E0A, #0C0E15 70%); }
.mu-mensal .mu-fig > img { position: static; width: 48px; height: 48px; animation: pulsa 1.6s ease-in-out infinite; }
.mu-mensal .mu-fig > b { color: #FFD21F; font: 22px/1 var(--pixel); text-shadow: 0 2px 0 #000; }
/* 11/11: prova acabada — mapa parado e cinza, nada responde ao toque além da faixa de compra e do botão de Mundos */
#jogo.congelado { pointer-events: none; }
#jogo.congelado #palco, #jogo.congelado #base, #jogo.congelado #contadores, #jogo.congelado .h-linha, #jogo.congelado #baloes, #jogo.congelado #voadores, #jogo.congelado > button, #jogo.congelado > .p-habs, #jogo.congelado > div:not(#cong-faixa):not(#aviso):not(#conquista):not(#flash) { filter: grayscale(1) brightness(.55); transition: filter .6s; }
#jogo.congelado #b-mundos, #jogo.congelado #cong-faixa, #jogo.congelado #cong-faixa * { pointer-events: auto; }
#jogo.congelado #b-foto, #jogo.congelado #b-vel, #jogo.congelado #b-som { opacity: .45; }
.cong-faixa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(320px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; background: rgba(20,24,33,.94); border: 3px solid var(--ouro); border-radius: 14px; box-shadow: 0 5px 0 #000; text-align: center; }
.cong-faixa b { color: var(--ouro); font: 20px/1 var(--pixel); }
.cong-faixa span { color: #E2E6EF; font: 12px/1.2 var(--pixel); margin-bottom: 4px; }
.cong-faixa .b-ouro { width: 100%; }
#jogo.congelado *, #jogo.congelado *::before, #jogo.congelado *::after { pointer-events: none !important; }
#jogo.congelado #b-mundos, #jogo.congelado #b-mundos *, #jogo.congelado #cong-faixa, #jogo.congelado #cong-faixa * { pointer-events: auto !important; }
/* folha, véu, Mundos e foto também moram dentro do #jogo: ficam vivos e coloridos */
#jogo.congelado #folha, #jogo.congelado #folha *, #jogo.congelado #veu, #jogo.congelado #mundos, #jogo.congelado #mundos *, #jogo.congelado #foto, #jogo.congelado #foto * { pointer-events: auto !important; }
#jogo.congelado > #folha, #jogo.congelado > #veu, #jogo.congelado > #ficha { filter: none; }
/* 11/11: folha (loja, fim da prova), véu e ficha nunca ficam cinza (o seletor de cima tinha mais peso) */
#jogo.congelado > div:is(#folha, #veu, #ficha, #cong-faixa) { filter: none !important; }
/* 11/11: campos do JÁ COMPREI e status do Pix */
.cp-campo { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 12px 14px; font: 18px/1.2 var(--texto, sans-serif); color: #141821; background: #fff; border: 3px solid #000; border-radius: 10px; }
.cp-cod { font: 28px/1 var(--pixel); letter-spacing: 8px; text-align: center; }
.pix-st { text-align: center; color: var(--ouro); font: 12px/1.3 var(--pixel); margin: 10px 0; min-height: 16px; }