/* Jogo completo: o estilo do piloto aprovado + as peças novas do núcleo (provisórias até o dono aprovar). */
@import url('motor/estilo-do-piloto.css');

#hud.desligado * { pointer-events: none !important; }
#telas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#telas > * { pointer-events: auto; }

/* Topo: botões novos */
.btn.regra { background: linear-gradient(#5a3a10, #3a2408); }
.btn.pri { background: linear-gradient(#ffd05a, #e09a1a); color: #2a1420; box-shadow: 0 4px 0 #8a5a10, 0 8px 16px #0008; }
.btn.pri:active { box-shadow: 0 1px 0 #8a5a10; }

/* Vida: número inteiro e centralizado na barra (pedido do dono) */
.painel { width: 176px; }
.vida { height: 19px; }
.vida span.num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px;
  font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.vida span.num small { font-size: 10px; opacity: .8; }
.marca { white-space: nowrap; }
.intento em { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-size: 11px; color: var(--ouro-claro); }
.intento.area { border-color: #ff3a2a; } .intento.invocar { border-color: #ffd23a; } .intento.mal { border-color: #b45cff; }
/* balão da intenção mais largo e baixo: texto em no máximo 2 linhas; pode passar um pouco da largura da plaquinha (pedido das arenas) */
.intento.aviso { border-color: #ff2a2a; background: #4a0b1eee; }
.painel .intento { max-width: 200px; margin-left: -44px; margin-right: -44px; white-space: nowrap; }
.painel .intento small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; text-align: left; min-width: 90px; max-width: 150px; }
#unidades.apertado .painel .intento { margin-left: 0; margin-right: 0; }
.flut.ruim { color: #d68aff; font-size: 24px; }
.painel.chefao .nome { font-size: 17px; color: var(--ouro-claro); }
.painel.auxiliar { width: 128px; } .painel.auxiliar .nome { font-size: 12px; }
/* Tela cheia (4 contra 4): plaquinhas compactas — nome menor, status só com ícone e número, texto do intento numa linha */
#unidades.apertado .painel { width: 132px; }
#unidades.apertado .painel.auxiliar { width: 108px; }
#unidades.apertado .painel .nome { font-size: 12px; }
#unidades.apertado .marca .nm { display: none; }
#unidades.apertado .pump em { display: none; }
#unidades.apertado .intento small { display: block; max-width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
body.mirandoAliado .alvo.heroi { display: block; border: 3px dashed #9be070; background: #9be07014; animation: pulsa .8s infinite; }
body.mirando .alvo.heroi { display: none; }

/* Pilhas viram botões (abrem o baralho) */
button.pilha { font: inherit; color: inherit; cursor: pointer; }
button.pilha:hover { filter: brightness(1.25); }
#btnFim.pulsa { animation: pulsaFim 1s ease-in-out infinite; }
@keyframes pulsaFim { 50% { box-shadow: 0 4px 0 var(--bordo-esc), 0 0 26px var(--ouro); } }

/* Custo na carta: mais barata (verde) ou mais cara (vermelho) neste momento */
.carta .custo.barata { color: #1e7a12; }
.carta .custo.cara { color: #b3122e; }
.carta.t-mal .tipo { background: #3a1a4a; }
.carta.t-pod .tipo { background: #c07a10; }
.carta.r-maldicao { filter: saturate(.6); }

/* Abas da equipe (2+ heróis) */
#equipe { position: absolute; top: 58px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
#equipe .aba.on { background: linear-gradient(#ffd05a, #e09a1a); color: #2a1420; }
#equipe .aba.fora { opacity: .4; }

/* Janelas do núcleo */
.tela-fundo { position: fixed; inset: 0; display: grid; place-items: center; background: #0a0514cc; padding: 16px; animation: aparece .18s ease-out; }
.tela-fundo.saindo { opacity: 0; transition: opacity .18s; }
@keyframes aparece { from { opacity: 0; } }
.janela { background: linear-gradient(#2a1d45, #1a1030); border: 3px solid var(--ouro); border-radius: 18px; padding: 22px 26px; text-align: center;
  max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px #000c; }
.janela.larga { max-width: 980px; }
.janela h2 { font-family: 'Anton'; font-size: clamp(26px, 4vw, 38px); margin: 0; color: var(--ouro-claro); letter-spacing: 1px; text-shadow: 0 4px 0 var(--bordo-esc); }
.janela .sub { margin: 6px 0 14px; font-weight: 800; opacity: .92; font-size: 16px; }
.janela .corpo { margin: 8px 0 16px; }
.janela .botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.janela .botoes .btn { font-size: 16px; padding: 10px 18px; min-height: 44px; }
.janela p, .janela li { font-size: 16px; line-height: 1.45; }
.janela .esq { text-align: left; }
.fim.vitoria .janela { border-color: #9be070; } .fim.derrota .janela { border-color: #ff5a4a; }
.resumo { text-align: left; display: inline-block; margin: 0; padding-left: 20px; }

.grade-cartas { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; --carta-h: clamp(170px, 34vh, 290px); padding: 14px 0 4px; }
.grade-cartas .carta { margin: 0; --rot: 0deg; --dy: 0; }
.grade-cartas .carta.escolhivel { cursor: pointer; }
.grade-cartas .carta.escolhivel:hover { transform: translateY(-10px) scale(1.07); }
.grade-cartas.pequenas { --carta-h: clamp(150px, 26vh, 210px); gap: 12px; max-height: 58vh; overflow: auto; }
.grade-cartas.pequenas .carta:hover { transform: scale(1.05); }
.grade-cartas .vazio { opacity: .7; font-weight: 800; }
.abas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.abas .btn.on { background: linear-gradient(#ffd05a, #e09a1a); color: #2a1420; }

.lista-pocoes { display: grid; gap: 10px; }
.btn.pocao { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; text-align: left; text-transform: none; font-family: 'Nunito'; padding: 10px 14px;
  border-color: var(--c); }
.btn.pocao .ico { grid-row: span 2; font-size: 30px; align-self: center; }
.btn.pocao b { font-family: 'Anton'; font-size: 17px; letter-spacing: .5px; }
.btn.pocao small { font-weight: 800; font-size: 14px; }

.grade-herois { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ficha-heroi { display: grid; gap: 6px; padding: 14px; text-transform: none; font-family: 'Nunito'; text-align: left; border-color: #ffffff44;
  background: linear-gradient(#ffffff10, #00000040), var(--c); }
.ficha-heroi.on { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro), 0 8px 16px #0008; }
.ficha-heroi b { font-family: 'Anton'; font-size: 22px; letter-spacing: .5px; }
.ficha-heroi small { font-weight: 800; font-size: 14px; } .ficha-heroi em { font-style: normal; font-weight: 900; color: var(--ouro-claro); }

.aviso-sala { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: 'Anton'; font-size: clamp(30px, 6vw, 64px);
  color: var(--ouro-claro); text-shadow: 0 4px 0 var(--bordo-esc), 0 0 30px #000; pointer-events: none; animation: faixa 1.3s ease-out forwards; }
#cortina { position: fixed; inset: 0; background: #05020c; z-index: 55; opacity: 0; pointer-events: none; transition: opacity .38s; }
#cortina.fechada { opacity: 1; pointer-events: auto; }

/* Celular deitado (tela baixa): tudo um pouco menor, sem texto minúsculo */
@media (max-height: 520px) {
  :root { --carta-h: clamp(118px, 34vh, 170px); }
  #topo { padding: 6px 10px; gap: 6px; }
  .btn.peq { font-size: 12px; padding: 5px 9px; }
  .chip { font-size: 12px; padding: 4px 8px; }
  .local { font-size: 12px; }
  #equipe { top: 44px; }
  .painel { width: 140px; } .painel .nome { font-size: 12px; }
  .grade-cartas { --carta-h: clamp(140px, 44vh, 220px); }
  .janela { padding: 14px 16px; } .janela .sub { font-size: 14px; }
  /* topo numa linha só: some o "Metrô Subterrâneo" (fica o selo e o nome da sala) e as legendas dos chips */
  .local { font-size: 0; } .local .selo, .local b { font-size: 12px; } .local b { margin-left: 0; }
  .chip i { display: none; }
  #topo .btn.peq { font-size: 11px; padding: 5px 8px; }
  /* intento do vilão: número grande e o texto numa linha (o resto aparece no "Como jogar"/regra) */
  .intento { font-size: 15px; padding: 2px 8px; }
  .intento small { max-width: 132px; overflow: hidden; font-size: 10px; }
  /* até 2 linhas: numa linha só o texto saía cortado ("8 NELE E 6 NO VILÃO D…", teste 2) */
  .painel .intento small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 132px; white-space: normal; line-height: 1.1; }
  .painel.auxiliar { width: 112px; }
  /* celular deitado com a tela cheia (4 contra 4): plaquinha bem pequena; o intento fica só com ícone, número e alvo */
  #unidades.apertado .painel { width: 104px; }
  #unidades.apertado .painel.auxiliar { width: 92px; }
  #unidades.apertado .painel .nome { font-size: 10px; }
  #unidades.apertado .vida { height: 14px; }
  #unidades.apertado .vida span.num { font-size: 11px; }
  #unidades.apertado .linha { min-height: 0; gap: 2px; margin-top: 2px; }
  #unidades.apertado .marca { font-size: 9px; padding: 0 4px; }
  #unidades.apertado .pump { gap: 2px; margin-top: 2px; }
  #unidades.apertado .pump i { width: 7px; height: 7px; border-width: 1px; }
  #unidades.apertado .intento { font-size: 13px; padding: 1px 6px; gap: 3px; max-width: 104px; }
  #unidades.apertado .intento small { display: none; }
  #unidades.apertado .intento em { font-size: 9px; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}

/* ───── Modo de toque (celular, tablet, tela baixa): a carta da mão mostra só custo, arte e nome; tocar AMPLIA ─────
   (pedido do teste 1; visual provisório até o dono aprovar). No computador com mouse nada muda. */
body.toque #mao .carta .texto, body.toque #mao .carta .tipo { display: none; }
body.toque #mao .carta .arte { height: 60%; }
body.toque #mao .carta .nome { top: auto; bottom: 5%; height: 32%; font-size: max(12px, calc(var(--carta-h) * .085)); line-height: 1.05; padding: 0 3px; }
body.toque #mao .carta:hover:not(.sel) { transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)); z-index: auto; box-shadow: 0 0 0 2px #5a3a00, 0 10px 18px #000a; }
body.toque #mao .carta.arrastando { transition: none; z-index: 30; }
#cartaZoom { position: fixed; z-index: 45; left: 50%; top: 50%; transform: translate(-50%, -54%); display: flex; align-items: center; gap: 16px; pointer-events: none; }
#cartaZoom > * { pointer-events: auto; }
#cartaZoom.lado { left: 32%; } /* carta que pede alvo: vai para a esquerda e deixa os vilões livres para o toque */
#cartaZoom .carta.zoom, #cartaZoom .carta.zoom:hover { --carta-h: min(74vh, 300px); margin: 0; transform: none; cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 40px #000, 0 16px 30px #000c; }
#cartaZoom .carta.zoom .texto { font-size: max(15px, calc(var(--carta-h) * .052)); }
#cartaZoom .carta.zoom .nome { font-size: max(16px, calc(var(--carta-h) * .066)); }
#cartaZoom .carta.zoom .tipo { font-size: max(12px, calc(var(--carta-h) * .052)); }
#cartaZoom .acoes { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 150px; }
#cartaZoom .btn { min-height: 48px; }
#cartaZoom .btn.jogar { font-size: 22px; min-height: 64px; }
#cartaZoom .motivo, #cartaZoom .escolher { margin: 0; padding: 10px 12px; border-radius: 12px; background: #0d0718ee; border: 2px solid var(--ouro);
  font-weight: 900; font-size: 15px; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px #000; }
#cartaZoom .motivo { border-color: #ff6a6a; }
/* área de toque de pelo menos 44 px nos botões da luta (o desenho continua do mesmo tamanho) */
body.toque #topo .btn.peq, body.toque .pilha, body.toque #equipe .btn { position: relative; }
body.toque #topo .btn.peq::after, body.toque .pilha::after, body.toque #equipe .btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 46px); transform: translateY(-50%); }
/* "Encerrar turno" tocado durante a animação: fica esperando ("Aguarde…") e encerra assim que a carta terminar */
#btnFim.espera { filter: saturate(.55) brightness(.95); animation: none; }
/* Poções (0): apagado, mas o toque explica de onde vêm as poções */
#btnPocoes.vazio { filter: grayscale(.7) brightness(.72); }
/* botão que não pode agora: treme e mostra um balão curto colado nele (hud.balao) */
.btn.nega { animation: btnNega .26s 2; }
@keyframes btnNega { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.balao-hud { position: fixed; z-index: 40; max-width: min(300px, 80vw); padding: 7px 12px; border-radius: 10px; background: #170b26f5; border: 2px solid var(--ouro, #f2b233);
  color: #fff; font-weight: 800; font-size: 14px; line-height: 1.25; text-align: center; box-shadow: 0 6px 18px #000a; pointer-events: none; animation: balaoHud .18s ease-out; }
@keyframes balaoHud { from { opacity: 0; translate: 0 -6px; } }

/* ───── Mão viva (item 15 do polimento, 14/11; visual provisório até o dono aprovar) ─────
   Cada carta mostra o que vale AGORA (⚔ dano, 🛡 bloqueio): verde com ▲ quando subiu, vermelho com ▼ quando caiu. */
.carta .valor { position: absolute; left: 6%; bottom: 50.5%; display: flex; gap: 3px; z-index: 2; pointer-events: none; }
.carta .chip-v { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 7px; background: #0d0718e8; border: 2px solid #ffffff59;
  font-family: 'Anton', 'Arial Black', sans-serif; font-size: calc(var(--carta-h) * .075); line-height: 1.3; color: #fff; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.carta .chip-v b { font-weight: 400; display: inline-block; }
.carta .chip-v i { font-style: normal; font-size: .6em; }
.carta .chip-v small { font-size: .7em; opacity: .9; }
.carta .chip-v u { text-decoration: none; opacity: .85; font-size: .8em; margin: 0 1px; }
.carta .chip-v.sobe { color: #8dff5a; border-color: #49d13a; box-shadow: 0 0 10px #49d13aaa; font-size: calc(var(--carta-h) * .088); }
.carta .chip-v.desce { color: #ff8a7a; border-color: #e0483a; }
.carta .chip-v .vai { color: #8dff5a; font-size: 1.2em; text-shadow: 0 0 8px #2bd66f, 0 1px 1px #000; }
body.toque #mao .carta .valor { bottom: 38.5%; }
/* o valor mudou: pulso de brilho na carta e o número novo "pula" */
.carta.pulso::before { content: ''; position: absolute; inset: -6px; border-radius: 15px; pointer-events: none; z-index: 4; opacity: 0;
  box-shadow: 0 0 0 4px #8dff5a, 0 0 30px #8dff5a; animation: cartaPulso .9s ease-out both; animation-delay: var(--pulso-atraso, 0ms); }
.carta.pulso.desce::before { box-shadow: 0 0 0 4px #ff8a7a, 0 0 30px #ff8a7a; }
@keyframes cartaPulso { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.14); } }
.carta.pulso .chip-v b.n { animation: numeroPula .7s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--pulso-atraso, 0ms); }
@keyframes numeroPula { 0% { transform: none; } 30% { transform: translateY(-55%) scale(1.9); } 62% { transform: translateY(0) scale(.9); } 100% { transform: none; } }
/* combinação valendo agora (carta.ativa): brilho forte */
.carta.combo-on { animation: comboOn 1.1s ease-in-out infinite; }
.carta.combo-on.sel { animation: none; }
.carta.combo-on.treme { animation: treme .3s; }
@keyframes comboOn { 0%, 100% { box-shadow: 0 0 0 3px #2bd66f, 0 0 14px #2bd66f, 0 10px 18px #000a; } 50% { box-shadow: 0 0 0 3px #c8ff8a, 0 0 34px #2bd66f, 0 0 60px #2bd66f88, 0 10px 18px #000a; } }
/* selos em cima da carta: COMBINA (fica mais forte depois da carta que você está olhando) e CUIDADO! (dispara a reação de um vilão) */
.carta .selos { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; margin-bottom: 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 3; pointer-events: none; }
.carta .selo-c { padding: 0 8px; border-radius: 7px; border: 2px solid #eafff0; color: #fff; box-shadow: 0 2px 6px #0009; white-space: nowrap; letter-spacing: 1px;
  font: 400 calc(var(--carta-h) * .058)/1.5 'Anton', 'Arial Black', sans-serif; text-shadow: 0 1px 1px #0008; animation: seloEntra .2s ease-out; }
.carta .selo-c.combina { background: #12a150; }
.carta .selo-c.cuidado { background: #c41e2e; border-color: #ffe3e3; pointer-events: auto; }
@keyframes seloEntra { from { opacity: 0; transform: translateY(6px) scale(.8); } }
#mao .carta.combina:not(:hover):not(.sel) { transform: translateY(calc(var(--dy, 0px) - var(--carta-h) * .07)) rotate(var(--rot, 0deg)); z-index: 5;
  box-shadow: 0 0 0 3px #2bd66f, 0 0 22px #2bd66f, 0 10px 18px #000a; }
#cartaZoom .cuidado-txt { margin: 0; padding: 8px 10px; border-radius: 12px; background: #4a0b14f0; border: 2px solid #ff6a6a; font-weight: 900; font-size: 14px; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px #000; }
/* carta ampliada (toque): lista escrita do que ela deixa mais forte, porque a carta grande tampa parte da mão */
#cartaZoom .combina-txt { margin: 0; padding: 6px 10px 7px; border-radius: 12px; background: #0b2a18f2; border: 2px solid #2bd66f; font-weight: 900; font-size: 13px; line-height: 1.25; text-align: left; text-shadow: 0 1px 2px #000; }
#cartaZoom .combina-txt em { display: block; font-style: normal; font-family: 'Anton', 'Arial Black', sans-serif; font-weight: 400; letter-spacing: 1px; color: #8dff5a; font-size: 13px; }
#cartaZoom .combina-txt span { display: block; }
#cartaZoom .combina-txt b { color: #8dff5a; font-size: 1.15em; }
/* "COMBO! +5": texto grande perto do herói quando a carta cobra o bônus */
.combo-grande { position: absolute; transform: translate(-50%, -50%) rotate(-6deg); font-family: 'Anton', 'Arial Black', sans-serif; font-style: italic; text-align: center; line-height: .95;
  white-space: nowrap; pointer-events: none !important; z-index: 6; animation: comboGrande 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.combo-grande b { display: block; font-weight: 400; font-size: clamp(34px, 5.4vw, 72px); letter-spacing: 2px; color: #fff3b0; -webkit-text-stroke: 2px #b3122e; text-shadow: 4px 5px 0 #7a1230, 0 0 30px #ff7a1a; }
.combo-grande span { display: block; font-size: clamp(30px, 4.6vw, 62px); color: #d6ff9a; -webkit-text-stroke: 2px #1e5a12; text-shadow: 3px 4px 0 #1e5a12, 0 0 20px #7dff4a; }
@keyframes comboGrande { 0% { opacity: 0; scale: 2.2; } 14% { opacity: 1; scale: .92; } 24% { scale: 1.08; } 34% { scale: 1; } 78% { opacity: 1; translate: 0 0; } 100% { opacity: 0; scale: 1.05; translate: 0 -30px; } }

/* ───── Selo de reação do vilão (item 9 do polimento, 14/11): "se você fizer X, ele faz Y", junto da intenção ───── */
.painel .reacao { display: flex; align-items: center; gap: 5px; width: max-content; max-width: 212px; margin: 0 0 4px; padding: 2px 8px; border-radius: 9px;
  position: relative; left: 50%; translate: -50% 0; background: #2a0b1eee; border: 2px solid #ff9a3a; color: #ffe9c8; font-weight: 900; font-size: 11px; line-height: 1.15;
  text-align: left; text-shadow: 0 1px 2px #000; }
.painel .reacao b { font-size: 14px; flex: none; font-weight: 400; }
.painel .reacao span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.painel .reacao.usada { opacity: .45; filter: grayscale(.8); }
.painel.alerta .reacao:not(.usada) { border-color: #ff2a2a; background: #5a0b14f2; color: #fff; animation: reacaoAlerta .5s ease-in-out infinite; }
.painel.reagiu .reacao { animation: reacaoDisparou .7s ease-out; }
@keyframes reacaoAlerta { 50% { box-shadow: 0 0 16px #ff2a2a; scale: 1.06; } }
@keyframes reacaoDisparou { 0% { scale: 1; } 25% { scale: 1.35; box-shadow: 0 0 26px #ffb030; background: #a8380a; } 100% { scale: 1; } }
#unidades.apertado .painel .reacao { max-width: 132px; font-size: 10px; padding: 1px 6px; }
#unidades.apertado .painel .reacao span { -webkit-line-clamp: 1; }
/* Plaquinha COMPACTA (classe "mini"; teste 2): o núcleo usa quando a plaquinha inteira não cabe em cima da cabeça nem de lado
   (tela cheia no celular deitado). Fica só o essencial: intenção com ícone e número, selos só com o ícone (tocar abre o texto). */
.painel.mini { width: 116px; }
.painel.mini .nome { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel.mini .intento { font-size: 13px; padding: 1px 6px; gap: 3px; margin-left: 0; margin-right: 0; max-width: 116px; }
.painel.mini .intento small { display: none; }
.painel.mini .intento em { font-size: 9px; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.painel.mini .reacao { display: inline-flex; width: auto; left: auto; translate: none; margin: 0 1px 2px; padding: 0 5px; vertical-align: top; pointer-events: auto; cursor: pointer; }
.painel.mini .reacao span { display: none; }
.painel.mini .vida { height: 14px; }
.painel.mini .linha { min-height: 0; gap: 2px; margin-top: 2px; }
.painel.mini .marca { font-size: 9px; padding: 0 4px; } .painel.mini .marca .nm { display: none; }
.painel.mini .pump { gap: 2px; margin-top: 2px; } .painel.mini .pump em { display: none; } .painel.mini .pump i { width: 8px; height: 8px; border-width: 1px; }
@media (max-height: 520px) {
  /* celular deitado: o selo continua com 2 linhas (a parte "ele faz Y" não pode ser cortada) */
  .painel .reacao { max-width: 190px; font-size: 10px; padding: 1px 6px; margin-bottom: 2px; line-height: 1.1; }
  .painel .reacao b { font-size: 12px; }
  #unidades.apertado .painel .reacao { max-width: 104px; }
  #cartaZoom .combina-txt { font-size: 12px; padding: 4px 8px 5px; } #cartaZoom .cuidado-txt { font-size: 12px; padding: 5px 8px; }
  .combo-grande b { font-size: clamp(26px, 5vw, 44px); } .combo-grande span { font-size: clamp(22px, 4.4vw, 38px); }
}

/* ───── Golpe em dupla "LEVANTA E CORTA" (14/11, nucleo/dupla.js) ───── */
/* selo NO PONTO na plaquinha do vilão (o anel no chão e a seta em cima são 3D) */
.painel .noponto { width: max-content; margin: 0 auto 4px; padding: 1px 10px; border-radius: 9px; background: #ffc830; color: #2a1600; border: 2px solid #fff3c0;
  font: 400 14px/1.35 'Anton', 'Arial Black', sans-serif; letter-spacing: 1px; box-shadow: 0 0 14px #ffc830aa; animation: noPonto .7s ease-in-out infinite alternate; }
@keyframes noPonto { to { box-shadow: 0 0 26px #ffd84a; scale: 1.07; } }
.painel.mini .noponto { font-size: 11px; padding: 0 6px; }
/* marca CORTA! na carta de ataque de quem pode fechar a dupla (mesmo jeito do COMBINA) */
.carta .selo-c.corta { background: #e08a00; border-color: #fff3c0; color: #fff; }
#mao .carta.corta:not(:hover):not(.sel) { transform: translateY(calc(var(--dy, 0px) - var(--carta-h) * .07)) rotate(var(--rot, 0deg)); z-index: 5;
  box-shadow: 0 0 0 3px #ffc830, 0 0 22px #ffc830, 0 10px 18px #000a; }
/* letreiro DUPLA! no meio da tela */
.dupla-letreiro { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) rotate(-5deg); text-align: center; font-family: 'Anton', 'Arial Black', sans-serif;
  font-style: italic; line-height: .95; white-space: nowrap; pointer-events: none !important; z-index: 7; animation: duplaLetreiro 1.15s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.dupla-letreiro b { display: block; font-weight: 400; font-size: clamp(46px, 8vw, 104px); letter-spacing: 3px; color: #ffe066; -webkit-text-stroke: 3px #7a2a00; text-shadow: 5px 6px 0 #7a2a00, 0 0 36px #ffb000; }
.dupla-letreiro span { display: block; margin-top: 4px; font-style: normal; font-size: clamp(14px, 2vw, 22px); letter-spacing: 1px; color: #fff; text-shadow: 0 2px 3px #000, 0 0 10px #000; }
@keyframes duplaLetreiro { 0% { opacity: 0; scale: 2.4; } 15% { opacity: 1; scale: .9; } 26% { scale: 1.06; } 36% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .dupla-letreiro, .painel .noponto { animation: none; } }
@media (max-height: 520px) { .dupla-letreiro { top: 30%; } .dupla-letreiro b { font-size: clamp(34px, 7vw, 60px); } }
/* tela de prêmio: "Combina com: ..." embaixo da carta */
.premio-opcao { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.premio-opcao .combina-com { margin: 0; max-width: 190px; padding: 4px 9px; border-radius: 10px; background: #0b2a18f2; border: 2px solid #2bd66f; color: #eafff0;
  font-size: 12px; font-weight: 800; line-height: 1.25; text-align: center; }
.premio-opcao .combina-com b { color: #8dff5a; }