/* AJUSTES DE LAYOUT PEDIDOS PELO DONO (camada do coordenador; carregada DEPOIS do style.css).
   Cada bloco diz o pedido e a data. Para desfazer um ajuste, apague só o bloco dele. */

/* ── 14/11/2026 · Selo do valor de agora na carta ─────────────────────────────────────────────────────────
   Dono: "Esse símbolo tá cobrindo muito o personagem. A gente tem que dar um jeito de botar ele menor, para não
   ficar muito destacado. Diminui, bota em cima da carta, vê um jeito para ficar melhor."
   Antes: caixinha grande dentro do desenho, embaixo à esquerda, em TODA carta.
   Agora: (1) sai de cima do desenho e vira uma ABA pequena montada na borda de cima da carta, entre o custo e o tipo;
          (2) só aparece quando o valor MUDOU (subiu, desceu ou vai subir com a combinação); se está igual ao que
              está escrito na carta, não aparece nada, porque o número já está no texto. */
.carta .valor { left: 25%; right: auto; bottom: auto; top: 0; translate: 0 -64%; gap: 2px; z-index: 4; }
body.toque #mao .carta .valor { bottom: auto; }
.carta .chip-v { font-size: calc(var(--carta-h) * .05); line-height: 1.22; padding: 0 5px 1px; border-width: 1.5px;
  border-radius: 8px 8px 3px 3px; background: #170b26f5; box-shadow: 0 1px 3px #000a; }
.carta .chip-v.sobe { font-size: calc(var(--carta-h) * .056); box-shadow: 0 0 6px #49d13a80, 0 1px 3px #000a; }
.carta .chip-v:not(.sobe):not(.desce):not(:has(.vai)) { display: none; }
/* COMBINA e CUIDADO ficam um degrau acima, para não bater na aba */
.carta:has(.chip-v.sobe, .chip-v.desce, .chip-v .vai) .selos { margin-bottom: calc(var(--carta-h) * .052); }
/* na carta ampliada (toque no celular) a aba acompanha, um pouco maior para ler */
#cartaZoom .carta.zoom .chip-v { font-size: calc(var(--carta-h) * .058); }

/* ── 14/11/2026 · Teste 2: letra muito pequena nos selos da carta, no celular deitado ────────────────────────
   Antes: na carta pequena da mão o número de agora ficava com 6,6 px e o CUIDADO! / COMBINA com 7,7 px.
   Agora: piso de 10 px. No computador nada muda (lá a conta já passa de 10 px). */
.carta .chip-v { font-size: max(10px, calc(var(--carta-h) * .05)); }
.carta .chip-v.sobe { font-size: max(10.5px, calc(var(--carta-h) * .056)); }
.carta .selo-c { font-size: max(10px, calc(var(--carta-h) * .058)); }
#cartaZoom .carta.zoom .chip-v { font-size: max(11px, calc(var(--carta-h) * .058)); }

/* ── 14/11/2026 · Luta no celular deitado menos poluída (print do dono, tela de 800×369) ─────────────────────
   Dono: "Ficou muito poluído no celular. É muito pequenininho, quase não está vendo a luta." Pediu: carta uns 10% menor,
   ENCERRAR TURNO menor, a vida em cima do personagem e as informações do vilão pequenas, abrindo só quando a pessoa toca.
   Só vale no celular deitado (tela baixa). No computador nada muda. Para desfazer, apague este bloco inteiro. */
@media (max-height: 520px) {
  /* 1. cartas da mão ~10% menores (antes 34% da altura da tela; agora 30,6%) */
  :root { --carta-h: clamp(106px, 30.6vh, 153px); }

  /* 2. base: lados mais estreitos, ENCERRAR TURNO, bolinha de energia e Compra/Descarte menores */
  #base { height: calc(var(--carta-h) + 20px); padding: 0 10px 8px; }
  #ladoEsq, #ladoDir { width: 112px; gap: 7px; }
  #btnFim { font-size: 13px; line-height: 1.15; padding: 6px 10px; min-height: 44px; max-width: 112px; border-radius: 12px; }
  #energia { width: 66px; height: 66px; border-width: 3px; }
  #energia b { font-size: 28px; } #energia span { font-size: 12px; } #energia em { font-size: 9px; margin-top: 1px; }
  .pilha { padding: 2px 9px; font-size: 11px; border-radius: 10px; }
  .pilha b { font-size: 15px; margin-right: 4px; }

  /* 3. barra de cima numa linha só, mais baixa (o texto continua inteiro; o toque segue com 46 px pela regra do body.toque) */
  #topo { padding: 4px 8px; gap: 4px; flex-wrap: nowrap; }
  #topo .direita { gap: 4px; flex-wrap: nowrap; }
  #topo .btn.peq { font-size: 10.5px; padding: 3px 7px; border-radius: 9px; box-shadow: 0 3px 0 var(--bordo-esc), 0 5px 10px #0008; white-space: nowrap; }
  #topo .chip { font-size: 11px; padding: 2px 6px; border-radius: 9px; }
  .local { white-space: nowrap; } .local .selo, .local b { font-size: 11px; } .local .selo { padding: 1px 6px; margin-right: 5px; }
  #equipe { top: 36px; }

  /* 4. plaquinhas: nome e barra de vida compactos */
  .painel { width: 118px; }
  .painel .nome { font-size: 11px; line-height: 1.15; }
  .vida { height: 15px; margin-top: 1px; }
  .vida span.num { font-size: 11px; } .vida span.num small { font-size: 9px; }
  .linha { min-height: 0; gap: 3px; margin-top: 2px; }
  .marca { font-size: 10px; padding: 0 5px; }
  .pump { gap: 3px; margin-top: 2px; } .pump em { font-size: 10px; } .pump i { width: 9px; height: 9px; border-width: 1.5px; }

  /* 4b. informações do vilão: só ÍCONE e NÚMERO, lado a lado numa linha; o texto só aparece quando a pessoa toca */
  .painel .intento { font-size: 13px; padding: 1px 6px; gap: 3px; margin: 0 2px 2px; max-width: none; position: relative;
    vertical-align: middle; pointer-events: auto; cursor: pointer; border-radius: 9px; }
  .painel .intento small, .painel .intento em { display: none; }
  .painel .reacao { display: inline-flex; width: auto; max-width: none; left: auto; translate: none; margin: 0 2px 2px; padding: 1px 5px;
    vertical-align: middle; pointer-events: auto; cursor: pointer; border-radius: 9px; }
  .painel .reacao b { font-size: 12px; line-height: 1.25; }
  .painel .reacao span { display: none; }
  /* área de toque maior que o desenho (fica perto de 44 px de altura sem aumentar o ícone) */
  .painel .intento::after, .painel .reacao::after { content: ''; position: absolute; inset: -11px -3px; }
  /* ao tocar (ou passar o dedo/mouse): balãozinho com o texto, embaixo do ícone, sem empurrar a plaquinha */
  .painel .intento:is(:hover, :active) small,
  .painel:not(.mini) .reacao:is(:hover, :active) span {
    display: block; position: absolute; top: calc(100% + 4px); z-index: 20; width: max-content; max-width: 180px; min-width: 0;
    padding: 5px 9px; border-radius: 10px; background: #170b26f5; border: 2px solid var(--ouro, #f2b233); box-shadow: 0 6px 14px #000a;
    font: 800 12px/1.25 'Nunito', sans-serif; color: #fff; text-transform: none; text-align: left; white-space: normal; opacity: 1;
    -webkit-line-clamp: none; overflow: visible; letter-spacing: 0; }
  .painel.inimigo .intento:is(:hover, :active) small, .painel.inimigo .reacao:is(:hover, :active) span { right: 0; }
  .painel.heroi .intento:is(:hover, :active) small, .painel.heroi .reacao:is(:hover, :active) span { left: 0; }
}

/* ── 14/11/2026 · Segundo ajuste do dono: informações do vilão numa COLUNA no canto direito ───────────────────
   Dono: "As informações pequenas que estão em cima do life do vilão, você deixa na vertical, no canto direito, no
   cantinho da janela. Em cima dele só vai ficar o nome do vilão e o life."
   A coluna é feita pelo ajustes-de-layout.js (ele copia os ícones e põe a classe "ci-on" no body só no celular deitado).
   Sem o .js, vale o bloco anterior (ícones em cima do vilão). */
@media (max-height: 520px) {
  /* em cima do vilão: só nome, vida e as marcas pequenas embaixo da vida */
  body.ci-on .painel.inimigo .intento, body.ci-on .painel.inimigo .reacao, body.ci-on .painel.inimigo .noponto { display: none; }
  /* com 2+ vilões: o número colorido ao lado do nome, igual ao da coluna */
  .painel[data-ci] .nome::before { display: inline-block; min-width: 15px; height: 15px; margin-right: 4px; border-radius: 5px; background: var(--ci-cor);
    color: #fff; font: 400 11px/15px 'Anton', sans-serif; text-align: center; text-shadow: 0 1px 1px #0008; vertical-align: 1px; }
  .painel[data-ci="1"] { --ci-cor: #e0483a; } .painel[data-ci="2"] { --ci-cor: #2f8fe0; } .painel[data-ci="3"] { --ci-cor: #2bd66f; }
  .painel[data-ci="4"] { --ci-cor: #b45cff; } .painel[data-ci="5"] { --ci-cor: #ffc830; } .painel[data-ci="6"] { --ci-cor: #ff7ab0; }
  .painel[data-ci="1"] .nome::before { content: '1'; } .painel[data-ci="2"] .nome::before { content: '2'; } .painel[data-ci="3"] .nome::before { content: '3'; }
  .painel[data-ci="4"] .nome::before { content: '4'; } .painel[data-ci="5"] .nome::before { content: '5'; } .painel[data-ci="6"] .nome::before { content: '6'; }

  /* a coluna: encostada na borda direita, acima do ENCERRAR TURNO */
  #colunaInfo { position: absolute; right: max(6px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    z-index: 4; pointer-events: none; }
  #colunaInfo[hidden] { display: none; }
  #colunaInfo .ci-grupo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; border-radius: 12px;
    background: #0d0718b3; border: 1.5px solid color-mix(in srgb, var(--ci-cor) 70%, transparent); }
  #colunaInfo .ci-num { width: 18px; height: 16px; border-radius: 5px; background: var(--ci-cor); color: #fff; text-align: center;
    font: 400 11px/16px 'Anton', sans-serif; text-shadow: 0 1px 1px #0008; }
  #colunaInfo .ci-item { position: relative; pointer-events: auto; cursor: pointer; min-width: 40px; height: 34px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: #0d0718ee; border: 2px solid #ff7a55; color: #fff;
    font: 400 14px/1 'Anton', sans-serif; letter-spacing: .3px; text-shadow: 0 1px 2px #000; }
  #colunaInfo .ci-item::after { content: ''; position: absolute; inset: -5px -4px; } /* toque de 44 px */
  #colunaInfo .ci-item.def { border-color: #7cc0ff; } #colunaInfo .ci-item.buff { border-color: #9be070; }
  #colunaInfo .ci-item.area, #colunaInfo .ci-item.aviso { border-color: #ff3a2a; } #colunaInfo .ci-item.invocar { border-color: #ffd23a; } #colunaInfo .ci-item.mal { border-color: #b45cff; }
  #colunaInfo .ci-reacao { border-color: #ff9a3a; background: #2a0b1eee; font-size: 13px; }
  #colunaInfo .ci-reacao.usada { opacity: .45; filter: grayscale(.8); }
  #colunaInfo .ci-noponto { border-color: #fff3c0; background: #ffc830; }
  #colunaInfo .ci-grupo.alerta .ci-reacao:not(.usada) { border-color: #ff2a2a; background: #5a0b14f2; animation: reacaoAlerta .5s ease-in-out infinite; }
  #colunaInfo .ci-item i { position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #ffd05a;
    color: #2a1420; font: 900 10px/15px 'Nunito', sans-serif; font-style: normal; text-shadow: none; }
  /* balão do texto: à esquerda da coluna; fecha sozinho em 3 s ou ao tocar fora */
  .ci-balao { position: fixed; z-index: 41; max-width: min(240px, 50vw); padding: 7px 11px; border-radius: 10px; background: #170b26f5;
    border: 2px solid var(--ouro, #f2b233); color: #fff; font: 800 12.5px/1.3 'Nunito', sans-serif; white-space: pre-line; text-align: left;
    box-shadow: 0 6px 18px #000a; pointer-events: none; }
}