:root {
  --cw: 80px; --ch: 112px;   /* carta no campo */
  --mw: 94px; --mh: 132px;   /* carta na mão */
  --ouro: #e9c46a;
  --texto: #f4efe1;
  --vermelho: #c41e2a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #071a0f; color: var(--texto);
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
}

#palco { position: fixed; inset: 0; overflow: hidden; }
#app {
  position: absolute; left: 50%; top: 50%; width: 1470px; height: 940px; padding: 20px;
  display: flex; gap: 34px; transform-origin: center; transform: translate(-50%, -50%);
}

/* ---------- Mesa: feltro verde com textura de carpete e borda acolchoada ---------- */
#mesa {
  position: relative; width: 1150px; height: 900px; border-radius: 48px;
  padding: 20px 34px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    var(--carpete),
    radial-gradient(ellipse at 50% 45%, #1d9450 0%, #147c41 42%, #0c5d2e 80%, #084620 100%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .55),
    inset 0 0 0 3px rgba(0, 0, 0, .3),
    0 0 0 14px #5a3418,
    0 0 0 17px #2b170a,
    0 0 0 18px #8a5a2c,
    0 26px 60px rgba(0, 0, 0, .75);
}

/* Mão à esquerda, Palhaço no centro (como um herói), pilhas à direita. */
.zona { display: grid; grid-template-columns: 1fr 230px 1fr; align-items: center; gap: 12px; }
.zona .mao { grid-column: 1; grid-row: 1; justify-content: flex-end; min-width: 0; }
.zona .info { grid-column: 2; grid-row: 1; justify-content: center; }
.zona .pilhas { grid-column: 3; grid-row: 1; }
.zona-op { height: 124px; }
.zona-eu { height: 176px; }

/* ---------- Fileiras de 8 espaços ---------- */
.fileira { display: flex; justify-content: center; gap: 8px; height: 156px; align-items: center; }
#campo-0 { --dorso: var(--dorso-vermelho); }
#campo-1 { --dorso: var(--dorso-azul); }

.espaco {
  position: relative; width: 124px; height: 152px; border-radius: 12px;
  border: 2px dashed rgba(255, 255, 255, .15);
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.espaco .num-espaco { font-size: 22px; font-weight: 700; color: rgba(255, 255, 255, .1); }
.espaco.clicavel { cursor: pointer; border-color: var(--ouro); background: rgba(233, 196, 106, .1); box-shadow: 0 0 16px rgba(233, 196, 106, .35); }
.espaco.selecionado { border: 2px solid #fff; box-shadow: 0 0 20px rgba(255, 255, 255, .55); }

/* ---------- Cartas ---------- */
.carta {
  position: relative; flex: none; width: var(--cw); height: var(--ch);
  border-radius: 7px; background: #fdfbf3; box-shadow: 4px 6px 0 rgba(5, 18, 2, .45), 0 1px 2px rgba(0, 0, 0, .5);
}
.carta .svg-carta { display: block; width: 100%; height: 100%; }
.carta > .svg-carta { border-radius: inherit; overflow: hidden; }
.carta.dorso { background-size: 100% 100%; }
.carta.dorso.vermelho { background-image: var(--dorso-vermelho); }
.carta.dorso.azul { background-image: var(--dorso-azul); }
.carta.dorso.verde { background-image: var(--dorso-verde); }
.carta.dorso.dourado { background-image: var(--dorso-dourado); }
.carta.vazia { background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }

/* ---------- Unidades em campo ---------- */
.unidade { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pilha-senhor {
  position: relative; width: calc(var(--cw) + 10px); height: calc(var(--ch) + 24px);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), filter .3s;
}
.pilha-senhor .carta.numero { position: absolute; right: 0; top: 0; }
.pilha-senhor .carta.figura { position: absolute; left: 0; bottom: 0; }
.unidade.as .pilha-senhor { width: var(--cw); height: var(--ch); }
.postura-diagonal .pilha-senhor { transform: rotate(45deg) scale(var(--esc-diagonal, .92)); }
.postura-horizontal .pilha-senhor { transform: rotate(90deg) scale(var(--esc-horizontal, .92)); }

/* Desativado: a carta fica virada para baixo (mostra o dorso). */
.desativado .pilha-senhor .carta::after {
  content: ''; position: absolute; inset: 0; border-radius: 7px;
  background: var(--dorso) center / 100% 100%;
}

.naipado .pilha-senhor .carta.figura { box-shadow: 0 0 0 2px var(--ouro), 0 0 14px rgba(233, 196, 106, .75); }
.em-berserk .pilha-senhor { filter: drop-shadow(0 0 9px rgba(255, 40, 40, .95)); }
.apto .pilha-senhor { filter: drop-shadow(0 0 8px rgba(255, 224, 130, .95)); }
/* Em foco no combate: um brilho que pulsa (a carta não muda de tamanho). */
.foco .pilha-senhor { animation: foco-brilho .8s ease-in-out infinite alternate; }
@keyframes foco-brilho { from { filter: drop-shadow(0 0 4px rgba(255, 236, 170, .45)); } to { filter: drop-shadow(0 0 14px rgba(255, 236, 170, 1)); } }
@keyframes pulsar { from { transform: scale(1); } to { transform: scale(1.06); } }

.selo-atk, .selo-vida, .selo-totem {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  white-space: nowrap; border-radius: 10px; background: rgba(10, 10, 10, .82);
  border: 1px solid rgba(255, 255, 255, .22);
}
.selo-atk { bottom: 0; padding: 1px 9px; font-size: 14px; font-weight: 700; }
.selo-atk small { margin-left: 3px; color: var(--ouro); }
.selo-vida { top: 0; padding: 0 7px; font-size: 12px; letter-spacing: 1px; color: #ff6b6b; }
.selo-vida i { font-style: normal; color: rgba(255, 255, 255, .3); }
.selo-vida .berserk { color: #ff8a8a; font-weight: 700; letter-spacing: 0; }
.selo-totem { bottom: 0; padding: 1px 8px; font-size: 11px; color: var(--ouro); }
.selo-naipado {
  position: absolute; top: 18px; left: 4px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; background: var(--ouro); color: #2a1a05; font-weight: 700;
}

.tags { position: absolute; top: 20px; right: -4px; z-index: 4; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.tag-ataque { background: #c41e2a; }
.tag-bloq { background: #2459c4; }
.tag-alvo { background: #8a5a2c; }

/* ---------- Faixa central ---------- */
#faixa { height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
#fase { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro); }
#instrucao { min-height: 22px; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#chips, #botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.btn {
  font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  color: var(--texto); background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .3);
}
.btn:hover:not(:disabled) { background: rgba(0, 0, 0, .58); }
.btn.principal { background: linear-gradient(#f0cf7a, #c99a34); color: #2a1a05; border-color: #f7e2a6; font-weight: 700; }
.btn.principal:hover:not(:disabled) { background: linear-gradient(#f6da8e, #d4a63e); }
.btn.acao { border-color: var(--ouro); }
.btn:disabled { opacity: .45; cursor: default; }

.chip {
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 16px; color: var(--texto);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.clicavel { cursor: pointer; border-color: var(--ouro); box-shadow: 0 0 10px rgba(233, 196, 106, .5); }
.chip.foco { border-color: #fff; background: rgba(196, 30, 42, .55); }
.mini {
  font: inherit; font-size: 12px; padding: 1px 7px; border-radius: 8px; cursor: pointer;
  color: var(--texto); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
}

/* ---------- Jogadores: retrato, mão, pilhas ---------- */
.info { display: flex; align-items: center; gap: 10px; }
.retrato {
  width: 150px; padding: 8px 12px; border-radius: 14px; text-align: center;
  background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .12);
  transition: box-shadow .2s, border-color .2s;
}
.retrato.da-vez { border-color: var(--ouro); }
.retrato.clicavel { cursor: pointer; border-color: #ff7b7b; box-shadow: 0 0 18px rgba(255, 80, 80, .75); }
.retrato .nome { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.retrato .pv { font-size: 34px; font-weight: 800; line-height: 1.1; }
.retrato .coracao { margin-right: 4px; font-size: 24px; color: var(--vermelho); }
.retrato .teto { font-size: 11px; opacity: .65; }
.tokens { display: flex; flex-direction: column; gap: 4px; }
.token {
  font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; cursor: pointer;
  color: #ffd2d2; background: rgba(0, 0, 0, .4); border: 1px solid #c41e2a;
}
.token.selecionada { background: #c41e2a; color: #fff; }
.token:disabled { cursor: default; opacity: .6; }
/* Ficha do Ás de Ouros: botão amarelo bem visível, encostado no lado esquerdo do Palhaço */
.info > .tokens { position: absolute; right: calc(100% + 4px); z-index: 6; align-items: flex-end; gap: 6px; }
.zona-eu .info > .tokens { top: 122px; }
.zona-op .info > .tokens { top: 34%; }
.token.token-extra {
  display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 9px; border-radius: 999px;
  font: 400 24px var(--fonte-titulo); letter-spacing: .5px; text-transform: uppercase; color: var(--tinta);
  background: #ffc21a; border: 3px solid var(--tinta); box-shadow: 3px 4px 0 var(--tinta);
  transition: transform .15s cubic-bezier(.3, 1.4, .5, 1), opacity .2s;
}
.token.token-extra img { width: 22px; height: 22px; filter: drop-shadow(1px 1px 0 var(--tinta)); }
.token.token-extra:not(:disabled):hover { transform: translateY(-2px) scale(1.05); }
.token.token-extra.selecionada { background: #fff1b8; transform: translateY(-3px); box-shadow: 0 0 0 3px #fff, 3px 6px 0 var(--tinta); }
.token.token-extra:disabled { opacity: .75; }
.token.token-extra.chegando { opacity: 0; pointer-events: none; }
.zona-op .token.token-extra { font-size: 16px; padding: 3px 10px 3px 7px; }
.zona-op .token.token-extra img { width: 16px; height: 16px; }
/* Selinho redondo com quantas fichas EXTRA você tem (2 ou mais) */
.token.token-extra { position: relative; }
.token-qtd {
  position: absolute; top: -12px; left: -12px; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font: 400 17px/1 var(--fonte-titulo); color: #fff;
  background: #d4242f; border: 3px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta);
}
.zona-op .token-qtd { top: -9px; left: -9px; min-width: 20px; height: 20px; font-size: 13px; border-width: 2px; }
/* Ícone do dado no lugar do emoji (sorteio, área de testes, mesa livre) */
.dado-inicio .dado-img, .gravidade-dado label .dado-img, .ed-dados .dado-img { width: 1.15em; height: auto; vertical-align: -0.2em; display: inline-block; }

.mao { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.zona-eu .mao .carta { width: 86px; height: 120px; margin: 0; transition: transform .15s, box-shadow .15s, filter .15s; }
.zona-eu .mao .carta.jogavel { cursor: pointer; }
.zona-eu .mao .carta.jogavel:hover { transform: translateY(-12px); z-index: 2; }
.zona-eu .mao .carta.selecionada { transform: translateY(-26px); z-index: 3; box-shadow: 0 0 0 3px var(--ouro), 0 10px 22px rgba(0, 0, 0, .6); }
.zona-op .mao { align-items: center; }
.zona-op .mao .carta { width: 62px; height: 87px; margin: 0; }

.pilhas { display: flex; justify-content: flex-end; gap: 18px; }
#faixa { padding-left: 150px; }
.pilha { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pilha .carta { width: 64px; height: 90px; }
.zona-op .pilha .carta { width: 56px; height: 78px; }
.pilha .cont {
  position: absolute; top: -6px; right: -10px; min-width: 24px; padding: 1px 6px; border-radius: 10px;
  font-size: 12px; font-weight: 700; text-align: center; background: #111; border: 1px solid rgba(255, 255, 255, .25);
}
.pilha label { font-size: 11px; opacity: .7; }
.pilha[data-cemiterio] { cursor: pointer; }

/* ---------- Painel lateral ---------- */
#painel {
  width: 250px; height: 900px; padding: 16px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(#2b190c, #1c1008); border: 1px solid #5a3418;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
#painel h2 { margin: 0; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro); }
#log { flex: 1; overflow-y: auto; padding-right: 4px; font-size: 12.5px; line-height: 1.4; user-select: text; }
#log p { margin: 0 0 6px; opacity: .9; }
#log p.turno { margin-top: 12px; font-weight: 700; color: var(--ouro); opacity: 1; }

/* ---------- Janelas ---------- */
#modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 0, 0, .6); }
#modal[hidden] { display: none; }
#modal .caixa {
  max-width: min(920px, 94vw); max-height: 92vh; overflow: auto; padding: 28px 34px; border-radius: 20px;
  text-align: center; background: radial-gradient(ellipse at top, #16703b, #0b4423);
  border: 3px solid #6b4020; box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
#modal h2 { margin: 0 0 6px; }
.titulo { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 48px; letter-spacing: 1px; }
.titulo span { font-style: italic; color: var(--ouro); }
.titulo-fim { font-family: Georgia, serif; font-size: 44px; color: var(--ouro); }
.titulo-fim.derrota { color: #ff8a8a; }
.sub { margin: 4px 0 18px; opacity: .7; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.grade-cartas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.carta.grande { width: 96px; height: 134px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.carta.grande.selecionada { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--ouro), 0 0 18px rgba(233, 196, 106, .8); }
.carta.grande.estatica { cursor: default; }
.opcao { margin: 14px 0; }
.opcao > label { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro); }
.grupo { display: inline-flex; gap: 6px; }
.grupo button {
  font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 10px; cursor: pointer;
  color: var(--texto); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .3);
}
.grupo button.ativo { background: var(--ouro); color: #2a1a05; font-weight: 700; border-color: var(--ouro); }
.grupo button:disabled { opacity: .4; cursor: default; }
.opcao.idioma { margin: -10px -16px 0 0; text-align: right; }
.opcao.idioma .grupo button { font-size: 12px; padding: 4px 10px; }
.nota { font-size: 13px; opacity: .78; line-height: 1.5; }
.acoes-menu { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.tabela { margin: 14px auto; border-collapse: collapse; font-size: 14px; }
.tabela td { padding: 5px 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); text-align: left; }
.tabela td:last-child { text-align: right; font-weight: 700; }

/* ---------- Animação de postura (vertical → diagonal → horizontal) ---------- */
.pilha-senhor.girando { animation: girar .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes girar { from { transform: rotate(var(--de)) scale(var(--de-escala)); } }
.postura-horizontal .selo-vida { background: #7a0f16; border-color: #ff6b6b; color: #fff; }
.postura-horizontal .selo-vida i { color: rgba(255, 255, 255, .45); }

/* ---------- Carta virando para baixo (fim do turno) e desvirando (reativação) ---------- */
.virando .pilha-senhor .carta, .desvirando .pilha-senhor .carta { animation: virar-carta .7s ease-in-out var(--atraso, 0ms) both; }
.virando .pilha-senhor .carta::after { animation: dorso-surge .7s step-end var(--atraso, 0ms) both; }
.desvirando .pilha-senhor .carta::after {
  content: ''; position: absolute; inset: 0; border-radius: 7px;
  background: var(--dorso) center / 100% 100%; opacity: 0; animation: dorso-some .7s step-end var(--atraso, 0ms) both;
}
@keyframes virar-carta {
  0% { transform: perspective(500px) rotateY(0); }
  50% { transform: perspective(500px) rotateY(90deg) scale(1.08); }
  100% { transform: perspective(500px) rotateY(0); }
}
@keyframes dorso-surge { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes dorso-some { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Carta voando do baralho para a mão ---------- */
.carta-voando {
  position: fixed; z-index: 58; pointer-events: none; border-radius: 7px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55); background-size: 100% 100%;
}
.carta-voando .svg-carta { display: block; width: 100%; height: 100%; }
.carta-voando.dorso.vermelho { background-image: var(--dorso-vermelho); }
.carta-voando.dorso.azul { background-image: var(--dorso-azul); }
.carta-voando.dorso.verde { background-image: var(--dorso-verde); }
.carta-voando.dorso.dourado { background-image: var(--dorso-dourado); }

/* ---------- Setas de ataque e bloqueio ---------- */
#setas { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; overflow: visible; }
.seta path { fill: none; stroke-linecap: round; }
.seta .sombra { stroke: rgba(0, 0, 0, .45); stroke-width: 13; }
.seta .linha { stroke-width: 7; }
.seta.ataque .linha { stroke: #ff4b4b; }
.seta.bloqueio .linha { stroke: #5aa7ff; }
/* As linhas ficam paradas; o que pulsa é o brilho em volta delas. */
.seta.mira-ataque .linha { stroke: #ffd166; stroke-dasharray: 14 9; }
.seta.mira-bloqueio .linha { stroke: #9fd0ff; stroke-dasharray: 14 9; }
.seta .brilho { fill: none; stroke-linecap: round; stroke-width: 18; filter: blur(5px); animation: brilho-seta 1.1s ease-in-out infinite alternate; }
.seta.ataque .brilho { stroke: #ff4b4b; }
.seta.bloqueio .brilho { stroke: #5aa7ff; }
.seta.mira-ataque .brilho { stroke: #ffd166; }
.seta.mira-bloqueio .brilho { stroke: #9fd0ff; }
.seta.tenue .brilho { animation: none; opacity: 0; }
@keyframes brilho-seta { from { opacity: .08; } to { opacity: .6; } }
.seta.tenue { opacity: .45; }
.seta.foco { opacity: 1; }
.seta.foco .linha { stroke-width: 9; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
.rotulo-seta circle { fill: #1a0d06; stroke: #ff4b4b; stroke-width: 3; }
.rotulo-seta text { fill: #fff; font: 700 15px 'Segoe UI', sans-serif; text-anchor: middle; dominant-baseline: central; }

/* ---------- Pop-up de ataque ---------- */
#anuncio {
  position: absolute; left: 595px; top: 470px; z-index: 45; transform: translate(-50%, -50%) scale(.9);
  min-width: 420px; max-width: 1060px; padding: 16px 26px 18px; border-radius: 20px; pointer-events: none;
  background: rgba(10, 22, 14, .9); border: 2px solid var(--ouro); box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
  text-align: center; opacity: 0; transition: opacity .25s, transform .25s;
}
#anuncio.visivel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#anuncio.recuado { opacity: .28; }
.anuncio-topo { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ouro); margin-bottom: 12px; }
.duelo { display: flex; align-items: center; justify-content: center; gap: 26px; }
.duelo-seta { font-size: 46px; color: #ff4b4b; text-shadow: 0 0 14px rgba(255, 75, 75, .7); }
.anuncio-carta { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.anuncio-carta b { font-size: 18px; }
.anuncio-carta.naipado .carta.figura { box-shadow: 0 0 0 3px var(--ouro), 0 0 16px rgba(233, 196, 106, .8); }
.pilha-grande { position: relative; width: 116px; height: 168px; }
.pilha-grande .carta { width: 100px; height: 140px; }
.pilha-grande .carta.numero { position: absolute; right: 0; top: 0; }
.pilha-grande .carta.figura { position: absolute; left: 0; bottom: 0; }
.pilha-grande.as { width: 100px; height: 140px; }
.pilha-grande.postura-diagonal { transform: rotate(45deg) scale(.85); }
.pilha-grande.postura-horizontal { transform: rotate(90deg) scale(.85); }
.anuncio-jogador { width: 130px; padding: 18px 10px; border-radius: 16px; background: rgba(0, 0, 0, .45); border: 2px solid #ff7b7b; }
.anuncio-jogador .nome { font-size: 14px; opacity: .85; }
.anuncio-jogador .pv { font-size: 40px; font-weight: 800; }
.anuncio-grupo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.anuncio-linha { display: flex; gap: 14px; }
.anuncio-rotulo { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #ffb36b; }
.anuncio-rotulo.bloq { color: #8fc3ff; }
.anuncio-resultado { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; }
.anuncio-resultado p { margin: 3px 0; }
.anuncio-resultado p.principal { font-size: 18px; font-weight: 700; color: var(--ouro); }
.fila { display: flex; gap: 22px; justify-content: center; }
.fila-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fila-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #c41e2a; }
.fila-alvo { font-size: 13px; color: #ffb3b3; }

/* ---------- Caixa de dica ---------- */
#dica {
  position: fixed; z-index: 130; max-width: 320px; padding: 10px 13px; border-radius: 10px; pointer-events: none;
  background: rgba(12, 12, 12, .86); border: 1px solid rgba(233, 196, 106, .55); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font-size: 13px; line-height: 1.45; color: var(--texto); backdrop-filter: blur(2px);
}
#dica[hidden] { display: none; }
#dica.com-arte { display: flex; gap: 14px; align-items: flex-start; max-width: 600px; }
#dica.com-arte[hidden] { display: none; }
#dica .dica-texto { width: 300px; flex: none; }
.dica-arte { position: relative; flex: none; width: 200px; height: 280px; }
.dica-arte.senhor { width: 236px; height: 300px; }
.dica-arte .carta { position: absolute; left: 0; bottom: 0; width: 200px; height: 280px; border-radius: 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }
.dica-arte .carta.numero { left: auto; bottom: auto; right: 0; top: 0; width: 110px; height: 154px; border-radius: 9px; transform: rotate(7deg); z-index: -1; }
.dica-arte.senhor .carta:not(.numero) { z-index: 1; }
#dica .dica-titulo { font-size: 15px; font-weight: 700; }
#dica .dica-sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ouro); margin-bottom: 4px; }
#dica p { margin: 5px 0 0; }
#dica .dica-regra { opacity: .65; font-size: 12px; }
/* Hierarquia nas dicas de Senhor: limite em amarelo, habilidades com título em caixa alta */
#dica .dica-limite { font-weight: 800; color: #ffd84d; }
#dica p:has(> .dica-hab) { margin-top: 9px; }
#dica .dica-hab { display: block; font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #fff; }
#dica .dica-hab.naipe-copas, #dica .dica-hab.naipe-ouros { color: #ff7b7b; }
#dica .dica-hab.naipe-paus, #dica .dica-hab.naipe-espadas { color: #c9d3dc; }

/* Resultado do golpe dentro do pop-up */
.anuncio-carta { position: relative; }
.anuncio-carta.morta .pilha-grande { filter: grayscale(.85) brightness(.55); }
.efeito {
  position: absolute; top: 46px; left: 50%; z-index: 2; transform: translateX(-50%) rotate(-8deg);
  padding: 4px 10px; border-radius: 8px; white-space: nowrap; font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6); animation: carimbo .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
.efeito-morreu { background: #7a0f16; border: 2px solid #ff6b6b; color: #fff; }
.efeito-hit { background: #8a5a12; border: 2px solid var(--ouro); color: #fff; }
.efeito-ileso { background: #1d3f6e; border: 2px solid #8fc3ff; color: #fff; }
@keyframes carimbo { from { transform: translateX(-50%) rotate(-8deg) scale(2.2); opacity: 0; } }

.anuncio-jogador { position: relative; }
.anuncio-jogador.cor-vermelho { border-color: #ff7b7b; }
.anuncio-jogador.cor-azul { border-color: #7fb0ff; }
.anuncio-jogador.tomou-dano { animation: tremor .55s .2s both; }
@keyframes tremor {
  0% { transform: translateX(0); background: rgba(0, 0, 0, .45); }
  15% { transform: translateX(-10px); background: rgba(196, 30, 42, .85); box-shadow: 0 0 30px rgba(255, 60, 60, .9); }
  30% { transform: translateX(9px); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); background: rgba(90, 10, 16, .75); box-shadow: 0 0 14px rgba(255, 60, 60, .5); }
}
.dano-flutuante {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 34px; font-weight: 900; color: #ff4b4b; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 60, 60, .8);
  animation: subir 1.4s .2s ease-out both; pointer-events: none;
}
@keyframes subir {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.25); }
  100% { opacity: 1; transform: translate(-50%, -34px) scale(1); }
}
.duelo-seta.pequena { font-size: 30px; color: #ffb36b; }
.anuncio-acoes { margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; opacity: .9; }
.anuncio-acoes .btn { pointer-events: auto; font-size: 15px; padding: 9px 22px; }

.retrato .nome small { display: block; font-size: 11px; opacity: .7; }
.retrato.cor-vermelho .coracao { color: #ff5a5a; }
.retrato.cor-azul .coracao { color: #6f9bff; }

/* Contador de ações passivas (cor de quem está jogando) */
#acoes {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 128px; padding: 10px 8px 9px; border-radius: 16px; text-align: center;
  border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: background .3s;
}
#acoes[hidden] { display: none; }
#acoes.cor-vermelho { background: linear-gradient(#d4242f, #7d0d14); }
#acoes.cor-azul { background: linear-gradient(#2b5cc4, #13306f); }
.acoes-rotulo { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
.acoes-num { font-size: 22px; line-height: 1.1; margin: 2px 0 4px; }
.acoes-num b { font-size: 36px; }
.acoes-pips { display: flex; justify-content: center; gap: 6px; }
.acoes-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: transparent; }
.acoes-pips i.cheio { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.acoes-vez { margin-top: 5px; font-size: 11px; opacity: .85; }

/* Pilhas de Letras e Números */
.marca-pilha {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .5);
}
.zona-op .marca-pilha { font-size: 9px; bottom: 5px; }
.pilha[data-pilha] { cursor: help; }

/* Compra: os baralhos pulsam esperando o clique */
.pilha.pulsando { cursor: pointer; }
.pilha.pulsando .carta { animation: pulsar-baralho 1s ease-in-out infinite; }
.pilha.pulsando:hover .carta { transform: translateY(-6px) scale(1.06); animation-play-state: paused; box-shadow: 0 0 0 3px var(--ouro), 0 0 26px rgba(233, 196, 106, .9); }
@keyframes pulsar-baralho {
  0%, 100% { box-shadow: 0 0 0 2px rgba(233, 196, 106, .5), 0 0 8px rgba(233, 196, 106, .4); transform: scale(1); }
  50% { box-shadow: 0 0 0 4px var(--ouro), 0 0 26px rgba(233, 196, 106, .95); transform: scale(1.07); }
}
.seta-compra {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 18px; color: var(--ouro); text-shadow: 0 0 8px rgba(233, 196, 106, .9); animation: quicar .7s ease-in-out infinite alternate;
}
@keyframes quicar { to { transform: translate(-50%, 6px); } }

/* Botões do topo do painel */
.barra-partida { display: flex; gap: 6px; }
.barra-partida .btn { flex: 1; font-size: 12px; padding: 7px 6px; }

/* ---------- Cores dos Palhaços ---------- */
.cor-vermelho { --h1: #d4343e; --h2: #5e0a10; }
.cor-azul { --h1: #3a68c9; --h2: #0f2557; }
.cor-verde { --h1: #2e9c5a; --h2: #0b3b20; }
.cor-dourado { --h1: #e2b23a; --h2: #6b4c06; }
#acoes.cor-verde { background: linear-gradient(#2a9a56, #0f4a28); }
#acoes.cor-dourado { background: linear-gradient(#d9a62a, #7a5806); }
.anuncio-jogador.cor-verde { border-color: #6fd69a; }
.anuncio-jogador.cor-dourado { border-color: #ffd66b; }

/* ---------- Carta do Palhaço (herói) ---------- */
.heroi {
  position: relative; flex: none; width: 128px; height: 128px; border-radius: 18px; padding-top: 8px;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 32%, var(--h1), var(--h2));
  border: 3px solid #f4e7c3; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(0, 0, 0, .35);
  transition: box-shadow .2s;
}
.heroi.da-vez { box-shadow: 0 0 0 3px var(--ouro), 0 0 22px rgba(233, 196, 106, .7); }
.heroi.clicavel { cursor: pointer; box-shadow: 0 0 0 3px #ff7b7b, 0 0 26px rgba(255, 80, 80, .85); }
.heroi-arte { position: relative; width: 84px; height: 68px; }
.chapeu { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.heroi-naipe { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-size: 26px; color: #fff; text-shadow: 0 2px 4px #000; }
.heroi-nome { margin-top: 8px; font-family: Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-shadow: 0 1px 2px #000; }
.heroi-quem { font-size: 10px; opacity: .8; }
.heroi-pv {
  position: absolute; right: -14px; bottom: -14px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; font-weight: 900;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #a3111b); border: 3px solid #f4e7c3; box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}
.heroi-ferida { position: absolute; left: -10px; bottom: -10px; padding: 2px 6px; border-radius: 8px; font-size: 10px; background: #7a0f16; border: 1px solid #ff8a8a; }
.zona-op .heroi { width: 104px; height: 104px; padding-top: 5px; }
.zona-op .heroi-arte { width: 68px; height: 54px; }
.zona-op .heroi-pv { width: 40px; height: 40px; font-size: 16px; }
.heroi.mini { width: 84px; height: 84px; padding-top: 6px; border-radius: 14px; }
.heroi.mini .heroi-arte { width: 58px; height: 46px; }
.heroi.mini .heroi-naipe { font-size: 20px; }
.heroi.mini .heroi-nome { font-size: 11px; margin-top: 6px; }
/* Com retrato: a arte ocupa a carta toda e o nome fica sobre uma faixa escura embaixo. */
.heroi.com-retrato { padding: 0 0 6px; justify-content: flex-end; }
.heroi-retrato {
  position: absolute; inset: 0; border-radius: 15px; background-size: cover; background-position: center 18%;
}
.heroi-retrato::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, .55) 68%, rgba(0, 0, 0, .9));
}
.heroi.com-retrato .heroi-nome, .heroi.com-retrato .heroi-quem { position: relative; margin-top: 0; }
.heroi-naipe.canto {
  left: 6px; top: 4px; bottom: auto; transform: none; font-size: 18px; line-height: 1;
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(244, 231, 195, .6);
}
.heroi.mini .heroi-naipe.canto { font-size: 13px; width: 18px; height: 18px; left: 4px; top: 3px; }
.heroi.mini.com-retrato { padding-bottom: 4px; }
.escolha-palhaco .heroi.mini.com-retrato { width: 128px; height: 128px; }
.inicio-lado .heroi.mini.com-retrato { width: 140px; height: 140px; }
.inicio-lado .heroi.mini .heroi-nome { font-size: 14px; }
.heroi.com-retrato .heroi-pv, .heroi.com-retrato .heroi-ferida { z-index: 1; }
.info { justify-content: center; gap: 16px; }
.lado-heroi { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Botão do poder, em forma de carta */
.poder-btn {
  font: inherit; color: var(--texto); width: 66px; height: 92px; padding: 4px; border-radius: 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(var(--h1), var(--h2)); border: 2px solid #f4e7c3; box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.poder-btn .poder-icone { font-size: 22px; line-height: 1; }
.poder-btn b { font-size: 11px; line-height: 1.1; }
.poder-btn small { font-size: 10px; opacity: .85; }
.poder-btn.pronto { cursor: pointer; animation: pulsar-poder 1.1s ease-in-out infinite alternate; }
.poder-btn.pronto:hover { transform: translateY(-3px); }
.poder-btn:disabled { opacity: .6; cursor: default; }
.poder-btn.usado { filter: grayscale(.85); }
.poder-btn.ativo { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, .8); }
.poder-btn.passivo { opacity: .9; }
.zona-op .poder-btn { width: 54px; height: 76px; }
.zona-op .poder-btn .poder-icone { font-size: 17px; }
@keyframes pulsar-poder { from { box-shadow: 0 0 0 2px rgba(233, 196, 106, .4); } to { box-shadow: 0 0 0 3px var(--ouro), 0 0 18px rgba(233, 196, 106, .9); } }

/* Mão: com 1 figura ou Ás selecionado, o que combina pulsa e o resto escurece */
.zona-eu .mao .carta.combina { animation: pulsar-combina .85s ease-in-out infinite alternate; z-index: 2; }
.zona-eu .mao .carta.apagada { filter: brightness(.38) saturate(.5); }
@keyframes pulsar-combina {
  from { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(233, 196, 106, .5), 0 0 8px rgba(233, 196, 106, .4); }
  to { transform: translateY(-12px); box-shadow: 0 0 0 3px var(--ouro), 0 0 22px rgba(233, 196, 106, .95); }
}

/* Menu: escolha do Palhaço */
.grade-palhacos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.escolha-palhaco {
  font: inherit; color: var(--texto); cursor: pointer; padding: 12px 10px; border-radius: 16px; text-align: left;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 255, 255, .18); transition: transform .15s, border-color .15s;
}
.escolha-palhaco:hover { transform: translateY(-3px); }
.escolha-palhaco.ativo { border-color: var(--ouro); box-shadow: 0 0 18px rgba(233, 196, 106, .6); background: rgba(233, 196, 106, .12); }
.escolha-palhaco b { font-family: Georgia, serif; font-size: 16px; }
.escolha-palhaco small { font-size: 11px; opacity: .75; }
.ep-linha { font-size: 11.5px; line-height: 1.35; opacity: .9; align-self: stretch; }
.ep-linha i { color: var(--ouro); font-style: normal; font-weight: 700; }

/* Pop-up de quem começa */
.inicio-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .75; }
.inicio-lado.comeca { opacity: 1; }
.inicio-lado em { font-style: normal; font-weight: 800; color: var(--ouro); text-transform: uppercase; letter-spacing: 1px; }
.dado-inicio { font-size: 24px; }

.chip.ordem { gap: 5px; }
.dados-extra { color: var(--ouro); }

#aviso-dado {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 61; pointer-events: none;
  padding: 10px 22px; border-radius: 14px; font-size: 18px; font-weight: 700; white-space: nowrap;
  background: rgba(10, 22, 14, .88); border: 2px solid var(--ouro); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  animation: chamar 1.1s ease-in-out infinite alternate;
}
#aviso-dado[hidden] { display: none; }
@keyframes chamar { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }

/* ---------- Telas cheias: montar decks e regras ---------- */
.tela {
  position: fixed; inset: 0; z-index: 110; overflow: auto; padding: 24px;
  background: radial-gradient(ellipse at top, #16703b, #08391c 70%, #05240f);
}
.tela[hidden] { display: none; }
.tela-caixa { max-width: 1400px; margin: 0 auto; user-select: none; }
.tela-cabecalho { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.tela-cabecalho h1 { margin: 0; font-family: Georgia, serif; font-size: 34px; }
.tela-cabecalho .nota { flex: 1; min-width: 200px; }
.deck-layout { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
.slots { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.slot {
  font: inherit; color: var(--texto); text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 255, 255, .15); display: flex; flex-direction: column; gap: 2px;
}
.slot small { font-size: 12px; opacity: .7; }
.slot.valido small { color: #8fe0a0; opacity: 1; }
.slot.atual { border-color: var(--ouro); background: rgba(233, 196, 106, .14); }
.editor { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 18px 20px; min-height: 300px; }
.vazio-deck { text-align: center; padding: 40px 0; }
.editor-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.nome-deck {
  font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 10px; width: 220px; user-select: text;
  color: var(--texto); background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .3);
}
.status-deck { font-weight: 700; padding: 6px 12px; border-radius: 10px; }
.status-deck.ok { background: #1d6b35; }
.status-deck.falha { background: #7a0f16; }
.salvo { font-size: 12px; opacity: .65; }
.editor-corpo { display: grid; grid-template-columns: 1fr 330px; gap: 18px; }
.editor-cartas h3 { margin: 14px 0 8px; font-size: 16px; }
.editor-cartas h3 em { font-style: normal; color: var(--ouro); margin-left: 8px; font-size: 14px; }
.grade-deck { display: flex; flex-direction: column; gap: 6px; }
.linha-cartas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.linha-cartas .rot { width: 86px; font-size: 13px; font-weight: 700; }
.celula {
  width: 64px; padding: 4px; border-radius: 10px; cursor: pointer; text-align: center;
  background: rgba(0, 0, 0, .25); border: 2px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s;
}
.celula.tem { opacity: 1; border-color: rgba(233, 196, 106, .6); }
.celula:hover { opacity: 1; }
.mini-carta { width: 52px; height: 73px; margin: 0 auto 3px; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.mini-carta .svg-carta { width: 100%; height: 100%; display: block; }
.celula-naipe { font-size: 11px; font-weight: 700; margin-bottom: 3px; color: #e8e8e8; white-space: nowrap; }
.celula-naipe.vermelho { color: #ff8a8a; }
.celula-controles { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.celula-controles button {
  font: inherit; width: 18px; height: 18px; line-height: 14px; padding: 0; border-radius: 5px; cursor: pointer;
  color: var(--texto); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
}
.editor-regras { background: rgba(0, 0, 0, .3); border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.45; align-self: start; position: sticky; top: 0; }
.editor-regras h3 { margin: 0 0 8px; font-size: 16px; }
.editor-regras h4 { margin: 14px 0 6px; color: var(--ouro); font-size: 13px; }
.regras-deck { list-style: none; padding: 0; margin: 0; }
.regras-deck li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.regras-deck li span { font-weight: 900; width: 14px; }
.regras-deck li.ok span { color: #8fe0a0; }
.regras-deck li.falha span { color: #ff7b7b; }
.regras-deck li.falha { color: #ffc2c2; }
.regras-deck em { font-style: normal; opacity: .7; }
.por-que p { margin: 4px 0 8px; opacity: .85; }
.acoes-menu.secundario { margin-top: 10px; }
.acoes-menu.secundario .btn { font-size: 13px; }

/* Telas menores: as regras descem para baixo das cartas, e as cartas não quebram linha. */
@media (max-width: 1280px) {
  .editor-corpo { grid-template-columns: 1fr; }
  .editor-regras { position: static; }
}
@media (max-width: 820px) {
  .deck-layout { grid-template-columns: 1fr; }
  .slots { position: static; flex-direction: row; flex-wrap: wrap; }
}
.linha-cartas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }

.texto-regras { font-size: 15px; line-height: 1.6; max-width: 900px; user-select: text; }
.texto-regras h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 26px; color: var(--ouro); }
.texto-regras h3 { margin: 18px 0 6px; font-size: 17px; }
.texto-regras ul, .texto-regras ol { padding-left: 22px; margin: 6px 0; }
.texto-regras li { margin: 4px 0; }
.tabela-regras { border-collapse: collapse; margin: 8px 0 12px; width: 100%; font-size: 14px; }
.tabela-regras th { text-align: left; color: var(--ouro); font-weight: 700; padding: 6px 10px; border-bottom: 2px solid rgba(233, 196, 106, .4); }
.tabela-regras td { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.exemplo { background: rgba(0, 0, 0, .3); border-left: 3px solid var(--ouro); padding: 8px 12px; border-radius: 0 8px 8px 0; }

/* ---------- Campo sem espaços visíveis: só aparece onde a carta vai cair ---------- */
.espaco { border-color: transparent; }
.espaco .num-espaco { display: none; }
.fileira.soltando .espaco { border-color: rgba(255, 255, 255, .05); }
.espaco.destino { border: 2px solid transparent; background: radial-gradient(ellipse at center, rgba(233, 196, 106, .32), rgba(233, 196, 106, 0) 70%); }
.espaco.destino::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); transform: translate(-50%, -50%);
  border-radius: 8px; border: 2px dashed rgba(255, 224, 130, .85); box-shadow: 0 0 22px rgba(233, 196, 106, .6);
  animation: respirar .9s ease-in-out infinite alternate;
}
@keyframes respirar { from { opacity: .55; } to { opacity: 1; } }
.espaco.destino-alvo .pilha-senhor { filter: drop-shadow(0 0 12px rgba(120, 220, 255, 1)); }
.heroi.destino-alvo { box-shadow: 0 0 0 3px #ff9aa2, 0 0 28px rgba(255, 110, 120, .9); }

/* Carta sendo arrastada da mão */
.carta-arrastada {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; border-radius: 8px; background: #fdfbf3;
  box-shadow: 0 22px 34px rgba(0, 0, 0, .55), 0 0 0 2px rgba(233, 196, 106, .8); transition: box-shadow .15s;
}
.carta-arrastada .svg-carta { display: block; width: 100%; height: 100%; }
.zona-eu .mao .carta.arrastando { opacity: .22; transform: none; }
.zona-eu .mao .carta.jogavel { cursor: grab; }

/* Figura ou Ás esperando o número no campo */
.carta-preparo { animation: flutuar 1.1s ease-in-out infinite alternate; cursor: pointer; }
.carta-preparo .carta { opacity: .82; box-shadow: 0 0 0 2px var(--ouro), 0 14px 22px rgba(0, 0, 0, .45), 0 0 22px rgba(233, 196, 106, .7); }
@keyframes flutuar { from { transform: translateY(-4px); } to { transform: translateY(-12px); } }

/* Senhor(a) voando da mão até o campo e "pousando" */
.unidade-voando { position: absolute; z-index: 50; pointer-events: none; display: grid; place-items: center; }
.espaco.voo-oculto .unidade { visibility: hidden; }
/* Impacto do ataque: faíscas e onda de choque (criadas pelo JS no ponto do golpe). */
.faisca { position: absolute; z-index: 62; pointer-events: none; border-radius: 50%; background: #fff4c8; box-shadow: 0 0 8px 2px rgba(255, 205, 90, .9); }
.faisca.brasa { background: #ff7a45; box-shadow: 0 0 8px 2px rgba(255, 80, 40, .9); }
.onda-impacto { position: absolute; z-index: 61; pointer-events: none; width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid rgba(255, 232, 170, .95); box-shadow: 0 0 20px rgba(255, 200, 90, .85), inset 0 0 14px rgba(255, 220, 140, .6); }
.espaco.pousou::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid rgba(255, 236, 170, .9); transform: translate(-50%, -50%) scale(.3); pointer-events: none;
  animation: onda .5s ease-out forwards;
}
@keyframes onda { to { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }

/* ---------- Faixa central: botões grandes com ícones ---------- */
#faixa #chips { display: none; }
#instrucao { max-width: 640px; font-size: 15px; line-height: 1.35; }
#botoes { align-items: center; gap: 10px; }
.btn-grande {
  font: inherit; color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border-radius: 40px; font-size: 16px; font-weight: 700; letter-spacing: .2px;
  background: linear-gradient(rgba(20, 20, 20, .78), rgba(0, 0, 0, .7)); border: 2px solid rgba(233, 196, 106, .75);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.btn-grande:hover { transform: translateY(-3px); border-color: #ffe08a; box-shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 0 18px rgba(233, 196, 106, .55); }
.btn-grande:active { transform: translateY(0) scale(.97); }
.btn-icone {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #f6dc8e, #b8860b 70%, #6b4c06); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .5);
}
.btn-icone svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.ic-rainha .btn-icone { background: radial-gradient(circle at 35% 30%, #c79bff, #6a2bbf 70%, #2e0c63); }
.ic-as .btn-icone { background: radial-gradient(circle at 35% 30%, #8fe3e0, #1f8a86 70%, #0b4240); }
.ic-curar .btn-icone { background: radial-gradient(circle at 35% 30%, #ffd0d4, #e2697a 70%, #7d0d14); }
.ic-espadas .btn-icone { background: radial-gradient(circle at 35% 30%, #9cc0ff, #2b5cc4 70%, #0f2557); }
.ic-paus .btn-icone { background: radial-gradient(circle at 35% 30%, #8be0a8, #1e7a43 70%, #0b3b20); }
.ic-comprar .btn-icone { background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9a62a 70%, #7a5806); }
.ic-reviver .btn-icone { background: radial-gradient(circle at 35% 30%, #c9c3e6, #6b628f 70%, #2a2440); }
.ic-atacar .btn-icone { background: radial-gradient(circle at 35% 30%, #ff9a9a, #c41e2a 70%, #5e0a10); }
.ic-escudo .btn-icone { background: radial-gradient(circle at 35% 30%, #d6e9ff, #4f86d8 70%, #13306f); }
.btn-grande.perigo { border-color: #ff8a8a; }
.btn-grande.defesa { border-color: #8fc3ff; }

/* Setas mais finas: menos poluição na mesa */
.seta .sombra { stroke-width: 10; }
.seta .linha { stroke-width: 5; }
.seta.foco .linha { stroke-width: 6; }
.rotulo-seta circle { r: 12px; }
.rotulo-seta text { font-size: 13px; }

/* ---------- Painel de combate (direita, meio da altura) ---------- */
/* O painel fica dentro do tabuleiro, numa coluna à direita (entre as pilhas de cima e de baixo).
   As fileiras ficam um pouco mais estreitas para abrir esse espaço. */

#combate {
  position: absolute; right: 24px; top: 50%; width: 196px; transform: translateY(-50%); z-index: 20; max-height: 560px; overflow-y: auto;
  padding: 12px 12px 14px; border-radius: 16px; text-align: center;
  background: linear-gradient(rgba(14, 30, 19, .97), rgba(8, 20, 12, .97)); border: 2px solid var(--ouro);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#combate[hidden] { display: none; }
.cb-topo { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ouro); margin-bottom: 10px; line-height: 1.4; }
.cb-lista { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.cb-item {
  font: inherit; color: var(--texto); display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  padding: 7px 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14);
}
button.cb-item { cursor: default; }
.cb-item.clicavel { cursor: pointer; border-color: var(--ouro); box-shadow: 0 0 10px rgba(233, 196, 106, .45); }
.cb-item.foco { border-color: #fff; background: rgba(196, 30, 42, .45); }
.cb-item.feito { opacity: .55; }
.cb-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #c41e2a; }
.cb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.cb-txt b { font-size: 13px; }
.cb-txt em { font-style: normal; color: var(--ouro); }
.cb-txt small { font-size: 11px; opacity: .78; }
.cb-ctrl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Duelo compacto dentro do painel */
#combate .anuncio-topo { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 8px; line-height: 1.4; }
#combate .duelo { gap: 8px; flex-wrap: wrap; }
#combate .duelo-seta { font-size: 22px; }
#combate .duelo-seta.pequena { font-size: 16px; }
#combate .anuncio-carta { gap: 3px; font-size: 10.5px; max-width: 76px; }
#combate .anuncio-carta span { line-height: 1.2; }
#combate .anuncio-carta b { font-size: 13px; }
#combate .pilha-grande { width: 60px; height: 86px; }
#combate .pilha-grande .carta { width: 52px; height: 73px; }
#combate .pilha-grande.as { width: 52px; height: 73px; }
#combate .anuncio-linha { gap: 6px; }
#combate .anuncio-grupo { gap: 4px; }
#combate .anuncio-rotulo { font-size: 9.5px; }
#combate .anuncio-jogador { width: 76px; padding: 8px 4px; border-radius: 12px; }
#combate .anuncio-jogador .nome { font-size: 11px; }
#combate .anuncio-jogador .pv { font-size: 26px; }
#combate .dano-flutuante { font-size: 24px; }
#combate .efeito { top: 22px; font-size: 10.5px; line-height: 1.15; padding: 2px 6px; border-width: 1px; white-space: normal; width: max-content; max-width: 74px; text-align: center; }
.bandeja {
  position: relative; height: 150px; margin: 10px 0 8px; border-radius: 12px; display: grid; place-items: center;
  background: var(--carpete), radial-gradient(ellipse at center, #11663a, #0a3f22); border: 2px dashed rgba(233, 196, 106, .45);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .6);
}
.bandeja span { font-size: 11px; opacity: .55; letter-spacing: 1px; text-transform: uppercase; }
.cb-resultado { min-height: 54px; font-size: 12px; line-height: 1.35; }
.cb-resultado p { margin: 2px 0; }
.cb-resultado p.espera { opacity: .7; font-style: italic; margin-top: 8px; }
.cb-resultado p.principal { font-size: 14px; font-weight: 700; color: var(--ouro); }
.cb-continuar { position: sticky; bottom: -14px; margin: 0 -12px -14px; padding: 4px 0 10px; background: linear-gradient(rgba(8, 20, 12, 0), rgba(8, 20, 12, .98) 30%); }
.cb-continuar:empty { display: none; }
#combate .anuncio-acoes { margin-top: 6px; }
#combate .anuncio-acoes .btn { font-size: 14px; padding: 7px 18px; }
#aviso-dado.na-bandeja { animation: none; padding: .35em .8em; border-radius: .7em; white-space: normal; text-align: center; border-width: 1px; }

/* ---------- Dados ---------- */
#dados3d { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.dados2d {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60;
  display: flex; gap: 14px; pointer-events: none; font-size: 84px; line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.dados2d.vermelho { color: #ff4d57; }
.dados2d.azul { color: #6f9bff; }

/* ---------- Layout simétrico: tudo centralizado no meio do tabuleiro ----------
   Coluna da esquerda (ações) e da direita (combate) com a mesma largura; fileiras, faixa,
   Palhaços e mãos ficam no eixo central. */
#app { gap: 20px; }
#mesa { width: 1224px; }
#painel { width: 186px; padding: 12px; }
.barra-partida .btn { font-size: 11px; padding: 6px 3px; }
/* As cartas do campo (e as cópias que voam ou atacam) usam o mesmo tamanho. Deitada (horizontal)
   e inclinada (diagonal) a carta mantém o tamanho: o espaço dela alarga para caber, em vez de a carta encolher. */
.fileira, .unidade-voando { --cw: 72px; --ch: 101px; --esc-diagonal: 1; --esc-horizontal: 1; }
.fileira { gap: 5px; height: 148px; padding: 0; }
.fileira .espaco { width: 96px; height: 146px; }
.fileira .espaco:has(> .postura-horizontal), .fileira .espaco:has(> .postura-diagonal) { width: 128px; }
#faixa { height: 104px; padding: 0 210px; }
#combate { right: 16px; width: 180px; }

/* Zonas: Palhaço no centro exato; a mão em leque fica entre o Palhaço e o campo. */
.zona { grid-template-columns: 1fr auto 1fr; gap: 0 12px; align-items: center; }
.zona .info { grid-column: 2; position: relative; display: block; }
.zona .pilhas { grid-column: 3; justify-self: end; }
.zona .mao { grid-column: 1 / -1; justify-self: center; width: 620px; height: auto; justify-content: center; }
.zona-op { height: 196px; grid-template-rows: 124px 72px; }
.zona-op .info, .zona-op .pilhas { grid-row: 1; }
.zona-op .mao { grid-row: 2; align-self: start; align-items: flex-start; }
.zona-eu { height: 252px; grid-template-rows: 114px 138px; }
.zona-eu .mao { grid-row: 1; align-self: end; align-items: flex-end; }
.zona-eu .info, .zona-eu .pilhas { grid-row: 2; }
.info .lado-heroi { position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%); }
.zona-eu .heroi { width: 136px; height: 136px; }
.zona-op .heroi { width: 118px; height: 118px; }
.zona-eu .heroi-nome { font-size: 15px; }

/* Leque: cada carta gira um pouco e as das pontas descem (o JS define --giro e --desce). */
.zona .mao .carta { transform-origin: 50% 100%; transform: translateY(var(--desce, 0px)) rotate(var(--giro, 0deg)); }
.zona-eu .mao .carta { width: 80px; height: 112px; }
.zona-eu .mao .carta.jogavel:hover { transform: translateY(calc(var(--desce, 0px) - 16px)) rotate(var(--giro, 0deg)) scale(1.06); }
.zona-eu .mao .carta.selecionada { transform: translateY(calc(var(--desce, 0px) - 28px)) rotate(var(--giro, 0deg)); }
.zona-eu .mao .carta.arrastando { transform: translateY(var(--desce, 0px)) rotate(var(--giro, 0deg)); }
@keyframes pulsar-combina {
  from { transform: translateY(calc(var(--desce, 0px) - 4px)) rotate(var(--giro, 0deg)); box-shadow: 0 0 0 2px rgba(233, 196, 106, .5), 0 0 8px rgba(233, 196, 106, .4); }
  to { transform: translateY(calc(var(--desce, 0px) - 14px)) rotate(var(--giro, 0deg)); box-shadow: 0 0 0 3px var(--ouro), 0 0 22px rgba(233, 196, 106, .95); }
}
/* O leque do oponente é espelhado: abre para o lado do campo dele. */
.zona-op .mao .carta { width: 54px; height: 76px; transform-origin: 50% 0; transform: translateY(calc(var(--desce, 0px) * -1)) rotate(calc(var(--giro, 0deg) * -1)); }
/* Ao passar o mouse a carta sobe; esta área invisível embaixo dela continua "segurando" o mouse,
   para a carta não descer e subir sem parar quando o cursor está perto da borda de baixo. */
.zona-eu .mao .carta.jogavel::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 34px; }
.zona-eu .mao .carta { transition: transform .16s ease-out, box-shadow .15s, filter .15s; }

/* ---------- Online: salas e convite ---------- */
.online-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 6px; text-align: left; }
.online-caixa { padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .15); }
.online-caixa h3 { margin: 0 0 4px; font-size: 16px; color: var(--ouro); }
.link-sala { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0; }
.link-sala input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; user-select: text;
  color: var(--texto); background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .3);
}
.campo-codigo { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.codigo-sala { font-size: 22px; letter-spacing: 4px; color: var(--ouro); }
.nota.erro { color: #ffb3b3; opacity: 1; }
.nota.destaque { color: var(--ouro); opacity: 1; font-weight: 700; }
.convite {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 14px; background: rgba(233, 196, 106, .14); border: 2px solid var(--ouro);
}
.espera-pontos { display: flex; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.espera-pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); animation: ponto 1s ease-in-out infinite; }
.espera-pontos i:nth-child(2) { animation-delay: .15s; }
.espera-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* ---------- Montar decks: decks prontos (só leitura) ---------- */
.slots h4 { margin: 6px 2px 0; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ouro); }
.slots h4:not(:first-child) { margin-top: 14px; }
.slot.pronto small { opacity: .6; }
.celula.leitura { cursor: default; }
.celula-controles.leitura { justify-content: center; }
.pronto-info h2 { margin: 0; font-family: Georgia, serif; font-size: 24px; }
.pronto-info .nota { margin: 4px 0 0; max-width: 760px; }
.copiar-para { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(233, 196, 106, .1); border: 1px solid rgba(233, 196, 106, .45); }
.copiar-para span { font-weight: 700; margin-right: 4px; }
.nota.aviso-ip { opacity: .95; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .18); text-align: left; }

/* ---------- Menu temático: início, escolha do Palhaço por cartas e VS ---------- */
#modal .caixa:has(.menu-tema) { max-width: min(1000px, 96vw); padding: 20px 30px; background: radial-gradient(ellipse at top, #1a7a42, #0b4423 55%, #072d17); }
.titulo-etapa { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; color: var(--ouro); letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }

.leque-inicio { position: relative; width: 420px; max-width: 100%; height: 200px; margin: 0 auto 6px; }
.leque-inicio img {
  position: absolute; left: 50%; bottom: 0; width: 124px; border-radius: 10px; transform-origin: 50% 170%;
  transform: translateX(-50%) rotate(calc((var(--i) - 1.5) * 13deg)); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
  animation: abrir-leque .9s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i) * 90ms);
}
@keyframes abrir-leque { from { transform: translateX(-50%) translateY(30px) rotate(0deg); opacity: 0; } }

.menu-principal { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); margin: 18px auto 12px; }
.btn-menu {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px; border-radius: 14px; cursor: pointer;
  font: 700 18px Georgia, 'Times New Roman', serif; color: var(--texto); background: rgba(0, 0, 0, .28); border: 2px solid rgba(233, 196, 106, .45);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.btn-menu span { font-size: 20px; }
.btn-menu:hover { transform: translateY(-2px); background: rgba(233, 196, 106, .14); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.btn-menu.principal { color: #2a1a05; background: linear-gradient(#f2d27e, #c99a2e); border-color: #f7e2a6; }
.btn-menu.principal:hover { background: linear-gradient(#f7dc95, #d6a73a); }

/* Cartas dos Palhaços: entram em sequência; a escolhida sobe e brilha na cor do naipe. */
.mesa-cartas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 14px 0 4px; }
.carta-joker {
  --brilho: rgba(233, 196, 106, .95);
  position: relative; width: 178px; aspect-ratio: 1493 / 2000; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), opacity .25s, filter .25s;
  animation: carta-entra .6s cubic-bezier(.3, 1.2, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms);
}
.carta-joker img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); transition: filter .25s; }
.carta-joker:hover { transform: translateY(-8px) rotate(-1.5deg); }
.carta-joker.ativo { transform: translateY(-14px) scale(1.04); }
.carta-joker.ativo img { filter: drop-shadow(0 0 14px var(--brilho)) drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.com-escolha .carta-joker:not(.ativo) { opacity: .6; filter: saturate(.7); }
.com-escolha .carta-joker:not(.ativo):hover { opacity: .9; }
.carta-joker.cor-azul { --brilho: rgba(90, 140, 255, .95); }
.carta-joker.cor-vermelho { --brilho: rgba(255, 85, 85, .95); }
.carta-joker.cor-verde { --brilho: rgba(70, 220, 120, .95); }
.carta-joker.cor-dourado { --brilho: rgba(255, 205, 80, .95); }
@keyframes carta-entra { from { transform: translateY(40px) rotate(4deg); opacity: 0; } }

/* Caixa branca com as habilidades (texto preto). */
.info-carta { display: grid; place-items: center; min-height: 96px; max-width: 760px; margin: 4px auto 2px; }
.dica-carta { margin: 0; font-style: italic; opacity: .75; }
.caixa-info {
  width: 100%; padding: 14px 18px; border: 3px solid #1b1b1b; border-radius: 12px; text-align: left;
  color: #1b1b1b; background: #fbf8f1; font-size: 14.5px; line-height: 1.45; box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
  animation: info-entra .3s ease-out;
}
.caixa-info h3 { margin: 0 0 8px; font: 700 22px Georgia, 'Times New Roman', serif; color: #111; }
.caixa-info h3 small { margin-left: 6px; font: 400 13px system-ui, sans-serif; color: #555; }
.caixa-info p { margin: 4px 0; }
.caixa-info b { color: #000; }
.caixa-info .plano { color: #444; font-style: italic; }
.caixa-info.cor-azul { border-color: #2c4fd0; } .caixa-info.cor-azul .naipe-info { color: #2c4fd0; }
.caixa-info.cor-vermelho { border-color: #c41e2a; } .caixa-info.cor-vermelho .naipe-info { color: #c41e2a; }
.caixa-info.cor-verde { border-color: #1d8a45; } .caixa-info.cor-verde .naipe-info { color: #1d8a45; }
.caixa-info.cor-dourado { border-color: #c48a12; } .caixa-info.cor-dourado .naipe-info { color: #c48a12; }
@keyframes info-entra { from { opacity: 0; transform: translateY(8px); } }

/* VS: a sua carta à esquerda, o VS no meio e os oponentes à direita. */
.versus { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 26px; }
.lado-eu .carta-joker.grande { width: 205px; cursor: default; animation: none; }
.lado-eu .carta-joker.grande, .lado-eu .carta-joker.grande:hover { transform: none; }
.vs {
  font: italic 900 66px Georgia, 'Times New Roman', serif; color: var(--ouro);
  text-shadow: 0 0 18px rgba(255, 200, 80, .6), 0 4px 0 #6b4020; animation: vs-entra .7s cubic-bezier(.3, 1.6, .5, 1) .35s backwards;
}
@keyframes vs-entra { from { transform: scale(3) rotate(-12deg); opacity: 0; } }
.lado-rivais { display: grid; grid-template-columns: repeat(2, 108px); gap: 14px; padding: 12px 0 2px; }
.lado-rivais .carta-joker { width: 108px; animation-delay: calc(.45s + var(--i, 0) * 90ms); }
.carta-joker.aleatoria { display: grid; place-items: center; border: 3px solid var(--ouro); background: repeating-linear-gradient(45deg, #2a1a10 0 10px, #3b2616 10px 20px); box-shadow: 0 10px 14px rgba(0, 0, 0, .45); }
.carta-joker.aleatoria span { font: 900 64px Georgia, serif; color: var(--ouro); text-shadow: 0 3px 0 #000; }
.carta-joker.aleatoria.ativo { box-shadow: 0 0 16px rgba(255, 205, 80, .95), 0 12px 16px rgba(0, 0, 0, .5); }
.btn.grande { padding: 12px 30px; font-size: 18px; }

@media (max-width: 720px) {
  .titulo-etapa { font-size: 24px; }
  .leque-inicio { height: 150px; }
  .leque-inicio img { width: 90px; }
  .mesa-cartas { gap: 12px; }
  .mesa-cartas .carta-joker { width: calc(50% - 12px); max-width: 170px; }
  .versus { grid-template-columns: 1fr; gap: 6px; }
  .lado-eu .carta-joker.grande { width: 150px; margin: 0 auto; }
  .vs { font-size: 44px; }
  .lado-rivais { grid-template-columns: repeat(2, minmax(0, 132px)); justify-content: center; }
  .lado-rivais .carta-joker { width: 100%; }
}
.menu-tema .acoes-menu { margin-bottom: 0; }

/* =====================================================================================
   Tabuleiro de grama (layout novo): mesa larga, Palhaços soltos, poder no naipe,
   barra do topo, registro suspenso e ações em forma de carta no canto inferior esquerdo.
   ===================================================================================== */
@font-face { font-family: 'Seventy Money'; src: url('fontes/SeventyMoney-Regular.ttf') format('truetype'); font-display: swap; }
:root { --fonte-titulo: 'Seventy Money', Georgia, 'Times New Roman', serif; --fonte-ui: 'Segoe UI', system-ui, sans-serif; --tinta: #1d2a12; }
.titulo, .titulo-etapa, .vs, .titulo-fim, .btn-menu, .caixa-info h3, #modal h2, .texto-regras h2, .pronto-info h2 { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: .5px; }

html, body { background: #9de03a url('arte/mesa/grama.webp') center / cover; }
/* Antes da primeira partida (e sempre que o menu está na frente) a mesa fica escondida e a grama nem é baixada */
html.em-menu, html.em-menu body { background: #d8d1c5; }
html.em-menu #palco { visibility: hidden; }
html.em-menu #mesa { background: none; }
#app { width: 1600px; height: 900px; padding: 0; display: block; gap: 0; }
#mesa {
  position: absolute; inset: 0; width: 1600px; height: 900px; padding: 8px 40px 0; border-radius: 0; overflow: hidden;
  background: #9de03a url('arte/mesa/grama.webp') center / cover; box-shadow: none;
}
#mesa > .zona, #mesa > .fileira, #mesa > #faixa { position: relative; z-index: 2; }

/* Graminhas que balançam com o vento + a linha branca do meio do campo */
#graminhas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tufo {
  position: absolute; width: calc(22px * var(--s)); height: calc(17px * var(--s)); transform-origin: 50% 100%;
  animation: vento var(--d) ease-in-out var(--a) infinite alternate;
}
.tufo svg { display: block; width: 100%; height: 100%; fill: none; stroke: #2a4a12; stroke-width: 2.3; stroke-linecap: round; opacity: .55; }
@keyframes vento { from { transform: rotate(-8deg) skewX(-7deg); } to { transform: rotate(7deg) skewX(6deg); } }
.linha-meio {
  position: absolute; left: 0; right: 0; top: 50%; height: 5px; transform: translateY(-50%); z-index: 1; pointer-events: none;
  background: rgba(255, 255, 255, .78); box-shadow: 0 0 10px rgba(255, 255, 255, .35);
}

/* Barra do topo (desistir, reiniciar, menu) e botão do registro */
#mesa .barra-partida { position: absolute; top: 14px; left: 18px; z-index: 30; display: flex; gap: 8px; }
.btn.btn-topo, .barra-partida .btn.btn-topo {
  flex: none; font: 700 15px var(--fonte-ui); padding: 8px 18px; border-radius: 14px; cursor: pointer;
  color: var(--tinta); background: #fffdf6; border: 2px solid var(--tinta); box-shadow: 0 3px 0 var(--tinta), 0 6px 14px rgba(20, 50, 5, .25);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn.btn-topo:hover:not(:disabled) { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--tinta), 0 10px 18px rgba(20, 50, 5, .3); }
.btn.btn-topo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.btn-log { position: absolute; top: 14px; right: 18px; z-index: 30; }
.btn.btn-log.ativo { background: var(--ouro); }

/* Registro suspenso (à esquerda), com X para fechar */
#painel {
  position: absolute; left: 18px; top: 66px; z-index: 45; width: 340px; height: 560px; padding: 0; gap: 0; border-radius: 16px;
  display: flex; flex-direction: column; background: rgba(16, 30, 10, .96); border: 2px solid var(--tinta); box-shadow: 0 18px 40px rgba(20, 50, 5, .45);
  animation: log-entra .22s ease-out;
}
#painel[hidden] { display: none; }
#painel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
#painel h2 { font: 400 22px var(--fonte-titulo); letter-spacing: 1px; text-transform: none; color: var(--ouro); }
#painel #log { padding: 10px 16px 14px; }
.fechar-log { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); }
.fechar-log:hover { background: #c41e2a; }
@keyframes log-entra { from { opacity: 0; transform: translateX(-14px); } }

/* Zonas: o Palhaço do oponente espia do alto (a mão cobre a parte de baixo) e o seu sobe da borda de baixo. */
.zona .mao { position: relative; z-index: 3; width: 560px; }
.zona .info { z-index: 2; }
.zona-op { height: 200px; grid-template-rows: 138px 62px; }
.zona-op .info { align-self: start; }
.zona-op .pilhas { align-self: start; margin-top: 56px; }
.zona-op .mao { margin-top: -26px; }
.zona-eu { height: 268px; grid-template-rows: 124px 144px; }
.zona-eu .info { align-self: start; }
.pilha label { color: var(--tinta); opacity: .85; font-weight: 700; }

/* Palhaço solto (PNG), respirando de leve */
.heroi.heroi-livre {
  width: 200px; height: 200px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; cursor: default;
}
.zona-eu .heroi.heroi-livre { width: 292px; height: 292px; margin-top: -28px; }
.zona-op .heroi.heroi-livre { width: 236px; height: 236px; margin-top: -12px; }
.zona-op .heroi-png { -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
.heroi-png {
  display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; pointer-events: none;
  animation: respirar-palhaco 5s ease-in-out infinite; filter: drop-shadow(0 10px 12px rgba(20, 50, 5, .35)); transition: filter .25s;
}
.zona-op .heroi-png { animation-duration: 6.2s; animation-delay: -2.4s; }
@keyframes respirar-palhaco {
  0%, 100% { transform: translateY(0) rotate(-1.1deg) scale(1); }
  50% { transform: translateY(-5px) rotate(1.1deg) scale(1.015); }
}
.heroi.heroi-livre.da-vez .heroi-png { filter: drop-shadow(0 0 10px rgba(255, 240, 160, .95)) drop-shadow(0 10px 12px rgba(20, 50, 5, .35)); }
.heroi.heroi-livre.clicavel, .heroi.heroi-livre.destino-alvo { cursor: pointer; box-shadow: none; }
.heroi.heroi-livre.clicavel .heroi-png, .heroi.heroi-livre.destino-alvo .heroi-png {
  filter: drop-shadow(0 0 12px rgba(255, 60, 60, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}
.heroi-livre .heroi-pv { right: auto; left: 18px; top: 112px; bottom: auto; z-index: 2; width: 60px; height: 60px; font: 400 28px var(--fonte-titulo); }
.zona-op .heroi-livre .heroi-pv { left: 2px; top: 30px; bottom: auto; width: 52px; height: 52px; font-size: 23px; }
.heroi-livre .heroi-ferida { left: 4px; top: 178px; bottom: auto; z-index: 2; }
.zona-op .heroi-livre .heroi-ferida { top: 88px; }

/* Poder: o símbolo do naipe ao lado do Palhaço. Pulsa enquanto dá para usar (o do oponente fica parado). */
.info .lado-heroi { left: calc(100% + 4px); }
.zona-op .info .lado-heroi { top: 40%; }
.naipe-espadas { --cn: 90, 140, 255; } .naipe-copas { --cn: 255, 77, 90; } .naipe-paus { --cn: 77, 220, 122; } .naipe-ouros { --cn: 255, 207, 77; }
.poder-naipe { display: block; width: 112px; height: 112px; padding: 0; border: 0; background: none; cursor: default; transition: transform .2s; }
.zona-op .poder-naipe { width: 84px; height: 84px; }
.poder-naipe img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(20, 50, 5, .4)); transition: filter .2s, opacity .2s; }
.poder-naipe.pronto { cursor: pointer; animation: pulsar-naipe 1.2s ease-in-out infinite; }
.poder-naipe.pronto:hover { animation-play-state: paused; transform: scale(1.14); }
@keyframes pulsar-naipe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--cn), 0)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(var(--cn), .95)); }
}
.poder-naipe.usado img { filter: grayscale(.85) brightness(.9) drop-shadow(0 6px 8px rgba(20, 50, 5, .35)); opacity: .7; }
.poder-naipe.ativo img { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px rgba(var(--cn), 1)); }
.onda-poder { position: absolute; z-index: 63; width: 96px; height: 96px; border-radius: 50%; border: 4px solid; pointer-events: none; }

/* Faixa do meio: um pop-up mais largo, com o texto centralizado */
#faixa { height: 96px; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
.caixa-faixa {
  min-width: 440px; max-width: 780px; padding: 9px 30px 11px; border-radius: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(14, 30, 9, .88); border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 8px 22px rgba(20, 50, 5, .35);
}
.caixa-faixa:has(#fase:empty):has(#instrucao:empty) { display: none; }
#instrucao { max-width: 720px; }
#botoes:empty { display: none; }

/* Ações em forma de carta, no canto inferior esquerdo (com Voltar/Cancelar ao lado) */
#cartas-acao { position: absolute; left: 22px; bottom: 16px; z-index: 25; display: flex; align-items: flex-end; gap: 14px; }
.leque-acoes { display: flex; align-items: flex-end; padding-left: 4px; }
.carta-acao {
  --r: 0deg; position: relative; flex: none; width: 128px; aspect-ratio: 300 / 402; margin-left: -30px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(var(--r)); transform-origin: 50% 100%; filter: drop-shadow(4px 6px 0 rgba(5, 18, 2, .45));
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), filter .2s; animation: carta-acao-entra .35s cubic-bezier(.3, 1.3, .5, 1) backwards;
}
.carta-acao:first-child { margin-left: 0; }
.carta-acao:nth-child(1) { --r: -7deg; } .carta-acao:nth-child(2) { --r: -1deg; } .carta-acao:nth-child(3) { --r: 5deg; } .carta-acao:nth-child(4) { --r: 10deg; }
.carta-acao:nth-child(2) { animation-delay: .05s; } .carta-acao:nth-child(3) { animation-delay: .1s; } .carta-acao:nth-child(4) { animation-delay: .15s; }
.carta-acao:hover { z-index: 5; transform: translateY(-20px) rotate(0deg) scale(1.07); filter: drop-shadow(6px 12px 0 rgba(5, 18, 2, .4)); }
.carta-acao:active { transform: translateY(-12px) scale(1.02); }
.carta-acao img { display: block; width: 100%; height: 100%; pointer-events: none; }
.ca-titulo {
  position: absolute; left: 17%; right: 17%; top: 13%; pointer-events: none; text-align: center;
  font: 400 21px/1 var(--fonte-titulo); color: var(--ca-cor); letter-spacing: .3px; text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.ca-sub { position: absolute; left: 17%; right: 17%; bottom: 13.5%; pointer-events: none; text-align: center; font: 700 10px/1.15 var(--fonte-ui); color: #3a3a3a; }
.arte-atacar { --ca-cor: #d8322f; } .arte-defesa { --ca-cor: #1f5fd6; } .arte-comprar { --ca-cor: #b98310; } .arte-sumonar { --ca-cor: #1a1a1a; } .arte-cemiterio { --ca-cor: #8a10b0; }
@keyframes carta-acao-entra { from { opacity: 0; transform: translateY(60px) rotate(var(--r)); } }
.acoes-extra { display: flex; flex-direction: column; gap: 8px; }
.acoes-extra:empty { display: none; }
.acoes-extra .btn {
  font: 700 14px var(--fonte-ui); text-transform: uppercase; letter-spacing: .5px; padding: 9px 16px; border-radius: 12px;
  color: #fff; background: var(--tinta); border: 2px solid var(--tinta); box-shadow: 0 3px 0 #0b1206, 0 6px 12px rgba(20, 50, 5, .25);
}
.acoes-extra .btn:hover:not(:disabled) { background: #2e4420; }

/* Caixas da mesa com o mesmo traço de tinta dos botões (ações passivas, combate e o pop-up do meio) */
#acoes { border: 3px solid var(--tinta); border-radius: 18px; box-shadow: 0 4px 0 var(--tinta), 0 10px 20px rgba(20, 50, 5, .3); }
.acoes-rotulo { font: 400 14px var(--fonte-titulo); letter-spacing: 1px; text-transform: none; opacity: 1; }
.acoes-num b { font: 400 46px var(--fonte-titulo); }
/* Faixa do turno no topo da caixa de ações (a caixa cresce para ela caber) */
.acoes-turno {
  margin: -10px -8px 8px; padding: 4px 6px 5px; border-radius: 15px 15px 0 0; white-space: nowrap;
  background: #fdfbf3; color: var(--tinta); border-bottom: 3px solid var(--tinta);
  font: 400 17px var(--fonte-titulo); letter-spacing: .5px;
}
#combate { background: rgba(16, 30, 10, .95); border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta), 0 16px 34px rgba(20, 50, 5, .4); }
.cb-topo { font: 400 16px var(--fonte-titulo); letter-spacing: 1px; text-transform: none; }
.caixa-faixa { border: 3px solid var(--tinta); box-shadow: 0 4px 0 var(--tinta), 0 10px 22px rgba(20, 50, 5, .3); }
#fase { font: 400 15px var(--fonte-titulo); letter-spacing: 1px; text-transform: none; }

/* Ajuste: Palhaços inteiros (sem cortar as laterais), menores; o seu fica por cima da mão, cobrindo um pouco. */
.heroi.heroi-livre, .zona-eu .heroi.heroi-livre, .zona-op .heroi.heroi-livre { height: auto; margin-top: 0; }
.zona-eu .heroi.heroi-livre { width: 250px; }
.zona-op .heroi.heroi-livre { width: 222px; }
.heroi-png { height: auto; object-fit: initial; }
.zona-eu .info { align-self: end; z-index: 4; }
.zona-op .info { align-self: start; }
.heroi-livre .heroi-pv { left: 4px; top: 30%; }
.zona-op .heroi-livre .heroi-pv { left: -6px; top: 18%; }
.heroi-livre .heroi-ferida { top: calc(30% + 64px); }
.zona-op .heroi-livre .heroi-ferida { top: calc(18% + 56px); }
.zona-eu .info .lado-heroi { top: 70%; }
/* O leque do oponente tem o mesmo arco do seu. */
.zona-op .mao .carta { transform-origin: 50% 100%; transform: translateY(var(--desce, 0px)) rotate(var(--giro, 0deg)); }

/* Ajuste 2: o topo do seu Palhaço fica sempre no mesmo lugar (um pouco abaixo do meio das cartas da mão),
   seja qual for a proporção da arte; o que passar da borda de baixo fica cortado. PV mais embaixo. */
.zona-eu .info { align-self: start; margin-top: -44px; }
.zona-eu .heroi-livre .heroi-pv { top: 120px; left: 0; }
.zona-eu .heroi-livre .heroi-ferida { top: 128px; left: 64px; }
.zona-eu .info .lado-heroi { top: 118px; }

/* Cartas de ação próprias: +1 de dano (punhal), cura (poção) e berserk (olhos) */
.arte-dano { --ca-cor: #1a64d6; } .arte-cura { --ca-cor: #e04545; } .arte-berserk { --ca-cor: #13921a; }

/* Baralhos 16% maiores */
.pilha .carta { width: 74px; height: 104px; }
.zona-op .pilha .carta { width: 65px; height: 90px; }
.ca-titulo { white-space: nowrap; } .ca-titulo.longo { font-size: 16px; top: 14%; }

/* Ícones que voam: espadinha (+1 de Espadas), escudinho (+1 de Paus), Ouros extra e bolinha de cura */
.icone-voando { position: absolute; z-index: 64; pointer-events: none; display: flex; align-items: center; gap: 1px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.icone-voando svg { width: 30px; height: 30px; }
.icone-mais { font: 400 19px var(--fonte-titulo); color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .6); }
.bonus-espadas .icone-mais { color: #cfe0ff; }
.bonus-paus .icone-mais { color: #c9f5d6; }
.token-ouro img { display: block; width: 38px; height: 38px; }
.bola-cura {
  width: 40px; height: 40px; border-radius: 50%; justify-content: center; border: 2px solid #fff;
  font: 400 19px var(--fonte-titulo); color: #fff; text-shadow: 0 1px 0 #5e0a10;
  background: radial-gradient(circle at 35% 30%, #ff9a9a, #d0202e 60%, #7d0d14); box-shadow: 0 0 16px rgba(255, 60, 60, .9);
}

/* Cartas das magias dos pares (tema roxo) */
.arte-parouros, .arte-parpaus, .arte-parespadas, .arte-reflexo, .arte-cemiterio { --ca-cor: #7a0aa8; }

/* Par de Copas: escolher quem volta do cemitério (figura + número) */
.grade-mortos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 14px 0; }
.morto { display: flex; gap: 4px; padding: 10px; border-radius: 14px; cursor: pointer; background: rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .2); transition: transform .15s, border-color .15s; }
.morto:hover { transform: translateY(-4px); border-color: var(--ouro); }

/* Pop-up do reflexo (par de números iguais), no meio da tela */
.reflexo-popup { display: flex; align-items: center; gap: 22px; text-align: left; max-width: 640px; }
.reflexo-arte { width: 150px; flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); animation: reflexo-gira .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes reflexo-gira { from { transform: rotate(-20deg) scale(.6); opacity: 0; } }
.reflexo-popup h2 { color: #d9a8ff; font-size: 34px; }
.reflexo-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cb-item.refletido { border-color: #c48cff; background: rgba(122, 10, 168, .35); }

/* Pop-up do reflexo, sem caixa: mesa escurecida, carta do espelho brilhando e os atacantes como opções */
#modal:has(.reflexo-tela) { background: rgba(6, 14, 4, .72); }
#modal .caixa:has(.reflexo-tela) { max-width: min(1100px, 96vw); background: none; border: 0; box-shadow: none; overflow: visible; }
.reflexo-tela { display: flex; align-items: center; gap: 34px; text-align: left; }
.refl-carta.carta-acao { --r: 0deg; width: 210px; margin: 0; cursor: default; transform: rotate(-3deg); animation: refl-entra .55s cubic-bezier(.3, 1.4, .5, 1) backwards, refl-brilho 1.6s ease-in-out .55s infinite alternate; }
.refl-carta.carta-acao:hover { transform: rotate(-3deg); }
.refl-carta .ca-titulo { font-size: 30px; top: 12.5%; }
@keyframes refl-entra { from { transform: rotate(-24deg) scale(.5); opacity: 0; } }
@keyframes refl-brilho { from { filter: drop-shadow(0 0 10px rgba(214, 60, 255, .7)); } to { filter: drop-shadow(0 0 26px rgba(214, 60, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, .6)); } }
.refl-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.refl-titulo { margin: 0; font: 400 40px var(--fonte-titulo); color: #fff; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.refl-titulo span { color: #ffc93c; }
.refl-pergunta { margin: 0 0 8px; font: 800 22px var(--fonte-ui); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.refl-atacantes { display: flex; flex-wrap: wrap; gap: 14px; --cw: 72px; --ch: 101px; --esc-diagonal: 1; --esc-horizontal: 1; }
.refl-unidade {
  position: relative; width: 98px; height: 148px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), filter .18s; animation: carta-entra .45s cubic-bezier(.3, 1.2, .5, 1) backwards;
}
.refl-unidade:nth-child(2) { animation-delay: .06s; } .refl-unidade:nth-child(3) { animation-delay: .12s; } .refl-unidade:nth-child(4) { animation-delay: .18s; } .refl-unidade:nth-child(5) { animation-delay: .24s; }
.refl-unidade:hover { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 0 14px rgba(214, 60, 255, .95)); }
.refl-unidade .tags { display: none; }
.refl-nao {
  align-self: center; margin-top: 14px; padding: 10px 26px; border-radius: 16px; cursor: pointer;
  font: 900 24px var(--fonte-ui); text-transform: uppercase; color: #111; background: #fff; border: 3px solid #111; box-shadow: 0 4px 0 #111;
  transition: transform .12s, box-shadow .12s;
}
.refl-nao:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #111; }
.refl-nao:active { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
/* (tamanhos maiores, como no desenho) */
.reflexo-tela { gap: 44px; }
.refl-carta.carta-acao { width: 270px; }
.refl-carta .ca-titulo { font-size: 38px; }
.refl-titulo { font-size: 56px; }
.refl-pergunta { font-size: 28px; margin-bottom: 14px; }
.refl-atacantes { gap: 22px; --cw: 92px; --ch: 129px; }
.refl-unidade { width: 122px; height: 184px; }
.refl-nao { font-size: 30px; padding: 12px 32px; margin-top: 18px; }

/* Palco de cartas (abertura, mulligan, descarte): sem caixa, mesa escurecida, cartas no meio */
#modal:has(.palco-cartas) { background: rgba(6, 14, 4, .72); }
#modal .caixa:has(.palco-cartas) { max-width: min(1200px, 96vw); background: none; border: 0; box-shadow: none; overflow: visible; }
.palco-cartas { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.palco-titulo { margin: 0; font: 400 46px var(--fonte-titulo); color: #fff; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.palco-sub { margin: 0 0 10px; max-width: 760px; font: 700 18px var(--fonte-ui); color: #fff; opacity: .92; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.palco-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 18px 6px 10px; }
.palco-carta { width: 120px; height: 168px; border-radius: 10px; box-shadow: 0 10px 18px rgba(0, 0, 0, .45); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s; }
.palco-carta.clicavel { cursor: pointer; }
.palco-carta.clicavel:hover { transform: translateY(-10px) scale(1.04); }
.palco-carta.selecionada { transform: translateY(-22px) scale(1.06); box-shadow: 0 0 0 4px #ffc93c, 0 0 26px rgba(255, 201, 60, .9), 0 14px 22px rgba(0, 0, 0, .5); }
.palco-botoes { display: flex; gap: 14px; margin-top: 14px; }
.palco-btn {
  padding: 11px 28px; border-radius: 16px; cursor: pointer; font: 900 22px var(--fonte-ui); text-transform: uppercase;
  color: #111; background: #fff; border: 3px solid #111; box-shadow: 0 4px 0 #111; transition: transform .12s, box-shadow .12s, opacity .15s;
}
.palco-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #111; }
.palco-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
.palco-btn:disabled { opacity: .45; cursor: default; }
.palco-btn.secundario { background: #1d2a12; color: #fff; border-color: #fff; box-shadow: 0 4px 0 #000; }

/* Par usado numa magia: as duas cartas sobem, brilham roxo e se desfazem */
.par-magia { position: absolute; z-index: 66; width: 100px; height: 140px; border-radius: 9px; pointer-events: none; background: #fdfbf3; }

/* Pop-ups do combate somem com um fade no fim (sem botão Continuar) */
#combate.saindo, #anuncio.saindo { opacity: 0; transition: opacity .4s ease; }
#combate.duelo-ativo { cursor: pointer; }

/* Carta Refletir: pulsa forte com brilho roxo para chamar atenção */
.carta-acao.chamativa { animation: carta-acao-entra .35s cubic-bezier(.3, 1.3, .5, 1) backwards, refletir-pulsa 1s ease-in-out .35s infinite; z-index: 4; }
.carta-acao.chamativa.ativa { animation: none; transform: translateY(-22px) rotate(0deg) scale(1.08); filter: drop-shadow(0 0 22px rgba(214, 60, 255, 1)) drop-shadow(0 0 6px #fff); }
@keyframes refletir-pulsa {
  0%, 100% { transform: rotate(var(--r)) scale(1); filter: drop-shadow(0 0 6px rgba(214, 60, 255, .6)); }
  50% { transform: translateY(-10px) rotate(0deg) scale(1.1); filter: drop-shadow(0 0 26px rgba(214, 60, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, .7)); }
}

/* Escolha do par na mão: as que formam par brilham roxo, o par escolhido sobe; o par descartado some */
.zona-eu .mao .carta.par-candidato { cursor: pointer; box-shadow: 0 0 0 3px rgba(214, 60, 255, .7), 0 0 16px rgba(214, 60, 255, .7); }
.zona-eu .mao .carta.par-escolhido { cursor: pointer; z-index: 3; transform: translateY(calc(var(--desce, 0px) - 30px)) rotate(var(--giro, 0deg)); box-shadow: 0 0 0 4px #d63cff, 0 0 26px rgba(214, 60, 255, 1); }
.zona-eu .mao .carta.par-usado { visibility: hidden; }

/* Setas presas no mouse: roxa (refletir) e dourada (poder do Palhaço) */
.seta.mira-reflexo .linha { stroke: #c86bff; stroke-dasharray: 14 9; }
.seta.mira-reflexo .brilho { stroke: #c86bff; }
.seta.mira-poder .linha { stroke: #ffd166; stroke-dasharray: 14 9; }
.seta.mira-poder .brilho { stroke: #ffd166; }

/* Cartas de ação ainda sem arte (placeholder): moldura vazia + desenho simples */
.ca-desenho { position: absolute; left: 50%; top: 52%; width: 54%; transform: translate(-50%, -50%); pointer-events: none; }
.ca-desenho svg { display: block; width: 100%; height: auto; }
.arte-vazia { --ca-cor: #1d2a12; }
.ca-titulo.duas-linhas { white-space: normal; font-size: 16px; line-height: .95; top: 12%; }

/* Carta Refletir flutuando no meio da mesa enquanto a seta roxa (que sai dela) escolhe o atacante */
.carta-acao.refletir-flutuante, .carta-acao.refletir-saindo {
  position: absolute; z-index: 45; width: 120px; margin: 0; pointer-events: none; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(214, 60, 255, .95)) drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.carta-acao.refletir-flutuante { animation: flutuar-refletir 2.2s ease-in-out 1.6s infinite; }
@keyframes flutuar-refletir {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-2.5deg); filter: drop-shadow(0 0 14px rgba(214, 60, 255, .85)) drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
  50% { transform: translate(-50%, -50%) translateY(-12px) rotate(2.5deg); filter: drop-shadow(0 0 28px rgba(214, 60, 255, 1)) drop-shadow(0 16px 16px rgba(0, 0, 0, .4)); }
}
.refletir-flutuante .ca-titulo, .refletir-saindo .ca-titulo { font-size: 17px; }

/* ---------- Refletir: o resto da mão escurece enquanto o par espera o sacrifício ---------- */
.zona-eu .mao .carta.par-apagada { filter: brightness(.38) saturate(.5); }
.zona-eu .mao .carta.par-escolhido { animation: par-chama 1s ease-in-out infinite; }
@keyframes par-chama {
  0%, 100% { box-shadow: 0 0 0 4px #d63cff, 0 0 18px rgba(214, 60, 255, .8); }
  50% { box-shadow: 0 0 0 5px #e48bff, 0 0 34px rgba(214, 60, 255, 1); }
}

/* ---------- Errou o golpe: risquinhos de vento e "QUE VERGONHA!" ---------- */
.risco-vento {
  position: absolute; z-index: 60; width: 70px; height: 4px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
}
.que-vergonha {
  position: absolute; left: 50%; top: 45%; z-index: 95; pointer-events: none; white-space: nowrap;
  font-family: 'Seventy Money', Georgia, serif; font-size: 150px; line-height: 1; letter-spacing: 2px;
  color: #ffdf3d; -webkit-text-stroke: 5px #5a1206; paint-order: stroke fill;
  text-shadow: 0 8px 0 #5a1206, 0 14px 28px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%) rotate(-6deg);
}
.arte-passar { --ca-cor: #1f5fd6; } .arte-preparar { --ca-cor: #d8322f; } .arte-naodefender { --ca-cor: #1f5fd6; }
.arte-sumonar { --ca-cor: #8a10b0; } .arte-comprarletra, .arte-comprarnumero, .arte-dado { --ca-cor: #b98310; }

/* Leque das cartas de ação: inclinação para até 7 cartas; com 5 ou mais elas ficam mais apertadas e,
   ao passar o mouse (ou clicar), a carta sobe e as da direita abrem espaço para ela aparecer inteira. */
.carta-acao:nth-child(5) { --r: 14deg; animation-delay: .2s; } .carta-acao:nth-child(6) { --r: 17deg; animation-delay: .25s; } .carta-acao:nth-child(7) { --r: 20deg; animation-delay: .3s; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao { margin-left: -54px; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:first-child { margin-left: 0; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(1) { --r: -8deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(2) { --r: -4deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(3) { --r: 0deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(4) { --r: 4deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(5) { --r: 8deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(6) { --r: 12deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:nth-child(7) { --r: 16deg; }
.leque-acoes:has(> .carta-acao:nth-child(5)) .carta-acao:is(:hover, :active, .mirando) ~ .carta-acao { transform: translateX(48px) rotate(var(--r)); }
.carta-acao.mirando { z-index: 5; transform: translateY(-22px) rotate(0deg) scale(1.08); filter: drop-shadow(0 0 16px rgba(255, 214, 80, 1)) drop-shadow(0 0 5px #fff); }
/* Ourinhos: a arte é cortada embaixo; um pouco maior para o corte encostar na borda da tela (o topo não muda). */
.zona-eu .heroi.heroi-livre[data-pal="ourinhos"] { width: 288px; }

/* Palcos atrás dos Palhaços (por cima da grama, por baixo de todo o resto) */
.palco { position: absolute; left: 50%; z-index: 0; pointer-events: none; user-select: none; filter: drop-shadow(8px 11px 0 rgba(5, 18, 2, .42)); }
.palco[hidden] { display: none; }
.palco-op { top: -8px; width: 470px; transform: translateX(-50%); }
.palco-eu { bottom: -26px; width: 680px; transform: translateX(-50%); }

/* Sombra nos Palhaços: contorno escuro fino + sombra projetada, para destacar do cenário. */
.heroi-png { filter: drop-shadow(0 0 1.5px rgba(8, 22, 4, .85)) drop-shadow(7px 10px 0 rgba(5, 18, 2, .42)); }
.heroi.heroi-livre.da-vez .heroi-png { filter: drop-shadow(0 0 1.5px rgba(8, 22, 4, .85)) drop-shadow(0 0 10px rgba(255, 240, 160, .95)) drop-shadow(7px 10px 0 rgba(5, 18, 2, .42)); }

/* Faixas dos lados da mesa (tela mais larga que 16:9): degradê na cor dos naipes, da borda da tela
   (cor viva) até a mesa (escurecido), com uma sombra suave na borda da mesa no lugar do recorte. */
html {
  --lado-esq: #3aa335; --lado-dir: #3aa335;
  background:
    linear-gradient(90deg, var(--lado-esq) 0, color-mix(in srgb, var(--lado-esq) 45%, #0d1f08) var(--faixa-lateral, 0px)) left / 50.1% 100% no-repeat,
    linear-gradient(270deg, var(--lado-dir) 0, color-mix(in srgb, var(--lado-dir) 45%, #0d1f08) var(--faixa-lateral, 0px)) right / 50.1% 100% no-repeat,
    #14300c;
}
html body { background: transparent; }
html #app { box-shadow: 0 0 46px 6px rgba(0, 0, 0, .5); }

/* Cobra dividindo o campo (substitui a linha branca) */
.linha-meio { display: none; }
#cobra { position: absolute; left: 0; top: 50%; width: 1600px; height: 92px; transform: translateY(-50%); z-index: 1; pointer-events: none; filter: drop-shadow(0 7px 5px rgba(5, 18, 2, .4)); }

/* Baralhos 30% maiores */
.pilha .carta { width: 96px; height: 135px; }
.zona-op .pilha .carta { width: 85px; height: 117px; }

/* Opções: caixa do meio escondida (padrão) */
html.sem-caixa-meio #faixa .caixa-faixa { display: none; }

/* Paumol: a arte termina reta embaixo; um pouco mais para baixo para o corte nunca aparecer (nem na respiração). */
.zona-eu .heroi-livre[data-pal="paumol"] .heroi-png { position: relative; top: 16px; } /* (margem desceria o Palhaço inteiro, com o PV) */
/* Seus baralhos um pouco mais para cima, com respiro para o nome (Letras / Números) embaixo. */
.zona-eu .pilhas { transform: translateY(-26px); }
.zona-eu .pilha label { margin-bottom: 4px; }

/* Animações dos poderes dos Palhaços */
.naipe-subindo { position: absolute; z-index: 60; width: 30px; height: auto; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.corte-sangue {
  position: absolute; z-index: 61; width: 190px; height: 10px; pointer-events: none; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #fff 18%, #ff3b3b 45%, #b0001a 70%, transparent);
  box-shadow: 0 0 12px 3px rgba(220, 20, 40, .8); transform-origin: 0 50%;
}
.gota-sangue {
  position: absolute; z-index: 60; width: 9px; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #ff6b6b, #a00012 60%, #5c0009); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.selo-poder {
  position: absolute; top: -12px; right: -10px; z-index: 6; width: 30px; height: auto; pointer-events: none;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.selo-poder.entra, .selo-dado.entra { animation: selo-entra .45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.selo-vigilia { right: auto; left: -10px; }
@keyframes selo-entra { from { transform: scale(0) rotate(-40deg); } }

/* ---------- Decorações do cenário (js/decoracao.js) ---------- */
.decoracoes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.deco { position: absolute; }
/* a sombra fica só na imagem parada (no container ela seria recalculada a cada quadro das partes animadas) */
.deco-base { filter: drop-shadow(7px 9px 0 rgba(5, 18, 2, .42)); }
.deco-parte { will-change: transform; }
.deco-base, .deco-parte { position: absolute; display: block; user-select: none; pointer-events: none; }
.deco-base { inset: 0; width: 100%; height: 100%; }
.deco-clique { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; border-radius: 12px; }
.deco-clique:focus-visible { outline: 2px dashed rgba(255, 255, 255, .7); }
.deco-clique-img { pointer-events: auto; cursor: pointer; }

/* Ratinhos: espasmo de orelha (rapidinho) */
.deco-ratos-orelhaa.espasmo, .deco-ratos-orelhab.espasmo, .deco-ratos-orelhac.espasmo, .deco-ratos-orelhad.espasmo { animation: orelha-espasmo .26s ease-out; }
.deco-ratos-orelhaa.espasmo2, .deco-ratos-orelhab.espasmo2, .deco-ratos-orelhac.espasmo2, .deco-ratos-orelhad.espasmo2 { animation: orelha-espasmo .2s ease-out 2; }
@keyframes orelha-espasmo { 0% { transform: rotate(0); } 25% { transform: rotate(-11deg) scale(.96, 1.03); } 55% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
.deco-ratos-orelhab.espasmo, .deco-ratos-orelhad.espasmo, .deco-ratos-orelhab.espasmo2, .deco-ratos-orelhad.espasmo2 { animation-name: orelha-espasmo-dir; }
@keyframes orelha-espasmo-dir { 0% { transform: rotate(0); } 25% { transform: rotate(11deg) scale(.96, 1.03); } 55% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
/* TV: brilho tremulando na tela e luz de contorno nos ratos, na cor escolhida */
.tv-brilho {
  position: absolute; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--tv) 45%, #fff) 0%, var(--tv) 60%, color-mix(in srgb, var(--tv) 70%, #000) 100%);
  opacity: .78; animation: tv-pisca 2.6s steps(1) infinite;
  transition: background .25s;
}
.tv-luz {
  position: absolute; pointer-events: none; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(ellipse at 22% 52%, color-mix(in srgb, var(--tv) 55%, transparent) 0%, color-mix(in srgb, var(--tv) 22%, transparent) 38%, transparent 70%);
  filter: blur(6px); opacity: .9; animation: tv-pisca 2.6s steps(1) infinite; transition: background .25s;
}
.tv-luz.troca { animation: tv-troca .35s ease-out, tv-pisca 2.6s steps(1) .35s infinite; }
.tv-brilho.troca { animation: tv-troca .35s ease-out, tv-pisca 2.6s steps(1) .35s infinite; }
@keyframes tv-pisca { 0%, 100% { opacity: .75; } 37% { opacity: .55; } 39% { opacity: .85; } 71% { opacity: .62; } 73% { opacity: .8; } }
@keyframes tv-respira { from { filter: brightness(.95); } to { filter: brightness(1.12); } }
@keyframes tv-troca { 0% { opacity: 1; filter: brightness(2); } 100% { opacity: .75; filter: none; } }
.deco-ratos-silhueta { filter: drop-shadow(-2px -1px 1.5px var(--tv)) drop-shadow(-1px 0 4px color-mix(in srgb, var(--tv) 75%, transparent)); transition: filter .25s; }
.tv-botao { border-radius: 18px; }

/* Cinzeiro: fumaça subindo e se espalhando */
.fumaca { position: absolute; width: 0; height: 0; pointer-events: none; }
.fumaca-puff {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 246, 246, .95) 0%, rgba(215, 215, 220, .7) 40%, rgba(190, 190, 200, .25) 62%, transparent 74%);
  will-change: transform, opacity; animation: fumaca-sobe 3.8s ease-out forwards;
}
@keyframes fumaca-sobe {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  10% { opacity: 1; }
  35% { transform: translate(var(--dx1), -34px) scale(1.1); }
  65% { transform: translate(var(--dx2), -72px) scale(1.9); opacity: .7; }
  100% { transform: translate(var(--dx3), -118px) scale(2.8); opacity: 0; }
}

/* Barata: corpo respirando, antenas balançando; isqueiro com chama ou faíscas */
.deco-barata { animation: barata-respira 2.6s ease-in-out infinite; transform-origin: 70% 100%; }
@keyframes barata-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .992) translateY(.5px); } }
.deco-barata-antenaesq { animation: antena-barata 2.1s ease-in-out infinite alternate; }
.deco-barata-antenadir { animation: antena-barata 1.7s ease-in-out -.6s infinite alternate-reverse; }
@keyframes antena-barata { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.isqueiro-botao { border-radius: 30px; }
.isqueiro-ponto { position: absolute; width: 0; height: 0; pointer-events: none; }
.isqueiro-chama { position: absolute; left: -9px; bottom: 0; width: 18px; height: 34px; animation: chama-acende .18s ease-out; transform-origin: 50% 100%; }
.isqueiro-chama i {
  position: absolute; inset: 0; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 78%, #fff 0%, #ffe680 22%, #ffab2e 50%, rgba(255, 90, 20, .8) 72%, transparent 76%);
  box-shadow: 0 0 14px 6px rgba(255, 170, 60, .55); animation: chama-tremula .12s ease-in-out infinite alternate; transform-origin: 50% 100%;
}
.isqueiro-chama.apagando { animation: chama-apaga .45s ease-in forwards; }
@keyframes chama-acende { from { transform: scale(.2, .1); opacity: 0; } }
@keyframes chama-tremula { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.92, 1.08) skewX(4deg); } }
@keyframes chama-apaga { to { transform: scale(.2, .1); opacity: 0; } }
.faisca-isqueiro {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff3a0;
  box-shadow: 0 0 6px 2px rgba(255, 190, 60, .9); animation: faisca-voa .38s ease-out forwards;
}
@keyframes faisca-voa { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--fx), var(--fy)) scale(.3); opacity: 0; } }
.faisca-flash { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 200, .95), transparent 70%); animation: faisca-flash .22s ease-out forwards; }
@keyframes faisca-flash { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Formigas: anteninhas e a espada que treme */
.antena-formiga { animation: antena-formiga 1s ease-in-out infinite alternate; }
@keyframes antena-formiga { from { transform: rotate(-9deg); } to { transform: rotate(8deg); } }
.deco-formigas-espada.treme { animation: espada-treme .55s cubic-bezier(.3, 0, .4, 1); }
@keyframes espada-treme {
  0% { transform: rotate(0); } 12% { transform: rotate(-3.5deg); } 26% { transform: rotate(3deg); } 40% { transform: rotate(-2.4deg); }
  54% { transform: rotate(1.8deg); } 68% { transform: rotate(-1.1deg); } 82% { transform: rotate(.6deg); } 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .deco *, .deco { animation: none !important; } }

/* Desempenho: o que fica animando o tempo todo ganha camada própria na placa de vídeo */
.heroi-png, #cobra, .deco-barata { will-change: transform; }

/* Palhaços com contorno preto (2 px em volta da arte) + a sombra no chão, para destacar do cenário */
.heroi-png { --contorno: drop-shadow(2px 0 0 #0b0b0b) drop-shadow(-2px 0 0 #0b0b0b) drop-shadow(0 2px 0 #0b0b0b) drop-shadow(0 -2px 0 #0b0b0b); }
.heroi-png { filter: var(--contorno) drop-shadow(7px 10px 0 rgba(5, 18, 2, .42)); }
.heroi.heroi-livre.da-vez .heroi-png { filter: var(--contorno) drop-shadow(0 0 10px rgba(255, 240, 160, .95)) drop-shadow(7px 10px 0 rgba(5, 18, 2, .42)); }
.heroi.heroi-livre.clicavel .heroi-png, .heroi.heroi-livre.destino-alvo .heroi-png { filter: var(--contorno) drop-shadow(0 0 12px rgba(255, 60, 60, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
/* PV do seu Palhaço um pouco mais alto (não encosta na borda de baixo) */
.zona-eu .heroi-livre .heroi-pv { top: 104px; }
.zona-eu .heroi-livre .heroi-ferida { top: 112px; }

/* Formigas e barata: em vez da sombra copiando a arte, uma sombra redonda e dura no chão, embaixo do enfeite */
.deco-formigas .deco-base, .deco-barata .deco-base { filter: none; }
.deco-formigas::before, .deco-barata::before { content: ''; position: absolute; border-radius: 50%; background: rgba(5, 18, 2, .28); pointer-events: none; }
.deco-formigas::before { left: 4%; top: 30%; width: 94%; height: 68%; }
.deco-barata::before { left: calc(8% + 25px); top: 86%; width: 88%; height: 13%; }
.carta-acao.mirando-roxo { z-index: 5; transform: translateY(-22px) rotate(0deg) scale(1.08); filter: drop-shadow(0 0 16px rgba(214, 60, 255, 1)) drop-shadow(0 0 5px #fff); }

/* Botões principais (antes dourados) no mesmo estilo branco dos botões da mesa (Desistir, Reiniciar…) */
.btn.principal, .btn-menu.principal {
  color: var(--tinta); background: #fffdf6; border: 2px solid var(--tinta); font-weight: 700;
  box-shadow: 0 3px 0 var(--tinta), 0 6px 14px rgba(20, 50, 5, .25); transition: transform .12s, box-shadow .12s, background .12s;
}
.btn.principal:hover:not(:disabled), .btn-menu.principal:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--tinta), 0 10px 18px rgba(20, 50, 5, .3); }
.btn.principal:active, .btn-menu.principal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }



/* Leque com 7 ou mais cartas de ação: ainda mais espremido, e todas inclinadas (até a 10ª) */
.carta-acao:nth-child(8) { --r: 23deg; animation-delay: .35s; } .carta-acao:nth-child(9) { --r: 26deg; } .carta-acao:nth-child(10) { --r: 29deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao { margin-left: -76px; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:first-child { margin-left: 0; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(1) { --r: -9deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(2) { --r: -6deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(3) { --r: -3deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(4) { --r: 0deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(5) { --r: 3deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(6) { --r: 6deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(7) { --r: 9deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(8) { --r: 12deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(9) { --r: 15deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:nth-child(10) { --r: 18deg; }
.leque-acoes:has(> .carta-acao:nth-child(7)) .carta-acao:is(:hover, :active, .mirando, .mirando-roxo) ~ .carta-acao { transform: translateX(70px) rotate(var(--r)); }
.leque-acoes:has(> .carta-acao:nth-child(9)) .carta-acao { margin-left: -88px; }
.leque-acoes:has(> .carta-acao:nth-child(9)) .carta-acao:first-child { margin-left: 0; }

/* Caixinha de custo das cartas de ação */
/* Carta de cura com o PV já no limite: meio apagada (clicar nela mostra o "não") */
.carta-acao.cura-no-limite { filter: grayscale(.7) brightness(.92); }
/* Aviso "o limite é 4 de defesa" (ou de PV) em cima do Senhor(a) ou do Palhaço */
.aviso-limite {
  position: absolute; z-index: 60; pointer-events: none; white-space: nowrap; transform: translate(-50%, 0);
  padding: 6px 14px; border-radius: 999px; font: 400 20px var(--fonte-titulo); color: #fff;
  background: #c41e2a; border: 3px solid var(--tinta); box-shadow: 3px 4px 0 var(--tinta);
}

#caixa-custo {
  position: fixed; z-index: 200; max-width: 260px; pointer-events: none; padding: 8px 11px; border-radius: 10px;
  font: 600 13px/1.35 var(--fonte-ui); color: var(--tinta); background: #fffdf6; border: 2px solid var(--tinta);
  box-shadow: 3px 4px 0 rgba(5, 18, 2, .45); animation: custo-entra .12s ease-out;
}
#caixa-custo b { color: #8a10b0; margin-right: 4px; }
#caixa-custo[hidden] { display: none; }
@keyframes custo-entra { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Tutorial: balão que conversa, foco que escurece o resto e setinha que pula ---------- */
#tut { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
#tut:not(.mostrando) > * { display: none; }
#tut .tut-veu { position: fixed; inset: 0; background: rgba(8, 14, 4, .55); }
#tut .tut-foco {
  position: fixed; border-radius: 16px; box-shadow: 0 0 0 4px #ffd84d, 0 0 26px 6px rgba(255, 216, 77, .8);
  transition: left .25s, top .25s, width .25s, height .25s;
}
#tut.livre .tut-veu { background: rgba(8, 14, 4, .15); }
#tut .tut-seta {
  position: fixed; transform: translateX(-50%); font-size: 34px; color: #ffd84d; text-shadow: 0 3px 0 #1d2a12, 0 0 12px rgba(0, 0, 0, .6);
  animation: tut-pula .6s ease-in-out infinite alternate;
}
@keyframes tut-pula { to { transform: translate(-50%, 10px); } }
#tut .tut-balao {
  position: fixed; width: min(440px, calc(100vw - 24px)); pointer-events: auto; padding: 14px 18px 12px;
  background: #fffdf4; color: #1d2a12; border: 3px solid #1d2a12; border-radius: 16px; box-shadow: 5px 7px 0 #1d2a12;
  font: 500 17px/1.45 var(--fonte-ui); transition: left .25s, top .25s;
}
#tut .tut-balao.entra { animation: tut-entra .28s cubic-bezier(.3, 1.4, .5, 1); }
#tut .tut-balao.treme { animation: tut-treme .55s ease-in-out 2; }
@keyframes tut-treme {
  0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-12px) rotate(-2deg); } 30% { transform: translateX(10px) rotate(2deg); }
  45% { transform: translateX(-8px) rotate(-1.5deg); } 60% { transform: translateX(6px) rotate(1deg); } 75% { transform: translateX(-3px); }
}
/* Carta que o tutorial pede para jogar: flutua (translate não briga com o transform do leque) */
.tut-destaque { animation: tut-flutua .7s ease-in-out infinite alternate !important; filter: drop-shadow(0 0 10px rgba(255, 216, 77, .95)) !important; z-index: 5 !important; }
@keyframes tut-flutua { from { translate: 0 0; } to { translate: 0 -16px; } }
/* Falas sobre o resultado: as setas do combate somem para a mesa ficar legível */
body.tut-sem-setas #setas, body.tut-sem-setas .unidade .tags { opacity: 0 !important; transition: opacity .25s; }
/* Algo que a fala aponta (as bolinhas de defesa): cresce e brilha */
.tut-pulsa { animation: tut-pulsa 0.55s ease-in-out infinite alternate !important; z-index: 6 !important; }
@keyframes tut-pulsa { from { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 0 rgba(255, 216, 77, 0)); } to { transform: translateX(-50%) scale(1.7); filter: drop-shadow(0 0 8px rgba(255, 216, 77, 1)); } }
/* Trecho de uma dica que o tutorial circula (ex.: "só pode ser equipado com números de 2 a 4") */
.tut-circula { position: relative; display: inline-block; padding: 1px 6px; border-radius: 999px; outline: 3px solid #ff5a5a; outline-offset: 2px; animation: tut-circula .6s ease-in-out infinite alternate; }
@keyframes tut-circula { from { outline-color: rgba(255, 90, 90, .55); box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); } to { outline-color: #ff5a5a; box-shadow: 0 0 14px 4px rgba(255, 90, 90, .7); } }
/* Dado do tutorial por cima do balão; na compra, só o baralho que o tutorial pede flutua */
body.tut-dado #dados3d { z-index: 450; }
body.tut-compra .pilha.pulsando { animation: none !important; }
body.tut-compra .seta-compra { display: none !important; }
/* Seta do ataque pulsando enquanto o tutorial fala dela (só brilho e espessura: base e ponta não saem do lugar) */
body.tut-pulsa-seta #setas .seta { animation: tut-pulsa-seta .6s ease-in-out infinite alternate; }
body.tut-pulsa-seta #setas .seta .linha { animation: tut-pulsa-linha .6s ease-in-out infinite alternate; }
@keyframes tut-pulsa-seta { from { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .4)); } to { filter: drop-shadow(0 0 12px rgba(255, 230, 120, 1)); } }
@keyframes tut-pulsa-linha { from { stroke-width: 5; } to { stroke-width: 10; } }
@keyframes tut-entra { from { transform: scale(.85) translateY(10px); opacity: 0; } }
#tut .tut-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
#tut .tut-titulo { font: 400 16px var(--fonte-titulo); color: #c41e2a; letter-spacing: 1px; text-transform: uppercase; }
#tut .tut-texto .termo { color: #c41e2a; font-weight: 800; }
#tut .tut-pular { font: 600 12px var(--fonte-ui); color: #6b6b5a; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 2px; }
#tut .tut-texto b { color: #b0101e; }
#tut .tut-texto i { color: #4a4a3a; }
#tut .tut-botoes { display: flex; justify-content: flex-end; margin-top: 10px; }
#tut .tut-proximo {
  font: 400 19px var(--fonte-titulo); padding: 6px 18px; border-radius: 999px; cursor: pointer;
  color: #1d2a12; background: #ffc21a; border: 3px solid #1d2a12; box-shadow: 3px 4px 0 #1d2a12;
}
#tut .tut-proximo:hover { transform: translateY(-2px); }
#tut .tut-proximo[hidden] { display: none; }
/* Tabela do dado e a conta da metade */
#tut .tut-dados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
#tut .tut-dados > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 2px solid #1d2a12; border-radius: 10px; background: #e8f7d2; text-align: center; font-size: 13px; line-height: 1.25; }
#tut .tut-dados > div:nth-child(2) { background: #fff2c2; }
#tut .tut-dados > div.ruim { background: #ffd6d6; }
#tut .tut-dados i { font-style: normal; font-size: 26px; line-height: 1; color: #1d2a12 !important; }
#tut .tut-dados b { font-size: 15px; color: #1d2a12 !important; }
#tut .tut-conta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 4px; }
#tut .tut-conta > div { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border: 2px solid #1d2a12; border-radius: 10px; background: #fff2c2; line-height: 1.2; }
#tut .tut-conta > div:last-child { background: #dcecff; }
#tut .tut-conta b { font: 400 24px var(--fonte-titulo); color: #1d2a12 !important; }
#tut .tut-conta small { font-size: 11px; color: #4a4a3a; }
#tut .tut-conta > span { font: 400 34px var(--fonte-titulo); color: #b0101e; }
#tut .tut-escada { margin: 10px 0 2px; gap: 2px; }
#tut .tut-escada .rg-op { font-size: 26px; margin: 0 2px; }
#tut .tut-cartinha { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
#tut .tut-cartinha .rg-c { width: 54px; }
#tut .tut-cartinha small { font: 800 11px var(--fonte-ui); color: #1d2a12; white-space: nowrap; }
#tut .tut-ok { margin: 6px 0 0; text-align: center; font-weight: 800; color: #1b7a1b; }

/* =====================================================================================
   Menu novo: papelão com o padrão de naipes andando, logo em PNG, botões brancos de tinta grossa.
   Vale para todas as telas de menu (fora da partida o #modal ganha a classe .modal-menu).
   ===================================================================================== */
@font-face { font-family: 'Marlboro'; src: url('fontes/Marlboro.ttf') format('truetype'); font-display: swap; }
#modal.modal-menu { background: #d8d1c5 url('arte/menu/papelao.webp') center / cover; overflow: hidden auto; }
/* Padrão de naipes: 50% em multiplicação, andando para cima e para a esquerda (um ladrilho por volta, sem emenda) */
#modal.modal-menu::before {
  content: ''; position: fixed; left: 0; top: 0; width: calc(100vw + 32.16vh); height: 136vh; pointer-events: none;
  background: url('arte/menu/naipes.webp') 0 0 / 32.16vh 36vh repeat; mix-blend-mode: multiply; opacity: .5;
  animation: naipes-andam 26s linear infinite; will-change: transform;
}
@keyframes naipes-andam { to { transform: translate(-32.16vh, -36vh); } }
@media (prefers-reduced-motion: reduce) { #modal.modal-menu::before { animation: none; } }

/* Submenus: o conteúdo fica numa folha branca de contorno grosso, em tinta escura */
#modal.modal-papel .caixa {
  position: relative; z-index: 1; color: var(--tinta); background: #fffdf4; border: 4px solid #141414; border-radius: 22px;
  box-shadow: 0 10px 0 #141414, 0 18px 30px rgba(0, 0, 0, .18);
}
#modal.modal-papel .caixa:has(.menu-tema) { background: #fffdf4; }
#modal.modal-papel h2, #modal.modal-papel .titulo-etapa { color: #141414; text-shadow: none; font-family: var(--fonte-titulo); font-size: 34px; }
#modal.modal-papel .opcao > label { color: #b0101e; font-weight: 800; }
#modal.modal-papel .nota { color: #33402a; opacity: .9; }
#modal.modal-papel .nota.aviso-ip, #modal.modal-papel .online-caixa { background: #f2eddf; border: 2px solid #141414; }
#modal.modal-papel .online-caixa h3 { color: #b0101e; }
#modal.modal-papel .tabela td { border-bottom-color: rgba(20, 20, 20, .15); }
#modal.modal-papel .dica-carta { color: #33402a; }
#modal.modal-papel .btn {
  color: #141414; background: #fff; border: 3px solid #141414; border-radius: 12px; font: 400 19px var(--fonte-titulo);
  box-shadow: 0 5px 0 #141414; transition: transform .12s, box-shadow .12s, background .12s;
}
#modal.modal-papel .btn:hover:not(:disabled) { background: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 #141414; }
#modal.modal-papel .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #141414; }
#modal.modal-papel .btn.principal { background: #ffc21a; }
#modal.modal-papel .btn.principal:hover:not(:disabled) { background: #ffcd3d; }
#modal.modal-papel .grupo { flex-wrap: wrap; justify-content: center; }
#modal.modal-papel .grupo button { color: #141414; background: #fff; border: 2px solid #141414; box-shadow: 0 3px 0 #141414; font-weight: 700; }
#modal.modal-papel .grupo button.ativo { background: #ffc21a; color: #141414; border-color: #141414; }
#modal.modal-papel input[type="range"] { accent-color: #c41e2a; }
#modal.modal-papel .campo-codigo { border: 2px solid #141414; }

/* ---------- Tela inicial ---------- */
/* Tudo é medido em "pixels do desenho" (u): a tela inteira encolhe junto para caber em qualquer janela. */
#modal.modal-papel .caixa:has(.inicio-novo) { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; max-height: none; width: auto; overflow: visible; }
.inicio-novo { --u: min(calc(100vh / 900), calc(100vw / 1230)); color: #141414; }
.palco-menu { position: relative; width: calc(1200 * var(--u)); height: calc(840 * var(--u)); margin: 0 auto; }
.palco-menu > * { position: absolute; margin: 0; }
.palco-menu button { cursor: pointer; }
.btn-tutorial, .btn-grande-menu, .btn-medio-menu, .caixa-baralho {
  color: #141414; background: #fff; border: calc(6 * var(--u)) solid #141414; border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) 0 #141414; font-family: var(--fonte-titulo); line-height: 1; padding: 0;
  transition: transform .14s cubic-bezier(.3, 1.4, .5, 1), box-shadow .14s;
}
.btn-tutorial:hover, .btn-grande-menu:hover, .btn-medio-menu:hover, .caixa-baralho:hover { transform: translateY(calc(-4 * var(--u))); box-shadow: 0 calc(14 * var(--u)) 0 #141414; }
.btn-tutorial:active, .btn-grande-menu:active, .btn-medio-menu:active, .caixa-baralho:active { transform: translateY(calc(6 * var(--u))); box-shadow: 0 calc(4 * var(--u)) 0 #141414; }
.btn-tutorial { left: calc(16 * var(--u)); top: calc(25 * var(--u)); padding: 0 calc(26 * var(--u)); height: calc(96 * var(--u)); background: #ffc21a; font-size: calc(58 * var(--u)); white-space: nowrap; }
.btn-grande-menu { left: calc(430 * var(--u)); width: calc(340 * var(--u)); height: calc(86 * var(--u)); font-size: calc(58 * var(--u)); }
.btn-grande-menu.jogar { top: calc(458 * var(--u)); }
.btn-grande-menu.multi { top: calc(568 * var(--u)); }
.btn-medio-menu { left: calc(615 * var(--u)); width: calc(155 * var(--u)); height: calc(55 * var(--u)); font-size: calc(37 * var(--u)); border-width: calc(5 * var(--u)); border-radius: calc(14 * var(--u)); }
.btn-medio-menu.regras { top: calc(678 * var(--u)); }
.btn-medio-menu.testes { top: calc(751 * var(--u)); }
.idiomas { left: calc(950 * var(--u)); top: calc(38 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.idiomas button { padding: 0; border: 0; background: none; border-radius: 50%; line-height: 0; transition: transform .14s, filter .14s; }
.idiomas button img { display: block; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; }
.idiomas button:not(.ativo) { filter: saturate(.55) brightness(.92); }
.idiomas button:hover { transform: scale(1.1); filter: none; }
.idiomas button.ativo img { box-shadow: 0 calc(6 * var(--u)) 0 #141414; }
.idiomas button:not(.ativo) img { opacity: .75; }
.palco-menu .leque-inicio { left: calc(425 * var(--u)); top: calc(0 * var(--u)); width: calc(350 * var(--u)); height: calc(240 * var(--u)); z-index: 0; }
.palco-menu .leque-inicio img { width: calc(122 * var(--u)); border-radius: calc(10 * var(--u)); filter: drop-shadow(calc(4 * var(--u)) calc(6 * var(--u)) 0 rgba(20, 20, 20, .55)); }
.logo-menu { left: calc(288 * var(--u)); top: calc(195 * var(--u)); width: calc(600 * var(--u)); z-index: 1; pointer-events: none; }
.palco-menu .convite { left: calc(240 * var(--u)); right: calc(240 * var(--u)); top: calc(845 * var(--u)); text-align: center; }

/* Caixinha de cigarro (os baralhos): a tampa abre e as cartas aparecem quando o mouse passa em cima */
.caixa-baralho { left: calc(430 * var(--u)); top: calc(678 * var(--u)); width: calc(170 * var(--u)); height: calc(128 * var(--u)); overflow: visible; border-radius: calc(16 * var(--u)); }
.maco { position: absolute; left: calc(22 * var(--u)); top: calc(-40 * var(--u)); width: calc(126 * var(--u)); aspect-ratio: 896 / 1090; }
.maco > * { position: absolute; }
.maco-baixo { left: 0; top: 24.7%; width: 100%; z-index: 2; }
.maco-tampa { left: 3%; top: 0; width: 93.5%; z-index: 4; transform-origin: 50% 100%; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1); }
.maco-cartas { left: 26%; top: 27%; width: 54%; height: 48%; z-index: 1; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1) .04s; }
.maco-cartas .carta { position: absolute; left: 0; top: 0; width: 72%; height: auto; aspect-ratio: 5 / 7; border-radius: 6%; border: 1px solid #141414; box-shadow: none; }
.maco-cartas .carta:nth-child(1) { transform: rotate(-9deg); left: 2%; }
.maco-cartas .carta:nth-child(2) { left: 16%; top: -3%; }
.maco-cartas .carta:nth-child(3) { transform: rotate(7deg); left: 28%; }
.maco-nome {
  left: 21%; top: 72%; width: 67%; z-index: 3; text-align: center; white-space: nowrap; pointer-events: none;
  font: 400 calc(27 * var(--u)) / 1 'Marlboro', var(--fonte-titulo); color: #141414; transform: skewY(-10deg); transform-origin: 50% 50%;
}
.caixa-baralho:hover .maco-tampa { transform: translateY(-48%) rotate(-5deg); }
.caixa-baralho:hover .maco-cartas { transform: translateY(-22%); }

/* ---------- Área de testes ---------- */
.lista-testes { display: grid; gap: 12px; margin: 16px auto 4px; width: min(560px, 100%); }
.testes .gravidade-dado { width: min(560px, 100%); margin: 14px auto 0; }
.testes .gravidade-dado input { width: 100%; }
.btn-teste {
  display: grid; gap: 4px; text-align: left; padding: 14px 18px; cursor: pointer; color: #141414; background: #fff;
  border: 3px solid #141414; border-radius: 14px; box-shadow: 0 5px 0 #141414; transition: transform .12s, box-shadow .12s;
}
.btn-teste:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #141414; }
.btn-teste b { font: 400 24px var(--fonte-titulo); }
.btn-teste span { font-size: 14px; color: #33402a; }
.lados-bots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.lado-bot { padding: 12px 14px; border: 2px solid #141414; border-radius: 14px; background: #f7f3e8; }
.lado-bot h3 { margin: 0 0 4px; font: 400 22px var(--fonte-titulo); color: #b0101e; }
.lado-bot .grupo { justify-content: flex-start; }
@media (max-width: 720px) { .lados-bots { grid-template-columns: 1fr; } }

/* ---------- Editor da mesa livre ---------- */
#editor-livre {
  position: fixed; right: 10px; top: 64px; z-index: 90; width: 300px; max-height: calc(100vh - 80px); overflow: auto;
  color: #141414; background: #fffdf4; border: 3px solid #141414; border-radius: 14px; box-shadow: 0 6px 0 #141414;
  font: 600 13px var(--fonte-ui);
}
#editor-livre.fechado { width: auto; }
#editor-livre.fechado .ed-corpo { display: none; }
#editor-livre .ed-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 2px solid #141414; font: 400 18px var(--fonte-titulo); }
#editor-livre.fechado .ed-topo { border-bottom: 0; }
#editor-livre .ed-corpo { padding: 6px 10px 10px; }
#editor-livre .ed-titulo { margin: 10px 0 4px; font: 400 15px var(--fonte-titulo); color: #b0101e; }
#editor-livre .ed-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0; }
#editor-livre button { padding: 3px 8px; border: 2px solid #141414; border-radius: 8px; background: #fff; color: #141414; font: 700 12px var(--fonte-ui); cursor: pointer; box-shadow: 0 2px 0 #141414; }
#editor-livre button:active { transform: translateY(2px); box-shadow: none; }
#editor-livre button.ativo { background: #ffc21a; }
#editor-livre select { padding: 2px 4px; border: 2px solid #141414; border-radius: 6px; font: 600 12px var(--fonte-ui); background: #fff; }
#editor-livre .ed-unidade { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px dashed rgba(20, 20, 20, .25); }
#editor-livre .ed-unidade span { flex: 1 1 100%; }
#editor-livre .ed-vazio { margin: 4px 0; opacity: .6; }

/* ---------- Confirmações (desistir, reiniciar, menu) e opções durante a partida: folha branca ---------- */
#modal.modal-papel .caixa:has(.confirmacao) { max-width: 460px; padding: 22px 28px; }
#modal .confirmacao h2 { font-size: 32px; }

/* ---------- Quem começa: sem caixa, fundo escuro, no meio da mesa; o vencedor dá uma porradinha no outro ---------- */
#anuncio.inicio { left: 800px; top: 450px; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#anuncio.inicio::before { content: ''; position: absolute; inset: -1200px; z-index: -1; background: rgba(6, 12, 4, .72); }
#anuncio.inicio .anuncio-topo { font: 400 34px var(--fonte-titulo); letter-spacing: 1px; text-transform: none; color: #fff; margin-bottom: 18px; text-shadow: 0 3px 0 #000; }
#anuncio.inicio .duelo { gap: 60px; }
#anuncio.inicio .inicio-lado { opacity: 1; color: #fff; }
#anuncio.inicio .inicio-lado span { font-size: 18px; }
#anuncio.inicio .dado-inicio { font-size: 34px; color: #fff; }
#anuncio.inicio .inicio-lado em { font: 400 30px var(--fonte-titulo); color: #ffd84d; text-shadow: 0 3px 0 #000; }
#anuncio.inicio .nota { color: #fff; opacity: .8; font-size: 15px; }
#anuncio.inicio .duelo-seta { font-size: 60px; }
#anuncio.inicio .inicio-lado.comeca.lado-esq .heroi { animation: porrada-dir 1.3s .3s cubic-bezier(.5, 0, .3, 1) both; z-index: 2; }
#anuncio.inicio .inicio-lado.comeca.lado-dir .heroi { animation: porrada-esq 1.3s .3s cubic-bezier(.5, 0, .3, 1) both; z-index: 2; }
#anuncio.inicio .inicio-lado:not(.comeca) .heroi { animation: apanha 1.3s .3s ease-out both; filter: saturate(.6) brightness(.85); }
#anuncio.inicio .inicio-lado.lado-dir:not(.comeca) .heroi { animation-name: apanha-dir; }
/* recua, avança até o outro, volta (o impacto é aos ~50%) */
@keyframes porrada-dir { 0% { transform: none; } 25% { transform: translateX(-26px) rotate(-6deg); } 48% { transform: translateX(150px) rotate(8deg) scale(1.06); } 62% { transform: translateX(120px) rotate(4deg); } 100% { transform: none; } }
@keyframes porrada-esq { 0% { transform: none; } 25% { transform: translateX(26px) rotate(6deg); } 48% { transform: translateX(-150px) rotate(-8deg) scale(1.06); } 62% { transform: translateX(-120px) rotate(-4deg); } 100% { transform: none; } }
/* (quem apanha é empurrado para longe de quem bate: o da esquerda vai para a esquerda, o da direita para a direita) */
@keyframes apanha { 0%, 46% { transform: none; } 54% { transform: translateX(-38px) rotate(-14deg); } 64% { transform: translateX(-26px) rotate(6deg); } 76% { transform: translateX(-32px) rotate(-4deg); } 100% { transform: translateX(-18px) rotate(-8deg); } }
@keyframes apanha-dir { 0%, 46% { transform: none; } 54% { transform: translateX(38px) rotate(14deg); } 64% { transform: translateX(26px) rotate(-6deg); } 76% { transform: translateX(32px) rotate(4deg); } 100% { transform: translateX(18px) rotate(8deg); } }

/* ---------- Bônus das passivas à vista ---------- */
.selo-atk .bonus-lanca { margin-left: 3px; color: #8fb8ff; font-weight: 800; }
/* Dado adicional guardado no Senhor(a) */
.selo-dado {
  position: absolute; right: -10px; top: 18px; z-index: 4; padding: 1px 5px; border-radius: 9px; font: 800 15px/1.2 var(--fonte-ui);
  background: #fffdf4; border: 2px solid #141414; box-shadow: 0 2px 0 #141414;
}
.dado-voando span { font-size: 34px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.dano-voando { position: absolute; z-index: 60; pointer-events: none; font: 400 38px var(--fonte-titulo); color: #ff3b3b; -webkit-text-stroke: 4px #141414; paint-order: stroke fill; }

/* ---------- Vitória e derrota: fundo escuro, título enorme, festa ou tomates ---------- */
#modal:has(.tela-fim) { background: rgba(4, 8, 3, .8); }
#modal .caixa:has(.tela-fim) { background: none; border: 0; box-shadow: none; max-width: none; text-align: center; }
#modal .caixa .tela-fim h2.titulo-fim-grande {
  margin: 0; font: 400 clamp(90px, 15vw, 210px) / .9 var(--fonte-titulo); letter-spacing: 2px; color: #ffd84d;
  -webkit-text-stroke: 10px #141414; paint-order: stroke fill; text-shadow: 0 12px 0 #141414;
  animation: fim-entra .7s cubic-bezier(.3, 1.5, .5, 1) both;
}
#modal .caixa .tela-fim.derrota h2.titulo-fim-grande { color: #ff4b4b; animation-name: fim-cai; }
.tela-fim .fim-turno { margin: 14px 0 6px; font-size: 18px; color: #fff; opacity: .85; }
@keyframes fim-entra { from { transform: scale(.2) rotate(-8deg); opacity: 0; } }
@keyframes fim-cai { from { transform: translateY(-120px) rotate(6deg); opacity: 0; } 60% { transform: translateY(12px) rotate(-2deg); opacity: 1; } }
.tela-fim .btn { color: #141414; background: #fff; border: 3px solid #141414; border-radius: 12px; font: 400 20px var(--fonte-titulo); box-shadow: 0 5px 0 #141414; }
.tela-fim .btn.principal { background: #ffc21a; }
.tela-fim .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #141414; }

#festa { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.faisca-fogo { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor, 0 0 4px #fff; }
.tomate-voando { position: absolute; font-size: 72px; line-height: 1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .4)); }
.tomate-splat { position: absolute; width: 190px; height: 170px; }
.tomate-splat::before { content: ''; position: absolute; inset: 22% 18%; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: radial-gradient(circle at 40% 38%, #ff7b6b, #d4140f 55%, #a30b07); box-shadow: inset 0 -6px 12px rgba(80, 0, 0, .45); }
.tomate-splat i { position: absolute; border-radius: 50%; background: #c8120d; }
.tomate-splat i:nth-child(1) { left: 6%; top: 30%; width: 26px; height: 22px; }
.tomate-splat i:nth-child(2) { right: 4%; top: 18%; width: 20px; height: 18px; }
.tomate-splat i:nth-child(3) { left: 40%; bottom: 2%; width: 16px; height: 34px; border-radius: 40% 40% 50% 50%; }
.tomate-splat i:nth-child(4) { right: 14%; bottom: 12%; width: 14px; height: 14px; }
.tomate-splat i:nth-child(5) { left: 22%; top: 6%; width: 12px; height: 12px; background: #f6e27a; box-shadow: 30px 40px 0 -1px #f6e27a, 60px 22px 0 -2px #f6e27a, 44px 64px 0 -1px #f6e27a; }

/* ---------- Espaços do campo: vermelho escuro (aparece bem na grama) e o vão que os Senhores abrem ---------- */
.espaco.clicavel { border-color: #8e1b1b; background: rgba(150, 25, 25, .14); box-shadow: 0 0 16px rgba(150, 25, 25, .45); }
.espaco.destino { background: radial-gradient(ellipse at center, rgba(150, 25, 25, .3), rgba(150, 25, 25, 0) 70%); }
.espaco.destino::before { border-color: rgba(170, 30, 30, .95); box-shadow: 0 0 22px rgba(140, 20, 20, .65); }
.fileira .espaco { transition: translate .22s cubic-bezier(.3, 1.3, .5, 1), rotate .22s ease; }
.fileira .espaco.abrindo { translate: calc(var(--abre) * 34px) 0; rotate: calc(var(--abre) * 6deg); }
/* carta esperando o número num espaço que já tem alguém: flutua por cima do vão */
.espaco.preparo > .unidade ~ .carta-preparo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; }

/* ---------- Carta que o oponente usou como recurso: aparece no meio, vira e vai para o cemitério ---------- */
.carta-usada { position: absolute; z-index: 70; width: 86px; height: 120px; pointer-events: none; filter: drop-shadow(4px 6px 0 rgba(20, 20, 20, .5)); }
.carta-usada .carta { width: 100%; height: 100%; }
/* Ás do par de Ouros esperando o lugar: flutua no meio da mesa, com a seta saindo dele */
#as-mirando { position: absolute; z-index: 60; width: 86px; height: 120px; transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(4px 6px 0 rgba(20, 20, 20, .5)) drop-shadow(0 0 14px rgba(255, 210, 60, .9)); animation: as-flutua 1.4s ease-in-out infinite alternate; }
#as-mirando .carta { width: 100%; height: 100%; }
@keyframes as-flutua { from { transform: translate(-50%, -50%) rotate(-4deg); } to { transform: translate(-50%, calc(-50% - 8px)) rotate(4deg); } }
/* A carta de ação que o oponente usou, na frente da carta gasta */
.acao-usada { position: absolute; z-index: 71; pointer-events: none; }
.acao-usada .carta-acao { width: 150px; margin: 0; animation: none; transform: none; filter: drop-shadow(5px 8px 0 rgba(20, 20, 20, .55)); }

/* ---------- Tutorial: na compra, só o baralho pedido pulsa ---------- */
body.tut-compra .pilha.pulsando:not(.tut-destaque) .carta { animation: none !important; box-shadow: none !important; transform: none !important; }

/* ---------- Defesa em escudinhos (o hit levado apaga o escudo) ---------- */
.selo-vida { display: inline-flex; align-items: center; gap: 1px; padding: 2px 5px; letter-spacing: 0; line-height: 0; }
.selo-vida .esc { width: 13px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.selo-vida .esc.apagado { filter: grayscale(1) brightness(.3); opacity: .55; }
.selo-vida .berserk { line-height: 1.3; }

/* ---------- Dado adicional guardado: o dado desenhado ---------- */
.selo-dado { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px; }
.selo-dado .dado-img { width: 22px; height: auto; display: block; }
.selo-dado b { font: 900 14px var(--fonte-ui); color: #f5b41f; -webkit-text-stroke: 3px #141414; paint-order: stroke fill; }
.dado-voando .dado-img { width: 46px; height: auto; display: block; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, .5)); }

/* ---------- Selo do dado: cheio (verde), metade (amarelo), errou (vermelho) ---------- */
.selo-golpe {
  position: absolute; z-index: 66; pointer-events: none; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px 6px 8px; border: 3px solid #141414; border-radius: 16px; box-shadow: 0 5px 0 #141414; color: #141414;
}
.selo-golpe.cheio { background: #7fe07a; }
.selo-golpe.metade { background: #ffd23f; }
.selo-golpe.errou { background: #ff6b6b; }
.selo-golpe .sg-dado { position: relative; display: grid; place-items: center; }
.selo-golpe .sg-dado .dado-img { width: 52px; height: auto; }
.selo-golpe .sg-dado b { position: absolute; right: -6px; bottom: -6px; min-width: 20px; padding: 0 4px; border-radius: 10px; background: #141414; color: #fff; font: 800 14px/20px var(--fonte-ui); text-align: center; }
.selo-golpe .sg-texto { display: flex; flex-direction: column; line-height: 1.05; }
.selo-golpe .sg-titulo { font: 400 30px var(--fonte-titulo); }
.selo-golpe .sg-conta { font: 800 22px var(--fonte-ui); }
.selo-golpe .sg-conta s { text-decoration-thickness: 3px; text-decoration-color: #c41e2a; opacity: .7; }
.selo-golpe small { font: 700 13px var(--fonte-ui); opacity: .8; }

/* ---------- Régua de defesa: ignora (verde) · 1 hit (amarelo) · 2 hits (vermelho) ---------- */
.regua-defesa {
  position: absolute; z-index: 65; pointer-events: none; width: 290px; padding: 8px 12px 7px; text-align: center;
  background: #fffdf4; border: 3px solid #141414; border-radius: 12px; box-shadow: 0 5px 0 #141414; color: #141414;
}
.regua-defesa .rg-resultado { display: block; font: 400 32px/1.1 var(--fonte-titulo); }
.regua-defesa.ignorou .rg-resultado { color: #1b8a2b; }
.regua-defesa.hit .rg-resultado { color: #b07a00; }
.regua-defesa.pesado .rg-resultado { color: #c41e2a; }
.regua-defesa .rg-barra { position: relative; display: flex; height: 30px; margin: 24px 0 22px; border: 3px solid #141414; border-radius: 6px; overflow: visible; }
.regua-defesa .rg-barra > i { position: relative; display: grid; place-items: center; font: 800 13px var(--fonte-ui); font-style: normal; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.regua-defesa .rg-ignora { background: #8fe58a; border-radius: 4px 0 0 4px; }
.regua-defesa .rg-hit { background: #ffd84d; }
.regua-defesa .rg-pesado { flex: 1; background: #ff7b7b; border-radius: 0 4px 4px 0; }
.regua-defesa .rg-marca { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 3px; font: 800 16px var(--fonte-ui); font-style: normal; }
.regua-defesa .rg-seta { position: absolute; left: 0; top: -24px; transform: translateX(-50%); transition: left .55s cubic-bezier(.3, 1.3, .5, 1); }
.regua-defesa.caiu .rg-seta { left: var(--ate); }
.regua-defesa .rg-seta b { display: block; padding: 0 5px; border-radius: 6px; background: #141414; color: #fff; font: 800 16px/20px var(--fonte-ui); }
.regua-defesa .rg-seta::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #141414; }
.regua-defesa small { display: block; font: 700 13px var(--fonte-ui); opacity: .7; }

/* ---------- Tutorial: box "MAS..." com os selos do dado e o termômetro de defesa ---------- */
#tut .tut-mas { position: relative; margin: 14px 0 4px; padding: 16px 12px 10px; border: 3px dashed #1d2a12; border-radius: 12px; background: #fff8dc; }
#tut .tut-mas-titulo { position: absolute; left: 10px; top: -15px; padding: 0 10px; border: 3px solid #1d2a12; border-radius: 8px; background: #ffd23f; font: 400 22px/1.2 var(--fonte-titulo); color: #1d2a12 !important; transform: rotate(-3deg); }
#tut .tut-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
#tut .selo-golpe { position: relative; padding: 3px 10px 3px 5px; gap: 5px; border-width: 2px; border-radius: 12px; box-shadow: 0 3px 0 #141414; }
#tut .selo-golpe .sg-dado .dado-img { width: 30px; }
#tut .selo-golpe .sg-dado b { right: -5px; bottom: -5px; min-width: 16px; font: 800 11px/16px var(--fonte-ui); color: #fff !important; }
#tut .selo-golpe .sg-titulo { font-size: 18px; color: #141414 !important; }
#tut .selo-golpe .sg-conta { font-size: 14px; }
#tut .tut-lista { margin: 8px 0; padding: 0; list-style: none; }
#tut .tut-lista li { margin: 4px 0; padding: 4px 8px 4px 10px; border-left: 6px solid; border-radius: 4px; background: rgba(0, 0, 0, .04); }
#tut .tut-lista li.verde { border-color: #3fb63a; }
#tut .tut-lista li.amarelo { border-color: #f0b400; }
#tut .tut-lista li.vermelho { border-color: #e03a3a; }
#tut .tut-regua { display: flex; flex-direction: column; align-items: center; margin: 6px 0 2px; }
#tut .tut-regua > small { font-size: 12px; font-weight: 700; color: #4a4a3a; }
#tut .regua-defesa { position: relative; width: min(300px, 100%); padding: 6px 12px 2px; box-shadow: 0 3px 0 #141414; }
#tut .regua-defesa .rg-barra > i { color: #141414 !important; }
#tut .regua-defesa .rg-seta b { color: #fff !important; }
#tut .regua-defesa.ignorou .rg-resultado { color: #1b8a2b !important; }

/* ---------- Deckbuilder: palco de 1600×900 que encolhe para caber na janela (ver encaixar() em decks.js) ---------- */
#tela-decks.tela-deck { padding: 0; overflow: hidden; background: #6e0b0b url('arte/menu/fundo-deck.webp') center / cover; color: #141414; user-select: none; }
.deck-palco { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; --u: 1px; font-family: var(--fonte-ui); }
.deck-palco > * { position: absolute; margin: 0; }
.deck-palco h2, .deck-palco h3, .db-titulo, .db-vista, .db-btn, .db-limite, .db-deck-nome { font-family: 'Marlboro', var(--fonte-titulo); font-weight: 400; }
.db-lista, .db-deck, .db-limites, .db-titulo, .db-editar {
  background: #fff; border: 4px solid #141414; border-radius: 20px; box-shadow: 0 8px 0 #141414;
}
.db-lista { left: 182px; top: 133px; width: 191px; padding: 14px 10px 26px; text-align: center; }
.db-lista h2 { font-size: 33px; line-height: .95; margin: 0 0 10px; }
.db-lista hr { border: 0; border-top: 2px solid #8a8a8a; margin: 14px 8px; }
.db-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 4px; justify-items: center; }
.db-caixa { position: relative; width: 82px; height: 108px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; transition: transform .15s; }
.db-caixa .maco.cx { --u: .6px; margin: 4px auto 0; }
.db-caixa:hover { transform: translateY(-4px); }
.db-caixa:hover .maco-tampa, .db-deck-caixa .maco.cx:hover .maco-tampa { transform: translateY(-48%) rotate(-5deg); }
.db-caixa:hover .maco-cartas, .db-deck-caixa .maco.cx:hover .maco-cartas { transform: translateY(-22%); }
.db-caixa.atual { background: #ffe066; box-shadow: 0 0 0 3px #141414; }
.db-caixa.nova { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 3px dashed #9a9a9a; color: #6a6a6a; }
.db-caixa.nova.atual { border-color: #141414; color: #141414; }
.db-mais { font: 400 40px/1 'Marlboro', var(--fonte-titulo); }
.db-caixa.nova small { font-size: 11px; font-weight: 700; line-height: 1.1; }

/* A caixinha (mesmo desenho da caixa do menu): tampa pintada por multiplicação, ícone pintado por "tela" (o preto vira a cor) */
.maco.cx { position: relative; left: 0; top: 0; display: block; width: calc(126 * var(--u)); }
.maco.cx .cx-tampa { display: block; isolation: isolate; }
.maco.cx .cx-tampa img { display: block; width: 100%; }
.maco.cx .cx-tampa::after {
  content: ''; position: absolute; inset: 0; background: var(--tampa); mix-blend-mode: multiply;
  -webkit-mask: url('arte/menu/tampa-pb.webp') 0 0 / 100% 100%; mask: url('arte/menu/tampa-pb.webp') 0 0 / 100% 100%;
}
.maco.cx .cx-icone { left: 31%; top: 45%; width: 48%; height: 27%; z-index: 3; isolation: isolate; pointer-events: none; transform: skewY(-10deg); }
.maco.cx .cx-icone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.maco.cx .cx-icone.pintado::after {
  content: ''; position: absolute; inset: 0; background: var(--cor); mix-blend-mode: multiply;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.maco.cx .maco-nome { top: 74.5%; font-size: calc(22 * var(--u)); overflow: hidden; }

/* Título, abas de vista e voltar */
.db-titulo { left: 575px; top: 46px; width: 417px; height: 102px; z-index: 3; display: grid; place-items: center; font-size: 76px; line-height: 1; padding-top: 6px; }
.db-vistas { left: 1008px; top: 52px; display: flex; gap: 6px; align-items: flex-end; height: 81px; z-index: 1; }
.db-vista { width: 62px; height: 70px; padding: 0; border: 4px solid #141414; border-bottom: 0; border-radius: 16px 16px 0 0; background: #ececec; font-size: 40px; cursor: pointer; }
.db-vista.ativa { height: 81px; background: #fff; position: relative; z-index: 3; }
.db-btn.voltar { left: 24px; top: 24px; }
.db-btn { padding: 6px 16px; border: 3px solid #141414; border-radius: 12px; background: #fff; color: #141414; font-size: 22px; line-height: 1.1; box-shadow: 0 4px 0 #141414; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.db-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #141414; }
.db-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #141414; }
.db-btn.principal { background: #ffc21a; }
.db-btn.perigo { color: #b0101e; }
.db-btn.perigo.confirmar { background: #ff6b6b; color: #141414; }
.db-btn.mini { min-width: 38px; padding: 4px 6px; font-size: 18px; white-space: nowrap; }

/* O baralho sendo montado */
.db-deck { left: 383px; top: 129px; width: 836px; height: 350px; z-index: 2; }
.db-deck-caixa { position: absolute; left: 62px; top: 36px; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.db-deck-caixa .maco.cx { --u: 1.2px; }
.db-deck-caixa .db-btn.editar { margin-top: -6px; width: 170px; font-size: 40px; padding: 2px 0 4px; border-width: 4px; border-radius: 18px; box-shadow: 0 6px 0 #141414; position: relative; z-index: 5; }
.db-deck-nome { margin: -4px 0 0; font-size: 26px; text-align: center; line-height: 1; }
.db-deck-cartas { position: absolute; left: 262px; top: 40px; width: 552px; height: 284px; }
.db-vazio-espaco { position: absolute; inset: 40px 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.db-vazio-espaco h3 { margin: 0; font-size: 40px; }
.db-vazio-espaco p { margin: 0 0 8px; font-size: 16px; max-width: 460px; }
.db-acoes-linha { display: flex; gap: 12px; }

.db-face, .db-face svg { display: block; width: 100%; height: 100%; }
.db-face svg { border-radius: 7%; }
.db-copias { position: absolute; top: -9px; left: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #141414; color: #fff; font: 800 13px/22px var(--fonte-ui); text-align: center; z-index: 2; box-shadow: 0 0 0 2px #fff; }

/* Vista 1: fileiras por naipe */
.db-naipes { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.db-fileira { display: flex; align-items: center; gap: 22px; height: 68px; }
.db-fileira-naipe { width: 42px; height: 42px; object-fit: contain; }
.db-leque { display: flex; }
.db-mini { position: relative; width: 48px; height: 67px; border-radius: 6px; flex: none; transition: transform .12s; }
.db-mini + .db-mini { margin-left: -18px; }
.db-mini.fantasma { background: #fff; border: 1.5px solid #b9b9b9; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px #d2d2d2; }
.db-mini.tem { cursor: pointer; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35)); }
.db-mini.tem:hover, .db-carta:hover { transform: translateY(-6px); z-index: 3; }

/* Vista 2: cartas corridas */
.db-corrida { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; }
.db-corrida.vazia { align-items: center; text-align: center; color: #6a6a6a; font-size: 16px; }
.db-linha { display: flex; justify-content: center; }
.db-carta { position: relative; width: var(--w); aspect-ratio: 5 / 7; flex: none; cursor: pointer; transition: transform .12s; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35)); }
.db-carta + .db-carta { margin-left: calc(var(--passo) - var(--w)); }
.db-deck-cartas.leitura .db-mini.tem, .db-deck-cartas.leitura .db-carta { cursor: default; }

/* Limites e ações */
.db-limites { left: 1229px; top: 132px; width: 192px; padding: 12px 10px 14px; text-align: center; }
.db-limites h2 { margin: 0 0 6px; font-size: 40px; line-height: 1; }
.db-limite { display: flex; flex-direction: column; line-height: .9; margin-top: 6px; }
.db-limite small { font-size: 22px; }
.db-limite b { font-weight: 400; font-size: 52px; }
.db-limite.passou b { color: #c41e2a; }
.db-status { margin: 10px 0 0; font: 800 13px var(--fonte-ui); padding: 4px 6px; border-radius: 8px; }
.db-status.ok { background: #c9f2c2; color: #155d1f; }
.db-status.falha { background: #ffd1d1; color: #8c0f18; }
.db-acoes { left: 1229px; top: 420px; width: 192px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.db-acoes .db-btn { font-size: 21px; }
.db-rot { margin: 0; font: 400 26px 'Marlboro', var(--fonte-titulo); color: #fff; text-shadow: 0 2px 0 #141414; text-align: center; }
.db-copiar { display: flex; justify-content: center; gap: 4px; }
.db-copiar .db-btn.mini { flex: 1 1 0; min-width: 0; padding: 4px 0; }
.db-colecao.leitura .db-colecao-carta:not(.tem) { opacity: .45; }
.db-nota { margin: 0; font-size: 13px; font-weight: 700; color: #fff; text-align: center; text-shadow: 0 1px 2px #000; }
.db-salvo { color: #fff; opacity: .75; text-align: center; font-size: 12px; }

/* Embaixo: todas as cartas, em abas de naipe */
.db-abas { left: 661px; top: 497px; height: 89px; display: flex; gap: 6px; align-items: flex-end; z-index: 3; }
.db-aba { width: 90px; height: 78px; padding: 0; border: 4px solid #141414; border-bottom: 0; border-radius: 16px 16px 0 0; display: grid; place-items: center; cursor: pointer; }
.db-aba img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .3)); }
.db-aba.ativa { height: 89px; }
.db-aba.ativa img { width: 66px; height: 66px; }
.db-aba.paus, .db-colecao.paus { background: #08a010; }
.db-aba.copas, .db-colecao.copas { background: #e64545; }
.db-aba.espadas, .db-colecao.espadas { background: #1f56d8; }
.db-aba.ouros, .db-colecao.ouros { background: #f5b528; }
.db-colecao { left: 383px; top: 582px; width: 836px; height: 251px; border: 4px solid #141414; border-radius: 22px; box-shadow: 0 8px 0 #141414; }
.db-colecao-cartas { position: absolute; left: 30px; right: 30px; top: 42px; display: flex; }
.db-colecao-carta { position: relative; width: 118px; height: 165px; flex: none; cursor: pointer; transition: transform .14s; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); }
.db-colecao-carta + .db-colecao-carta { margin-left: -67px; }
.db-colecao-carta:hover { transform: translateY(-14px); z-index: 5; }
.db-colecao-carta.cheia:not(.tem) { filter: grayscale(.8) brightness(.8); opacity: .6; cursor: not-allowed; }
.db-colecao.leitura .db-colecao-carta { cursor: default; }
.db-colecao.leitura .db-colecao-carta:hover { transform: none; }
/* Carta com o mouse em cima: as do lado se afastam um pouco para ela aparecer inteira (e elas também) */
.db-colecao-carta, .db-carta, .db-mini { transition: transform .14s, translate .2s cubic-bezier(.3, 1.3, .5, 1); }
.db-colecao:not(.leitura) .db-colecao-carta:is(:hover, .foco) ~ .db-colecao-carta { translate: 44px 0; }
.db-colecao:not(.leitura) .db-colecao-carta:has(~ .db-colecao-carta:is(:hover, .foco)) { translate: -26px 0; }
.db-carta:is(:hover, .foco) ~ .db-carta { translate: calc(var(--w) * .38) 0; }
.db-carta:has(~ .db-carta:is(:hover, .foco)) { translate: calc(var(--w) * -.2) 0; }
.db-mini.tem:is(:hover, .foco) ~ .db-mini { translate: 14px 0; }
.db-mini:has(~ .db-mini.tem:is(:hover, .foco)) { translate: -8px 0; }
/* (a cópia nova da carta destacada, logo depois de redesenhar) */
.db-colecao:not(.leitura) .db-colecao-carta.foco { transform: translateY(-14px); z-index: 5; }
.db-mini.tem.foco, .db-carta.foco { transform: translateY(-6px); z-index: 3; }
#tela-decks.sem-transicao .db-colecao-carta, #tela-decks.sem-transicao .db-carta, #tela-decks.sem-transicao .db-mini { transition: none; }
.db-qtd { position: absolute; left: 8px; top: -27px; padding: 3px 9px 2px; border-radius: 9px 9px 0 0; background: #1b2a44; color: #fff; font: 800 15px var(--fonte-ui); opacity: 0; transition: opacity .12s; }
.db-colecao-carta.tem .db-qtd, .db-colecao-carta:hover .db-qtd { opacity: 1; }
.db-colecao-carta.max .db-qtd { background: #b0101e; }
.db-dica { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: 700 14px var(--fonte-ui); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

/* Personalizar a caixinha */
.db-editar-fundo { inset: 0; background: rgba(20, 0, 0, .55); z-index: 20; }
.db-editar { left: 330px; top: 90px; width: 940px; padding: 20px 28px 24px; z-index: 21; }
.db-editar h2 { margin: 0 0 12px; font-size: 48px; text-align: center; }
.db-editar-corpo { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.db-editar-previa { display: grid; place-items: center; padding-top: 20px; }
.db-editar-previa .maco.cx { --u: 1.75px; }
.db-editar-campos { display: flex; flex-direction: column; gap: 6px; }
.db-editar-campos label { font: 400 26px 'Marlboro', var(--fonte-titulo); margin-top: 6px; }
.db-editar .nome-deck { width: 320px; font: 700 18px var(--fonte-ui); padding: 8px 12px; border: 3px solid #141414; border-radius: 10px; color: #141414; background: #fff; user-select: text; }
.db-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.db-cor { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 3px solid #141414; background: var(--c); cursor: pointer; box-shadow: 0 3px 0 #141414; }
.db-cor[data-cor-icone="original"] { background: conic-gradient(#08a010 0 25%, #e64545 0 50%, #1f56d8 0 75%, #f5b528 0); }
.db-cor.ativa { outline: 4px solid #ffc21a; outline-offset: 2px; }
.db-icones { display: grid; grid-template-columns: repeat(10, 54px); gap: 6px; }
.db-icone { position: relative; box-sizing: border-box; width: 54px; height: 54px; padding: 0; border: 3px solid #141414; border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.db-icone img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; }
.db-icone.ativa { background: #ffe066; }
.db-editar > .db-btn.principal { display: block; margin: 16px 0 0 auto; font-size: 28px; padding: 6px 30px; }
/* Padrão de naipes andando por cima do fundo vermelho (o mesmo do menu) */
#tela-decks.tela-deck::before {
  content: ''; position: fixed; left: 0; top: 0; width: calc(100vw + 32.16vh); height: 136vh; pointer-events: none;
  background: url('arte/menu/naipes.webp') 0 0 / 32.16vh 36vh repeat; mix-blend-mode: multiply; opacity: .5;
  animation: naipes-andam 26s linear infinite; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { #tela-decks.tela-deck::before { animation: none; } }
/* A tampa da caixinha do deckbuilder com a mesma largura do corpo (o corpo ocupa ~7%–92% da caixa) */
.maco.cx .maco-tampa { left: 7.5%; top: 5.2%; width: 83.9%; }

/* Deckbuilder: cartas voando entre a coleção e o baralho */
.db-voo { position: fixed; z-index: 300; pointer-events: none; filter: drop-shadow(3px 6px 0 rgba(0, 0, 0, .4)); }
/* Troca de aba de naipe: o painel dá um pulo e as cartas entram quicando, uma atrás da outra */
.db-colecao.entra { animation: db-painel-pula .42s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 0; }
.db-colecao.entra .db-colecao-carta { animation: db-carta-entra .5s cubic-bezier(.3, 1.7, .5, 1) backwards; animation-delay: calc(var(--i) * 28ms); }
.db-aba.ativa.pula { animation: db-aba-pula .45s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 50% 100%; }
.db-deck-cartas.entra > * > * { animation: db-carta-entra .45s cubic-bezier(.3, 1.7, .5, 1) backwards; }
.db-deck-cartas.entra > * > *:nth-child(2) { animation-delay: .05s; }
.db-deck-cartas.entra > * > *:nth-child(3) { animation-delay: .1s; }
.db-deck-cartas.entra > * > *:nth-child(4) { animation-delay: .15s; }
@keyframes db-painel-pula { 0% { transform: scaleY(.94); } 60% { transform: scaleY(1.025); } 100% { transform: none; } }
@keyframes db-carta-entra { from { transform: translateY(70px) rotate(10deg) scale(.7); opacity: 0; } }
@keyframes db-aba-pula { 0% { transform: scaleY(.7); } 55% { transform: scaleY(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .db-colecao.entra, .db-colecao.entra .db-colecao-carta, .db-aba.ativa.pula, .db-deck-cartas.entra > * > * { animation: none; } }

/* Engrenagem das opções no deckbuilder */

/* Caixinha pequena do deck nos botões da escolha antes da partida */
.deck-mini { --u: .26px; display: inline-block; vertical-align: middle; margin: -6px 7px -6px -2px; }

/* Decks de bot (área de testes): escolha do Palhaço e a estrela do deck padrão */
.db-palhacos { left: 24px; top: 72px; display: flex; gap: 6px; z-index: 3; }
.db-palhaco {
  display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 10px 0 6px; border: 3px solid #141414; border-radius: 14px; background: #fff;
  font: 400 19px 'Marlboro', var(--fonte-titulo); color: #141414; box-shadow: 0 4px 0 #141414; cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1);
}
.db-palhaco img { width: 28px; height: 28px; object-fit: contain; }
.db-palhaco:hover { transform: translateY(-3px); }
.db-palhaco.ativo { transform: translateY(-3px) scale(1.06); }
.db-palhaco.ativo.cor-azul { background: #8fb2ff; }
.db-palhaco.ativo.cor-vermelho { background: #ff9a9a; }
.db-palhaco.ativo.cor-verde { background: #8fe58a; }
.db-palhaco.ativo.cor-dourado { background: #ffd666; }
.db-estrela { position: absolute; right: -6px; top: -8px; z-index: 6; font: 400 28px/1 'Segoe UI Symbol', sans-serif; color: #ffc21a; -webkit-text-stroke: 2px #141414; pointer-events: none; }
.db-btn.estrela.ativa { background: #7fe07a; }
.db-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 #141414; }

/* Ferramentas de teste no rodapé do log: semente e situação */
#log-ferramentas { flex: none; padding: 8px 12px 10px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--texto); }
#log-ferramentas .lf-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#log-ferramentas .lf-linha > span { flex: 1; }
#log-ferramentas b { color: var(--ouro); user-select: text; }
.lf-btn { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--texto); font: 700 12px var(--fonte-ui); cursor: pointer; }
.lf-btn:hover { background: rgba(255, 255, 255, .18); }
.lf-semente { width: 110px; padding: 4px 6px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(0, 0, 0, .3); color: var(--texto); font: 600 12px var(--fonte-ui); user-select: text; }
#modal .campo-situacao { width: 100%; box-sizing: border-box; padding: 8px; border: 2px solid #141414; border-radius: 10px; font: 12px/1.3 Consolas, monospace; resize: vertical; user-select: text; }
#modal .erro-situacao { color: #b0101e !important; font-weight: 700; }

/* Mesa livre: dado forçado e desfazer */
#editor-livre .ed-dados button { min-width: 30px; }
/* Build e novidades no canto da tela inicial */
#modal .build-info { position: absolute; left: 12px; bottom: 10px; z-index: 3; color: #141414; font: 600 11px/1.3 var(--fonte-ui); text-align: left; }
#modal .build-info summary {
  list-style: none; cursor: pointer; padding: 4px 12px; border-radius: 999px; font: 800 12px var(--fonte-ui);
  background: #fff; border: 2px solid #141414; box-shadow: 0 3px 0 #141414; transition: transform .12s, box-shadow .12s;
}
#modal .build-info summary::-webkit-details-marker { display: none; }
#modal .build-info summary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #141414; }
#modal .build-info[open] summary { background: #ffc21a; }
#modal .build-info ul {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: min(340px, 86vw); max-height: 60vh; overflow: auto; margin: 0; padding: 12px 14px 12px 28px;
  background: #fffdf4; border: 3px solid #141414; border-radius: 14px; box-shadow: 0 5px 0 #141414;
}
#modal .build-info li + li { margin-top: 5px; }
/* Deckbuilder: o número de cópias fica à direita (à esquerda tampava o número da carta); numa carta coberta pela
   seguinte, ele fica na beirada direita da parte que aparece */
.db-copias { left: auto !important; right: -7px; }
.db-mini:not(:last-child) .db-copias, .db-carta:not(:last-child) .db-copias { right: calc(38% - 4px); }
/* Comportamento dos bots */
.comportamento-bot .opcao { margin: 10px auto; max-width: 560px; }
.comportamento-bot input[type="range"] { width: 100%; accent-color: #c41e2a; }
.comportamento-bot .opcao .nota { margin: 2px 0 0; font-size: 13px; }
/* Modificadores de regras */
.rg-sliders { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin: 0 auto; }
.rg-slider { display: grid; grid-template-columns: 120px 1fr 52px 64px; align-items: center; gap: 10px; }
.rg-slider.faixa { grid-template-columns: 120px 1fr 1fr 64px 64px; }
.rg-slider span { font-weight: 800; text-align: left; }
.rg-slider b { font: 400 22px var(--fonte-titulo); text-align: center; }
.rg-slider small { opacity: .7; font-weight: 700; }
.rg-slider input[type="range"] { width: 100%; accent-color: #c41e2a; }
.regras-teste .opcao { margin: 10px 0; }
.regras-teste .opcao .nota { margin: 4px 0 0; font-size: 13px; }
#modal.modal-papel .aviso-regras { margin: 4px auto 0; padding: 5px 10px; width: fit-content; border: 2px solid #141414; border-radius: 10px; background: #ffe066; font-weight: 700; }
#editor-livre button:disabled { opacity: .45; cursor: default; }

/* Bot × bot: velocidade */
#velocidade { position: absolute; left: 380px; top: 14px; z-index: 46; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px;
  background: #fffdf4; border: 3px solid #141414; border-radius: 14px; box-shadow: 0 4px 0 #141414; font: 400 18px var(--fonte-titulo); color: #141414; }
#velocidade[hidden] { display: none; }
#velocidade button { padding: 3px 10px; border: 2px solid #141414; border-radius: 9px; background: #fff; font: 800 14px var(--fonte-ui); color: #141414; cursor: pointer; }
#velocidade button.ativo { background: #ffc21a; }

/* ---------- Tela de Regras: folha branca sobre o feltro verde, com os naipes descendo devagar ---------- */
#tela-regras.tela-regras-nova { padding: 18px 16px 40px; color: #141414; }
#tela-regras.tela-regras-nova::before {
  content: ''; position: fixed; left: 0; top: -36vh; width: 100vw; height: calc(100vh + 36vh); pointer-events: none; z-index: 0;
  background: url('arte/menu/naipes.webp') 0 0 / 32.16vh 36vh repeat; mix-blend-mode: multiply; opacity: .28;
  animation: rg-naipes-descem 30s linear infinite; will-change: transform;
}
@keyframes rg-naipes-descem { to { transform: translateY(36vh); } }
@media (prefers-reduced-motion: reduce) { #tela-regras.tela-regras-nova::before { animation: none; } }
.rg-tela { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; user-select: none; }
.rg-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.rg-topo h1 { margin: 0 auto 0 0; padding: 2px 26px 12px; background: #fff; border: 4px solid #141414; border-radius: 18px; box-shadow: 0 7px 0 #141414; font: 400 52px/1 var(--fonte-titulo); }
.rg-abas { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding-left: 14px; }
.rg-aba { padding: 8px 16px 6px; border: 3px solid #141414; border-bottom: 0; border-radius: 14px 14px 0 0; background: #ececec; color: #141414; font: 400 22px var(--fonte-titulo); cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
.rg-aba:hover { transform: translateY(-3px); }
.rg-aba.ativa { background: #ffc21a; padding-bottom: 12px; }
.rg-pagina { background: #fffdf4; border: 4px solid #141414; border-radius: 20px; box-shadow: 0 8px 0 #141414; padding: 22px 30px 26px; font: 15.5px/1.5 var(--fonte-ui); user-select: text; }
.rg-pagina.entra { animation: rg-pagina-entra .32s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rg-pagina-entra { from { transform: translateY(14px); opacity: 0; } }
.rg-pagina h2 { margin: 0 0 8px; font: 400 46px/1 var(--fonte-titulo); }
.rg-pagina h3 { margin: 18px 0 8px; font: 400 28px/1.05 var(--fonte-titulo); color: #b0101e; }
.rg-pagina p { margin: 6px 0; }
.rg-pagina ul { margin: 4px 0; padding-left: 20px; }
.rg-centro { text-align: center; }

/* Blocos: figura + explicação */
.rg-bloco { display: grid; grid-template-columns: minmax(250px, 42%) 1fr; gap: 6px 20px; align-items: center; margin: 12px 0; padding: 12px 16px; background: #f4eedc; border: 2px solid #141414; border-radius: 14px; }
.rg-bloco > h3 { grid-column: 1 / -1; margin: 0 0 4px; }
.rg-figura { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 90px; }
.rg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0; }
.rg-grade .rg-bloco { margin: 0; grid-template-columns: 1fr; text-align: center; align-content: start; }
.rg-grade .rg-bloco .rg-texto { font-size: 14px; }
.rg-linha { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-coluna { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.rg-coluna small { font-size: 12px; font-weight: 700; }
.rg-op { font: 400 36px/1 var(--fonte-titulo); font-style: normal; margin: 0 4px; color: #141414; }
.rg-numero { font: 400 46px/1 var(--fonte-titulo); color: #b0101e; }

/* Cartas, Senhores, cartas de ação, escudos, naipes */
.rg-c { display: inline-block; flex: none; width: 60px; aspect-ratio: 5 / 7; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); }
.rg-c svg { display: block; width: 100%; height: 100%; border-radius: 7%; }
.rg-c .carta.dorso { display: block; width: 100%; height: 100%; border-radius: 7%; border: 2px solid #141414; box-sizing: border-box; }
.rg-c.as { width: 52px; }
.rg-senhor { position: relative; display: inline-block; flex: none; width: 80px; height: 104px; }
.rg-senhor .rg-c { position: absolute; width: 60px; }
.rg-senhor .num { right: 0; top: 0; transform: rotate(7deg); }
.rg-senhor .fig { left: 0; top: 12px; }
.rg-senhor .rg-atk { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 1px 8px; border-radius: 9px; background: #141414; color: #fff; font: 800 13px/18px var(--fonte-ui); white-space: nowrap; z-index: 2; }
.rg-senhor.defende .fig { outline: 3px solid #2a5fd6; outline-offset: 1px; border-radius: 6px; }
.rg-naipe { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; }
.rg-escudos { display: inline-flex; gap: 2px; }
.rg-escudos img { width: 22px; height: auto; }
.rg-escudos img.apagado { filter: grayscale(1) brightness(.35); opacity: .55; }
.rg-acao { position: relative; display: inline-block; flex: none; width: 96px; aspect-ratio: 300 / 402; filter: drop-shadow(3px 4px 0 rgba(5, 18, 2, .45)); }
.rg-acao img { display: block; width: 100%; height: 100%; }
.rg-acao b { position: absolute; left: 12%; right: 12%; top: 12%; text-align: center; font: 400 14px/1 var(--fonte-titulo); color: #141414; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
.rg-pal { position: relative; display: inline-block; }
.rg-pal img { display: block; width: 104px; border-radius: 10px; filter: drop-shadow(3px 4px 0 rgba(20, 20, 20, .45)); }
.rg-pal.pequeno img { width: 74px; }
.rg-pv { position: absolute; right: -10px; bottom: -10px; min-width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #c41e2a; color: #fff; border: 3px solid #141414; font: 400 20px/1 var(--fonte-titulo); }
.rg-pilha { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.rg-pilha .rg-c { width: 70px; }
.rg-pilha small { margin-top: -54px; margin-bottom: 34px; position: relative; z-index: 1; color: #fff; font: 800 12px var(--fonte-ui); text-shadow: 0 1px 2px #000; }
.rg-pilha b { font: 400 22px var(--fonte-titulo); }
.rg-pilha em { font-style: normal; font-size: 12px; font-weight: 700; }

/* O turno, os selos, as réguas */
.rg-passos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0; padding: 0; list-style: none; counter-reset: passo; }
.rg-passos li { counter-increment: passo; position: relative; padding: 12px 10px 10px; background: #fff; border: 2px solid #141414; border-radius: 12px; box-shadow: 0 3px 0 #141414; text-align: center; }
.rg-passos li::before { content: counter(passo); position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: #ffc21a; border: 2px solid #141414; font: 800 14px/22px var(--fonte-ui); }
.rg-passos b { display: block; font: 400 22px/1.1 var(--fonte-titulo); }
.rg-passos span { font-size: 13px; }
.rg-caixinhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; font-size: 14px; }
.rg-caixinhas p { margin: 0; padding: 10px 12px; background: #f4eedc; border-radius: 10px; }
.rg-selos { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
#tela-regras .selo-golpe { position: relative; }
.rg-reguas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
#tela-regras .regua-defesa { position: relative; width: 250px; }

/* Escada das figuras */
.rg-escada { display: flex; justify-content: center; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.rg-escada > .rg-op { align-self: center; }
.rg-degrau { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 210px; padding: 12px 10px; background: #fff; border: 2px solid #141414; border-radius: 14px; box-shadow: 0 3px 0 #141414; text-align: center; }
.rg-degrau > b { margin-top: 10px; font: 400 26px/1 var(--fonte-titulo); }
.rg-degrau > em { font-style: normal; font-weight: 800; padding: 0 8px; border-radius: 8px; background: #141414; color: #fff; font-size: 12px; }
.rg-degrau > span { font-size: 13px; }
.rg-degrau > small { font-size: 12px; font-weight: 700; color: #b0101e; }

/* Palhaços */
.rg-palhacos { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-top: 10px; }
.rg-palhaco { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; padding: 14px; border: 3px solid #141414; border-radius: 16px; box-shadow: 0 4px 0 #141414; }
.rg-palhaco.cor-azul { background: #e3ecff; } .rg-palhaco.cor-vermelho { background: #ffe5e5; }
.rg-palhaco.cor-verde { background: #e3f6e0; } .rg-palhaco.cor-dourado { background: #fff3cc; }
.rg-palhaco h3 { margin: 0 0 6px; color: #141414; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-palhaco h3 small { font: 600 13px var(--fonte-ui); opacity: .7; }
.rg-palhaco p { font-size: 14px; }
.rg-tag { display: inline-block; padding: 0 7px; border-radius: 7px; border: 2px solid #141414; font: 800 11px/16px var(--fonte-ui); text-transform: uppercase; }
.rg-tag.passiva { background: #ffffff; } .rg-tag.poder { background: #ffc21a; }
.rg-plano { font-style: italic; opacity: .8; }

/* Montagem de deck */
.rg-deck .maco.cx { --u: .95px; }
.rg-copias { position: relative; }
.rg-copias b { position: absolute; right: -10px; top: -10px; padding: 2px 7px; border-radius: 10px; background: #141414; color: #fff; font: 800 13px var(--fonte-ui); }
.rg-aba-naipe { display: inline-grid; place-items: center; width: 62px; height: 54px; border: 3px solid #141414; border-bottom: 0; border-radius: 12px 12px 0 0; }
.rg-aba-naipe.paus { background: #08a010; } .rg-aba-naipe.copas { background: #e64545; } .rg-aba-naipe.espadas { background: #1f56d8; } .rg-aba-naipe.ouros { background: #f5b528; }

@media (max-width: 760px) {
  .rg-bloco { grid-template-columns: 1fr; }
  .rg-passos, .rg-caixinhas { grid-template-columns: 1fr; }
  .rg-palhacos { grid-template-columns: 1fr; }
  .rg-palhaco { grid-template-columns: 90px 1fr; }
}

/* ---------- Efeitos de recursos, magias e Pargias na mesa ---------- */
.fx { position: absolute; z-index: 66; pointer-events: none; }
.fx-fantasma { z-index: 52; }
.fx-texto { white-space: nowrap; font: 400 34px var(--fonte-titulo); color: #fff; -webkit-text-stroke: 4px #141414; paint-order: stroke fill; z-index: 68; }
.fx-texto.cura, .fx-texto.bom { color: #6dff8a; }
.fx-texto.espadas { color: #9cc2ff; }
.fx-texto.berserk { color: #ff5a2a; font-size: 30px; }
.fx-texto.ruim { color: #ff4a5a; }
.fx-brasa { border-radius: 50%; mix-blend-mode: screen; }
.fx-espada { width: 74px; height: 74px; filter: drop-shadow(0 0 10px rgba(120, 170, 255, .95)) drop-shadow(2px 4px 0 rgba(0, 0, 0, .4)); }
.fx-espada svg { width: 100%; height: 100%; }
.fx-corte { width: 170px; height: 10px; border-radius: 50%; }
.fx-corte.azul { background: linear-gradient(90deg, transparent, #fff 25%, #8fb6ff 55%, #2a5fd6 75%, transparent); box-shadow: 0 0 14px 4px rgba(90, 140, 255, .85); }
.fx-coluna { width: 120px; height: 560px; transform-origin: 50% 100%; border-radius: 60px 60px 20px 20px; mix-blend-mode: screen; }
.fx-coluna.copas { background: linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(255, 140, 170, .7) 40%, rgba(255, 90, 130, 0)); box-shadow: 0 0 40px 10px rgba(255, 120, 160, .55); }
.fx-seta { font: 900 30px/1 var(--fonte-ui); -webkit-text-stroke: 2px #141414; paint-order: stroke fill; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
.fx-racha { width: 90px; height: 120px; background:
  linear-gradient(62deg, transparent 47%, rgba(20, 0, 30, .85) 48% 51%, transparent 52%),
  linear-gradient(-48deg, transparent 46%, rgba(20, 0, 30, .8) 47% 50%, transparent 51%),
  linear-gradient(100deg, transparent 48%, rgba(20, 0, 30, .7) 49% 51%, transparent 52%); }
.fx-vento { width: 120px; height: 10px; border-radius: 10px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); box-shadow: 0 0 8px rgba(220, 235, 255, .9); }
.fx-meteoro { width: 64px; height: 64px; border-radius: 50%; z-index: 67;
  background: radial-gradient(circle at 40% 60%, #fff 0 14%, #ffe27a 26%, #ff8a1e 50%, #c2260b 70%, transparent 74%);
  box-shadow: 0 0 30px 10px rgba(255, 120, 30, .8); }
.fx-meteoro::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 44px; height: 250px; margin-left: -22px; transform: rotate(211deg); transform-origin: 50% 0; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 240, 180, .95), rgba(255, 150, 40, .7) 35%, rgba(255, 120, 30, 0)); filter: blur(4px); }
.fx-cratera { width: 130px; height: 70px; border-radius: 50%; z-index: 51; background: radial-gradient(ellipse, rgba(30, 12, 4, .85), rgba(80, 30, 10, .5) 50%, transparent 72%); }
.fx-clarao { left: 0; top: 0; width: 1600px; height: 900px; background: radial-gradient(circle at 50% 30%, #fff, #dfe8ff 60%, #b8c8ff); z-index: 65; mix-blend-mode: screen; opacity: 0; }
.fx-raio { z-index: 69; opacity: 0; }
.fx-raio path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fx-raio .brilho { stroke: rgba(150, 210, 255, .85); stroke-width: 30; filter: blur(7px); }
.fx-raio .nucleo { stroke: #fffbe0; stroke-width: 9; filter: drop-shadow(0 0 6px #fff36a); }

/* Sprites desenhados (arte/efeitos/<nome>.png): quando o arquivo existe, ele substitui o desenho em CSS da peça.
   Os tamanhos aqui são os do gabarito (arte/efeitos/gabarito). */
.sprite-espada .fx-espada { background: url('arte/efeitos/espada.png') center / 100% 100% no-repeat; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, .35)); }
.sprite-espada .fx-espada svg { display: none; }
.sprite-corte .fx-corte { width: 180px; height: 24px; border-radius: 0; box-shadow: none; background: url('arte/efeitos/corte.png') center / 100% 100% no-repeat; }
.sprite-brasa .fx-brasa { background: url('arte/efeitos/brasa.png') center / 100% 100% no-repeat !important; mix-blend-mode: normal; border-radius: 0; }
.sprite-coluna .fx-coluna { border-radius: 0; box-shadow: none; mix-blend-mode: normal; background: url('arte/efeitos/coluna.png') center / 100% 100% no-repeat; }
.sprite-seta-sobe .fx-seta.sobe, .sprite-seta-desce .fx-seta.desce { width: 30px; height: 36px; font-size: 0; filter: none; background: center / 100% 100% no-repeat; }
.sprite-seta-sobe .fx-seta.sobe { background-image: url('arte/efeitos/seta-sobe.png'); }
.sprite-seta-desce .fx-seta.desce { background-image: url('arte/efeitos/seta-desce.png'); }
.sprite-racha .fx-racha { background: url('arte/efeitos/racha.png') center / 100% 100% no-repeat; }
.sprite-vento .fx-vento { width: 120px; height: 14px; border-radius: 0; box-shadow: none; background: url('arte/efeitos/vento.png') center / 100% 100% no-repeat; }
.sprite-meteoro .fx-meteoro { width: 240px; height: 240px; margin: -50px 0 0 50px; border-radius: 0; box-shadow: none; background: url('arte/efeitos/meteoro.png') center / 100% 100% no-repeat; }
.sprite-meteoro .fx-meteoro::after { display: none; }
.sprite-cratera .fx-cratera { border-radius: 0; background: url('arte/efeitos/cratera.png') center / 100% 100% no-repeat; }
.fx-raio-sprite { width: 80px; z-index: 69; opacity: 0; transform: translateX(-50%); background: url('arte/efeitos/raio.png') center / 100% 100% no-repeat; }

/* Janelas da partida (cemitério, escolhas das magias, esperas do online...): o mesmo visual do palco das cartas */
#modal:not(.modal-papel):not(.modal-menu) { background: rgba(6, 14, 4, .72); }
#modal:not(.modal-papel):not(.modal-menu) .caixa { background: none; border: 0; box-shadow: none; }
#modal:not(.modal-papel):not(.modal-menu) h2 { font: 400 42px var(--fonte-titulo); color: #fff; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
#modal:not(.modal-papel):not(.modal-menu) .caixa > p { font: 700 18px var(--fonte-ui); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
#modal:not(.modal-papel):not(.modal-menu) .btn {
  padding: 11px 28px; border-radius: 16px; font: 900 20px var(--fonte-ui); text-transform: uppercase;
  color: #111; background: #fff; border: 3px solid #111; box-shadow: 0 4px 0 #111; transition: transform .12s, box-shadow .12s;
}
#modal:not(.modal-papel):not(.modal-menu) .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #111; }
#modal:not(.modal-papel):not(.modal-menu) .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
#modal:not(.modal-papel):not(.modal-menu) .btn.principal { background: #ffc21a; }

/* Colinha: tira de papel de caderno embaixo da caixa de ações; abre a folha com o resumo das combinações */
.colinha, #colinha-aberta { --fonte-mao: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
.cola-tira, .cola-folha {
  background-color: #fbfaf4;
  background-image: linear-gradient(90deg, transparent var(--margem), rgba(222, 70, 90, .6) var(--margem), rgba(222, 70, 90, .6) calc(var(--margem) + 1.5px), transparent calc(var(--margem) + 1.5px)),
    repeating-linear-gradient(transparent 0, transparent calc(var(--linha) - 1.5px), rgba(134, 172, 216, .5) calc(var(--linha) - 1.5px), rgba(134, 172, 216, .5) var(--linha));
}
#acoes .colinha {
  position: absolute; left: 50%; top: calc(100% + 18px); padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(-50%) rotate(-5deg); filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, .35));
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
#acoes .colinha:hover { transform: translateX(-50%) rotate(-1deg) scale(1.08); }
.cola-tira { --linha: 13px; --margem: 14px; display: block; width: 118px; padding: 13px 6px 13px 20px; font: 700 21px/1 var(--fonte-mao); color: #1f3c8e; text-align: center; }
#colinha-aberta { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(6, 14, 4, .72); animation: cola-fundo .2s ease-out; }
.cola-wrap { position: relative; width: min(920px, 94vw); transform: rotate(-1deg); filter: drop-shadow(5px 10px 0 rgba(0, 0, 0, .35)); animation: cola-abre .38s cubic-bezier(.3, 1.3, .5, 1); }
.cola-folha {
  --linha: 26px; --margem: 40px; max-height: 88vh; overflow: auto; padding: 34px 30px 34px 56px; background-attachment: local;
  font: 15px/26px var(--fonte-mao); color: #141414; text-align: left;
}
.cola-folha h2 { margin: 0 0 4px; font: 700 30px/52px var(--fonte-mao); color: #b0101e; }
.cola-folha h2 small { font-size: 14px; color: #6b6b6b; font-weight: 400; }
.cola-cols { columns: 2 330px; column-gap: 36px; }
.cola-folha section { break-inside: avoid; margin-bottom: 26px; }
.cola-folha h3 { margin: 0; font: 700 18px/26px var(--fonte-mao); color: #b0101e; }
.cola-folha h3 small { margin-left: 4px; font-size: 12px; font-weight: 400; color: #6b6b6b; }
.cola-folha ul { margin: 0; padding: 0; list-style: none; }
.cola-folha li { line-height: 26px; }
.cola-folha li b { color: #b0101e; }
.cola-folha i { color: #2d5a1f; }
.cola-obs { margin: 0; font-size: 13px; line-height: 26px; color: #6b6b6b; }
.cola-n { width: 18px; height: 18px; vertical-align: -3px; object-fit: contain; }
.cola-fechar {
  position: absolute; top: 18px; right: 14px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  font: 900 18px var(--fonte-ui); color: #111; background: #fff; border: 3px solid #111; box-shadow: 0 3px 0 #111;
}
@keyframes cola-abre { from { transform: rotate(-10deg) translateY(160px) scale(.4); opacity: 0; } }
@keyframes cola-fundo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cola-wrap, #colinha-aberta { animation: none; } }

/* Colinha em imagens: cartinhas, artes das ações, escudos e o dado */
.cola-cols { columns: 2 340px; column-gap: 40px; }
.cola-folha section { break-inside: avoid; margin-bottom: 18px; }
.cola-folha h3 { margin: 0 0 4px; }
.cola-linha { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.cola-fig { display: flex; align-items: center; gap: 3px; flex: none; }
.cola-c { position: relative; display: inline-block; width: 34px; height: 48px; flex: none; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .25)); }
.cola-c .svg-carta { width: 100%; height: 100%; display: block; }
.cola-c + .cola-c { margin-left: -8px; }
.cola-c.cola-sac { opacity: .85; }
.cola-atk { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', sans-serif; font-weight: 400; }
.cola-c.cola-sac::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 32px var(--fonte-ui); color: #c41e2a; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.cola-ic { width: 44px; height: 44px; object-fit: contain; flex: none; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .25)); }
.cola-op { font: 700 18px var(--fonte-mao); color: #b0101e; font-style: normal; padding: 0 2px; }
.cola-rot { font: 700 15px var(--fonte-mao); color: #141414; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cola-esc { display: inline-flex; gap: 2px; }
.cola-esc img { width: 20px; height: 20px; object-fit: contain; }
.cola-esc img.apagado { filter: grayscale(1) opacity(.35); }
.cola-dado { width: 30px; height: 30px; object-fit: contain; }
.cola-conta { display: inline-flex; align-items: center; gap: 6px; font: 700 17px var(--fonte-mao); color: #141414; }
.cola-linha .cola-n { width: 18px; height: 18px; }
.cola-rot small { font-size: 12px; font-weight: 400; color: #6b6b6b; }
/* Colinha: a distribuição do rascunho do Leonardo (Senhores e Pares em cima; Naipado, Pargia e Ás no meio; 1 carta, Dado e Defesa embaixo) */
.cola-wrap { width: min(1120px, 96vw); }
.cola-folha .cola-cols { columns: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: '. . dad dad dad dad def def def def . .' 'sen sen sen sen sen sen nai nai nai as as as' 'um um um um par par par pgi pgi pgi pgi pgi'; column-gap: 28px; row-gap: 10px; align-items: start; }
.cola-folha .cola-cols section { margin: 0; min-width: 0; }
.cola-sen { grid-area: sen; } .cola-par { grid-area: par; } .cola-nai { grid-area: nai; } .cola-pgi { grid-area: pgi; } .cola-as { grid-area: as; }
.cola-um { grid-area: um; } .cola-dad { grid-area: dad; } .cola-def { grid-area: def; }
@media (max-width: 820px) { .cola-folha .cola-cols { grid-template-columns: 1fr; grid-template-areas: 'dad' 'def' 'sen' 'nai' 'as' 'um' 'par' 'pgi'; } }
.cola-folha .cola-linha { min-height: 46px; }
.cola-folha .cola-rot { flex-wrap: nowrap; white-space: nowrap; }
.cola-folha h2 { line-height: 40px; }

/* =====================================================================================
   Celular e toque. html.toque: aparelho sem mouse. html.celular: tela baixa e deitada (celular na horizontal).
   No computador nada daqui vale (as duas classes só entram em tela de toque ou janela muito baixa).
   ===================================================================================== */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html.toque, html.toque * { -webkit-touch-callout: none; }
/* Na mesa o dedo arrasta cartas e setas: a página não rola nem dá zoom. Listas que rolam continuam rolando. */
#palco, #setas, #dados3d, .carta-arrastada { touch-action: none; }
#log, #painel { touch-action: pan-y; }

/* Celular em pé: aviso para deitar */
#girar { display: none; }
@media (orientation: portrait) and (max-width: 820px) and (pointer: coarse), (orientation: portrait) and (max-width: 560px) {
  #girar {
    position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; text-align: center; color: #141414; background: #d8d1c5 url('arte/menu/papelao.webp') center / cover;
  }
  #girar p { margin: 18px 0 0; font: 400 40px/1.05 var(--fonte-titulo); }
  #girar small { font: 600 15px/1.35 var(--fonte-ui); opacity: .75; max-width: 260px; }
  .girar-celular {
    position: relative; width: 74px; height: 128px; border: 6px solid #141414; border-radius: 16px; background: #fff;
    box-shadow: 0 8px 0 #141414; animation: girar-celular 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
  }
  .girar-tela { position: absolute; inset: 9px 6px 15px; border-radius: 4px; background: radial-gradient(ellipse at 50% 45%, #1d9450, #0c5d2e); }
  .girar-tela::after { content: '♠ ♥ ♣ ♦'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 serif; color: #fff; writing-mode: vertical-rl; }
  .girar-celular::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #141414; }
}
@keyframes girar-celular { 0%, 20% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .girar-celular { animation: none; transform: rotate(-90deg); } }


/* Janelas no celular: encolhem com zoom (o JS escolhe o zoom); os limites de tamanho valem para a tela, não para o zoom. */
html.celular #modal { overflow: auto; }
html.celular #modal .caixa { max-height: calc(96vh / var(--zm, 1)); max-width: calc(98vw / var(--zm, 1)); }
/* Telas de escolha (Palhaço, oponente): no celular as cartas ficam à esquerda e o resto à direita, para caber na altura. */
html.celular .menu-tema:has(> .versus, > .mesa-cartas) { display: grid; grid-template-columns: auto 480px; column-gap: 30px; align-items: center; align-content: center; }
html.celular .menu-tema:has(> .versus, > .mesa-cartas) > * { grid-column: 2; margin-left: 0; margin-right: 0; }
html.celular .menu-tema:has(> .versus, > .mesa-cartas) > .titulo-etapa { grid-column: 1 / -1; }
html.celular .menu-tema > .versus, html.celular .menu-tema > .mesa-cartas { grid-column: 1; grid-row: 2 / span 6; align-self: center; }
html.celular .menu-tema > .mesa-cartas { flex-wrap: nowrap; gap: 12px; padding-top: 24px; }
html.celular .menu-tema > .mesa-cartas .carta-joker { width: 112px; }
html.celular .menu-tema > .versus { gap: 18px; grid-template-columns: auto auto auto; }
html.celular .menu-tema .vs { font-size: 60px; }
html.celular .menu-tema .lado-rivais { grid-template-columns: repeat(2, 96px); }
html.celular .menu-tema .lado-rivais .carta-joker { width: 96px; }
html.celular .menu-tema > .versus .lado-eu .carta-joker.grande { width: 150px; }
html.celular #modal .caixa { padding: 16px 22px; }
html.celular .menu-tema:has(> .versus, > .mesa-cartas) .titulo-etapa { margin-bottom: 0; }
html.celular .menu-tema:has(> .versus, > .mesa-cartas) .acoes-menu { margin-top: 10px; }

/* Mesa no celular: o palco fica mais baixo (1600×780, a faixa do meio quase some), então a escala cresce e a
   mesa ocupa a largura do celular deitado. Cartas da mão e do campo maiores; botões do topo do tamanho do dedo. */
html.celular #app, html.celular #mesa { height: 780px; }
html.celular #faixa { height: 20px; }
html.celular .zona-op { height: 176px; grid-template-rows: 124px 52px; }
html.celular .zona-eu { height: 250px; grid-template-rows: 150px 100px; }
html.celular .zona-eu .mao { width: 600px; z-index: 5; }
html.celular .zona-eu .mao .carta { width: 112px; height: 157px; }
html.celular .fileira, html.celular .unidade-voando { --cw: 88px; --ch: 123px; }
html.celular .btn.btn-topo, html.celular .barra-partida .btn.btn-topo { font-size: 23px; padding: 13px 24px; border-radius: 18px; }
html.celular #mesa .barra-partida { gap: 12px; }
html.celular .btn-log { right: 96px; }
html.celular #acoes { top: 44%; transform: translateY(-50%) scale(1.2); transform-origin: 0 50%; }
html.celular .carta-acao { width: 140px; }
/* (a mão maior cobriria o naipe do poder: ele vai um pouco mais para a direita, fora do leque) */
html.celular .zona-eu .info .lado-heroi { left: calc(100% + 150px); top: 36%; }
html.celular .zona-eu .mao { margin-bottom: 18px; }
html.celular #combate { transform: translateY(-50%) scale(1.35); transform-origin: 100% 50%; max-height: 500px; }
html.celular #cartas-acao .btn:not(.carta-acao) { font-size: 22px; padding: 12px 20px; min-height: 56px; border-radius: 16px; }
/* Dica (segurando o dedo) no celular: arte e texto menores, para caber do lado do dedo */
html.celular #dica { font-size: 12px; line-height: 1.38; max-width: 280px; max-height: calc(100vh - 16px); overflow: hidden; padding: 9px 11px; }
html.celular #dica.com-arte { max-width: calc(100vw - 16px); gap: 10px; }
html.celular #dica .dica-texto { width: 250px; }
html.celular .dica-arte { width: 150px; height: 210px; }
html.celular .dica-arte.senhor { width: 172px; height: 224px; }
html.celular .dica-arte .carta { width: 150px; height: 210px; border-radius: 11px; }
html.celular .dica-arte .carta.numero { width: 80px; height: 112px; border-radius: 7px; }
html.celular #dica .dica-titulo { font-size: 14px; }
html.celular #caixa-custo { font-size: 14px; }
html.celular #combate .cb-ctrl { gap: 8px; margin-top: 6px; }
html.celular #combate .cb-ctrl .mini { font-size: 15px; padding: 7px 12px; min-width: 40px; border-radius: 10px; }

/* Regras e telas com rolagem no celular: o dedo rola a página; tudo um pouco menor para caber mais texto. */
.tela, #modal { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
html.celular .tela { padding: 10px 14px; }
html.celular #tela-regras.tela-regras-nova { padding: 10px 14px 30px; }
html.celular .rg-tela { zoom: .68; }
html.celular .rg-topo h1 { font-size: 44px; }
/* Colinha no celular: as três faixas de colunas do computador (e não uma coluna comprida), encolhida para caber. */
html.celular .cola-wrap { width: 1500px; zoom: .47; }
html.celular .cola-folha { max-height: calc(96vh / .47); padding: 18px 26px 18px 56px; }
html.celular .cola-folha .cola-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: '. . dad dad dad dad def def def def . .' 'sen sen sen sen sen sen nai nai nai as as as' 'um um um um par par par pgi pgi pgi pgi pgi'; }
/* Registro no celular: painel maior, letra maior e X do tamanho do dedo */
html.celular #painel { top: 86px; width: 600px; height: 670px; }
html.celular #painel h2 { font-size: 34px; }
html.celular #painel #log { font-size: 22px; line-height: 1.4; }
html.celular .fechar-log { width: 56px; height: 56px; font-size: 32px; }
/* Deckbuilder no celular: botões do palco mais altos e com letra maior (alvos para o dedo) */
html.celular .db-btn.voltar { font-size: 30px; padding: 10px 22px; }
html.celular .db-acoes { width: 236px; gap: 8px; }
html.celular .db-acoes .db-btn { font-size: 27px; padding: 8px 10px; }
html.celular .db-vista { transform: scale(1.15); }
html.celular .lista-testes { grid-template-columns: repeat(2, 400px); justify-content: center; }
/* No toque o :hover fica "grudado" depois de tocar: a carta da mão não fica levantada só por isso. */
html.toque .zona-eu .mao .carta.jogavel:hover:not(.selecionada):not(.combina):not(.par-escolhido):not(.arrastando) { transform: translateY(var(--desce, 0px)) rotate(var(--giro, 0deg)); }

/* Poeira do pouso das cartas no campo */
.fx-poeira { border-radius: 50%; z-index: 53; filter: blur(1.5px); background: radial-gradient(circle, rgba(232, 220, 188, .9) 0, rgba(205, 188, 150, .6) 45%, rgba(190, 172, 132, 0) 70%); }

/* Arrastando uma carta para entre duas no campo: a da esquerda se inclina e as da direita abrem espaço */
.fileira .espaco { transform-origin: 50% 100%; }
.fileira .espaco.vao-esq { translate: -24px 0; rotate: -9deg; }
.fileira .espaco.vao-dir { translate: 40px 0; }
.fileira .espaco.vao-dir1 { rotate: 9deg; }

/* "Contra-ataque!" que salta em cima do atacante que apanhou de volta */
.fx-contra { z-index: 60; white-space: nowrap; font: 900 26px var(--fonte-ui); color: #ffe7a0; letter-spacing: .5px;
  text-shadow: 0 2px 0 #7a1010, 0 0 2px #7a1010, 2px 0 0 #7a1010, -2px 0 0 #7a1010, 0 -2px 0 #7a1010, 0 6px 10px rgba(0, 0, 0, .45); pointer-events: none; }

/* Quem começa: tudo entra com pressa. O título bate na tela, os Palhaços deslizam dos lados, os dados pulam,
   quem tirou mais dá a porrada logo e o "Começa" cai carimbado depois do impacto. */
#anuncio.inicio .anuncio-topo { font-size: 60px; margin-bottom: 24px; animation: inicio-titulo .42s cubic-bezier(.2, 1.4, .4, 1) both; }
#anuncio.inicio .inicio-lado.lado-esq { animation: inicio-entra-esq .36s .06s cubic-bezier(.2, 1.3, .4, 1) both; }
#anuncio.inicio .inicio-lado.lado-dir { animation: inicio-entra-dir .36s .06s cubic-bezier(.2, 1.3, .4, 1) both; }
#anuncio.inicio .dado-inicio { display: inline-block; animation: inicio-dado .4s .26s cubic-bezier(.2, 1.6, .4, 1) both; }
#anuncio.inicio .inicio-lado em { display: inline-block; font-size: 38px; animation: inicio-carimbo .34s .92s cubic-bezier(.2, 1.5, .4, 1) both; }
#anuncio.inicio .inicio-lado.comeca .heroi, #anuncio.inicio .inicio-lado:not(.comeca) .heroi { animation-duration: .85s; animation-delay: .4s; }
#anuncio.inicio .nota { animation: inicio-nota .3s .5s ease-out both; }
@keyframes inicio-titulo { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes inicio-entra-esq { from { transform: translateX(-280px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes inicio-entra-dir { from { transform: translateX(280px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes inicio-dado { from { transform: scale(0) rotate(-120deg); } to { transform: none; } }
@keyframes inicio-carimbo { from { transform: scale(3) rotate(-14deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
@keyframes inicio-nota { from { opacity: 0; transform: translateY(8px); } to { opacity: .8; transform: none; } }

/* Rótulo em duas linhas na colinha (Recursos: "+1 carta / ou +1 dado") */
.cola-duas { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cola-duas > span { display: inline-flex; align-items: center; gap: 4px; }

.btn-log { right: 122px; }
html.celular .btn-log { right: 174px; }

/* Turno: dentro da própria caixa de ações (sem a faixa clara), maior que o "Ações" para mandar na leitura */
.acoes-turno { margin: -2px 0 2px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: 400 27px/1.05 var(--fonte-titulo); letter-spacing: .5px; }

/* Colunas coloridas dos lados da mesa: o mesmo padrão de naipes do menu, andando na diagonal */
html::before {
  content: ''; position: fixed; left: 0; top: 0; z-index: 0; width: calc(100vw + 32.16vh); height: 136vh; pointer-events: none;
  background: url('arte/menu/naipes.webp') 0 0 / 32.16vh 36vh repeat; mix-blend-mode: multiply; opacity: .45;
  animation: naipes-andam 26s linear infinite; will-change: transform;
}
html.em-menu::before { display: none; }
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

/* Escolha do baralho antes da partida: a caixinha grande (80% da caixa "Baralhos" do menu) com o nome embaixo */
#modal .grupo.grupo-decks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
#modal .grupo-decks button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 10px; min-width: 132px; }
.deck-caixa { --u: .8px; position: relative; display: block; width: calc(126 * var(--u)); height: calc(150 * var(--u)); }
.deck-caixa .maco { left: 0; top: 0; }
.grupo-decks button:hover .maco-tampa { transform: translateY(-48%) rotate(-5deg); }
.grupo-decks button:hover .maco-cartas { transform: translateY(-22%); }
.deck-legenda { display: block; max-width: 140px; font: 700 14px/1.2 var(--fonte-ui); text-align: center; white-space: normal; }

/* Pop-ups: a caixa encolhe (zoom) para caber inteira na tela; a altura máxima acompanha o zoom */
#modal .caixa { max-height: calc(92vh / var(--zm, 1)); }

/* Caixa do Palhaço na escolha: só passiva e poder, sempre do mesmo tamanho (a tela não pula ao trocar de Palhaço) */
.info-carta { min-height: 164px; }
.info-carta .caixa-info { min-height: 164px; box-sizing: border-box; }

/* O nome do baralho vai escrito na frente da caixa (sem legenda embaixo) */
#modal .grupo-decks button { padding: 12px 14px; }

/* Contorno padronizado: cada arte veio numa escala diferente e o traço de fora ficava mais fino em umas do que em
   outras. As mais finas ganham um reforço na mesma tinta do desenho, até ficarem com uns 2,3 px na mesa
   (medido arte por arte). Os palcos dos dois lados ganham 2 px a mais, para destacar do gramado. */
:root { --tinta-arte: rgb(22, 20, 18); }
.palco {
  filter: drop-shadow(2px 0 0 var(--tinta-arte)) drop-shadow(-2px 0 0 var(--tinta-arte)) drop-shadow(0 2px 0 var(--tinta-arte)) drop-shadow(0 -2px 0 var(--tinta-arte))
    drop-shadow(8px 11px 0 rgba(5, 18, 2, .42));
}
.deco-ratos .deco-base, .deco-cinzeiro .deco-base {
  filter: drop-shadow(.9px 0 0 var(--tinta-arte)) drop-shadow(-.9px 0 0 var(--tinta-arte)) drop-shadow(0 .9px 0 var(--tinta-arte)) drop-shadow(0 -.9px 0 var(--tinta-arte))
    drop-shadow(7px 9px 0 rgba(5, 18, 2, .42));
}
#cobra {
  filter: drop-shadow(.4px 0 0 var(--tinta-arte)) drop-shadow(-.4px 0 0 var(--tinta-arte)) drop-shadow(0 .4px 0 var(--tinta-arte)) drop-shadow(0 -.4px 0 var(--tinta-arte))
    drop-shadow(0 7px 5px rgba(5, 18, 2, .4));
}

/* Bloqueando quem ataca 2 vezes: as etiquetas "1º/2º ataque" são onde a seta azul é solta */
.tag-escolha { cursor: pointer; transform-origin: 100% 50%; transition: transform .15s ease, box-shadow .15s ease; }
#mesa.mirando-bloq .tag-escolha { transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(120, 170, 255, .9); animation: tag-escolha 1s ease-in-out infinite; }
#mesa.mirando-bloq .tags:has(.tag-escolha) { gap: 9px; }
#mesa.mirando-bloq .tag-escolha:hover { transform: scale(1.6); background: #2459c4; animation: none; }
@keyframes tag-escolha { 50% { box-shadow: 0 0 0 2px #fff, 0 0 16px 5px rgba(120, 170, 255, 1); } }

/* Golpe final: véu escuro focado no alvo, clarão branco na tela inteira e o NOCAUTE */
.fx-final-veu { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; z-index: 58; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, .7) 520px); }
.fx-final-clarao { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: #fff; }
.que-vergonha.fx-nocaute { z-index: 97; color: #ff3b2f; -webkit-text-stroke: 6px #2b0603; text-shadow: 0 9px 0 #2b0603, 0 0 40px rgba(255, 80, 40, .8); font-size: 170px; }

/* Configurações e tela cheia: no canto superior direito da mesa, em todas as telas (na mesma escala da mesa) */
#botoes-canto {
  --e: min(calc(100vw / 1600), calc(100vh / 900)); --t: 42; --ic: 22;
  position: fixed; z-index: 140; top: calc(14 * var(--e)); right: calc(var(--faixa-lateral, 0px) + 18 * var(--e));
  display: flex; gap: calc(10 * var(--e)); touch-action: manipulation;
}
html.celular #botoes-canto { --t: 64; --ic: 32; gap: calc(14 * var(--e)); }
#botoes-canto button {
  width: calc(var(--t) * var(--e)); height: calc(var(--t) * var(--e)); padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: #141414; background: #fff; border: calc(3 * var(--e)) solid #141414; box-shadow: 0 calc(3 * var(--e)) 0 #141414;
  font: 400 calc(var(--ic) * var(--e)) / 1 'Segoe UI Symbol', 'Segoe UI', sans-serif; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
#botoes-canto button[hidden] { display: none; }
#botoes-canto .canto-opcoes:hover { transform: rotate(60deg); }
#botoes-canto .canto-tela-cheia:hover { transform: scale(1.1); }
#botoes-canto svg { width: calc(var(--ic) * var(--e)); height: calc(var(--ic) * var(--e)); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#botoes-canto .fechar, #botoes-canto .ativo .abrir { display: none; }
#botoes-canto .ativo .fechar { display: inline; }

/* Transição de tela: o bando de cartas por cima de tudo (menos dos botões, que ficam escondidos atrás dele) e a foto da tela antiga */
#transicao { position: fixed; inset: 0; z-index: 2000; overflow: hidden; }
#transicao .carta { position: absolute; margin: 0; border-radius: 2.6vh; box-shadow: 0 .8vh 1.6vh rgba(0, 0, 0, .45); will-change: transform; background-color: #fdfbf3; }
#transicao .carta .svg-carta { width: 100%; height: 100%; display: block; }
#modal.foto-tela { z-index: 130; pointer-events: none; } /* (acima da tela nova, abaixo dos botões do canto) */
#modal.foto-tela, #modal.foto-tela * { animation: none !important; transition: none !important; }

/* Foto do início caindo por cima da tela nova: sem o fundo de papelão, para a caixa nova aparecer por baixo */
#modal.foto-saida { background: none; overflow: hidden; }
#modal.foto-saida::before { display: none; }

/* Sem barra de rolagem nas janelas do jogo: elas encolhem para caber na tela */
#modal, #modal .caixa, .cola-folha { scrollbar-width: none; }
#modal::-webkit-scrollbar, #modal .caixa::-webkit-scrollbar, .cola-folha::-webkit-scrollbar { display: none; }

/* Modificadores de regras: muitas opções, em colunas para caberem sem rolar */
#modal .caixa:has(> .regras-teste) { max-width: calc(min(1500px, 96vw) / var(--zm, 1)); }
.regras-teste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.regras-teste > .titulo-etapa, .regras-teste > .nota, .regras-teste > .acoes-menu { grid-column: 1 / -1; }
html.celular .regras-teste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Introdução ao abrir o jogo */
#intro { position: fixed; inset: 0; z-index: 5000; overflow: hidden; background: #000; cursor: pointer; }
.intro-texto { position: absolute; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: #fff; font: 400 min(6.4vh, 7vw)/1.1 'Marlboro', var(--fonte-titulo); letter-spacing: .03em; user-select: none; }
.intro-logo { position: absolute; transform-origin: 50% 50%; }
.intro-logo img { display: block; width: 100%; height: 100%; }
.intro-comecar { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; font: 400 min(5vh, 6vw)/1.1 'Marlboro', var(--fonte-titulo); letter-spacing: .03em; user-select: none; animation: intro-pisca 1.5s ease-in-out infinite; }
@keyframes intro-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .intro-comecar { animation: none; } }