:root {
  --azul: #3d9bff; --azul-esc: #1d5fc0; --verm: #ff5147; --verm-esc: #b8262b;
  --amarelo: #ffd23f; --amarelo-esc: #d99a12; --painel: #1d2538; --painel-2: #283350; --texto: #fff;
  --verde: #4fd36b; --cinza: #8a93a8;
  --fonte-t: 'Lilita One', 'Arial Black', sans-serif;
  --fonte: 'Nunito', system-ui, sans-serif;
  --contorno: 0 2px 0 #10141f, 2px 0 0 #10141f, -2px 0 0 #10141f, 0 -2px 0 #10141f, 2px 2px 0 #10141f, -2px 2px 0 #10141f, 0 4px 0 rgba(0,0,0,.35);
  --s: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2233; color: var(--texto); font-family: var(--fonte); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
.oculto { display: none !important; }
svg { width: 1em; height: 1em; flex: none; }
button { font-family: var(--fonte-t); cursor: pointer; border: 0; color: #fff; }

#tela { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#toques { position: fixed; inset: 0; z-index: 2; }
#rotulos { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; font-size: clamp(12px, 1.6vw, 18px); }
#hud > * { pointer-events: none; }
#hud button, #hud .clicavel { pointer-events: auto; }

/* ---------- botões estilo Supercell ---------- */
.bt-grande {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font-size: 1.25em; padding: .55em 1.2em; border-radius: .7em; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  border: 3px solid #10141f; box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.35), 0 4px 0 #10141f;
  transition: transform .08s;
}
.bt-grande:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.35), 0 1px 0 #10141f; }
.bt-grande svg { font-size: 1.2em; }
.amarelo { background: linear-gradient(#ffe066, var(--amarelo)); color: #3b2a00; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.azul { background: linear-gradient(#6ab6ff, var(--azul)); }
.verm { background: linear-gradient(#ff7d74, var(--verm)); }
.verde { background: linear-gradient(#7be38f, var(--verde)); color: #0f3a19; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.obra { background: linear-gradient(#ffb15c, #ff7a1a); color: #3a1a00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.cinza { background: linear-gradient(#a8b0c2, var(--cinza)); }
.bt-redondo { width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(16,20,31,.6); border: 2px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; font-size: 1em; }
.bt-redondo svg { font-size: 1.3em; }
.bt-texto { background: none; font-family: var(--fonte); font-weight: 800; color: #c9d4ee; text-decoration: underline; font-size: .9em; margin-top: .4em; }
kbd { font-family: var(--fonte); font-size: .55em; background: rgba(0,0,0,.25); border-radius: .3em; padding: .05em .35em; }
body.toque kbd { display: none; }

/* ---------- topo ---------- */
#topo { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .6em; }
.barra-base { display: flex; flex-direction: column; align-items: center; width: clamp(130px, 22vw, 260px); }
.bb-nome { font-family: var(--fonte-t); font-size: .95em; text-shadow: var(--contorno); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilho { width: 100%; height: 1em; background: #10141f; border-radius: .5em; border: 2px solid #10141f; overflow: hidden; position: relative; }
.enche { height: 100%; width: 100%; border-radius: .4em; transition: width .25s; box-shadow: inset 0 3px 0 rgba(255,255,255,.35); }
.bb-num { font-family: var(--fonte-t); font-size: .8em; margin-top: -1.18em; position: relative; text-shadow: var(--contorno); }
#bb0 .enche { background: linear-gradient(#7cc0ff, var(--azul)); }
#bb1 .enche { background: linear-gradient(#ff8d85, var(--verm)); }
.barra-base.minha .bb-nome::after { content: ' (você)'; color: var(--amarelo); }
#relogio { font-family: var(--fonte-t); font-size: 1.9em; text-shadow: var(--contorno); min-width: 3.2em; text-align: center; }
#relogio.urgente { color: #ff6b5e; animation: pulsar .6s infinite alternate; }

#esq-topo { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(10px, var(--s)); display: flex; flex-direction: column; gap: .35em; align-items: flex-start; }
#pontos { display: flex; align-items: center; gap: .3em; background: rgba(16,20,31,.55); padding: .15em .7em .15em .3em; border-radius: 2em; border: 2px solid rgba(255,255,255,.15); }
#pontos svg { font-size: 1.9em; }
#pontos b { font-family: var(--fonte-t); font-size: 1.8em; text-shadow: var(--contorno); color: var(--amarelo); min-width: 2.5em; }
#pontos.ganhou b { animation: saltar .3s; }
#placar { display: flex; gap: .8em; font-family: var(--fonte-t); text-shadow: var(--contorno); }
#placar span { display: flex; align-items: center; gap: .25em; }
#placar svg { font-size: 1.1em; color: #e6ecff; }
#onda { font-weight: 800; font-size: .85em; background: rgba(16,20,31,.5); padding: .15em .6em; border-radius: 1em; }

#dir-topo { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: .4em; }
#minimapa { width: clamp(150px, 19vw, 240px); height: auto; border-radius: .6em; border: 3px solid rgba(16,20,31,.85); box-shadow: 0 3px 0 rgba(0,0,0,.35); background: #2a3142; }
#feed { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; font-weight: 800; font-size: .85em; }
.feed-item { background: rgba(16,20,31,.65); padding: .2em .6em; border-radius: .5em; border-left: 4px solid #fff; animation: entrarDir .25s; display: flex; gap: .35em; align-items: center; }
.feed-item.t0 { border-color: var(--azul); } .feed-item.t1 { border-color: var(--verm); }
.feed-item.sai { opacity: 0; transition: opacity .5s; }

#banner { position: absolute; top: 22%; left: 50%; transform: translate(-50%, 0) scale(0); font-family: var(--fonte-t); font-size: 3em; text-shadow: var(--contorno); white-space: nowrap; color: var(--amarelo); }
#banner.mostra { animation: banner 1.8s forwards; }
#aviso-centro { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); font-weight: 900; background: rgba(180,30,30,.85); padding: .3em .9em; border-radius: .6em; opacity: 0; transition: opacity .2s; }
#aviso-centro.mostra { opacity: 1; }

#botoes-sist { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: .5em; opacity: .85; }

#barra-acoes { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: .5em; }
#barra-acoes, #barra-acoes button { touch-action: none; } /* segundo dedo nos botões enquanto o outro anda: sem gesto do navegador */
#bt-loja { font-size: 1.15em; }
#bt-loja .selo { background: var(--verm); color: #fff; border-radius: 1em; font-size: .7em; padding: .05em .45em; border: 2px solid #10141f; }
#atalhos { display: flex; flex-direction: column; gap: .4em; }
.atalho { position: relative; width: 3.6em; height: 3.6em; border-radius: .8em; background: linear-gradient(#36435f, #222b40); border: 3px solid #10141f; box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 3px 0 #10141f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1em; overflow: hidden; }
.atalho svg { font-size: 1.5em; color: #fff; position: relative; z-index: 1; }
.atalho small { font-family: var(--fonte-t); font-size: .72em; color: var(--amarelo); position: relative; z-index: 1; display: flex; align-items: center; gap: .1em; }
.atalho kbd { position: absolute; top: .1em; left: .2em; z-index: 1; }
.atalho.caro { filter: grayscale(.8) brightness(.7); }
.atalho .rec { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0,.6); z-index: 0; }
/* acessórios de uso (Q/F): borda laranja e contador de usos; a C4 plantada pisca vermelha esperando o detonador */
.atalho.equip { border-color: #4a2a10; background: linear-gradient(#5a4128, #2e2216); }
.atalho.equip small { color: #ffd9a0; }
.atalho.equip.armada { background: linear-gradient(#a8261c, #5a1210); animation: c4-armada .6s steps(2) infinite; }
@keyframes c4-armada { 50% { filter: brightness(1.35); } }
.atalho .rec-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-t); font-size: 1.3em; z-index: 2; text-shadow: var(--contorno); }

/* analógicos */
.joy { position: absolute; width: 0; height: 0; display: none; }
.joy.ativo { display: block; }
.joy-base { position: absolute; width: 130px; height: 130px; left: -65px; top: -65px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35); }
.joy-pino { position: absolute; width: 60px; height: 60px; left: -30px; top: -30px; border-radius: 50%; background: rgba(255,255,255,.75); border: 3px solid #10141f; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
#joy-mira .joy-pino { background: rgba(255,210,63,.9); }

#morto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(transparent 30%, rgba(40,10,10,.55)); }
.morto-txt { font-family: var(--fonte-t); font-size: 2em; text-shadow: var(--contorno); }
.morto-num { font-family: var(--fonte-t); font-size: 4em; color: var(--amarelo); text-shadow: var(--contorno); }
.morto-sub { font-weight: 800; opacity: .8; }

/* rótulos sobre as unidades */
.rot { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; will-change: transform; }
.rot-nome { font-family: var(--fonte-t); font-size: 13px; text-shadow: var(--contorno); white-space: nowrap; }
.rot-arma { font-family: var(--fonte); font-weight: 900; font-size: 10px; color: #e6ecff; text-shadow: 0 1px 0 #10141f, 1px 0 0 #10141f, -1px 0 0 #10141f, 0 -1px 0 #10141f; margin: -1px 0 1px; white-space: nowrap; }
.rot-barra { width: 64px; height: 9px; background: #10141f; border-radius: 5px; border: 2px solid #10141f; overflow: hidden; }
.rot-barra i { display: block; height: 100%; border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.rot.t0 .rot-barra i { background: var(--azul); } .rot.t1 .rot-barra i { background: var(--verm); }
.rot.eu .rot-barra i { background: var(--verde); }
.rot.pequeno .rot-barra { width: 34px; height: 6px; border-width: 1px; }
.rot.torre .rot-barra { width: 46px; height: 7px; }
.rot-nivel { display: flex; gap: 1px; color: var(--amarelo); font-size: 10px; }
.rot-num { font-family: var(--fonte-t); font-size: 11px; text-shadow: var(--contorno); }
.dano { position: absolute; left: 0; top: 0; font-family: var(--fonte-t); font-size: 20px; text-shadow: var(--contorno); color: #fff; pointer-events: none; will-change: transform, opacity; }
.dano.meu { color: #ff5a4f; font-size: 22px; }
.dano.grande { font-size: 26px; color: var(--amarelo); }
.dano.ganho { font-size: 18px; color: var(--amarelo); }
.dano.ganho::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .15em; vertical-align: -.05em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe680, #f0a91c); border: 2px solid #10141f; }
.pad-dica { position: absolute; left: 0; top: 0; font-family: var(--fonte-t); font-size: 13px; background: rgba(16,20,31,.8); padding: .2em .6em; border-radius: .5em; white-space: nowrap; border: 2px solid var(--amarelo); }

/* ---------- loja ---------- */
#loja { position: fixed; z-index: 6; top: 0; right: 0; bottom: 0; width: min(58vw, 640px); background: rgba(22,28,44,.96); border-left: 4px solid #10141f; display: flex; flex-direction: column; font-size: clamp(11px, 1.45vw, 16px); animation: entrarDir .18s; box-shadow: -8px 0 30px rgba(0,0,0,.4); padding-right: env(safe-area-inset-right); }
.loja-topo { display: flex; align-items: center; gap: .5em; padding: .5em; background: #10141f; }
.abas { display: flex; gap: .3em; flex: 1; }
.aba { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35em; padding: .55em .3em; border-radius: .6em; background: #2a3350; font-size: 1em; border: 2px solid transparent; }
.aba svg { font-size: 1.2em; }
.aba.ativa { background: linear-gradient(#ffe066, var(--amarelo)); color: #3b2a00; }
.bt-dev { display: flex; align-items: center; gap: .4em; font-size: .8em; padding: .35em .6em; border-radius: .6em; background: #3a2f5a; border: 2px dashed #b9a6ff; color: #e2d9ff; }
.dev-chave { width: 2em; height: 1.1em; border-radius: 1em; background: #10141f; position: relative; }
.dev-chave::after { content: ''; position: absolute; top: .15em; left: .15em; width: .8em; height: .8em; border-radius: 50%; background: #8a93a8; transition: left .15s, background .15s; }
.bt-dev.ligado { background: #5a3fb0; border-style: solid; }
.bt-dev.ligado .dev-chave::after { left: 1.05em; background: #7be38f; }
.loja-pts { display: flex; align-items: center; gap: .3em; font-family: var(--fonte-t); font-size: 1.3em; color: var(--amarelo); padding: 0 .3em; }
.bt-fechar { width: 2.4em; height: 2.4em; border-radius: .6em; background: var(--verm); display: flex; align-items: center; justify-content: center; border: 2px solid #10141f; }
.bt-fechar svg { font-size: 1.3em; }
#loja-corpo { flex: 1; overflow-y: auto; padding: .7em; display: flex; flex-direction: column; gap: .6em; touch-action: pan-y; }
.sec-titulo { font-family: var(--fonte-t); font-size: 1.1em; color: #c9d4ee; display: flex; align-items: center; justify-content: space-between; }
.sec-titulo small { font-family: var(--fonte); font-weight: 800; font-size: .75em; opacity: .75; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.pad { background: #283350; border: 3px solid #10141f; border-radius: .6em; padding: .35em; text-align: center; font-family: var(--fonte); font-weight: 800; font-size: .8em; color: #dfe6f7; display: flex; flex-direction: column; align-items: center; gap: .1em; min-height: 4.4em; justify-content: center; }
.pad svg { font-size: 1.6em; color: #6c7aa0; }
.pad.ocupado svg { color: var(--azul); }
.pad.t1.ocupado svg { color: var(--verm); }
.pad.sel { border-color: var(--amarelo); background: #34416a; }
.pad .estrelas { color: var(--amarelo); font-size: .9em; display: flex; }
.pad .estrelas svg { font-size: 1em; color: var(--amarelo); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .5em; }
.cartao-item { background: linear-gradient(#2f3a5a, #252e48); border: 3px solid #10141f; border-radius: .8em; padding: .55em .6em; display: flex; flex-direction: column; gap: .3em; }
.cartao-item h4 { margin: 0; font-family: var(--fonte-t); font-weight: 400; font-size: 1.15em; display: flex; align-items: center; gap: .35em; }
.cartao-item h4 svg { font-size: 1.2em; color: var(--amarelo); }
.cartao-item p { margin: 0; font-size: .85em; color: #bcc6e0; font-weight: 700; line-height: 1.25; flex: 1; }
.cartao-item .stats { font-size: .78em; color: #93a2c8; font-weight: 800; }
.niveis { display: flex; gap: .2em; }
.niveis i { flex: 1; height: .45em; border-radius: .3em; background: #10141f; }
.niveis i.on { background: var(--amarelo); }
.bt-compra { display: flex; align-items: center; justify-content: center; gap: .3em; padding: .45em .5em; border-radius: .55em; font-size: 1em; background: linear-gradient(#7be38f, var(--verde)); color: #0f3a19; border: 2px solid #10141f; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 0 #10141f; }
.bt-compra:active { transform: translateY(2px); }
.bt-compra svg { font-size: 1.1em; }
.bt-compra.caro { background: #4a536c; color: #9aa3ba; box-shadow: none; }
.bt-compra.cinza { background: #4a536c; color: #e6ebf7; }
.bt-compra.verm { background: linear-gradient(#ff7d74, var(--verm)); color: #fff; }
.linha-bts { display: flex; gap: .35em; }
.linha-bts > * { flex: 1; }
.vazio { color: #93a2c8; font-weight: 800; text-align: center; padding: .6em; }

/* ---------- alvo ---------- */
#alvo { position: fixed; inset: 0; z-index: 7; background: rgba(10,14,24,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 1em; }
.alvo-titulo { font-family: var(--fonte-t); font-size: clamp(18px, 3vw, 30px); text-shadow: var(--contorno); }
#mapa-alvo { width: min(92vw, 170vh); height: auto; border-radius: 1em; border: 4px solid #10141f; touch-action: none; cursor: crosshair; }

/* ---------- início ---------- */
#inicio { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 4vw; background: linear-gradient(90deg, rgba(20,26,42,.82), rgba(20,26,42,.35)); padding: max(.6em, env(safe-area-inset-top)) max(1em, env(safe-area-inset-right)) .6em max(1em, env(safe-area-inset-left)); flex-wrap: nowrap; overflow-y: auto; }
.logo { display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); }
.logo-1 { font-family: var(--fonte-t); font-size: clamp(30px, min(7.5vw, 19vh), 96px); color: var(--amarelo); text-shadow: 0 4px 0 #10141f, 4px 0 0 #10141f, -4px 0 0 #10141f, 0 -4px 0 #10141f, 4px 4px 0 #10141f, -4px 4px 0 #10141f, 0 10px 0 rgba(0,0,0,.35); letter-spacing: .02em; }
.logo-2 { font-family: var(--fonte-t); font-size: clamp(13px, min(2.4vw, 6vh), 28px); background: var(--verm); padding: .1em .7em; border-radius: .4em; border: 3px solid #10141f; margin-top: -.3em; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cartao { background: rgba(29,37,56,.94); border: 4px solid #10141f; border-radius: 1.2em; padding: 1.2em 1.4em; display: flex; flex-direction: column; gap: .6em; width: min(48vw, 440px); flex: none; margin: auto 0; box-shadow: 0 8px 0 rgba(0,0,0,.35); }
.cartao label { font-family: var(--fonte-t); font-size: 1.1em; }
#nome { font-family: var(--fonte-t); font-size: 1.4em; padding: .4em .6em; border-radius: .6em; border: 3px solid #10141f; background: #fff; color: #1b2233; outline: none; }
.dica { font-size: .78em; color: #a9b5d3; font-weight: 700; line-height: 1.4; }
.espera-titulo { font-family: var(--fonte-t); font-size: 1.5em; }
.espera-titulo::after { content: ''; animation: reticencias 1.2s infinite; }
.espera-sub { font-weight: 800; color: #c9d4ee; font-size: .9em; }
.link { display: flex; align-items: center; gap: .4em; background: #10141f; border-radius: .6em; padding: .3em .3em .3em .7em; }
.link code { flex: 1; font-size: .95em; color: var(--amarelo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; -webkit-user-select: all; }

/* tamanho do texto acompanha a ALTURA da tela (celular deitado é baixo); se ainda não couber, rola em vez de cortar */
#fim { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .6em; overflow-y: auto; padding: max(.6em, env(safe-area-inset-top)) 1em max(.6em, env(safe-area-inset-bottom)); box-sizing: border-box; font-size: clamp(10px, min(1.7vw, 2.35vh), 18px); background: radial-gradient(rgba(20,26,42,.55), rgba(20,26,42,.9)); }
#fim > * { flex-shrink: 0; }
.fim-titulo { line-height: 1; font-family: var(--fonte-t); font-size: clamp(32px, min(10vw, 13vh), 110px); text-shadow: 0 5px 0 #10141f, 5px 0 0 #10141f, -5px 0 0 #10141f, 0 -5px 0 #10141f, 0 12px 0 rgba(0,0,0,.35); animation: saltar .6s; }
.fim-titulo.vit { color: var(--amarelo); } .fim-titulo.der { color: #ff7a70; } .fim-titulo.emp { color: #c9d4ee; }
.fim-stats { display: flex; gap: 1em; font-weight: 800; }
.fim-stats div { background: rgba(16,20,31,.7); border-radius: .8em; padding: .6em 1em; text-align: center; border: 3px solid #10141f; }
.fim-stats b { display: block; font-family: var(--fonte-t); font-size: 1.6em; color: var(--amarelo); }

#girar { position: fixed; inset: 0; z-index: 20; background: #1b2233; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1em; font-family: var(--fonte-t); font-size: 22px; text-align: center; padding: 2em; }
#girar svg { font-size: 64px; animation: girar 1.6s infinite; }
@media (orientation: portrait) and (pointer: coarse) { #girar { display: flex; } }
#conexao { position: fixed; top: 40%; left: 50%; transform: translateX(-50%); z-index: 30; background: var(--verm); padding: .6em 1.2em; border-radius: .7em; font-weight: 900; border: 3px solid #10141f; }

@media (max-height: 430px) {
  #hud { font-size: 12px; }
  .atalho { width: 3.1em; height: 3.1em; }
  #loja { font-size: 11px; }
  .cartao { padding: .8em 1em; gap: .45em; }
}

@keyframes banner { 0% { transform: translate(-50%, 0) scale(0) rotate(-6deg); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1.15) rotate(-3deg); opacity: 1; } 20% { transform: translate(-50%, 0) scale(1) rotate(-3deg); } 80% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-3deg); } 100% { transform: translate(-50%, -30px) scale(.9) rotate(-3deg); opacity: 0; } }
@keyframes saltar { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.feed-item { animation-name: entrarEsq; }
@keyframes entrarEsq { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entrarDir { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulsar { to { transform: scale(1.12); } }
@keyframes reticencias { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } }
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

/* tela inicial em celular deitado com a barra do navegador visível (~300 px de altura) */
@media (max-height: 520px) {
  #inicio { gap: 3vw; }
  .cartao { padding: .7em .9em; gap: .4em; border-width: 3px; border-radius: .9em; font-size: 14px; }
  .cartao label { font-size: 1em; }
  #nome { font-size: 1.15em; padding: .25em .5em; }
  .cartao .bt-grande { font-size: 1.05em; padding: .35em 1em; }
  .cartao .dica { font-size: .7em; line-height: 1.3; }
  .espera-titulo { font-size: 1.2em; }
  .espera-sub { font-size: .8em; }
  .link { padding: .15em .15em .15em .5em; }
  .link .bt-redondo { width: 2.1em; height: 2.1em; }
  .bt-texto { margin-top: 0; }
}
@media (max-height: 340px) {
  .cartao .dica { display: none; }
}
/* celular em pé (antes de girar) ou janela estreita: empilha */
@media (max-aspect-ratio: 1/1) {
  #inicio { flex-direction: column; flex-wrap: nowrap; }
  .cartao { width: min(92vw, 440px); }
}

/* sair da partida */
.bt-redondo.sair { background: rgba(140,30,30,.7); }
#confirmar-dev { position: fixed; inset: 0; z-index: 9; background: rgba(10,14,24,.7); display: flex; align-items: center; justify-content: center; padding: 1em; }
#confirmar { position: fixed; inset: 0; z-index: 9; background: rgba(10,14,24,.7); display: flex; align-items: center; justify-content: center; padding: 1em; }
.confirmar-cartao { width: min(92vw, 400px); text-align: center; }
.sem-pontos::after { content: none !important; }
.fim-bts { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
.aviso-menu { background: rgba(255,81,71,.18); border: 2px solid var(--verm); border-radius: .6em; padding: .4em .7em; font-weight: 800; font-size: .9em; color: #ffd6d2; }
.linha-textos { display: flex; justify-content: space-between; gap: .5em; }

/* versão (só aparece no arquivo offline) */
#versao { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: 8px; font-weight: 800; font-size: 12px; color: #a9b5d3; opacity: .8; }
#versao:empty { display: none; }
.cartao-item.trancado { opacity: .6; filter: grayscale(.5); }

/* ---------- badge de nível novo ---------- */
.badge-nivel { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; display: flex; flex-direction: column; align-items: center; font-size: clamp(10px, 1.6vw, 18px); animation: bn-entra .75s cubic-bezier(.2, 1.6, .4, 1) both; }
.badge-nivel.sai { animation: bn-sai .7s ease-in forwards; }
@keyframes bn-entra { 0% { transform: translate(-50%, -50%) scale(0) rotate(-25deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes bn-sai { to { transform: translate(-50%, -80%) scale(1.25); opacity: 0; } }
.bn-raios { position: absolute; top: 5.5em; left: 50%; width: 26em; height: 26em; margin: -13em 0 0 -13em; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.55) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: bn-gira 6s linear infinite, bn-pulsa 1.2s ease-in-out infinite alternate; }
@keyframes bn-gira { to { rotate: 360deg; } }
@keyframes bn-pulsa { from { opacity: .7; } to { opacity: 1; } }
.bn-faiscas { position: absolute; top: 5.5em; left: 50%; }
.bn-faiscas i { position: absolute; width: .7em; height: .7em; margin: -.35em; border-radius: 50%; background: var(--c); box-shadow: 0 0 .8em var(--c);
  animation: bn-faisca var(--t) .25s ease-out both; }
@keyframes bn-faisca { from { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(0); opacity: 0; } }
.bn-emblema { position: relative; width: 11em; height: 11em; animation: bn-balanca 2.4s .8s ease-in-out infinite; filter: drop-shadow(0 .5em 1em rgba(0,0,0,.5)); }
@keyframes bn-balanca { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
.bn-borda, .bn-miolo, .bn-brilho { position: absolute; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.bn-borda { inset: 0; background: linear-gradient(160deg, #fff6b0, #ffd23f 35%, #c7861b 70%, #ffe27a); }
.bn-miolo { inset: .75em; background: radial-gradient(circle at 50% 30%, #8a5cff, #3b1d8f 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; }
.bn-rotulo { font-family: var(--fonte-t); font-size: 1.15em; color: #ffd23f; letter-spacing: .15em; text-shadow: 0 .1em 0 #1b1035; }
.bn-num { font-family: var(--fonte-t); font-size: 4.6em; line-height: .9; color: #fff; text-shadow: 0 .06em 0 #ffb13b, 0 .12em 0 #1b1035, 0 0 .4em rgba(255,210,63,.8); animation: bn-num .5s .45s cubic-bezier(.2, 2, .4, 1) both; }
@keyframes bn-num { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bn-estrelas { display: flex; gap: .2em; }
.bn-estrelas svg { width: 1.1em; height: 1.1em; color: #ffd23f; animation: bn-estrela .4s both; }
.bn-estrelas svg:nth-child(1) { animation-delay: .7s; } .bn-estrelas svg:nth-child(2) { animation-delay: .82s; width: 1.4em; height: 1.4em; } .bn-estrelas svg:nth-child(3) { animation-delay: .94s; }
@keyframes bn-estrela { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0); } }
.bn-brilho { inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 48%, transparent 60%); background-size: 250% 100%; animation: bn-brilho 1.6s .6s ease-in-out infinite; }
@keyframes bn-brilho { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.bn-faixa { position: relative; margin-top: -1.4em; padding: .35em 1.6em; background: linear-gradient(#ff5a4a, #c8261c); color: #fff; font-family: var(--fonte-t); font-size: 1.6em; text-shadow: 0 .08em 0 #6a0d08; box-shadow: 0 .3em .6em rgba(0,0,0,.4); animation: bn-faixa .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.bn-faixa::before, .bn-faixa::after { content: ''; position: absolute; top: .45em; width: 1.2em; height: 100%; background: #8f1810; z-index: -1; }
.bn-faixa::before { left: -.9em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.bn-faixa::after { right: -.9em; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
@keyframes bn-faixa { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bn-pers { margin-top: .5em; font-family: var(--fonte-t); font-size: 1.3em; color: #fff; text-shadow: var(--contorno); animation: bn-sobe .4s .6s both; }
.bn-libera { margin-top: .4em; display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; }
.bn-libera span { background: rgba(16,20,31,.85); border: 2px solid #ffd23f; color: #ffd23f; font-weight: 900; border-radius: 1em; padding: .2em .8em; animation: bn-sobe .4s calc(.85s + var(--i) * .12s) both; }
.bn-libera span::before { content: 'Liberou: '; color: #fff; font-weight: 700; }
@keyframes bn-sobe { from { transform: translateY(1em); opacity: 0; } to { transform: none; opacity: 1; } }
.bn-flash { position: fixed; inset: 0; z-index: 59; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(255,230,140,.6), transparent 60%); animation: bn-flash .7s ease-out forwards; }
@keyframes bn-flash { from { opacity: 1; } to { opacity: 0; } }