/* ==========================================================================
   Duelo da Zoeira · css/arena.css
   Tabuleiro do duelo: placar, campo, mão, fases, painel lateral e
   as animações (ataques, armadilhas, dano...).
   ========================================================================== */

.tela-arena {
  padding: .8rem 0 1.5rem;
}

.arena {
  /* Largura de uma carta no campo: o maior tamanho que cabe na largura e na altura da tela.
     No PC: coluna dos jogadores + campo + fases + painel lateral, sem o menu do site. */
  --larg-jog: 230px;
  --larg-lat: 360px;
  --cw: min(calc((100vw - var(--larg-jog) - var(--larg-lat) - 150px) / 7.9), calc((100vh - 64px) / 8.7), 150px);
  --ch: calc(var(--cw) * 1.4576);
  --gap: calc(var(--cw) * .11);
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 .8rem;
}

/* Acabamento da arena; mantém intactos o chat, os sons e a barra da carta. */
.arena .arena__corpo { gap: clamp(.6rem, 1.2vw, 1.2rem); }
.arena .placar { border-color: #9b7b46; background: linear-gradient(90deg, #17232a, #26343a 50%, #17232a); box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px rgba(255,235,177,.2); }
.arena .campo { border-color: rgba(224,180,74,.55); background: radial-gradient(ellipse at 50% 50%, rgba(48,102,105,.18), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 6px, transparent 6px 14px), #0a1419; box-shadow: inset 0 0 42px rgba(0,0,0,.65), 0 12px 30px rgba(0,0,0,.3); }
.arena .zona--vazia { border-color: rgba(231,199,127,.42); }

/* Durante o duelo o menu e o rodapé do site somem (no celular também: o botão "Ir ao site" volta) */
body.em-duelo {
  --altura-nav: 0px;
}

body.em-duelo > header,
body.em-duelo .rodape {
  display: none;
}

body.em-duelo .tela-arena {
  padding: .6rem 0;
}

/* Mão do oponente (só no celular) e botão do chat (só quando o chat fica embaixo) */
.mao-op,
.botao-chat-celular {
  display: none;
}

/* ---------- Placar ---------- */
.placar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
    linear-gradient(90deg, #2b2f36, #3d434d 50%, #2b2f36);
  border: 2px solid #5a606b;
  border-radius: 0 0 1.2rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), inset 0 -3px 0 rgba(0, 0, 0, .35);
}

.jogador-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.jogador-info--op {
  flex-direction: row-reverse;
  text-align: right;
}

.jogador-info__nivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ouro-claro);
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.jogador-info__nivel strong {
  font-size: 1.35rem;
}

.jogador-info__cartas {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .15rem .45rem;
  color: #cfd5de;
  font-size: .6rem;
  line-height: 1.1;
  background: rgba(0, 0, 0, .35);
  border-radius: .35rem;
}

.jogador-info__cartas strong {
  color: #fff;
  font-size: 1rem;
}

.jogador-info__meio {
  flex: 1;
  min-width: 0;
}

.jogador-info__nome {
  overflow: hidden;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jogador-info__nome .tag-cla {
  color: var(--ouro);
}

.barra-pl {
  position: relative;
  height: 1.15rem;
  margin-top: .2rem;
  overflow: hidden;
  background: #111;
  border: 1px solid #000;
  border-radius: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
}

.barra-pl__cheio {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 100%);
  background: linear-gradient(180deg, #5cf08f, #16a34a);
  border-radius: 1rem;
  transition: width .6s ease;
}

.jogador-info--op .barra-pl__cheio {
  inset: 0 0 0 auto;
}

.barra-pl[data-perigo="true"] .barra-pl__cheio {
  background: linear-gradient(180deg, #ff8a7a, #d11d2a);
}

.barra-pl__valor {
  position: relative;
  display: block;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

.jogador-info__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--ouro);
  border-radius: .4rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

.jogador-info[data-vez="true"] .jogador-info__avatar {
  box-shadow: 0 0 0 3px #fff3, 0 0 16px 4px rgba(255, 215, 90, .8);
  animation: pulsar-vez 1.6s ease-in-out infinite;
}

@keyframes pulsar-vez {
  50% { box-shadow: 0 0 0 3px #fff5, 0 0 24px 8px rgba(255, 215, 90, .5); }
}

.relogio {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  padding: .2rem .6rem;
  color: #fff;
  line-height: 1.05;
  background: radial-gradient(ellipse at 50% 0%, #4a505b, #22262c);
  border: 2px solid #6b717c;
  border-radius: .6rem;
}

.relogio__tempo {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.relogio[data-alerta="true"] .relogio__tempo {
  color: #ff5a5a;
  animation: piscar 0.8s steps(2) infinite;
}

@keyframes piscar {
  50% { opacity: .35; }
}

.relogio__turno {
  color: #cfd5de;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.relogio__vez {
  max-width: 120px;
  overflow: hidden;
  color: var(--ouro-claro);
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Balão de provocação */
.balao {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 30;
  max-width: 260px;
  padding: .45rem .7rem;
  color: #1b1208;
  font-size: .85rem;
  font-weight: 700;
  background: #fff8e0;
  border-radius: .8rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  animation: balao 3.5s ease forwards;
  pointer-events: none;
}

.jogador-info--op .balao {
  right: 0;
  left: auto;
}

@keyframes balao {
  0% { opacity: 0; transform: translateY(-6px) scale(.9); }
  10%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* ---------- Corpo: jogadores + tabuleiro + lateral ---------- */
.arena__corpo {
  display: grid;
  grid-template-columns: var(--larg-jog) auto var(--larg-lat);
  grid-template-areas: "jog tab lat";
  justify-content: center;
  align-items: start;
  gap: 1rem;
}

.coluna-jogadores { grid-area: jog; }
.tabuleiro { grid-area: tab; }
.lateral { grid-area: lat; }

.ferramentas-arena {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.ferramentas-arena .btn {
  flex: 1;
  white-space: nowrap;
}

.campo-e-fases {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabuleiro {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.aviso-arena {
  width: 100%;
  max-width: calc(var(--cw) * 7 + var(--gap) * 6 + 2rem);
  margin-bottom: .5rem;
  padding: .45rem .8rem;
  color: #ffe2a8;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  background: rgba(224, 120, 40, .15);
  border: 1px solid rgba(224, 140, 60, .45);
  border-radius: .5rem;
}

.campo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, var(--cw));
  grid-template-rows: repeat(2, var(--ch)) calc(var(--gap) * 2.2) repeat(2, var(--ch));
  gap: var(--gap);
  padding: calc(var(--gap) * 1.5);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(214, 120, 40, .1), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .015) 0 6px, transparent 6px 14px),
    rgba(10, 6, 4, .6);
  border: 1px solid rgba(224, 180, 74, .25);
  border-radius: 1rem;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}

/* ---------- Skin de campo (cosmético) ----------
   Cada metade tem o fundo da skin do dono (a do oponente vem girada) e cada zona a
   peça da arte; com carta na zona, a carta fica por cima. */
.campo__fundo {
  position: absolute;
  right: 0;
  left: 0;
  height: 50%;
  overflow: hidden;
  background: center / cover no-repeat;
  border-radius: inherit;
  pointer-events: none;
}

.campo__fundo--op {
  top: 0;
  transform: rotate(180deg);
}

.campo__fundo--eu {
  bottom: 0;
}

.campo__fundo[data-skin="arcano"] {
  background-image: url("../img/cosmeticos/campo-arcano-fundo.webp");
}

.campo__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(190, 110, 255, .45), transparent 62%);
  opacity: .4;
  animation: campo-pulso 5s ease-in-out infinite;
}

@keyframes campo-pulso {
  0%, 100% { opacity: .35; }
  46% { opacity: .85; }
  48% { opacity: 1; }
  50% { opacity: .55; }
  52% { opacity: .95; }
}

.zona[data-skin] {
  isolation: isolate;
}

.zona[data-skin]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--peca) center / 100% 100% no-repeat;
  border-radius: inherit;
  filter: drop-shadow(0 0 4px rgba(170, 100, 255, .45));
  pointer-events: none;
}

.zona--op[data-skin]::before {
  transform: rotate(180deg);
}

.zona--vazia[data-skin] {
  background: none;
  border-color: transparent;
  opacity: 1;
}

.zona[data-skin] > .zona__rotulo {
  display: none;
}

.zona[data-skin="arcano"][data-zona="monstros"] { --peca: url("../img/cosmeticos/campo-arcano-monstro.webp"); }
.zona[data-skin="arcano"][data-zona="magias"] { --peca: url("../img/cosmeticos/campo-arcano-magia.webp"); }
.zona[data-skin="arcano"][data-zona="campo"] { --peca: url("../img/cosmeticos/campo-arcano-campo.webp"); }
.zona[data-skin="arcano"][data-zona="cemiterio"] { --peca: url("../img/cosmeticos/campo-arcano-cemiterio.webp"); }
.zona[data-skin="arcano"][data-zona="deck"] { --peca: url("../img/cosmeticos/campo-arcano-deck.webp"); }
.zona[data-skin="arcano"][data-zona="extra"] { --peca: url("../img/cosmeticos/campo-arcano-extra.webp"); }

.pilha-campo .carta-verso[data-skin] .carta-verso__corpo {
  box-shadow: inset 0 0 0 .9cqw #c9a2ff, inset 0 0 0 1.8cqw rgba(16, 6, 34, .85), 2px 2px 0 #1a0b2e, 4px 4px 0 #0e0618;
}

/* Moldura (cosmético) no placar: o brilho da vez vai na moldura */
.jogador-info[data-vez="true"] .com-moldura__moldura {
  filter: drop-shadow(0 0 6px rgba(255, 215, 90, .95));
}

@media (prefers-reduced-motion: reduce) {
  .campo__fundo::after {
    animation: none;
  }
}

.campo__divisa {
  grid-column: 1 / -1;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224, 180, 74, .55), transparent);
}

.zona {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * .06);
}

.zona--vazia {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)),
    var(--cor-zona);
  border: 2px solid rgba(255, 255, 255, .08);
  opacity: .55;
}

.zona[data-zona="monstros"] { --cor-zona: rgba(160, 100, 50, .35); }
.zona[data-zona="magias"] { --cor-zona: rgba(31, 154, 130, .3); }
.zona[data-zona="deck"],
.zona[data-zona="cemiterio"] { --cor-zona: rgba(100, 60, 30, .35); }
.zona[data-zona="extra"] { --cor-zona: rgba(110, 70, 170, .22); }
.zona[data-zona="campo"] { --cor-zona: rgba(214, 140, 40, .32); }

.zona__rotulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6%;
  color: rgba(255, 255, 255, .28);
  font-family: var(--fonte-titulo);
  font-size: calc(var(--cw) * .11);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.zona--op .zona__rotulo {
  transform: rotate(180deg);
}

/* Carta dentro de uma zona */
.no-campo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: calc(var(--cw) * .06);
  transition: transform .35s ease, filter .2s ease;
}

.no-campo[data-pos="def"] {
  transform: rotate(-90deg) scale(.78);
}

.no-campo:hover,
.no-campo:focus-visible {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 220, 120, .7));
}

.no-campo[data-acao="true"] {
  filter: drop-shadow(0 0 7px rgba(90, 255, 160, .95));
}

.no-campo[data-acao="true"]:hover {
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(90, 255, 160, 1));
}

/* Minha carta baixada: mostra a frente escurecida com o selo "baixada" */
.no-campo[data-minha-baixada="true"] .carta {
  filter: brightness(.55) saturate(.6);
}

.selo-baixada {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: .1em .35em;
  color: #fff;
  font-size: calc(var(--cw) * .12);
  font-weight: 800;
  white-space: nowrap;
  background: rgba(0, 0, 0, .7);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: .3rem;
  transform: translate(-50%, -50%);
}

.selo-stats-campo {
  position: absolute;
  bottom: calc(var(--cw) * -.08);
  left: 50%;
  z-index: 3;
  padding: .05em .4em;
  color: #fff;
  font-size: max(10px, calc(var(--cw) * .15));
  font-weight: 800;
  white-space: nowrap;
  background: rgba(0, 0, 0, .82);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .35rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.selo-stats-campo .mais { color: #6dff9a; }
.selo-stats-campo .ativo-def { color: #7ec8ff; }

.selo-equip {
  position: absolute;
  top: calc(var(--cw) * -.08);
  right: calc(var(--cw) * -.08);
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(var(--cw) * .28);
  height: calc(var(--cw) * .28);
  color: #fff;
  font-size: calc(var(--cw) * .17);
  background: #1f9a82;
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
}

.pilha-campo {
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
  border: 0;
}

.pilha-campo .carta__corpo,
.pilha-campo .carta-verso__corpo {
  box-shadow: 2px 2px 0 #2a1a10, 4px 4px 0 #1a0f08;
}

.pilha-campo__qtd {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  color: #fff;
  font-size: calc(var(--cw) * .36);
  font-weight: 800;
  text-shadow: 0 0 6px #000, 0 0 12px #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.zona--op .pilha-campo__qtd {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* Selo das cartas banidas, no Cemitério */
.selo-banidas {
  position: absolute;
  bottom: calc(var(--cw) * -.12);
  left: 50%;
  z-index: 3;
  padding: .05em .45em;
  color: #fff;
  font-size: max(10px, calc(var(--cw) * .14));
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  background: linear-gradient(180deg, #5d5d70, #2a2a36);
  border: 2px solid #d9d9e8;
  border-radius: 1rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, .6);
  transform: translateX(-50%);
}

.zona--op .selo-banidas {
  top: calc(var(--cw) * -.12);
  bottom: auto;
}

/* Janela do Cemitério / Banidas */
.pilhas__abas {
  display: flex;
  gap: .4rem;
  margin: .5rem 0 .6rem;
}

.pilhas__aba {
  flex: 1;
  padding: .45rem .6rem;
  color: var(--texto-suave);
  font-weight: 700;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(224, 180, 74, .35);
  border-radius: .5rem;
}

.pilhas__aba[aria-selected="true"] {
  color: #1b1208;
  background: var(--ouro);
  border-color: var(--ouro);
}

.pilhas__detalhe {
  margin-bottom: .8rem;
  padding: .6rem .75rem;
  font-size: .88rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(224, 180, 74, .25);
  border-radius: .5rem;
}

.pilhas__detalhe h4 {
  margin: 0 0 .15rem;
  color: var(--ouro-claro);
  font-size: 1rem;
}

.pilhas__tipo {
  color: var(--texto-suave);
  font-size: .8rem;
}

/* ---------- Fases ---------- */
.fases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  max-width: calc(var(--cw) * 7 + var(--gap) * 9);
  margin: .6rem 0;
  padding: .35rem .6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent),
    #1d1510;
  border: 2px solid #7a5a2a;
  border-radius: 2rem;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .5);
}

.fases__titulo {
  margin-right: .3rem;
  color: var(--ouro);
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  font-weight: 700;
}

.fase {
  padding: .2rem .6rem;
  color: #9aa0a8;
  font-size: .75rem;
  font-weight: 800;
  background: #2d3138;
  border: 1px solid #454a53;
  border-radius: .4rem;
}

.fase[data-atual="true"] {
  color: #fff;
  background: linear-gradient(180deg, #2ee06d, #14a146);
  border-color: #6dff9a;
  box-shadow: 0 0 10px rgba(46, 224, 109, .7);
}

button.fase:not(:disabled) {
  color: #fff;
  background: linear-gradient(180deg, #3a7bd5, #1f4f9a);
  border-color: #7fb0ff;
  cursor: pointer;
}

button.fase:not(:disabled):hover {
  filter: brightness(1.2);
}

.fase-seta {
  color: #3a7bd5;
  font-size: .7rem;
}

/* ---------- Mão ---------- */
.mao {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--cw) * 1.2 * 1.4576 + .6rem);
  padding-top: .5rem;
}

.mao__carta {
  position: relative;
  flex: 0 1 calc(var(--cw) * 1.2);
  min-width: 0;
  max-width: calc(var(--cw) * 1.2);
  margin: 0 calc(var(--cw) * -.03);
  padding: 0;
  background: none;
  border: 0;
  border-radius: calc(var(--cw) * .07);
  transition: transform .2s ease, filter .2s ease;
}

.mao__carta:hover,
.mao__carta:focus-visible {
  z-index: 5;
  transform: translateY(-14%) scale(1.08);
}

.mao__carta[data-acao="true"] {
  filter: drop-shadow(0 0 6px rgba(90, 255, 160, .9));
}

.mao__carta[data-acao="true"]::before {
  content: "";
  position: absolute;
  top: -.45rem;
  left: 50%;
  z-index: 2;
  width: .6rem;
  height: .6rem;
  background: #5cf08f;
  border-radius: 50%;
  box-shadow: 0 0 8px #5cf08f;
  transform: translateX(-50%);
}

.mao__carta--nova {
  animation: comprar-carta .45s ease;
}

@keyframes comprar-carta {
  from { opacity: 0; transform: translateY(40%) scale(.8); }
}

/* ---------- Lateral ---------- */
.lateral {
  position: sticky;
  top: calc(var(--altura-nav) + .5rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  height: calc(100vh - var(--altura-nav) - 105px);
  min-height: 480px;
}

.lateral > .caixa-lateral--cresce {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 110px;
  overflow: hidden;
}

.lateral > .chat-duelo {
  min-height: 170px;
}

.chat-duelo__form {
  flex-shrink: 0;
}

.caixa-lateral {
  padding: .7rem;
  background: linear-gradient(180deg, #1f1712, #140f0b);
  border: 1px solid var(--borda);
  border-radius: .7rem;
}

.caixa-lateral__titulo {
  margin: 0 0 .5rem;
  color: var(--ouro-claro);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Registro do duelo: título + botão "📋 Copiar" */
.caixa-lateral__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.btn-copiar-log {
  padding: .1rem .5rem;
  color: var(--ouro-claro);
  font-size: .75rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--borda);
  border-radius: 1rem;
}

.btn-copiar-log:hover,
.btn-copiar-log:focus-visible {
  background: rgba(224, 180, 74, .18);
}

/* Sem acesso à área de transferência: o texto aparece para copiar na mão */
.copiar-log {
  position: fixed;
  inset: 5vh 5vw;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  background: var(--painel);
  border: 1px solid var(--borda-forte);
  border-radius: .8rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .7);
}

.copiar-log__texto {
  flex: 1;
  width: 100%;
  color: var(--texto);
  font: .8rem/1.35 ui-monospace, monospace;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--borda);
}

.previa {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: .7rem;
  align-items: start;
  min-height: 150px;
  max-height: 170px;
  overflow-y: auto;
}

.previa__carta {
  width: 120px;
}

.previa__texto {
  font-size: .78rem;
  line-height: 1.3;
}

.previa__texto h4 {
  margin: 0 0 .25rem;
  color: #fff;
  font-size: .92rem;
}

.previa__texto .previa__stats {
  margin: .3rem 0;
  color: var(--ouro-claro);
  font-weight: 800;
}

.previa__dica {
  color: var(--texto-suave);
  font-size: .82rem;
  text-align: center;
}

.caixa-lateral--cresce .log,
.caixa-lateral--cresce .chat-duelo__mensagens {
  flex: 1 1 0;
  height: auto;
  min-height: 40px;
}

.log {
  height: 190px;
  margin: 0;
  padding: 0 .2rem 0 0;
  overflow-y: auto;
  font-size: .8rem;
  line-height: 1.35;
  list-style: none;
}

.log li {
  padding: .12rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .06);
}

.log .log--turno {
  margin-top: .3rem;
  color: var(--ouro);
  font-weight: 800;
  text-align: center;
  border: 0;
}

.log .log--armadilha { color: #ff7ac0; font-weight: 700; }
.log .log--dano { color: #ff8a8a; }
.log .log--destruida { color: #ffb36b; }
.log .log--fim { color: #6dff9a; font-weight: 800; }
.log .log--eu { color: #d7f7e6; }

.chat-duelo__mensagens {
  height: 120px;
  margin-bottom: .4rem;
  overflow-y: auto;
  font-size: .82rem;
}

.chat-duelo__mensagens p {
  margin: 0 0 .2rem;
  overflow-wrap: anywhere;
}

.chat-duelo__mensagens strong {
  color: var(--lilas);
}

.chat-duelo__mensagens .minha strong {
  color: #5ee6b0;
}

.provocacoes {
  display: flex;
  flex-shrink: 0;
  gap: .25rem;
  margin-bottom: .4rem;
  padding-bottom: .15rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.provocacoes button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: .15rem .45rem;
  color: var(--texto);
  font-size: .72rem;
  background: rgba(224, 180, 74, .1);
  border: 1px solid var(--borda);
  border-radius: 1rem;
}

.provocacoes button:hover {
  background: rgba(224, 180, 74, .25);
}

.chat-duelo__form {
  display: flex;
  gap: .3rem;
}

.acoes-duelo {
  display: flex;
  gap: .4rem;
}

.acoes-duelo .btn {
  flex: 1;
}

/* ---------- Menu da carta ---------- */
.menu-carta {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  padding: .35rem;
  background: #221913;
  border: 1px solid var(--borda-forte);
  border-radius: .6rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .65);
  animation: entrar-aviso .15s ease;
}

.menu-carta__titulo {
  padding: .25rem .5rem .4rem;
  color: var(--ouro-claro);
  font-size: .8rem;
  font-weight: 800;
  border-bottom: 1px solid var(--borda);
}

.menu-carta button {
  display: block;
  width: 100%;
  padding: .45rem .55rem;
  color: var(--texto);
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  background: none;
  border: 0;
  border-radius: .35rem;
}

.menu-carta button:hover,
.menu-carta button:focus-visible {
  background: rgba(224, 180, 74, .18);
}

.menu-carta button[data-principal="true"] {
  color: #6dff9a;
}

.menu-carta__vazio {
  padding: .45rem .55rem;
  color: var(--texto-suave);
  font-size: .82rem;
}

/* ---------- Escolha de cartas (tributos, alvos, descarte) ---------- */
.escolha {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

.escolha__caixa {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.1rem;
  background: linear-gradient(180deg, #241a13, #140f0b);
  border: 2px solid var(--ouro);
  border-radius: .9rem;
  box-shadow: 0 0 40px rgba(224, 180, 74, .25);
  animation: entrar-aviso .2s ease;
}

.escolha__titulo {
  margin: 0 0 .3rem;
  color: var(--ouro-claro);
  font-size: 1.15rem;
}

.escolha__sub {
  margin-bottom: .8rem;
  color: var(--texto-suave);
  font-size: .9rem;
}

.escolha__cartas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.escolha__opcao {
  position: relative;
  padding: 0;
  background: none;
  border: 3px solid transparent;
  border-radius: .5rem;
  transition: transform .15s ease;
}

.escolha__opcao:hover {
  transform: translateY(-3px);
}

.escolha__opcao[aria-pressed="true"] {
  border-color: #5cf08f;
  box-shadow: 0 0 16px rgba(92, 240, 143, .7);
}

.escolha__opcao[aria-pressed="true"]::after {
  content: "✔";
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  color: #0b2a15;
  font-weight: 900;
  background: #5cf08f;
  border-radius: 50%;
}

.escolha__lado {
  display: block;
  margin-top: .25rem;
  color: var(--texto-suave);
  font-size: .72rem;
  text-align: center;
}

.escolha__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

/* ---------- Corte (carta grande ao ativar/invocar) ---------- */
.corte {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75));
  animation: corte-fundo var(--dur, 1s) ease forwards;
}

.corte[data-tipo="armadilha"] {
  background: radial-gradient(ellipse at 50% 50%, rgba(181, 60, 128, .45), rgba(20, 0, 10, .85));
}

.corte[data-tipo="magia"] {
  background: radial-gradient(ellipse at 50% 50%, rgba(31, 154, 130, .4), rgba(0, 15, 12, .8));
}

.corte__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  animation: corte-carta var(--dur, 1s) cubic-bezier(.2, .9, .3, 1.2) forwards;
}

.corte__carta {
  width: min(230px, 55vw);
}

.corte__frase {
  padding: .3rem 1rem;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 200, 80, .9), 0 4px 0 #000, 0 0 2px #000;
}

.corte[data-tipo="armadilha"] .corte__frase {
  text-shadow: 0 0 22px rgba(255, 80, 180, .95), 0 4px 0 #000;
}

.corte__quem {
  color: var(--texto-suave);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

@keyframes corte-fundo {
  0% { opacity: 0; }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes corte-carta {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  18% { opacity: 1; transform: scale(1.06) rotate(1deg); }
  28%, 82% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ---------- Entrada de carta Lendária da Zoeira ---------- */
.corte[data-tipo="lendaria"] {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(130, 70, 210, .55), rgba(10, 4, 24, .93));
}

.corte[data-tipo="lendaria"] .corte__conteudo {
  position: relative;
  animation-name: lendaria-entrada;
}

.lendaria__raios {
  position: absolute;
  inset: -60%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 122, 122, .3) 0 5deg, transparent 5deg 12deg,
    rgba(255, 224, 102, .34) 12deg 17deg, transparent 17deg 24deg,
    rgba(111, 224, 255, .3) 24deg 29deg, transparent 29deg 36deg);
  animation: lendaria-raios var(--dur, 2.4s) linear forwards;
}

.lendaria__faiscas {
  position: absolute;
  inset: 0;
}

.lendaria__faiscas span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(11px, 1.9vmin);
  height: max(11px, 1.9vmin);
  background: #fffbe6;
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(255, 215, 90, .95), 0 0 24px 6px rgba(255, 140, 220, .5);
  opacity: 0;
  animation: lendaria-faisca 1.5s cubic-bezier(.15, .7, .3, 1) forwards;
  animation-delay: calc(.4s + var(--atraso, 0s));
}

.lendaria__selo {
  padding: 0 .5rem;
  color: transparent;
  font-family: var(--fonte-titulo);
  font-size: clamp(.95rem, 3.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  background: linear-gradient(90deg, #ff7a7a, #ffe066, #7dffa8, #6fe0ff, #d79bff, #ff7a7a) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255, 215, 90, .8));
  animation: lendaria-arco-iris 1.5s linear infinite;
}

.corte__carta.lendaria__carta {
  width: min(270px, 62vw);
  border-radius: .9rem;
  animation: lendaria-aura 1.1s ease-in-out infinite alternate;
}

@keyframes lendaria-entrada {
  0% { opacity: 0; transform: translateY(-45vh) scale(.5) rotate(-12deg); filter: brightness(3); }
  17% { opacity: 1; transform: translateY(0) scale(1.12) rotate(2deg); filter: brightness(2); }
  27% { transform: scale(.97); filter: brightness(1); }
  33%, 85% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes lendaria-raios {
  0% { opacity: 0; transform: rotate(0) scale(.6); }
  16% { opacity: 1; }
  82% { opacity: .9; }
  100% { opacity: 0; transform: rotate(70deg) scale(1.1); }
}

@keyframes lendaria-faisca {
  0% { opacity: 1; transform: rotate(var(--ang)) translateX(4vmin) scale(1.6); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang)) translateX(var(--dist)) scale(.4); }
}

@keyframes lendaria-arco-iris {
  to { background-position: 200% 0; }
}

@keyframes lendaria-aura {
  from { box-shadow: 0 0 0 3px rgba(255, 228, 140, .95), 0 0 30px 10px rgba(255, 215, 90, .9), 0 0 80px 24px rgba(190, 110, 255, .6); }
  to { box-shadow: 0 0 0 3px rgba(200, 245, 255, .95), 0 0 40px 14px rgba(111, 224, 255, .9), 0 0 100px 30px rgba(255, 110, 200, .6); }
}

/* ---------- Entrada dos deuses (atributo DIVINO) ---------- */
.corte[data-tipo="divino"] {
  --cor: 80, 120, 255;
  --cor2: 205, 220, 255;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--cor), .5), rgba(5, 4, 14, .94) 72%);
}

.corte[data-tipo="divino"][data-tema="vermelho"] { --cor: 230, 45, 35; --cor2: 255, 196, 140; }
.corte[data-tipo="divino"][data-tema="dourado"] { --cor: 255, 186, 40; --cor2: 255, 246, 205; }

.corte[data-tipo="divino"] .corte__conteudo {
  position: relative;
  animation-name: divino-entrada;
}

.divino__raios {
  position: absolute;
  inset: -60%;
  background: repeating-conic-gradient(from 0deg,
    rgba(var(--cor2), .3) 0 4deg, transparent 4deg 11deg,
    rgba(var(--cor), .42) 11deg 15deg, transparent 15deg 22deg);
  animation: lendaria-raios var(--dur, 2.4s) linear forwards;
}

.divino__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vmin, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--cor2), .9) 0 18%, rgba(var(--cor), .55) 38%, transparent 68%);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: divino-halo var(--dur, 2.4s) ease-out forwards;
}

.divino__selo {
  padding: 0 .5rem;
  color: rgb(var(--cor2));
  font-family: var(--fonte-titulo);
  font-size: clamp(.95rem, 3.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(var(--cor), .95), 0 0 30px rgba(var(--cor), .7);
}

.corte__carta.divino__carta {
  width: min(270px, 62vw);
  border-radius: .9rem;
  animation: divino-aura 1s ease-in-out infinite alternate;
}

@keyframes divino-entrada {
  0% { opacity: 0; transform: scale(2.2); filter: brightness(4) blur(6px); }
  18% { opacity: 1; transform: scale(.94); filter: brightness(1.7) blur(0); }
  28% { transform: scale(1.03); filter: brightness(1); }
  34%, 86% { opacity: 1; transform: scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes divino-halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: .75; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes divino-aura {
  from { box-shadow: 0 0 0 3px rgba(var(--cor2), .95), 0 0 28px 10px rgba(var(--cor), .85); }
  to { box-shadow: 0 0 0 3px rgba(var(--cor2), 1), 0 0 55px 18px rgba(var(--cor), 1), 0 0 120px 40px rgba(var(--cor), .45); }
}

/* Deus em campo: aura pulsando na cor da moldura */
.no-campo .carta[data-moldura="divino"] {
  --aura: 90, 130, 255;
  animation: divino-campo 2.8s ease-in-out infinite;
}

.no-campo .carta[data-moldura="divino"][data-tema="vermelho"] { --aura: 255, 70, 45; }
.no-campo .carta[data-moldura="divino"][data-tema="dourado"] { --aura: 255, 200, 70; }

@keyframes divino-campo {
  0%, 100% { box-shadow: 0 0 5px 1px rgba(var(--aura), .7); }
  50% { box-shadow: 0 0 12px 4px rgba(var(--aura), .95); }
}

/* Lendária em campo: aura arco-íris pulsando em volta da carta */
.no-campo .carta[data-raridade="lendaria"] {
  animation: lendaria-campo 2.6s ease-in-out infinite;
}

@keyframes lendaria-campo {
  0%, 100% { box-shadow: 0 0 5px 1px rgba(255, 215, 90, .75), 0 0 12px 3px rgba(190, 110, 255, .45); }
  50% { box-shadow: 0 0 8px 2px rgba(111, 224, 255, .85), 0 0 18px 5px rgba(255, 110, 200, .5); }
}

/* ---------- Mixodas, "O Fumante": as 5 partes se juntam e o Fumante se forma ---------- */
.mixodas {
  position: fixed;
  inset: 0;
  z-index: 1420;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  /* primeiro o campo aparece por baixo (as partes pousam nas zonas de monstro); depois escurece */
  background: radial-gradient(ellipse at 50% 50%, rgba(90, 0, 0, .12), rgba(40, 0, 0, .55) 75%, rgba(0, 0, 0, .75));
  animation: mixodas-entra .9s ease both;
}

.mixodas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, rgba(120, 8, 0, .9), rgba(22, 0, 0, .97) 60%, #000 100%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.mixodas--escuro::before { opacity: 1; }
.mixodas:not(.mixodas--escuro) .mixodas__fumaca { opacity: .35; }

.mixodas--saindo { animation: mixodas-sai .7s ease forwards; }
.mixodas--tremer .mixodas__palco { animation: mixodas-tremor .45s ease; }
.mixodas--formado.mixodas--tremer .mixodas__palco { animation: mixodas-tremor .7s ease, mixodas-pulso 1.1s ease-in-out .7s infinite; }

@keyframes mixodas-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes mixodas-sai { to { opacity: 0; transform: scale(1.08); } }
@keyframes mixodas-tremor {
  10%, 90% { transform: translate(-3px, 2px); }
  20%, 80% { transform: translate(6px, -3px); }
  30%, 50%, 70% { transform: translate(-9px, 4px); }
  40%, 60% { transform: translate(9px, -4px); }
}

/* raios vermelhos girando e o selo mágico atrás do Fumante */
.mixodas__raios {
  position: absolute;
  inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 60, 30, .22) 0 5deg, transparent 5deg 15deg);
  opacity: 0;
  animation: mixodas-girar 14s linear infinite;
  transition: opacity 1s ease;
}

.mixodas__selo {
  position: absolute;
  width: min(96vmin, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: .5vmin solid rgba(255, 70, 40, .75);
  box-shadow: 0 0 4vmin rgba(255, 40, 20, .7), inset 0 0 4vmin rgba(255, 40, 20, .55);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 190, 80, .28) 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, transparent 54%, rgba(255, 80, 40, .35) 55%, transparent 56%, transparent 70%, rgba(255, 190, 80, .4) 71%, transparent 72%);
  opacity: 0;
  transform: scale(.4);
  animation: mixodas-girar 9s linear infinite;
  transition: opacity 1.4s ease, transform 2s cubic-bezier(.2, .9, .3, 1.2);
}

.mixodas__selo::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: .35vmin dashed rgba(255, 210, 120, .7);
  animation: mixodas-girar 5s linear infinite reverse;
}

@keyframes mixodas-girar { to { rotate: 360deg; } }

/* fumaça do cigarrin subindo */
.mixodas__fumaca { position: absolute; inset: 0; pointer-events: none; }
.mixodas__fumaca span {
  position: absolute;
  left: var(--x);
  bottom: -30vmin;
  width: var(--tam);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 200, 200, .26), rgba(160, 150, 150, .1) 45%, transparent 70%);
  filter: blur(1.5vmin);
  animation: mixodas-fumaca 5.5s ease-in var(--atraso) infinite;
}

@keyframes mixodas-fumaca {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-30%, -120vh) scale(1.8); }
}

/* o palco quadrado onde o corpo se monta (as partes ficam em cruz, como no selo) */
.mixodas__palco {
  position: relative;
  width: min(84vmin, 640px);
  aspect-ratio: 1;
  transition: transform 1.8s cubic-bezier(.2, .9, .3, 1.2), filter 1.4s ease;
}

.mixodas__parte {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22%;
  translate: -50% -50%;
  opacity: 0; /* aparece quando sai da mão (o voo é feito no js/arena.js) */
}

.mixodas__parte[data-parte="cabeca"] { --x: 50%; --y: 30%; z-index: 3; }
.mixodas__parte[data-parte="braco-dir"] { --x: 21%; --y: 39%; z-index: 2; }
.mixodas__parte[data-parte="braco-esq"] { --x: 79%; --y: 39%; z-index: 2; }
.mixodas__parte[data-parte="perna-dir"] { --x: 36%; --y: 75%; z-index: 1; }
.mixodas__parte[data-parte="perna-esq"] { --x: 64%; --y: 75%; z-index: 1; }

/* as 5 no campo brilhando, o selo carregando */
.mixodas--carga .mixodas__carta { animation: mixodas-carga .45s ease-in-out infinite alternate; }

@keyframes mixodas-carga {
  from { filter: drop-shadow(0 0 1.5vmin rgba(255, 50, 30, .9)) brightness(1); }
  to { filter: drop-shadow(0 0 4vmin rgba(255, 140, 60, 1)) brightness(1.45); }
}

.mixodas__carta {
  position: relative;
  filter: drop-shadow(0 0 2.2vmin rgba(255, 50, 30, .85));
  transition: opacity 1.6s ease, transform 1.6s ease, filter 1.2s ease;
}

/* a arte da parte, que aparece quando as cartas se fundem (bordas apagadas para virar um corpo só) */
.mixodas__arte {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  max-width: none;
  translate: -50% -50%;
  object-fit: cover;
  opacity: 0;
  scale: .7;
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 71%);
  mask-image: radial-gradient(circle, #000 50%, transparent 71%);
  transition: opacity 1.6s ease .3s, scale 1.8s cubic-bezier(.2, .9, .3, 1.2) .3s;
}

.mixodas__parte[data-parte="cabeca"] .mixodas__arte { width: 210%; }
.mixodas__parte[data-parte^="braco"] .mixodas__arte { width: 185%; }
.mixodas__parte[data-parte^="perna"] .mixodas__arte { width: 165%; }

.mixodas--fusao .mixodas__carta { opacity: 0; transform: scale(1.25); filter: drop-shadow(0 0 5vmin rgba(255, 220, 120, 1)) brightness(2); }
.mixodas--fusao .mixodas__arte { opacity: 1; scale: 1; }
.mixodas--fusao .mixodas__selo { opacity: 1; transform: scale(1); }

.mixodas--formado .mixodas__raios { opacity: 1; }
.mixodas--formado .mixodas__palco {
  transform: scale(1.1) translateY(4%);
  filter: drop-shadow(0 0 3vmin rgba(255, 40, 20, .9)) saturate(1.25);
}

@keyframes mixodas-pulso {
  0%, 100% { filter: drop-shadow(0 0 3vmin rgba(255, 40, 20, .9)) saturate(1.25); }
  50% { filter: drop-shadow(0 0 6vmin rgba(255, 90, 40, 1)) saturate(1.5) brightness(1.12); }
}

/* o nome gigante, vermelho, brilhando e tremendo */
.mixodas__titulo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

.mixodas--formado .mixodas__titulo { animation: mixodas-nome-entra .55s cubic-bezier(.2, .9, .3, 1.3) both; }

@keyframes mixodas-nome-entra {
  0% { opacity: 0; transform: scale(4); filter: blur(8px); }
  60% { opacity: 1; transform: scale(.92); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

.mixodas__nome {
  position: relative;
  display: inline-block;
  color: #ff2a12;
  font-family: var(--fonte-titulo);
  font-size: clamp(3.2rem, 17vw, 11rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .04em;
  -webkit-text-stroke: .02em #2a0000;
  text-shadow:
    0 0 .06em #fff,
    0 0 .18em #ff3b1f,
    0 0 .45em #ff1a00,
    0 0 .9em rgba(255, 0, 0, .8),
    0 .06em 0 #4a0000;
  animation: mixodas-brilho .9s ease-in-out infinite alternate, mixodas-treme .12s linear infinite;
}

/* "eco" vermelho atrás do nome, tremendo descompassado */
.mixodas__nome::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: .015em rgba(255, 120, 60, .7);
  text-shadow: none;
  opacity: .6;
  animation: mixodas-treme .09s linear infinite reverse;
  transform: scale(1.04);
}

.mixodas__sub {
  margin-top: .2em;
  color: #ffd27a;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: 0 0 .3em rgba(255, 120, 40, .95), 0 .08em 0 #000;
  animation: mixodas-treme .15s linear infinite;
}

@keyframes mixodas-brilho {
  from { filter: brightness(1); }
  to { filter: brightness(1.35) drop-shadow(0 0 .25em rgba(255, 60, 20, .9)); }
}

@keyframes mixodas-treme {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-.02em, .015em) rotate(-.4deg); }
  50% { transform: translate(.025em, -.01em) rotate(.3deg); }
  75% { transform: translate(-.01em, -.02em) rotate(-.2deg); }
  100% { transform: translate(.015em, .02em) rotate(.4deg); }
}

.mixodas__quem {
  position: absolute;
  top: max(3vh, 1rem);
  left: 1rem;
  right: 1rem;
  color: #ffd9c9;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(255, 60, 30, .9), 0 2px 0 #000;
  animation: mixodas-entra .6s ease .3s both;
}

/* o nome de cada parte que pousa */
.mixodas__legenda {
  position: absolute;
  bottom: max(4vh, 1rem);
  left: 1rem;
  right: 1rem;
  color: #ffe1c8;
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 0 16px rgba(255, 50, 20, .95), 0 3px 0 #000;
  opacity: 0;
}

.mixodas__legenda--viva { animation: mixodas-legenda 1s ease both; }
.mixodas--fusao .mixodas__legenda--viva { animation: mixodas-legenda-fica 1.9s ease both; }

@keyframes mixodas-legenda {
  0% { opacity: 0; transform: translateY(.6em) scale(.9); }
  20%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes mixodas-legenda-fica {
  0% { opacity: 0; letter-spacing: .5em; }
  40%, 100% { opacity: 1; letter-spacing: .12em; }
}

.mixodas__grito {
  position: absolute;
  bottom: max(5vh, 1.2rem);
  left: 1rem;
  right: 1rem;
  color: #ffe08a;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 6.5vw, 3.6rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 22px rgba(255, 170, 40, .95), 0 4px 0 #000;
  opacity: 0;
}

.mixodas--grito .mixodas__grito { animation: mixodas-nome-entra .5s cubic-bezier(.2, .9, .3, 1.3) both; }

@media (prefers-reduced-motion: reduce) {
  .mixodas__nome,
  .mixodas__nome::after,
  .mixodas__sub,
  .mixodas__raios,
  .mixodas__selo,
  .mixodas__selo::before,
  .mixodas__fumaca span,
  .mixodas--carga .mixodas__carta,
  .mixodas--tremer .mixodas__palco,
  .mao__carta[data-mixodas="true"] { animation: none !important; }
}

/* com as 5 partes na mão, a cabeça do Mixodas pulsa em vermelho (é nela o botão) */
.mao__carta[data-mixodas="true"] {
  border-radius: 6px;
  animation: mixodas-mao 1s ease-in-out infinite alternate;
}

@keyframes mixodas-mao {
  from { box-shadow: 0 0 6px 2px rgba(255, 40, 20, .7); }
  to { box-shadow: 0 0 18px 7px rgba(255, 70, 30, 1); }
}

/* Efeitos especiais da zoeira */
.flash-branco {
  position: fixed;
  inset: 0;
  z-index: 1450;
  background: #fff;
  pointer-events: none;
  animation: flash .7s ease-out forwards;
}

@keyframes flash {
  from { opacity: .95; }
  to { opacity: 0; }
}

.raios-luz {
  position: fixed;
  inset: -50%;
  z-index: 1390;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 110, .38) 0 6deg, transparent 6deg 18deg);
  pointer-events: none;
  animation: girar-raios 1.6s ease-out forwards;
}

@keyframes girar-raios {
  from { opacity: 1; transform: rotate(0); }
  to { opacity: 0; transform: rotate(40deg); }
}

.tremer {
  animation: tremer .5s ease;
}

@keyframes tremer {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 3px); }
  40%, 60% { transform: translate(6px, -3px); }
}

/* Banner de turno */
.banner-turno {
  position: fixed;
  top: 42%;
  left: 0;
  right: 0;
  z-index: 1380;
  padding: .8rem;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: .08em;
  background: linear-gradient(90deg, transparent, rgba(20, 14, 10, .92) 20%, rgba(20, 14, 10, .92) 80%, transparent);
  border-top: 2px solid var(--ouro);
  border-bottom: 2px solid var(--ouro);
  text-shadow: 0 0 18px rgba(255, 210, 100, .8);
  pointer-events: none;
  animation: banner 1.2s ease forwards;
}

.banner-turno[data-meu="false"] {
  border-color: #b53c80;
  text-shadow: 0 0 18px rgba(255, 90, 170, .8);
}

@keyframes banner {
  0% { opacity: 0; transform: scaleY(0); }
  15%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Ataque, destruição e dano */
.atacando {
  z-index: 50;
  transition: transform .28s cubic-bezier(.5, 0, .7, 1.4) !important;
}

.explodindo {
  animation: explodir .5s ease forwards !important;
}

@keyframes explodir {
  0% { filter: brightness(1); }
  30% { filter: brightness(3) saturate(0); transform: scale(1.1); }
  100% { opacity: 0; filter: brightness(2) blur(4px); transform: scale(.6) rotate(12deg); }
}

.numero-dano {
  position: absolute;
  z-index: 40;
  color: #ff4040;
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 0 8px #000, 0 2px 0 #000;
  pointer-events: none;
  animation: subir-dano 1.1s ease-out forwards;
}

.numero-dano--protegido {
  color: #9fe7ff;
}

.numero-dano--cura {
  color: #5dff8a;
}

.protecao {
  filter: drop-shadow(0 0 4px #9fe7ff);
}

@keyframes subir-dano {
  0% { opacity: 0; transform: translateY(10px) scale(.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}

/* ---------- Resultado ---------- */
.resultado {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(4px);
}

.resultado__caixa {
  width: min(460px, 100%);
  padding: 2rem 1.5rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(224, 180, 74, .25), transparent 60%), #1b1410;
  border: 2px solid var(--ouro);
  border-radius: 1rem;
  box-shadow: 0 0 60px rgba(224, 180, 74, .3);
  animation: corte-carta 1s ease forwards;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-name: entrar-resultado;
}

@keyframes entrar-resultado {
  from { opacity: 0; transform: scale(.7); }
}

.resultado__titulo {
  margin-bottom: .3rem;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  color: transparent;
  background: linear-gradient(180deg, #fff6d0, var(--ouro) 55%, #8a5f14);
  -webkit-background-clip: text;
  background-clip: text;
}

.resultado[data-venceu="false"] .resultado__titulo {
  background-image: linear-gradient(180deg, #ffd0d0, #e0313b 55%, #6a0a10);
}

.resultado__emblema {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto .6rem;
}

.resultado[data-venceu="false"] .resultado__emblema {
  filter: grayscale(1) brightness(.7);
  transform: rotate(180deg);
}

.resultado__frase {
  color: var(--texto-suave);
  font-style: italic;
}

.resultado__xp {
  color: var(--ouro-claro);
  font-weight: 800;
}

/* Relíquia no placar e o botão da Compra do Destino */
.icone-reliquia {
  width: 1.35em;
  height: 1.35em;
  margin-left: .3em;
  vertical-align: -.3em;
  border-radius: .25em;
  box-shadow: 0 0 8px rgba(255, 210, 80, .8);
}

.fase--reliquia {
  color: #1b1208 !important;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe08a, #d9a21b) !important;
  border-color: #fff3c4 !important;
  box-shadow: 0 0 12px rgba(255, 210, 80, .8);
  animation: pulsar-torneio 1.4s ease-in-out infinite;
}

.corte__reliquia {
  width: min(60vw, 280px);
  border-radius: .8rem;
  box-shadow: 0 0 40px rgba(255, 210, 80, .8);
}

.resultado__coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: -.4rem 0 0;
  color: #ffd75a;
  font-size: 1.1rem;
  font-weight: 800;
  animation: moeda-entra .6s .3s ease both;
}

.resultado__coin {
  width: 2.4rem;
  height: 2.4rem;
  filter: drop-shadow(0 0 8px rgba(255, 200, 60, .7));
  animation: moeda-gira 1.2s .3s ease both;
}

@keyframes moeda-entra {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes moeda-gira {
  from { transform: rotateY(540deg) scale(.4); }
}

/* ---------- PC: placar em coluna, fases na vertical, cartas maiores ---------- */
@media (min-width: 1200px) {
  .coluna-jogadores {
    position: sticky;
    top: .6rem;
    display: flex;
    flex-direction: column;
    height: calc(var(--ch) * 4 + var(--gap) * 9.2);
  }

  .placar {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: .7rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .jogador-info,
  .jogador-info--op {
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-areas: "avatar nome" "barra barra" "nivel cartas";
    gap: .5rem;
    padding: .75rem;
    text-align: left;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
      linear-gradient(160deg, #3d434d, #2b2f36);
    border: 2px solid #5a606b;
    border-radius: .9rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  }

  .jogador-info__meio {
    display: contents;
  }

  .jogador-info__nome {
    grid-area: nome;
    align-self: center;
    font-size: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .barra-pl {
    grid-area: barra;
    height: 1.45rem;
    margin: 0;
  }

  .barra-pl__valor {
    font-size: .88rem;
    line-height: 1.45rem;
  }

  .jogador-info__avatar {
    grid-area: avatar;
    width: 58px;
    height: 58px;
  }

  .jogador-info__nivel,
  .jogador-info__cartas {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .4rem;
    font-size: .68rem;
    background: rgba(0, 0, 0, .35);
    border-radius: .4rem;
  }

  .jogador-info__nivel { grid-area: nivel; }
  .jogador-info__cartas { grid-area: cartas; }

  .jogador-info__nivel strong,
  .jogador-info__cartas strong {
    font-size: 1.05rem;
  }

  .jogador-info--eu .balao {
    top: auto;
    bottom: calc(100% + .4rem);
  }

  .relogio {
    padding: .6rem;
  }

  .relogio__tempo {
    font-size: 2.3rem;
  }

  .relogio__turno {
    font-size: .75rem;
  }

  .relogio__vez {
    max-width: 100%;
    font-size: .82rem;
  }

  .campo-e-fases {
    flex-direction: row;
    gap: .8rem;
  }

  .fases {
    flex-direction: column;
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    margin: 0;
    padding: .8rem .45rem;
    border-radius: 1.4rem;
    gap: .25rem;
  }

  .fases__titulo {
    margin: 0 0 .25rem;
    font-size: .78rem;
  }

  .fase-seta {
    font-size: .6rem;
    transform: rotate(90deg);
  }

  .fase {
    width: 66px;
    padding: .5rem .3rem;
    font-size: .88rem;
    text-align: center;
  }

  .mao {
    min-height: calc(var(--cw) * 1.25 * 1.4576 + .6rem);
    padding-top: .6rem;
  }

  .mao__carta {
    flex-basis: calc(var(--cw) * 1.25);
    max-width: calc(var(--cw) * 1.25);
  }

  .mao__carta:hover,
  .mao__carta:focus-visible {
    transform: translateY(-24%) scale(1.3);
  }

  .lateral {
    top: .6rem;
    height: calc(100vh - 1.4rem - var(--altura-nav));
    min-height: 520px;
  }
}

@media (min-width: 1500px) {
  .previa {
    grid-template-columns: 165px 1fr;
    max-height: 250px;
  }

  .previa__carta {
    width: 165px;
  }

  .previa__texto {
    font-size: .86rem;
  }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
  .arena {
    --larg-jog: 190px;
    --larg-lat: 300px;
  }

  .jogador-info,
  .jogador-info--op {
    grid-template-columns: 46px 1fr;
    padding: .6rem;
  }

  .jogador-info__avatar {
    width: 46px;
    height: 46px;
  }
}

/* Janelas de escolha e menus maiores no PC */
@media (min-width: 992px) {
  .escolha__caixa {
    width: min(1100px, 100%);
    padding: 1.4rem;
  }

  .escolha__titulo {
    font-size: 1.4rem;
  }

  .escolha__cartas {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.1rem;
  }

  .menu-carta {
    min-width: 240px;
  }

  .menu-carta button {
    padding: .55rem .7rem;
    font-size: .98rem;
  }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1199.98px) {
  .arena {
    --cw: min(calc((100vw - 350px) / 7.9), calc((100vh - 225px) / 8.7), 98px);
  }

  .arena__corpo {
    grid-template-columns: 1fr 290px;
    grid-template-areas: "jog jog" "tab lat";
  }

  .ferramentas-arena {
    justify-content: flex-end;
    margin-top: .4rem;
  }

  .lateral {
    height: calc(100vh - 155px - var(--altura-nav));
    min-height: 440px;
  }

  .ferramentas-arena .btn {
    flex: 0 0 auto;
  }

  .previa {
    grid-template-columns: 110px 1fr;
  }

  .previa__carta {
    width: 110px;
  }
}

@media (max-width: 991.98px) {
  .arena {
    --cw: min(calc((100vw - 2.2rem) / 7.9), 88px);
    padding: 0 .4rem;
  }

  .arena__corpo {
    grid-template-columns: 1fr;
    grid-template-areas: "jog" "tab" "lat";
    gap: .7rem;
  }

  .ferramentas-arena {
    display: none;
  }

  .placar {
    grid-template-columns: 1fr auto 1fr;
    gap: .3rem;
    padding: .4rem;
  }

  .jogador-info {
    gap: .3rem;
  }

  .jogador-info__avatar {
    width: 38px;
    height: 38px;
  }

  .jogador-info__nivel,
  .jogador-info__cartas {
    display: none;
  }

  .jogador-info__nome {
    font-size: .78rem;
  }

  .relogio {
    min-width: 70px;
    padding: .15rem .35rem;
  }

  .relogio__tempo {
    font-size: 1.1rem;
  }

  .fases {
    gap: .15rem;
    padding: .3rem .4rem;
  }

  .fases__titulo,
  .fase-seta {
    display: none;
  }

  .fase {
    padding: .2rem .45rem;
    font-size: .7rem;
  }

  .lateral {
    position: static;
    height: auto;
    min-height: 0;
  }

  .lateral > .caixa-lateral--cresce {
    flex: none;
  }

  .caixa-lateral--cresce .log,
  .caixa-lateral--cresce .chat-duelo__mensagens {
    flex: none;
    height: 150px;
  }
}

/* ---------- Celular e tablet: tabuleiro maior ---------- */
@media (max-width: 991.98px) {
  body.em-duelo .tela-arena {
    padding: .25rem 0 1rem;
  }

  /* As laterais (deck, cemitério, Deck Adicional e Zona de Campo) ficam mais estreitas
     e as 5 colunas do meio ganham o espaço: as cartas do campo ficam bem maiores */
  .arena {
    --cw: min(calc((100vw - 14px) / 6.95), calc((100vh - 395px) / 7.3), 96px);
    --cs: calc(var(--cw) * .66);
    --gap: calc(var(--cw) * .07);
    padding: 0 .25rem;
  }

  .campo {
    grid-template-columns: var(--cs) repeat(5, var(--cw)) var(--cs);
    border-radius: .7rem;
  }

  .zona--lado {
    --cw: var(--cs);
    --ch: calc(var(--cs) * 1.4576);
    align-self: center;
  }

  /* Placar em duas linhas: o oponente em cima, você embaixo, e o relógio do lado.
     Assim o nome inteiro cabe */
  .placar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "op relogio" "eu relogio";
    gap: .3rem .45rem;
    padding: .35rem .5rem .4rem;
    border-radius: 0 0 .9rem .9rem;
  }

  .jogador-info--op { grid-area: op; }
  .jogador-info--eu { grid-area: eu; }

  .jogador-info,
  .jogador-info--op {
    flex-direction: row-reverse;
    gap: .45rem;
    text-align: left;
  }

  .jogador-info__avatar {
    width: 34px;
    height: 34px;
  }

  .jogador-info__nome {
    font-size: .84rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .jogador-info--op .barra-pl__cheio {
    inset: 0 auto 0 0;
  }

  .barra-pl {
    height: 1rem;
    margin-top: .15rem;
  }

  .barra-pl__valor {
    font-size: .7rem;
    line-height: 1rem;
  }

  .relogio {
    grid-area: relogio;
    align-self: stretch;
    justify-content: center;
    min-width: 76px;
  }

  .relogio__tempo {
    font-size: 1.45rem;
  }

  .balao {
    max-width: 200px;
    font-size: .78rem;
  }

  /* Botões pequenos embaixo do placar (o menu do site some durante o duelo) */
  .ferramentas-arena {
    display: flex;
    justify-content: flex-end;
    gap: .3rem;
    margin-top: .3rem;
  }

  .ferramentas-arena .btn {
    flex: 0 0 auto;
    padding: .12rem .5rem;
    font-size: .74rem;
  }

  .botao-chat-celular {
    display: inline-block;
  }

  .botao-chat-celular[data-novas="true"] {
    color: #1b1208;
    background: var(--ouro);
    border-color: var(--ouro);
  }

  /* Mão do oponente: o verso das cartas em cima do campo */
  .mao-op {
    --wo: calc(var(--cw) * .62);
    --sobra-op: max(0px, calc((var(--n, 1) * var(--wo) - (100vw - 60px)) / max(1, var(--n, 1) - 1)));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(var(--wo) * 1.4576);
    margin: .1rem 0 .35rem;
  }

  .mao-op__carta {
    flex: 0 0 var(--wo);
    width: var(--wo);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  }

  .mao-op__carta + .mao-op__carta {
    margin-left: calc(-1 * var(--sobra-op) + 2px);
  }

  .mao-op__qtd {
    margin-left: .4rem;
    padding: .05rem .45rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 1rem;
  }

  /* Sua mão: cartas grandes; se não couberem, ficam uma sobre a outra */
  .mao {
    --wm: min(23vw, 110px);
    --sobra: max(0px, calc((var(--n, 1) * var(--wm) - (100vw - 16px)) / max(1, var(--n, 1) - 1)));
    min-height: calc(var(--wm) * 1.4576 + .8rem);
    padding-top: .7rem;
  }

  .mao__carta {
    flex: 0 0 var(--wm);
    width: var(--wm);
    max-width: none;
    margin: 0;
  }

  .mao__carta + .mao__carta {
    margin-left: calc(-1 * var(--sobra));
  }

  .fase {
    padding: .3rem .55rem;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corte,
  .corte__conteudo,
  .banner-turno,
  .raios-luz,
  .flash-branco,
  .lendaria__raios,
  .lendaria__faiscas span,
  .divino__raios,
  .divino__halo {
    animation-duration: .01ms !important;
  }

  .lendaria__selo,
  .lendaria__carta,
  .divino__carta,
  .no-campo .carta[data-raridade="lendaria"],
  .no-campo .carta[data-moldura="divino"] {
    animation: none !important;
  }
}

/* Arte de vitória/derrota no resultado */
.resultado__caixa {
  padding: 0 0 1.4rem;
  overflow: hidden;
}

.resultado__arte {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  background: #000;
}

.resultado__frase {
  margin: 1rem 1.2rem .3rem;
  color: #f1e6cf;
  font-family: var(--fonte-carta);
  font-size: 1.3rem;
}

.resultado__caixa > .d-flex {
  padding: 0 1rem;
}

/* Marcador de Magia (Wellington) e ataque duplo */
.selo-marcador {
  position: absolute;
  top: calc(var(--cw) * -.08);
  left: calc(var(--cw) * -.08);
  z-index: 3;
  padding: .05em .35em;
  color: #fff;
  font-size: max(10px, calc(var(--cw) * .15));
  font-weight: 800;
  background: linear-gradient(180deg, #8a4fd4, #4b1f8a);
  border: 2px solid #e6d2ff;
  border-radius: 1rem;
  box-shadow: 0 0 8px rgba(160, 100, 255, .8);
  pointer-events: none;
}

.selo-marcador--controle {
  right: calc(var(--cw) * -.08);
  left: auto;
  background: linear-gradient(180deg, #3fae5a, #1d6b30);
  border-color: #d4ffd9;
  box-shadow: 0 0 8px rgba(80, 220, 120, .8);
}

.selo-marcador--duplo {
  top: auto;
  bottom: calc(var(--cw) * .22);
  background: linear-gradient(180deg, #e0313b, #8a0f16);
  border-color: #ffd0d0;
  box-shadow: 0 0 8px rgba(255, 60, 60, .8);
}

/* ---------- Tag 2vs2 ---------- */
.membro-ativo {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--ouro);
  text-underline-offset: 3px;
}

.membro-espera {
  color: #aab2bd;
  font-weight: 600;
}

.ordem-tag__lista {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ordem-tag__item {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .5rem;
  font-size: .78rem;
  background: rgba(58, 123, 213, .12);
  border: 1px solid rgba(58, 123, 213, .35);
  border-radius: .4rem;
}

.ordem-tag__item[data-time="1"] {
  background: rgba(224, 49, 59, .12);
  border-color: rgba(224, 49, 59, .35);
}

.ordem-tag__item--agora {
  box-shadow: 0 0 0 2px var(--ouro);
}

.ordem-tag__p {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ordem-tag__x {
  color: var(--texto-suave);
}

.ordem-tag__agora {
  margin-left: auto;
  padding: 0 .4rem;
  color: #1b1208;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--ouro);
  border-radius: 1rem;
}