/* Fonte do nome do jogo. Auto-hospedada de proposito: uma chamada ao Google Fonts
   deixaria o titulo dependendo de um terceiro para aparecer, e "swap" faria a marca
   piscar de Inter para gotica a cada visita. 17 KB, subset latin (tem o "ó"). */
@font-face {
  font-family: "Grenze Gotisch";
  src: url("assets/fontes/Grenze_Gotisch.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte-titulo: "Grenze Gotisch", "Trajan Pro", Georgia, serif;
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #0b1014;
  color: #fff6df;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: #0b1014;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 74%, transparent);
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0.72rem 1rem;
  background: linear-gradient(180deg, #ffd785, #c98932);
  color: #211409;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.44);
  transition: transform 160ms ease, filter 160ms ease;
}

button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

button.secondary {
  background: linear-gradient(180deg, #283a42, #172127);
  color: #fff6df;
  border: 1px solid rgba(255, 246, 223, 0.22);
}

button.danger {
  background: linear-gradient(180deg, #fb7a64, #9d2d26);
  color: #fff6df;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.48;
  transform: none;
}

input,
select {
  width: 100%;
  border: 1px solid rgba(255, 246, 223, 0.2);
  border-radius: 8px;
  background: rgba(7, 12, 16, 0.8);
  color: #fff6df;
  padding: 0.72rem 0.82rem;
  outline: none;
}

label {
  display: grid;
  gap: 7px;
  color: #d8caa8;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

.app {
  min-height: 100vh;
}

.glass-panel {
  border: 1px solid rgba(255, 246, 223, 0.16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(13, 24, 30, 0.82), rgba(9, 13, 17, 0.92));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.eyebrow {
  color: #f6bd5f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.muted {
  color: #bfb69c;
}

.notice {
  min-height: 1.4rem;
  color: #ffd785;
}

.pill {
  border: 1px solid rgba(255, 246, 223, 0.18);
  border-radius: 999px;
  padding: 0.46rem 0.68rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff6df;
  font-size: 0.86rem;
  font-weight: 800;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   TELA DE ENTRADA  (A Era dos Heróis — card game)
   Coluna unica centrada sobre a arte de fundo. Coluna unica em vez das tres
   colunas antigas porque metade de quem recebe o link no WhatsApp abre no
   celular — assim o mesmo layout serve os dois tamanhos sem caso especial.
   ============================================================ */
.home-entrada {
  position: relative;
  /* desconta a barra fixa do topo: com 100vh cheios a capa passava da tela e
     empurrava a seta de "conhecer o jogo" para fora. No celular a barra tem duas
     linhas, entao o desconto e maior (ver o media query da .topo-site). */
  min-height: calc(100vh - 57px);
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 48px) clamp(16px, 4vw, 32px);
  background:
    linear-gradient(rgba(6, 9, 12, 0.55), rgba(4, 6, 9, 0.82)),
    url("assets/background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* vinheta: escurece as bordas para o texto claro ter contraste em cima da arte */
.home-entrada::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 0 22%, rgba(3, 5, 8, 0.72) 78%);
}

.entrada-conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  display: grid;
  gap: clamp(22px, 4vw, 34px);
  animation: entrada-surge 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entrada-surge {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- marca ---- */
.marca {
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.marca-nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 13vw, 5.8rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff6df 12%, #ffd785 54%, #c98932 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.75));
}

/* filete dourado com losango no meio */
.marca-filete {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(300px, 76%);
}

.marca-filete span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 133, 0.75));
}

.marca-filete span:last-child {
  background: linear-gradient(90deg, rgba(255, 215, 133, 0.75), transparent);
}

.marca-filete i {
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: #ffd785;
  box-shadow: 0 0 12px rgba(255, 215, 133, 0.8);
}

.marca-tipo {
  margin: 0;
  color: #f6bd5f;
  font-size: clamp(0.78rem, 2.6vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* compensa o espaco extra que o letter-spacing poe no fim */
  text-transform: uppercase;
}

.marca-chamada {
  margin: 4px 0 0;
  max-width: 30rem;
  color: #efe4c9;
  font-size: clamp(0.95rem, 3vw, 1.08rem);
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.marca-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 4px;
}

.marca-selos .pill {
  font-size: 0.76rem;
  padding: 0.34rem 0.62rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

/* ---- painel de entrada ---- */
.entrada-painel {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 4vw, 24px);
  border: 1px solid rgba(255, 246, 223, 0.16);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13, 24, 30, 0.86), rgba(8, 12, 16, 0.94));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.campo {
  display: grid;
  gap: 6px;
}

.campo-rotulo {
  color: #bfb69c;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entrada-painel input {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 246, 223, 0.2);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff6df;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.entrada-painel input::placeholder {
  color: rgba(191, 182, 156, 0.6);
}

.entrada-painel input:focus-visible {
  outline: none;
  border-color: rgba(255, 215, 133, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 215, 133, 0.16);
}

.opcao {
  display: grid;
  gap: 10px;
}

.opcao-texto h2 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 900;
}

.opcao-texto p {
  margin: 2px 0 0;
  color: #bfb69c;
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ENTRAR e o caminho principal: campo do codigo e botao lado a lado, botao dourado */
.linha-codigo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.linha-codigo input {
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.linha-codigo button {
  padding-inline: 1.5rem;
}

/* separador "ou" */
.entrada-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8d8674;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.entrada-ou::before,
.entrada-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 246, 223, 0.14);
}

/* CRIAR e o caminho do anfitriao: botao secundario, largura total */
.opcao-criar button {
  width: 100%;
}

.entrada-painel .notice {
  margin: 0;
  min-height: 0;
  font-size: 0.88rem;
  text-align: center;
}

.entrada-painel .notice:empty {
  display: none;
}

/* seta que convida a rolar: sem ela a capa ocupa a tela toda e nada indica que
   existe pagina abaixo */
.entrada-seta {
  justify-self: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  color: #cfc5aa;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.entrada-seta:hover {
  color: #ffd785;
  transform: translateY(2px);
}

/* ============================================================
   BARRA DO TOPO + SECOES DE CONTEUDO
   ============================================================ */
.site {
  position: relative;
}

.topo-site {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(14px, 4vw, 30px);
  border-bottom: 1px solid rgba(255, 246, 223, 0.12);
  background: rgba(6, 9, 12, 0.82);
  backdrop-filter: blur(14px);
}

.topo-marca {
  font-family: var(--fonte-titulo);
  font-size: 1.42rem;
  font-weight: 700;
  color: #ffd785;
  text-decoration: none;
  white-space: nowrap;
}

.topo-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.topo-links::-webkit-scrollbar {
  display: none;
}

.topo-links a {
  padding: 0.42rem 0.7rem;
  border-radius: 7px;
  color: #efe4c9;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.topo-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffd785;
}

.topo-login {
  min-height: 36px;
  padding: 0.4rem 0.95rem;
  font-size: 0.86rem;
  white-space: nowrap;
}

/* No celular os tres links nao cabem na mesma linha da marca: "Como funciona"
   aparecia cortado e "Regras" ficava fora da tela. A barra vira duas linhas —
   marca e Entrar em cima, navegacao embaixo. */
@media (max-width: 620px) {
  .topo-site {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding-bottom: 8px;
  }

  .topo-marca {
    font-size: 1.24rem;
  }

  /* o botao vem DEPOIS dos links no HTML; sem posicionar explicitamente, a faixa
     de links empurra o Entrar para uma terceira linha ocupando a largura toda */
  .topo-login {
    grid-row: 1;
    grid-column: 2;
  }

  .topo-links {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-left: 0;
    justify-content: center;
    gap: 2px;
  }

  .topo-links a {
    padding-inline: 0.5rem;
    font-size: 0.84rem;
  }
}

/* o link de ancora nao pode parar embaixo da barra fixa. Em duas linhas a barra
   fica mais alta, entao a folga acompanha. */
[id] {
  scroll-margin-top: 68px;
}

@media (max-width: 620px) {
  [id] {
    scroll-margin-top: 104px;
  }
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.secao {
  padding: clamp(48px, 9vw, 92px) clamp(16px, 4vw, 32px);
  border-top: 1px solid rgba(255, 246, 223, 0.08);
  background: #0b1014;
}

.secao-herois {
  background: linear-gradient(180deg, #0d141a, #0a0e13);
}

.secao-conteudo {
  max-width: 1040px;
  margin: 0 auto;
}

.secao-titulo {
  margin: 6px 0 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff6df;
}

.secao-intro {
  margin: 12px 0 0;
  max-width: 62ch;
  color: #cfc5aa;
  font-size: clamp(0.96rem, 2.4vw, 1.06rem);
  line-height: 1.6;
}

/* ---- passos ---- */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.passos li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.passo-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 215, 133, 0.4);
  border-radius: 50%;
  background: rgba(255, 215, 133, 0.1);
  color: #ffd785;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 700;
}

.passos h3 {
  margin: 4px 0 0;
  font-size: 1.02rem;
  font-weight: 900;
  color: #fff6df;
}

.passos p {
  margin: 5px 0 0;
  color: #bfb69c;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ---- numeros ---- */
.numeros-jogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 38px;
  padding: 20px;
  border: 1px solid rgba(255, 246, 223, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.numeros-jogo div {
  text-align: center;
}

.numeros-jogo strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  color: #ffd785;
  line-height: 1;
}

.numeros-jogo span {
  display: block;
  margin-top: 4px;
  color: #8d8674;
  font-size: 0.76rem;
  font-weight: 700;
}

/* ---- vitrine de herois ---- */
.grade-herois {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.heroi-vitrine {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 246, 223, 0.14);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(16, 26, 33, 0.9), rgba(9, 13, 17, 0.95));
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease;
}

.heroi-vitrine:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 133, 0.42);
}

.heroi-arte {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.heroi-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* os numeros ficam sobre a arte, com um degrade para o texto nao sumir na imagem */
.heroi-numeros {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 10px;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(4, 7, 10, 0.92));
  font-size: 0.84rem;
  font-weight: 800;
  color: #fff6df;
}

.heroi-texto {
  padding: 13px 14px 16px;
}

.heroi-classe {
  color: #f6bd5f;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heroi-texto h3 {
  margin: 3px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 1.32rem;
  font-weight: 700;
  color: #fff6df;
}

.heroi-papel {
  margin: 7px 0 0;
  color: #bfb69c;
  font-size: 0.86rem;
  line-height: 1.5;
}

.heroi-recurso {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 246, 223, 0.1);
  color: #efe4c9;
  font-size: 0.8rem;
  font-weight: 700;
}

.heroi-recurso span {
  color: #8d8674;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 5px;
}

/* ---- regras ---- */
.grade-regras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.grade-regras article {
  padding: 16px 17px;
  border: 1px solid rgba(255, 246, 223, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.grade-regras h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  color: #fff6df;
}

.grade-regras p {
  margin: 7px 0 0;
  color: #bfb69c;
  font-size: 0.87rem;
  line-height: 1.55;
}

.aviso-anfitriao {
  margin-top: 22px;
  padding: 17px 19px;
  border: 1px solid rgba(255, 215, 133, 0.34);
  border-left-width: 3px;
  border-radius: 11px;
  background: rgba(255, 215, 133, 0.07);
}

.aviso-anfitriao h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  color: #ffd785;
}

.aviso-anfitriao p {
  margin: 7px 0 0;
  color: #efe4c9;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---- aviso de login ---- */
.aviso-login {
  max-width: 420px;
  padding: 22px;
  text-align: center;
}

.aviso-login h2 {
  margin: 4px 0 10px;
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 700;
}

.aviso-login p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.aviso-login button {
  width: 100%;
  margin-top: 6px;
}

/* ---- rodape do site ---- */
.rodape-site {
  display: grid;
  gap: 7px;
  padding: 30px clamp(16px, 4vw, 32px) 38px;
  border-top: 1px solid rgba(255, 246, 223, 0.1);
  background: #080b0f;
  text-align: center;
}

.rodape-legal {
  margin: 0;
  color: #cfc5aa;
  font-size: 0.78rem;
  font-weight: 700;
}

.rodape-nota {
  margin: 0 auto;
  max-width: 34rem;
  color: #8d8674;
  font-size: 0.72rem;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .home-entrada {
    min-height: calc(100vh - 96px);
  }
}

@media (max-width: 420px) {
  /* No celular o botao ao lado do campo espreme o codigo de 5 letras. */
  .linha-codigo {
    grid-template-columns: 1fr;
  }
}

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

.lobby-screen,
.game-board {
  min-height: 100vh;
  padding: 18px;
}

.lobby-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(37, 139, 126, 0.28), transparent 24rem),
    radial-gradient(circle at 88% 12%, rgba(233, 141, 56, 0.18), transparent 24rem),
    linear-gradient(145deg, #0b1115, #15120d);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 auto 16px;
  width: min(1440px, 100%);
}

.brand {
  display: grid;
  gap: 4px;
}

.brand h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 0.92;
}

.brand p {
  color: #cfc5aa;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.lobby-stage {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  gap: 16px;
}

.lobby-roster,
.hero-select {
  padding: 18px;
}

.lobby-roster,
.hero-select,
.compact-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.hero-choice {
  display: grid;
  gap: 10px;
}

.hero-choice.selected .tcg-card {
  outline: 2px solid #ffd785;
  box-shadow: 0 20px 48px rgba(255, 215, 133, 0.2);
}

.game-board {
  background:
    linear-gradient(rgba(3, 7, 10, 0.24), rgba(3, 7, 10, 0.68)),
    radial-gradient(circle at 50% 24%, rgba(255, 215, 133, 0.15), transparent 22rem),
    linear-gradient(135deg, #142923, #0d1418 45%, #1b1710);
}

.game-board.room-forest {
  background:
    linear-gradient(rgba(3, 7, 10, 0.28), rgba(3, 7, 10, 0.64)),
    radial-gradient(circle at 20% 18%, rgba(117, 196, 124, 0.33), transparent 25rem),
    linear-gradient(135deg, #183428, #0d1917 48%, #2a2815);
}

.game-board.room-crypt {
  background:
    linear-gradient(rgba(3, 5, 7, 0.25), rgba(3, 5, 7, 0.7)),
    radial-gradient(circle at 62% 18%, rgba(136, 126, 116, 0.32), transparent 24rem),
    linear-gradient(135deg, #111419, #24201d 48%, #110f12);
}

.game-board.room-sanctum {
  background:
    linear-gradient(rgba(4, 8, 14, 0.24), rgba(4, 8, 14, 0.7)),
    radial-gradient(circle at 48% 22%, rgba(76, 173, 223, 0.34), transparent 25rem),
    linear-gradient(135deg, #0e1c2a, #10242b 48%, #1e1630);
}

.board-grid {
  width: min(1600px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) minmax(290px, 350px);
  gap: 14px;
}

.turn-banner {
  width: min(1440px, 100%);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255, 246, 223, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(19, 31, 38, 0.88), rgba(7, 10, 13, 0.72));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
}

.turn-banner strong {
  display: block;
  font-size: 1.2rem;
}

.turn-banner.players-turn {
  border-color: rgba(102, 231, 255, 0.34);
}

.turn-banner.dungeon-turn {
  border-color: rgba(251, 122, 100, 0.42);
  background: linear-gradient(90deg, rgba(62, 19, 17, 0.88), rgba(7, 10, 13, 0.74));
}

.turn-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  color: #e7dbc0;
  font-weight: 900;
}

.turn-status span {
  border: 1px solid rgba(102, 231, 255, 0.34);
  border-radius: 999px;
  padding: 0.32rem 0.58rem;
  color: #bdefff;
}

.left-rail,
.right-rail,
.battlefield {
  display: grid;
  gap: 14px;
  align-content: start;
}

.room-card {
  min-height: 230px;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(160deg, rgba(18, 38, 34, 0.86), rgba(11, 12, 15, 0.94)),
    url("assets/background-arena.jpg");
  background-size: cover;
  background-position: center;
}

.room-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 9, 12, 0.2), rgba(5, 9, 12, 0.78));
}

.room-card > * {
  position: relative;
}

.room-card h2 {
  margin-top: 78px;
  font-size: 2rem;
  line-height: 0.95;
  text-shadow: 0 7px 18px rgba(0, 0, 0, 0.62);
}

.room-card p {
  color: #e9ddbf;
}

.room-rule {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 246, 223, 0.18);
  padding-top: 12px;
  color: #ffe3a8;
  font-weight: 800;
}

.room-objective,
.room-reward {
  position: relative;
  margin-top: 10px;
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #efe4ca;
  font-size: 0.84rem;
  font-weight: 800;
}

.room-reward {
  color: #bdefff;
}

.intention-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 215, 133, 0.2), transparent 8rem),
    linear-gradient(145deg, rgba(36, 22, 15, 0.9), rgba(8, 12, 16, 0.94));
}

.trap-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 10%, rgba(251, 122, 100, 0.2), transparent 8rem),
    linear-gradient(145deg, rgba(43, 14, 15, 0.92), rgba(8, 12, 16, 0.94));
}

.trap-card h2 {
  font-size: 1.18rem;
}

.trap-card p {
  color: #eadfc6;
  font-size: 0.86rem;
  line-height: 1.35;
}

.trap-art {
  position: relative;
  min-height: 116px;
  border: 1px solid rgba(251, 122, 100, 0.45);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.24);
  color: #ffb2a5;
  font-weight: 950;
}

.trap-art img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.trap-art span {
  position: absolute;
  left: 10px;
  top: 10px;
  border: 1px solid rgba(255, 246, 223, 0.24);
  border-radius: 999px;
  padding: 0.22rem 0.42rem;
  background: rgba(0, 0, 0, 0.52);
  color: #fff6df;
  font-size: 0.68rem;
  text-transform: uppercase;
}

/* "Desativada (N rod.)" era o texto do rotulo que sumiu do topo do card. Ele nao
   pode sumir junto: e o unico aviso de que a armadilha esta sem efeito. Vai para
   o canto de baixo da arte, longe do selo com o nome. */
.trap-art .trap-off {
  left: auto;
  top: auto;
  right: 10px;
  bottom: 10px;
  border-color: rgba(251, 122, 100, 0.6);
  background: rgba(43, 14, 15, 0.88);
  color: #ffb2a5;
  font-weight: 800;
}

/* ---------------- AMEACAS DA SALA (mini cards abaixo de "Finalizar turno") ------
   Sao ate quatro, empilhadas do nivel 1 ao 4, e por isso cada uma tem de ser BAIXA:
   quatro cards da altura do da armadilha empurrariam o resto da barra para fora da
   tela. Duas escolhas fazem essa altura:
     - NAO ha arte. O que identifica o nivel e o FUNDO colorido do proprio card, que
       vai esquentando do ambar (1) ao roxo (4), na mesma escala das bolhas do topo.
     - O texto do efeito mora DENTRO do card, sobre esse fundo, e nao embaixo dele
       como no card da armadilha. E o que economiza o bloco de altura extra.
   O gap do .right-rail ja separa a pilha do botao; o margin-top so a aproxima um
   pouco mais dele, para as ameacas lerem como consequencia do turno. */
.ameaca-stack {
  display: grid;
  gap: 8px;
  margin-top: -4px;
}

.ameaca-card {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border: 1.5px solid rgba(255, 246, 223, 0.2);
  border-radius: 10px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}

.ameaca-card-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ameaca-nivel-selo {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 246, 223, 0.3);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff6df;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ameaca-nome {
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.15;
  color: #fff6df;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.ameaca-texto {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #f4ecdc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Uma cor por nivel. Sao as mesmas quatro das bolhas .bubble-nivel-ameaca.nivel-N */
.ameaca-card.nivel-1 {
  background:
    radial-gradient(circle at 8% 0%, rgba(250, 204, 21, 0.32), transparent 65%),
    linear-gradient(145deg, rgba(88, 63, 8, 0.95), rgba(26, 20, 6, 0.96));
  border-color: rgba(250, 204, 21, 0.55);
}

.ameaca-card.nivel-2 {
  background:
    radial-gradient(circle at 8% 0%, rgba(251, 146, 60, 0.34), transparent 65%),
    linear-gradient(145deg, rgba(97, 48, 8, 0.95), rgba(30, 15, 5, 0.96));
  border-color: rgba(251, 146, 60, 0.6);
}

.ameaca-card.nivel-3 {
  background:
    radial-gradient(circle at 8% 0%, rgba(248, 113, 113, 0.36), transparent 65%),
    linear-gradient(145deg, rgba(104, 20, 20, 0.95), rgba(32, 8, 8, 0.96));
  border-color: rgba(248, 113, 113, 0.65);
}

.ameaca-card.nivel-4 {
  background:
    radial-gradient(circle at 8% 0%, rgba(192, 132, 252, 0.38), transparent 65%),
    linear-gradient(145deg, rgba(76, 19, 110, 0.96), rgba(24, 7, 36, 0.96));
  border-color: rgba(192, 132, 252, 0.7);
}

.intention-card h2 {
  font-size: 1.25rem;
}

.intention-art {
  position: relative;
  min-height: 148px;
  border: 1px dashed rgba(255, 215, 133, 0.42);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(255, 215, 133, 0.1), transparent 45%),
    radial-gradient(circle at 50% 45%, rgba(102, 231, 255, 0.14), transparent 6rem),
    rgba(0, 0, 0, 0.22);
  color: #ffd785;
  font-weight: 950;
}

.intention-art::after {
  content: "Arte futura";
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: rgba(255, 246, 223, 0.42);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.intention-rules {
  display: grid;
  gap: 8px;
}

.intention-rules p {
  display: grid;
  gap: 4px;
  border-left: 3px solid #ffd785;
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #e8dcc1;
  font-size: 0.86rem;
}

.intention-rules strong {
  color: #fff6df;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.compact-panel {
  padding: 14px;
}

.hero-party-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 215, 133, 0.2), transparent 11rem),
    radial-gradient(circle at 92% 22%, rgba(102, 231, 255, 0.13), transparent 12rem),
    linear-gradient(145deg, rgba(16, 25, 28, 0.94), rgba(8, 10, 13, 0.96));
}

.player-list {
  display: grid;
  gap: 10px;
}

.player-hud {
  --hero-accent: #ffd785;
  --hero-accent-soft: rgba(255, 215, 133, 0.2);
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: start;
  border: 1px solid rgba(255, 246, 223, 0.13);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.18));
}

/* ── Hero Buff Pip System (Renovação + Profecia) ── */
.hero-buff-pips-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -2px;
}

.hero-buff-pip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  position: relative;
}

.hero-buff-pip-row:hover {
  transform: translateY(-1px);
}

/* Renovação row – green theme */
.hero-buff-pip-row.renovacao-buff {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.hero-buff-pip-row.renovacao-buff:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.45);
}

/* Profecia cura row – blue theme */
.hero-buff-pip-row.profecia-cura-buff {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
}
.hero-buff-pip-row.profecia-cura-buff:hover {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
}

/* Profecia escudo row – cyan theme */
.hero-buff-pip-row.profecia-escudo-buff {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.22);
}
.hero-buff-pip-row.profecia-escudo-buff:hover {
  background: rgba(6, 182, 212, 0.16);
  border-color: rgba(6, 182, 212, 0.45);
}

.buff-pip-icon {
  font-size: 0.78rem;
  flex-shrink: 0;
  line-height: 1;
  width: 16px;
  text-align: center;
}

.buff-pip-bar {
  display: flex;
  gap: 3px;
  flex: 1;
}

.buff-pip {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Filled pip – renovação (green) */
.renovacao-buff .buff-pip.buff-pip-filled {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.55);
}

/* Filled pip – profecia cura (blue) */
.profecia-cura-buff .buff-pip.buff-pip-filled {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.55);
}

/* Filled pip – profecia escudo (cyan) */
.profecia-escudo-buff .buff-pip.buff-pip-filled {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.55);
}

.buff-pip-value {
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 30px;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.renovacao-value {
  color: #6ee7b7;
}

.profecia-value {
  color: #93c5fd;
}

.profecia-escudo-buff .profecia-value {
  color: #67e8f9;
}

.player-hud.hero-guardiao {
  --hero-accent: #ffd785;
  --hero-accent-soft: rgba(255, 215, 133, 0.2);
}

.player-hud.hero-oraculo {
  --hero-accent: #bba7ff;
  --hero-accent-soft: rgba(187, 167, 255, 0.2);
}

.player-hud.hero-batedor {
  --hero-accent: #82e49b;
  --hero-accent-soft: rgba(130, 228, 155, 0.2);
}

.player-hud.hero-mago {
  --hero-accent: #d885ff;
  --hero-accent-soft: rgba(216, 133, 255, 0.2);
}

.player-hud.is-you {
  border-color: rgba(255, 215, 133, 0.64);
}

.player-hud.turn-ended {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(0, 0, 0, 0.32));
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2) !important;
}

.hud-turn-ended-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(52, 211, 153, 0.6);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* a palavra vive num <i> so para poder sumir quando as fichas compactam (fichas-3) */
.hud-turn-ended-tag i {
  font-style: normal;
}

/* ── 2-Second Floating Turn Ended Notice Banner ── */
.turn-ended-notice-banner-area {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  pointer-events: none;
  width: max-content;
  max-width: 90%;
}

.turn-ended-notice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(13, 22, 33, 0.96), rgba(20, 35, 48, 0.98));
  border: 1.5px solid rgba(52, 211, 153, 0.8);
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(52, 211, 153, 0.35);
  color: #f0fdf4;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  animation: turnEndedNoticePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(8px);
}

.turn-ended-notice-banner .notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

@keyframes turnEndedNoticePop {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.player-hud.is-ready {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25) !important;
}

/* ── Portrait Card for local player (is-you) ── */
.portrait-container {
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 3.5px solid #b98745;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(185, 135, 69, 0.15);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portrait-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(185, 135, 69, 0.25);
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

/* Circular shield badge styled next to other badges */
.hud-shield-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #66e7ff;
  background: rgba(10, 24, 38, 0.95);
  color: #66e7ff;
  font-size: 0.95rem;
  font-weight: 950;
  box-shadow: 0 0 10px rgba(102, 231, 255, 0.7), inset 0 0 5px rgba(102, 231, 255, 0.4);
  animation: shieldPulse 2s ease-in-out infinite;
}

.hud-shield-circular i {
  width: 11px;
  height: 13px;
  display: inline-block;
  background: linear-gradient(180deg, #bfe9ff, #4587b5);
  clip-path: polygon(50% 0, 90% 14%, 84% 70%, 50% 100%, 16% 70%, 10% 14%);
}

.hud-extra-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.hero-party-panel .player-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Player cards: horizontal grid layout, glorious aesthetics */
.hero-party-panel .player-hud {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: start;
  border: 1.5px solid rgba(255, 246, 223, 0.15);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 20%, var(--hero-accent-soft), transparent 8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 246, 223, 0.05), 0 16px 34px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-party-panel .player-hud:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 223, 0.08), 0 20px 42px rgba(0, 0, 0, 0.32);
}

.hero-party-panel .player-hud.is-you {
  border: 2.5px solid var(--hero-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 223, 0.08), 0 20px 48px var(--hero-accent-soft);
}

.hero-party-panel .player-hud .hud-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-party-panel .player-hud .hud-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.hero-party-panel .player-hud .hud-title strong {
  color: #fff6df;
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 950;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-party-panel .player-hud .hud-title span {
  color: var(--hero-accent);
  font-size: 0.95rem;
  font-weight: 800;
}

.hero-party-panel .hud-title strong {
  color: #fff6df;
  font-size: 1.18rem;
  line-height: 1;
}

.hero-party-panel .hud-title span {
  color: var(--hero-accent);
  font-size: 0.88rem;
  font-weight: 900;
}

.hero-resource {
  display: grid;
  gap: 5px;
}

.hero-resource-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #fff6df;
}

.hero-resource-top span {
  color: #d5c8a9;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.hero-resource-top strong {
  color: #fff6df;
  font-size: 1.24rem;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.hud-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.hud-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.hud-title strong,
.hud-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-title span {
  color: #c7b997;
  font-size: 0.78rem;
}

.hud-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #cfc5aa;
  font-size: 0.76rem;
  font-weight: 800;
}

/* Compact extra badges row (bênção, carga, sobrecarga) */
.hud-extra-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hud-extra-badges span {
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 6px;
  background: rgba(255, 215, 133, 0.1);
  border: 1px solid rgba(255, 215, 133, 0.2);
  color: #ffd785;
  white-space: nowrap;
}

.shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shield-badge i {
  width: 13px;
  height: 15px;
  display: inline-block;
  background: linear-gradient(180deg, #bfe9ff, #4587b5);
  clip-path: polygon(50% 0, 90% 14%, 84% 70%, 50% 100%, 16% 70%, 10% 14%);
}

.hero-party-panel .hud-stats {
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.hero-party-panel .hud-stats span:not(.hero-shield):not(.hero-carga-batalha):not(.hero-profecia):not(.hero-bencao-arcana) {
  border: 1px solid rgba(255, 246, 223, 0.12);
  border-radius: 6px;
  padding: 5px 7px;
  background: rgba(0, 0, 0, 0.22);
}

.hero-party-panel .hero-shield {
  border: 1px solid rgba(191, 233, 255, 0.38);
  border-radius: 6px;
  padding: 5px 8px;
  background: linear-gradient(145deg, rgba(69, 135, 181, 0.32), rgba(0, 0, 0, 0.24));
  color: #e9f8ff;
  font-size: 1.06rem;
  font-weight: 950;
}

.hero-party-panel .hero-carga-batalha {
  border: 1px solid rgba(255, 168, 85, 0.38);
  border-radius: 6px;
  padding: 5px 8px;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.32), rgba(0, 0, 0, 0.24));
  color: #ffeedb;
  font-size: 1.06rem;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-party-panel .hero-profecia {
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 6px;
  padding: 5px 8px;
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.32), rgba(0, 0, 0, 0.24));
  color: #f3e8ff;
  font-size: 1.06rem;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-party-panel .hero-bencao-arcana {
  border: 1px solid rgba(236, 72, 153, 0.38);
  border-radius: 6px;
  padding: 5px 8px;
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.32), rgba(0, 0, 0, 0.24));
  color: #fdf2f8;
  font-size: 1.06rem;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-party-panel .hero-shield i {
  width: 18px;
  height: 21px;
}

.meter {
  position: relative;
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 246, 223, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}

.meter span {
  display: block;
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  transition: width 260ms ease;
}

.meter.meter-animating span {
  animation: meterChange 900ms cubic-bezier(0.2, 0.78, 0.22, 1) both;
}

.meter.life span {
  background: linear-gradient(90deg, #d43632, #ff865f, #ffd785);
}

.meter.energy span {
  background: linear-gradient(90deg, #2f88ff, #66e7ff);
}

.meter em {
  position: absolute;
  inset: -1px 8px 0 auto;
  color: #fff6df;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  line-height: 13px;
  text-shadow: 0 1px 3px #000;
}

.hero-party-panel .meter {
  height: 18px;
  border-color: rgba(255, 246, 223, 0.22);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.48);
}

.hero-party-panel .meter em {
  display: none;
}

.battlefield {
  min-height: calc(100vh - 122px);
}

.monster-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}

.monster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 2 / 3;
  min-height: 0;
  border: 1px solid rgba(255, 220, 175, 0.22);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(circle at 50% 20%, rgba(241, 118, 74, 0.25), transparent 5rem),
    linear-gradient(145deg, rgba(54, 20, 18, 0.88), rgba(14, 12, 13, 0.92));
}

.monster-card .meter {
  position: relative;
  z-index: 2;
  margin: 4px 8px;
  height: 18px;
  border-color: rgba(255, 246, 223, 0.25);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.monster-card .meter em {
  inset: -1px 8px 0 auto;
  font-size: 0.75rem;
  line-height: 18px;
}

.monster-card.common {
  border-color: rgba(102, 231, 255, 0.24);
}

.monster-card.brutal {
  border-color: rgba(251, 122, 100, 0.5);
  background:
    radial-gradient(circle at 50% 20%, rgba(251, 122, 100, 0.32), transparent 5rem),
    linear-gradient(145deg, rgba(74, 18, 14, 0.9), rgba(14, 12, 13, 0.94));
}

.monster-card.mystic {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 16px 42px rgba(168, 85, 247, 0.15), 0 0 15px rgba(168, 85, 247, 0.25);
  background:
    radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.35), transparent 6rem),
    linear-gradient(145deg, rgba(38, 12, 45, 0.9), rgba(12, 10, 14, 0.94));
}

.monster-card.defeated {
  filter: grayscale(1);
  opacity: 0.55;
  position: relative;
}
/* Selo de DERROTADO sobre a carta do inimigo abatido */
.monster-card.defeated::after {
  content: "DERROTADO";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 20;
  padding: 6px 16px;
  font-weight: 950;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: #ffdede;
  border: 3px solid rgba(220, 38, 38, 0.85);
  border-radius: 6px;
  background: rgba(60, 6, 6, 0.72);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.monster-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

.monster-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: none;
  min-height: 0;
}

.monster-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 44%, rgba(10, 5, 5, 0.34));
  pointer-events: none;
}

.monster-sigil {
  width: 68px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd785, #9d2d26 55%, #1d1011 56%);
  box-shadow: 0 0 34px rgba(251, 122, 100, 0.28);
  position: relative;
}

.monster-sigil::before,
.monster-sigil::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 4px solid rgba(45, 13, 12, 0.9);
  transform: rotate(45deg);
}

.monster-sigil.moon::before {
  border-radius: 50%;
  border-color: transparent #231314 transparent transparent;
}

.monster-sigil.blade::after {
  inset: 10px 30px;
  border: 0;
  background: #261412;
  transform: rotate(20deg);
}

/* Nome Vertical (Borda Esquerda) */
.monster-vertical-name {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  z-index: 4;
  color: #ffd785;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.85;
}

/* Informações Verticais (Borda Direita) */
.monster-vertical-meta {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
  z-index: 4;
  color: #cfc5aa;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.8;
}

/* Condicoes, marcas e Alvo: PILHA DO TOPO DA CARTA */
/* Ficavam no rodape, atras dos circulos de dano/escudo e do pote de vida. Sobem
   as duas juntas nesta pilha para nao se cobrirem — e acima do verso da carta
   (z-index 25), porque a faixa continua legivel com o verso aberto. */
.monster-top-stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* com muitas condicoes a faixa rola em vez de comer a arte do monstro */
  max-height: 55%;
  pointer-events: none;
}

.monster-top-stack .monster-target-badge {
  position: static;
  transform: none;
  flex: 0 0 auto;
  margin-top: 6px;
  transition: opacity 0.18s ease;
}

/* o Alvo nao e condicao: com o verso aberto ele sai da frente, como sempre saiu */
.monster-card:not(.defeated):hover:not(:has(.monster-status-overlay:hover)) .monster-target-badge {
  opacity: 0;
}

/* Caixa de informacoes (buffs/debuffs/marcas) NO TOPO da carta */
.monster-status-overlay {
  align-self: stretch;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(255, 215, 133, 0.35);
  background: linear-gradient(180deg, rgba(6, 4, 3, 0.96), rgba(10, 8, 6, 0.86));
  border-radius: 7px 7px 0 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  justify-content: center;
  /* a faixa recebe o mouse: e ela que segura o verso da carta e abre o balao */
  pointer-events: auto;
}
.monster-status-overlay .status-badge {
  font-size: 0.62rem;
  padding: 1px 4px;
  cursor: help;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.monster-status-overlay .status-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.18) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(255, 215, 133, 0.55), 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* Badges de Ataque e Escudo (Canto Inferior Esquerdo) */
.monster-badge-left {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  pointer-events: none;
}

.stat-badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 10, 10, 0.92);
  border: 1.5px solid #d5c8a9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  pointer-events: auto;
}

.stat-badge .badge-bg {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.48;
  pointer-events: none;
  z-index: 1;
}

.stat-badge .badge-value {
  position: relative;
  z-index: 2;
  font-size: 1.15rem;
  font-weight: 950;
  color: #fff6df;
  text-shadow: 0 1px 3px #000;
}

.stat-badge.shield {
  border-color: #66e7ff;
  box-shadow: 0 0 8px rgba(102, 231, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.8);
}
.stat-badge.shield .badge-bg {
  opacity: 0.55;
}

/* Pote de Vida Estilo Diablo (Canto Inferior Direito) */
.monster-health-vial {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 5, 5, 0.72);
  border: 2px solid #b98745;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.7), 
    inset 0 0 8px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(185, 135, 69, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.vial-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--health-pct);
  background: linear-gradient(0deg, #600 0%, #bd1c1c 70%, #ff5c5c 100%);
  border-radius: 0 0 50% 50%;
  transition: height 0.5s cubic-bezier(0.2, 0.8, 0.22, 1);
  z-index: 1;
}

/* Diablo-style glow in the vial */
.monster-health-vial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.12) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.vial-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  z-index: 3;
  pointer-events: none;
}

.vial-value {
  position: relative;
  z-index: 4;
  font-size: 0.86rem;
  font-weight: 950;
  color: #fff;
  text-shadow: 0 2px 4px #000, 0 0 3px #000;
}

/* Indicador de Vida Abaixo de 50% (<50% HP) */
.monster-health-vial.low-life {
  border-color: #ff2a4b;
  box-shadow: 
    0 0 10px rgba(255, 42, 75, 0.9), 
    0 0 18px rgba(255, 42, 75, 0.6), 
    inset 0 0 10px rgba(255, 0, 40, 0.85);
  animation: vialLowLifePulse 1.3s infinite alternate ease-in-out;
}

@keyframes vialLowLifePulse {
  0% {
    border-color: #ff2a4b;
    box-shadow: 
      0 0 8px rgba(255, 42, 75, 0.7), 
      0 0 14px rgba(255, 42, 75, 0.4), 
      inset 0 0 8px rgba(255, 0, 40, 0.7);
  }
  100% {
    border-color: #ff7790;
    box-shadow: 
      0 0 14px rgba(255, 42, 75, 1), 
      0 0 24px rgba(255, 42, 75, 0.85), 
      inset 0 0 12px rgba(255, 0, 40, 0.95);
  }
}

.monster-health-vial.low-life .vial-liquid {
  background: linear-gradient(0deg, #700000 0%, #e11d48 70%, #ff6b8b 100%);
}

.monster-health-vial.low-life .vial-value {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 0, 60, 0.9), 0 1px 3px #000;
}

.impact-number {
  position: absolute;
  z-index: 32;
  left: 50%;
  top: 41%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: #ff6656;
  font-size: clamp(2.4rem, 5.4vw, 5.6rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 rgba(55, 9, 7, 0.95),
    0 0 18px rgba(255, 60, 40, 0.78),
    0 0 34px rgba(255, 216, 133, 0.35);
  animation: impactFloat 1250ms ease-out forwards;
}

.impact-number.damage {
  color: #e61c1c; /* vermelho sangue */
  text-shadow:
    0 4px 0 rgba(55, 9, 7, 0.95),
    0 0 20px rgba(255, 0, 0, 0.95),
    0 0 35px rgba(0, 0, 0, 0.7);
}

.impact-number.heal {
  color: #8cffb0;
  text-shadow:
    0 4px 0 rgba(7, 45, 24, 0.95),
    0 0 18px rgba(96, 255, 150, 0.78),
    0 0 34px rgba(255, 216, 133, 0.28);
}

.impact-number.hero {
  font-size: clamp(2rem, 4vw, 4.4rem);
}

.impact-number.shield {
  color: #66e7ff; /* cyan */
  text-shadow:
    0 4px 0 rgba(7, 34, 45, 0.95),
    0 0 20px rgba(102, 231, 255, 0.95),
    0 0 35px rgba(0, 0, 0, 0.7);
}

.impact-number.energy {
  color: #4db8ff; /* azul da energia */
  text-shadow:
    0 4px 0 rgba(7, 30, 55, 0.95),
    0 0 20px rgba(56, 175, 255, 0.95),
    0 0 35px rgba(0, 0, 0, 0.7);
}

.player-hud.effect-shield::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(102, 231, 255, 0.85);
  border-radius: 12px;
  background: radial-gradient(circle, rgba(102, 231, 255, 0.18) 0%, rgba(102, 231, 255, 0.02) 70%, rgba(102, 231, 255, 0.45) 100%);
  box-shadow: 0 0 24px rgba(102, 231, 255, 0.6), inset 0 0 18px rgba(102, 231, 255, 0.4);
  animation: bubbleAppear 2500ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  pointer-events: none;
  z-index: 10;
}

.effect-hit {
  animation: cardHit 420ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.effect-heal {
  animation: healPulse 940ms ease-out;
}

.effect-energy {
  animation: energyPulse 940ms ease-out;
}

.arena-zone {
  min-height: 280px;
  border: 1px solid rgba(255, 246, 223, 0.15);
  border-radius: 8px;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 215, 133, 0.2), transparent 13rem),
    linear-gradient(145deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.36);
}

.arena-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.arena-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
  align-items: center;
  min-height: 206px;
  perspective: 1100px;
}

.empty-arena {
  grid-column: 1 / -1;
  min-height: 206px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: #d8caa8;
  font-weight: 900;
}

.summon-circle {
  width: min(220px, 58vw);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 215, 133, 0.32);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(255, 215, 133, 0.14), 0 0 32px rgba(255, 215, 133, 0.11);
  background:
    linear-gradient(45deg, transparent 49%, rgba(255, 215, 133, 0.24) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(255, 215, 133, 0.2) 50%, transparent 51%);
}

.table-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 230px;
  border: 1px solid rgba(255, 246, 223, 0.22);
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  background: rgba(8, 12, 16, 0.8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.table-card:hover,
.table-card:focus-visible {
  border-color: rgba(255, 215, 133, 0.72);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48), 0 0 32px rgba(255, 215, 133, 0.16);
  transform: translateY(-6px);
  z-index: 4;
}

.table-card:focus-visible {
  outline: 2px solid rgba(102, 231, 255, 0.74);
  outline-offset: 3px;
}

.table-card.just-played {
  animation: landOnTable 680ms cubic-bezier(0.19, 1, 0.22, 1);
}

.table-card-face {
  display: grid;
  gap: 7px;
  transition: opacity 160ms ease, transform 220ms ease;
}

.table-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 35%;
}

.table-card strong {
  display: block;
  font-size: 0.8rem;
}

.table-card span {
  color: #d8caa8;
  font-size: 0.72rem;
}

.table-card-back {
  display: none !important; /* Hide the card back completely */
}

.table-card:hover .table-card-face,
.table-card:focus-visible .table-card-face,
.table-card:focus-within .table-card-face {
  opacity: 1;
  transform: none;
}

.table-card:hover .table-card-back,
.table-card:focus-visible .table-card-back,
.table-card:focus-within .table-card-back {
  opacity: 0;
  transform: rotateY(12deg) scale(0.96);
}

.table-card-back strong {
  color: #fff6df;
  font-size: 0.92rem;
  line-height: 1.05;
}

.table-card-back p {
  color: #eadfc6;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.28;
}

/* Quando um modal escurece/desfoca o fundo (.card-lightbox, z-index 55), os
   HERÓIS e a CARTA DE ARMADILHA continuam nítidos e legíveis. Eles ficam nas
   laterais da tela, então não cobrem a janela central. */
.player-hud,
.trap-card {
  position: relative;
  z-index: 56;
}

/* ...mas um modal que faz uma PERGUNTA nao e painel de consulta: com a carta de
   armadilha por cima, o jogador perde justamente a linha que precisa ler para
   decidir. Só os modais de decisao passam na frente dela.
   Os dois nomes de classe sao necessarios: a regra .card-lightbox vive mais abaixo
   neste arquivo e, com a mesma especificidade, ela venceria por ordem. */
.card-lightbox.lightbox-decisao {
  z-index: 57;
}

/* ---- confirmacao generica (substitui o window.confirm do navegador) ---- */
.painel-confirmacao {
  max-width: 420px;
  padding: 22px;
  text-align: center;
}

.painel-confirmacao h2 {
  margin: 5px 0 0;
  font-family: var(--fonte-titulo);
  font-size: 1.72rem;
  font-weight: 700;
  line-height: 1.15;
}

.painel-confirmacao p {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.confirmacao-botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

@media (max-width: 380px) {
  .confirmacao-botoes {
    grid-template-columns: 1fr;
  }
}

/* Card Preview Tooltip for Arena resolved cards */
.card-preview-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-preview-tooltip.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.table-cost {
  width: fit-content;
  border: 1px solid rgba(102, 231, 255, 0.28);
  border-radius: 6px;
  padding: 5px 7px;
  background: rgba(102, 231, 255, 0.12);
  color: #bdefff;
  font-weight: 950;
}

.hand-dock {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 246, 223, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.52));
}

.hand-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hand-header strong {
  display: block;
}

.resource-strip {
  display: flex;
  align-items: center;
  gap: 5px;
}

.energy-pip {
  width: 16px;
  aspect-ratio: 1;
  border: 1px solid rgba(110, 217, 255, 0.45);
  background: rgba(9, 18, 24, 0.86);
  transform: rotate(45deg);
}

.energy-pip.filled {
  background: linear-gradient(135deg, #2f88ff, #66e7ff);
  box-shadow: 0 0 14px rgba(102, 231, 255, 0.44);
}

.hand {
  display: flex;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 92px 12px 20px;
  margin-top: -78px;
  scroll-behavior: smooth;
  scroll-padding-inline: 12px;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(255, 215, 133, 0.62) rgba(0, 0, 0, 0.28);
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.hand::-webkit-scrollbar {
  height: 8px;
}

.hand::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.hand::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5a24, #ffd785);
}

.hand:focus-visible {
  outline: 2px solid rgba(102, 231, 255, 0.72);
  outline-offset: 3px;
}

.hand.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.hand > .muted {
  min-width: 100%;
}

.tcg-card {
  position: relative;
  display: grid;
  gap: 8px;
  border: 2px solid #352514;
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #d3b27a, #392717 12%, #122338 16%, #101316 72%, #d0ac73);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 241, 204, 0.18);
  transform-origin: 50% 90%;
}

.tcg-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 234, 176, 0.62);
  border-radius: 6px;
  pointer-events: none;
}

.tcg-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
  object-fit: cover;
  object-position: 50% 38%;
}

.play-card {
  flex: 0 0 clamp(214px, 22vw, 236px);
  scroll-snap-align: start;
  min-height: 358px;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  user-select: none;
}

.play-card img {
  -webkit-user-drag: none;
}

.play-card:hover,
.play-card:focus-within {
  transform: translateY(-54px) scale(1.28);
  box-shadow: 0 34px 76px rgba(0, 0, 0, 0.62), 0 0 48px rgba(255, 215, 133, 0.24);
  filter: saturate(1.08) contrast(1.03);
  z-index: 20;
}

.play-card.unplayable {
  filter: saturate(0.68);
}

.play-card.unplayable .card-cost {
  box-shadow: 0 0 0 2px rgba(251, 122, 100, 0.45), 0 0 18px rgba(251, 122, 100, 0.28);
}

.play-card.is-flying {
  pointer-events: none;
  animation: flyToTable 420ms ease-in forwards;
  z-index: 10;
}

.hero-preview {
  min-height: 430px;
}

.card-cost {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 2px solid #fce4aa;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #9cf2ff, #2069c8 58%, #0a1e42 60%);
  color: white;
  font-weight: 950;
  text-shadow: 0 2px 3px #001;
  box-shadow: 0 0 18px rgba(102, 231, 255, 0.34);
}

.card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  border-radius: 6px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(11, 16, 20, 0.88), rgba(30, 21, 14, 0.95));
}

.card-body strong {
  font-size: 0.98rem;
}

.card-body p,
.card-body span {
  color: #e8dcc1;
  font-size: 0.78rem;
  line-height: 1.25;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.card-tags span {
  border-radius: 999px;
  padding: 0.2rem 0.4rem;
  background: rgba(255, 215, 133, 0.14);
  color: #ffe3a8;
  font-weight: 850;
}

.tcg-card select {
  min-height: 34px;
  padding: 0.45rem;
  font-size: 0.78rem;
}

.tcg-card button {
  min-height: 36px;
  padding: 0.48rem 0.7rem;
}

body.is-game-screen {
  height: 100vh;
  overflow: hidden;

  /* ============================================================
     GEOMETRIA DA MAO — mexa so no --hand-card-h; o resto deriva.
     Em repouso a carta fica escondida abaixo da tela e aparece so
     a pontinha (40%). No hover ela sobe exatamente a parte que
     estava escondida (60%), ficando inteira visivel e rente a
     borda de baixo. Subir a altura INTEIRA da carta deixaria 40%
     de espaco vazio embaixo — foi o que aconteceu antes.
     0.4 visivel + 0.6 escondido = 1 carta.
     ============================================================ */
  /* 380px porque as cartas de texto mais longo (Investida do Bastiao, Salvaguarda)
     precisam de ~371px para o texto caber sem corte. Reduzir isso volta a cortar
     a descricao no hover. */
  --hand-card-h: min(380px, 46vh);
  --hand-visible: calc(var(--hand-card-h) * 0.4);
  --hand-hidden: calc(var(--hand-card-h) * 0.6);
  --hand-gap: 12px;
}

body.is-game-screen .app {
  height: 100vh;
  overflow: hidden;
}

body.is-game-screen .game-board {
  position: relative;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 0;
}

body.is-game-screen .board-grid {
  /* o tabuleiro so cede espaco para a PONTINHA da mao. Antes reservava a mao
     inteira (300px/42vh), e era isso que encolhia a arena e as cartas dos monstros. */
  height: calc(100vh - var(--hand-visible) - 18px);
  width: min(1720px, 100%);
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr) minmax(270px, 340px);
  gap: 10px;
}

body.is-game-screen .left-rail,
body.is-game-screen .right-rail,
body.is-game-screen .battlefield {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  gap: 10px;
}

body.is-game-screen .battlefield {
  grid-template-rows: auto minmax(190px, 34vh) 1fr;
}

body.is-game-screen .monster-row {
  grid-row: 2;
  height: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15px !important;
  gap: 8px;
  overflow: visible;
}

body.is-game-screen .monster-card {
  min-height: 0;
  height: 70%;
  aspect-ratio: 2 / 3;
  padding: 0;
  gap: 0;
  flex: 0 1 auto;
}

body.is-game-screen .monster-art {
  min-height: 0;
  height: 100%;
}

body.is-game-screen .monster-art img {
  min-height: 0;
  height: 100%;
}

body.is-game-screen .arena-zone {
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

body.is-game-screen .arena-cards {
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

body.is-game-screen .empty-arena {
  min-height: 0;
}

body.is-game-screen .summon-circle {
  width: min(180px, 32vh);
}

.game-status-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.game-status-panel strong {
  display: block;
  font-size: 1rem;
}

.status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #d8caa8;
  font-size: 0.82rem;
  font-weight: 900;
}

.status-line span {
  border: 1px solid rgba(102, 231, 255, 0.24);
  border-radius: 999px;
  padding: 0.22rem 0.46rem;
  background: rgba(0, 0, 0, 0.2);
}

body.is-game-screen .right-rail {
  grid-template-rows: auto minmax(122px, 0.7fr) auto minmax(98px, 0.45fr) minmax(118px, 0.58fr) minmax(76px, 0.35fr);
}

body.is-game-screen .compact-panel,
body.is-game-screen .trap-card,
body.is-game-screen .intention-card {
  gap: 8px;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

body.is-game-screen .room-card {
  min-height: 0;
  padding: 12px;
}

body.is-game-screen .room-card h2 {
  margin-top: 34px;
  font-size: 1.35rem;
}

body.is-game-screen .room-objective,
body.is-game-screen .room-rule,
body.is-game-screen .room-reward,
body.is-game-screen .trap-card p,
body.is-game-screen .intention-rules p,
body.is-game-screen .log-entry {
  font-size: 0.74rem;
  line-height: 1.22;
}

body.is-game-screen .trap-art,
body.is-game-screen .intention-art {
  min-height: 50px;
}

body.is-game-screen .log {
  max-height: 100%;
}

body.is-game-screen .right-rail {
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 7px;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 215, 133, 0.62) rgba(0, 0, 0, 0.3);
  scrollbar-width: thin;
}

body.is-game-screen .right-rail::-webkit-scrollbar {
  width: 9px;
}

body.is-game-screen .right-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}

body.is-game-screen .right-rail::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd785, #8b5a24);
}

body.is-game-screen .left-rail {
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 7px;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 215, 133, 0.62) rgba(0, 0, 0, 0.3);
  scrollbar-width: thin;
}

body.is-game-screen .left-rail::-webkit-scrollbar {
  width: 9px;
}

body.is-game-screen .left-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}

body.is-game-screen .left-rail::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd785, #8b5a24);
}

body.is-game-screen .right-rail .compact-panel,
body.is-game-screen .right-rail .trap-card,
body.is-game-screen .right-rail .intention-card {
  gap: 14px;
  padding: 14px;
  min-height: auto;
  overflow: visible;
}

body.is-game-screen .right-rail .room-card {
  min-height: 230px;
  padding: 18px;
}

body.is-game-screen .right-rail .room-card h2 {
  margin-top: 78px;
  font-size: 2rem;
}

body.is-game-screen .right-rail .room-objective,
body.is-game-screen .right-rail .room-rule,
body.is-game-screen .right-rail .room-reward {
  font-size: 0.84rem;
  line-height: 1.25;
}

body.is-game-screen .right-rail .trap-card p,
body.is-game-screen .right-rail .intention-rules p,
body.is-game-screen .right-rail .log-entry {
  font-size: 0.86rem;
  line-height: 1.35;
}

body.is-game-screen .right-rail .trap-art {
  min-height: 150px;
}

body.is-game-screen .right-rail .intention-art {
  min-height: 148px;
}

body.is-game-screen .right-rail .trap-card h2 {
  font-size: 1.18rem;
}

body.is-game-screen .right-rail .intention-card h2 {
  font-size: 1.25rem;
}

body.is-game-screen .right-rail .log {
  max-height: 240px;
  overflow: auto;
}

/* ============================================================
   BARRA DA DIREITA — ALTURA JUSTA
   Ela ia ate o rodape da tela mesmo com os cards de baixo (Resumo, Sala, Historico)
   fora da vista. Agora TERMINA logo abaixo do "Finalizar turno": a altura e medida
   em ajustarBarraDireita() e escrita em --altura-barra, e o que fica embaixo
   continua acessivel pela rolagem. E isso que libera o canto direito da tela para o
   Ataque Basico da mao.
   ============================================================ */
body.is-game-screen .right-rail {
  height: var(--altura-barra, 100%);
}

/* Sem o rotulo "Armadilha ativa" e sem o titulo embaixo da arte, o card encolhe:
   a arte comeca no topo e o texto vem logo abaixo dela. Os pixels apertados aqui
   vao para a Intencao da Masmorra, que passou a explicar as quatro partes da carta
   e por isso e o painel mais alto da barra. */
/* O card da armadilha voltou ao respiro normal (2026-08-03). O gap 6 / padding 8
   daqui existia para espremer a barra e fazer a Intencao da Masmorra caber embaixo
   do "Finalizar turno"; sem ela na barra, o aperto so deixava a carta feia. Os
   valores voltam a ser os mesmos do bloco la de cima (gap 14 / padding 14), entao a
   regra sai inteira em vez de repetir o que ja esta escrito. */

body.is-game-screen .right-rail {
  gap: 8px;
}

/* A CAIXA SEGUE A PROPORCAO DA ARTE, em vez de uma altura em pixels.
   O comentario antigo aqui dizia que a arte era QUADRADA (1024x1024) e amarrava a
   altura por isso. Nao e mais verdade: das 10 artes de armadilha, 9 sao 1100x614
   (16:9) — so "defesas supremas" continua quadrada. Com altura fixa o `cover` tinha
   de cortar sempre: baixa demais comia o topo e o rodape, alta demais comia as
   laterais. Nenhum numero acertava, e era esse o "arte cortada/reduzida".

   `aspect-ratio` resolve os dois problemas de uma vez. A altura sai da LARGURA da
   barra, nao da imagem, entao ela continua sem depender do carregamento — que era o
   motivo real de a altura estar amarrada (arte chegando depois mudava a altura da
   barra no meio do jogo). E, batendo com a proporcao do arquivo, nao sobra nada para
   o `cover` cortar. O max-height segura o caso da barra larga, para a arte nao virar
   de novo o bloco de ~300px que sozinho estourava a coluna. */
body.is-game-screen .right-rail .trap-art {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: 34vh;
}

body.is-game-screen .right-rail .trap-art img {
  height: 100%;
  min-height: 0;
}

/* Terreno vazio: uma linha so, para o espaco ir para a Intencao (ver
   renderTerrainCard em app.js). */
.active-terrain-card.terreno-vazio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

.active-terrain-card.terreno-vazio .eyebrow {
  color: #a197b0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.terreno-vazio-texto {
  font-size: 0.76rem;
  font-style: italic;
  color: rgba(255, 246, 223, 0.45);
}

/* O painel do "Finalizar turno" agora e so o botao — justo nele. */
body.is-game-screen .right-rail .turn-panel {
  gap: 6px;
  padding: 6px;
}

body.is-game-screen .hero-party-panel {
  padding: 12px;
  overflow: hidden;
}

body.is-game-screen .hero-party-panel .player-hud {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  min-height: auto;
  padding: 10px;
  gap: 10px;
}

body.is-game-screen .hero-party-panel .portrait-container {
  width: 96px;
}

body.is-game-screen .hero-party-panel .hud-title strong {
  font-size: 1rem;
}

body.is-game-screen .hero-party-panel .hero-resource-top strong {
  font-size: 1rem;
}

body.is-game-screen .hero-party-panel .meter {
  height: 13px;
}

body.is-game-screen .hero-party-panel .hero-shield {
  font-size: 0.9rem;
}

body.is-game-screen .hero-party-panel .hero-carga-batalha {
  font-size: 0.9rem;
}

body.is-game-screen .hand-dock {
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  bottom: 0;
  /* alta o bastante para conter a carta levantada no hover (ela sobe ate --hand-gap
     da borda). Nao afeta o layout do tabuleiro: a doca e position: fixed. */
  height: calc(var(--hand-card-h) + var(--hand-gap) * 2);
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background:
    linear-gradient(to top, rgba(2, 4, 6, 0.96), rgba(2, 4, 6, 0.72) 55%, transparent);
  box-shadow: none;
  pointer-events: none;
}

.hand-meta {
  position: absolute;
  left: 0;
  bottom: 14px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  pointer-events: auto;
  border-radius: 0 10px 10px 0;
  border-left: 0;
  border-right: 2px solid rgba(255, 215, 133, 0.65);
  background: linear-gradient(145deg, rgba(11, 21, 28, 0.96), rgba(8, 12, 16, 0.99));
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
}

.hand-fan {
  position: absolute;
  inset: 0 0 0 0;
  width: min(960px, 100%);
  margin: 0 auto;
  /* O leque e um retangulo do tamanho da doca INTEIRA (~404px de altura), e a
     doca e fixa sobre o rodape do tabuleiro — bem onde fica a Arena. Se esse
     retangulo capturar o mouse, a parte VAZIA dele (o espaco acima das cartas)
     engole o hover das cartas resolvidas: o tooltip da Arena parou de aparecer
     exatamente por isso. So as cartas de verdade recebem o mouse; o vazio do
     leque deixa passar. */
  pointer-events: none;
}

.hand-fan .play-card,
.hand-fan > .muted {
  pointer-events: auto;
}

.hand-fan > .muted {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}

body.is-game-screen .hand-fan .play-card {
  position: absolute;
  left: 50%;
  /* em repouso a carta fica 60% abaixo da borda da tela: so a pontinha aparece */
  bottom: calc(var(--hand-hidden) * -1);
  width: clamp(184px, 14.5vw, 228px);
  height: var(--hand-card-h) !important;
  min-height: 0 !important;
  overflow: hidden;
  flex: none;
  cursor: pointer;
  scroll-snap-align: none;
  transform: translateX(calc(-50% + var(--hand-offset))) rotate(var(--hand-rotate));
  transform-origin: 50% 100%;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, height 180ms ease, bottom 180ms ease;
}

/* O leque e pintado com uma posicao CHUTADA no template e corrigido logo depois por
   ajustarLequeDaMao(), que so consegue medir a tela com o HTML ja na pagina. Com a
   transicao ligada, essa correcao virava ANIMACAO: a cada render (clicar numa carta
   e um render) a mao inteira deslizava do chute ate o lugar certo — o "pulo" que
   aparecia ao selecionar o Ataque Basico. Durante o posicionamento a transicao fica
   desligada; o hover continua com ela. */
body.is-game-screen .hand-fan.posicionando .play-card {
  transition: none !important;
}

body.is-game-screen .hand-fan .play-card:hover,
body.is-game-screen .hand-fan .play-card:focus-visible {
  /* sobe exatamente a parte escondida (+ o respiro da borda): a carta fica
     inteira na tela e rente ao rodape, sem sobrar espaco vazio embaixo.
     Sem scale e sem crescer a altura — era o que fazia a carta voar pra cima. */
  transform: translateX(calc(-50% + var(--hand-offset))) translateY(calc((var(--hand-hidden) + var(--hand-gap)) * -1)) rotate(0deg);
  z-index: 24;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.6), 0 0 38px rgba(255, 215, 133, 0.3) !important;
}

body.is-game-screen .hand-fan .play-card:focus-visible {
  outline: 2px solid rgba(102, 231, 255, 0.85);
  outline-offset: 4px;
}

/* ============================================================
   LEITURA DA DESCRICAO NA MAO — "VERSO DA CARTA"
   Em repouso a carta e uma grade de 2 linhas (arte + texto) e so
   a pontinha de cima aparece. No hover o bloco de texto sai do
   fluxo e vira um PAINEL que ocupa a face inteira da carta, dentro
   da moldura: mesma largura, mesma altura, mesmos cantos. A leitura
   parece virar a carta e ler o verso.

   Como o texto comeca no topo e cresce para baixo, descricao longa
   nao depende mais da altura da carta para caber.

   Ao tirar o mouse tudo volta sozinho ao estado de repouso: as
   regras abaixo so existem em :hover / :focus-visible.
   ============================================================ */
body.is-game-screen .hand-fan .play-card .card-body p,
body.is-game-screen .hand-fan .play-card .card-body span {
  /* 0.78rem (padrao das outras telas) ficou pequeno demais para ler no leque */
  font-size: 1rem;
  line-height: 1.34;
}

body.is-game-screen .hand-fan .play-card .card-tags span {
  font-size: 0.8rem;
}

body.is-game-screen .hand-fan .play-card:hover .card-body,
body.is-game-screen .hand-fan .play-card:focus-visible .card-body {
  position: absolute;
  z-index: 3;
  /* exatamente a face da carta, encostado por dentro da moldura */
  inset: 8px;
  align-content: start;
  gap: 8px;
  /* o respiro de 40px no topo passa por baixo do selo de custo (top 10px +
     38px de diametro): titulo comprido nunca entra atras da bola de Energia */
  padding: 40px 13px 13px;
  border-radius: 6px;
  /* superficie opaca na paleta da propria carta — le como verso, nao como
     um vidro escuro por cima da ilustracao */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(58, 76, 96, 0.42), transparent 62%),
    linear-gradient(168deg, #17212c 0%, #0e161d 46%, #120f0c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 234, 176, 0.3),
    inset 0 1px 0 rgba(255, 245, 214, 0.16),
    inset 0 -40px 60px rgba(0, 0, 0, 0.55);
  /* rede de seguranca: descricao gigantesca ainda rola dentro do painel */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 133, 0.4) transparent;
}

body.is-game-screen .hand-fan .play-card .card-body::-webkit-scrollbar {
  width: 6px;
}

body.is-game-screen .hand-fan .play-card .card-body::-webkit-scrollbar-track {
  background: transparent;
}

body.is-game-screen .hand-fan .play-card .card-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 215, 133, 0.38);
}

body.is-game-screen .hand-fan .play-card:hover .card-body strong,
body.is-game-screen .hand-fan .play-card:focus-visible .card-body strong {
  font-size: 1.06rem;
  line-height: 1.2;
  color: #ffe3a8;
}

/* filete dourado separando o nome da descricao, como num verso impresso */
body.is-game-screen .hand-fan .play-card:hover .card-body strong::after,
body.is-game-screen .hand-fan .play-card:focus-visible .card-body strong::after {
  content: "";
  display: block;
  margin-top: 7px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 216, 133, 0.55) 18%,
    rgba(255, 216, 133, 0.55) 82%,
    transparent
  );
}

/* o selo de custo fica por cima do painel */
body.is-game-screen .hand-fan .play-card:hover .card-cost,
body.is-game-screen .hand-fan .play-card:focus-visible .card-cost {
  z-index: 4;
}

/* ============================================================
   CARTA RECEM-COMPRADA: borda dourada brilhante marcando onde
   a carta entrou na mao (compra automatica ou paga com Energia)
   ============================================================ */
.tcg-card.just-drawn {
  border-color: rgba(255, 216, 110, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(255, 216, 110, 0.95), 0 0 22px 5px rgba(255, 196, 60, 0.85) !important;
  animation: brilho-carta-comprada 1s ease-out;
}

.tcg-card.just-drawn::before {
  border-color: rgba(255, 236, 170, 0.95);
}

/* a carta recem-comprada fica acima das vizinhas para a borda inteira aparecer */
body.is-game-screen .hand-fan .play-card.just-drawn {
  z-index: 23;
}

@keyframes brilho-carta-comprada {
  0% {
    border-color: rgba(255, 240, 190, 1);
    box-shadow: 0 0 0 3px rgba(255, 240, 190, 1), 0 0 40px 14px rgba(255, 205, 70, 1);
  }
  100% {
    border-color: rgba(255, 216, 110, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 216, 110, 0.95), 0 0 22px 5px rgba(255, 196, 60, 0.85);
  }
}

.card-lightbox {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 58%, rgba(255, 215, 133, 0.12), transparent 18rem), rgba(3, 5, 7, 0.72);
  backdrop-filter: blur(8px);
}

.selected-card-detail {
  width: min(360px, calc(100vw - 32px));
  min-height: min(640px, calc(100vh - 42px));
  max-height: calc(100vh - 42px);
  align-content: start;
  overflow: auto;
  transform: none;
}

.selected-card-detail img {
  max-height: 330px;
}

.selected-card-detail .card-body strong {
  font-size: 1.15rem;
}

.selected-card-detail .card-body p {
  font-size: 0.92rem;
}

.card-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  min-height: 32px;
  padding: 0.36rem 0.58rem;
  font-size: 0.74rem;
}

.reaction-window {
  position: fixed;
  z-index: 58;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 45%, rgba(251, 122, 100, 0.16), transparent 22rem), rgba(3, 5, 7, 0.78);
  backdrop-filter: blur(8px);
}

.reaction-panel {
  width: min(820px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
}

.reaction-panel h2 {
  font-size: 1.65rem;
}

.reaction-panel p {
  color: #eadfc6;
  font-weight: 820;
}

.reaction-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.reaction-choice {
  min-height: 360px;
}

.reaction-choice img {
  max-height: 220px;
}

body.is-game-screen .hand-fan .play-card.reaction-muted {
  opacity: 0.28;
  filter: grayscale(0.75);
}

body.is-game-screen .hand-fan .play-card.reaction-ready {
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.54), 0 0 38px rgba(102, 231, 255, 0.3);
}

/* ============================================================
   ATAQUE BASICO
   A carta fixa do heroi, ancorada a esquerda do leque (a posicao e calculada em
   ajustarLequeDaMao). Ela precisa se LER como "outra coisa" a primeira vista: nao
   e uma carta da mao, nao veio do baralho e nao vai embora quando for usada. Por
   isso a moldura de aco escovado no lugar do dourado das demais.
   ============================================================ */
body.is-game-screen .hand-fan .play-card.basic-card {
  border-color: #6f7d8c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(198, 224, 255, 0.22),
    0 0 22px rgba(140, 190, 235, 0.22);
}

body.is-game-screen .hand-fan .play-card.basic-card::before {
  border-color: rgba(205, 228, 255, 0.55);
}

body.is-game-screen .hand-fan .play-card.basic-card:hover,
body.is-game-screen .hand-fan .play-card.basic-card:focus-visible {
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.6), 0 0 38px rgba(150, 200, 245, 0.42) !important;
}

.basic-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 62px);
  border: 1px solid rgba(205, 228, 255, 0.7);
  border-radius: 999px;
  padding: 2px 8px;
  background: linear-gradient(140deg, rgba(52, 74, 96, 0.96), rgba(16, 26, 38, 0.96));
  color: #e6f2ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Usado nesta rodada: a carta FICA na mao, apagada, para o jogador nao ficar
   procurando por ela. Ela reacende sozinha no proximo turno dos herois. */
body.is-game-screen .hand-fan .play-card.basic-used {
  opacity: 0.42;
  filter: grayscale(0.85);
}

body.is-game-screen .hand-fan .play-card.basic-used .basic-badge {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(10, 14, 18, 0.94);
  color: #b9c3cf;
}

/* Celular: com 184px de largura minima, DUAS cartas ja nao cabem numa tela de
   430px — e agora sao sempre uma a mais, por causa do Ataque Basico. Encolher a
   carta e o que permite ao leque caber inteiro na tela (ajustarLequeDaMao aperta
   o passo, mas nao consegue apertar a largura da carta). No limite de 620px a
   conta volta a dar 184px, entao a transicao e continua. */
@media (max-width: 620px) {
  body.is-game-screen .hand-fan .play-card {
    width: clamp(120px, 30vw, 184px);
  }

  .basic-badge {
    max-width: calc(100% - 54px);
    padding: 2px 6px;
    font-size: 0.55rem;
  }
}

.log {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}

.log-entry {
  border-left: 3px solid #ffd785;
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #eadfc6;
  font-size: 0.86rem;
}

.toast {
  position: fixed;
  z-index: 20000;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 28px));
  border: 1px solid rgba(255, 215, 133, 0.42);
  border-radius: 8px;
  padding: 13px 16px;
  background: linear-gradient(145deg, rgba(54, 20, 18, 0.96), rgba(12, 13, 16, 0.96));
  color: #fff6df;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
  animation: toastIn 180ms ease-out;
}

.rules-modal {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 8, 0.72);
  backdrop-filter: blur(10px);
}

.rules-panel {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.rules-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.rules-header h2 {
  font-size: 1.65rem;
}

.rules-search {
  display: grid;
  gap: 7px;
  color: #f2dfb7;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rules-search input {
  min-height: 46px;
  border-color: rgba(102, 231, 255, 0.28);
  background: rgba(0, 0, 0, 0.36);
  font-size: 1rem;
}

.rules-results {
  display: grid;
  gap: 9px;
  overflow: auto;
  padding-right: 4px;
}

.rule-entry {
  border: 1px solid rgba(255, 246, 223, 0.12);
  border-left: 4px solid #ffd785;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.24);
}

.rule-entry strong {
  display: block;
  color: #fff6df;
  font-size: 1rem;
}

.rule-entry p {
  margin-top: 4px;
  color: #e8dcc1;
  line-height: 1.35;
}

/* ── Rules Modal Tabs & Body ── */
.rules-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.tab-nav {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.tab-nav.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.tab-nav:hover:not(.active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.rules-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  height: 100%;
}

/* ── Hero Selectors inside Library ── */
.hero-tab-selectors {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.hero-tab-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.hero-tab-btn.active {
  background: linear-gradient(135deg, rgba(62, 142, 181, 0.2), rgba(62, 142, 181, 0.4));
  border-color: rgba(102, 231, 255, 0.4);
  color: #d1f2ff;
  box-shadow: 0 0 12px rgba(62, 142, 181, 0.3);
}

.hero-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ── Library Card Entries ── */
.rules-card-entry {
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  transition: transform 0.2s, border-color 0.2s;
}

.rules-card-entry:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.rules-card-entry.supreme-entry {
  border-color: rgba(245, 194, 0, 0.3);
  background: linear-gradient(145deg, rgba(20, 15, 5, 0.7), rgba(10, 8, 2, 0.75));
  box-shadow: 0 0 10px rgba(245, 194, 0, 0.1);
}

.rules-card-entry.supreme-entry:hover {
  border-color: rgba(245, 194, 0, 0.6);
  box-shadow: 0 0 15px rgba(245, 194, 0, 0.2);
}

.card-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.card-entry-cost {
  background: rgba(0, 191, 255, 0.15);
  color: #66e7ff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 191, 255, 0.25);
}

.supreme-entry .card-entry-cost {
  background: rgba(245, 194, 0, 0.15);
  color: #ffd785;
  border-color: rgba(245, 194, 0, 0.25);
}

.card-entry-name {
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
}

.card-entry-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.card-entry-type.badge-attack {
  background: rgba(255, 75, 75, 0.15);
  color: #ff8585;
  border: 1px solid rgba(255, 75, 75, 0.25);
}

.card-entry-type.badge-defense {
  background: rgba(75, 255, 75, 0.15);
  color: #85ff85;
  border: 1px solid rgba(75, 255, 75, 0.25);
}

.card-entry-type.badge-planning {
  background: rgba(255, 255, 75, 0.12);
  color: #ffff85;
  border: 1px solid rgba(255, 255, 75, 0.22);
}

.card-entry-type.badge-reaction {
  background: rgba(180, 75, 255, 0.15);
  color: #d885ff;
  border: 1px solid rgba(180, 75, 255, 0.25);
}

.supreme-badge {
  background: linear-gradient(135deg, #a8720a, #f5c200);
  color: #1a1000;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.card-entry-cost.badge-common {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.card-entry-cost.badge-brutal {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.card-entry-cost.badge-mystic {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.card-entry-cost.badge-boss {
  background: linear-gradient(135deg, #a8720a, #f5c200);
  color: #1a1000;
  border: 1px solid rgba(245, 194, 0, 0.4);
}

.card-entry-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin: 0;
}

.cards-list-rules {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.loading {
  width: min(460px, calc(100% - 32px));
  margin: auto;
  padding: 24px;
}

@keyframes flyToTable {
  0% {
    opacity: 1;
    transform: translateY(-12px) scale(1.02) rotate(0deg);
  }
  65% {
    opacity: 0.85;
    transform: translateY(-190px) scale(0.82) rotate(-7deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-260px) scale(0.62) rotate(-11deg);
  }
}

@keyframes landOnTable {
  0% {
    opacity: 0;
    transform: translateY(-56px) scale(1.18) rotate(-8deg);
    filter: brightness(1.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes impactFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.6) rotate(-10deg);
  }
  12% {
    opacity: 1;
    transform: translate(-52%, -65%) scale(1.6) rotate(6deg);
  }
  24% {
    transform: translate(-48%, -58%) scale(1.4) rotate(-4deg);
  }
  36% {
    transform: translate(-53%, -62%) scale(1.65) rotate(5deg);
  }
  48% {
    transform: translate(-47%, -59%) scale(1.4) rotate(-2deg);
  }
  60% {
    transform: translate(-50%, -60%) scale(1.5) rotate(1deg);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -90%) scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.8) rotate(0deg);
  }
}

@keyframes cardHit {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-8px, 6px) rotate(-2.5deg);
    box-shadow: 0 0 35px #ff1a1a, inset 0 0 25px rgba(255, 0, 0, 0.85);
    filter: brightness(1.6) saturate(1.8);
  }
  20% {
    transform: translate(8px, -6px) rotate(2.5deg);
    box-shadow: 0 0 35px #ff1a1a, inset 0 0 25px rgba(255, 0, 0, 0.85);
    filter: brightness(1.6) saturate(1.8);
  }
  30% {
    transform: translate(-6px, -4px) rotate(-1.5deg);
    box-shadow: 0 0 25px rgba(255, 30, 30, 0.7);
    filter: brightness(1.4) saturate(1.5);
  }
  40% {
    transform: translate(6px, 4px) rotate(1.5deg);
    box-shadow: 0 0 25px rgba(255, 30, 30, 0.7);
    filter: brightness(1.4) saturate(1.5);
  }
  50% {
    transform: translate(-4px, 2px) rotate(-1deg);
    box-shadow: 0 0 15px rgba(255, 30, 30, 0.5);
  }
  65% {
    transform: translate(4px, -2px) rotate(1deg);
  }
  80% {
    transform: translate(-2px, 1px) rotate(-0.5deg);
  }
  95% {
    transform: translate(1px, -1px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes healPulse {
  0% {
    filter: brightness(1);
  }
  20% {
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 0 35px #10ff70, inset 0 0 25px rgba(16, 255, 112, 0.8);
    border-color: #10ff70;
  }
  40% {
    filter: brightness(1.2) contrast(1.05);
    box-shadow: 0 0 25px #10ff70, inset 0 0 15px rgba(16, 255, 112, 0.6);
  }
  60% {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(16, 255, 112, 0.4);
    border-color: rgba(16, 255, 112, 0.5);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes energyPulse {
  0% {
    filter: brightness(1);
  }
  20% {
    filter: brightness(1.35) contrast(1.1);
    box-shadow: 0 0 35px #3b82f6, inset 0 0 25px rgba(59, 130, 246, 0.85);
    border-color: #3b82f6;
  }
  40% {
    filter: brightness(1.2) contrast(1.05);
    box-shadow: 0 0 25px #3b82f6, inset 0 0 15px rgba(59, 130, 246, 0.6);
  }
  60% {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

@keyframes bubbleAppear {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  10% {
    transform: scale(1.06);
    opacity: 1;
  }
  16% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.98) rotate(0.8deg);
  }
  50% {
    transform: scale(1.02) rotate(-0.8deg);
    opacity: 0.9;
  }
  70% {
    transform: scale(1);
    opacity: 0.85;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .board-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .left-rail,
  .right-rail {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .battlefield {
    min-height: auto;
  }
}

@media (max-width: 880px) {
  .lobby-stage {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .turn-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-preview {
    min-height: 360px;
  }
}

/* ── Açougueiro de Ossos & Boss Selection Styles ── */
.player-hud.is-acougueiro-target {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.85), inset 0 0 12px rgba(239, 68, 68, 0.3) !important;
  animation: acougueiroPulse 2s infinite ease-in-out;
}

@keyframes acougueiroPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), inset 0 0 8px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 24px rgba(239, 68, 68, 1), inset 0 0 16px rgba(239, 68, 68, 0.4);
  }
}

.status-badge.marcado-acougueiro {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important;
  color: #fecaca !important;
  border: 1px solid #ef4444 !important;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* MARCADO PARA O ABATE: faixa vermelha no pe do retrato do heroi. Fica no rodape
   para nao brigar com a faixa de imunidade a armadilha, que ocupa o topo. E a
   unica pista de QUEM vai levar o golpe grande do Chefe na proxima Fase da
   Masmorra, entao precisa ser vista de longe, em todos os herois da lista. */
.portrait-container .acougueiro-mark-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(0deg, rgba(69, 10, 10, 0.96) 0%, rgba(127, 29, 29, 0.86) 100%);
  border-top: 1px solid rgba(239, 68, 68, 0.7);
  color: #fecaca;
  z-index: 6;
  pointer-events: auto;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
  animation: pulse-marca-abate 1.6s infinite ease-in-out;
}

.portrait-container .acougueiro-mark-badge .acougueiro-mark-icon {
  font-size: 0.75rem;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.9));
}

.portrait-container .acougueiro-mark-badge .acougueiro-mark-text {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes pulse-marca-abate {
  0%, 100% {
    border-top-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 -2px 8px rgba(239, 68, 68, 0.3);
  }
  50% {
    border-top-color: rgba(239, 68, 68, 1);
    box-shadow: 0 -2px 14px rgba(239, 68, 68, 0.75);
  }
}

.boss-card-choice.disabled {
  opacity: 0.6;
  filter: grayscale(0.4);
  border-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

@media (max-width: 560px) {
  .lobby-screen,
  .game-board {
    padding: 12px;
  }

  .brand h1 {
    font-size: 2rem;
  }

  .room-card h2 {
    font-size: 1.55rem;
  }

  body.is-game-screen .monster-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    height: auto;
  }

  body.is-game-screen .monster-card {
    height: 200px;
    width: auto;
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
  }

  body.is-game-screen .monster-card .monster-vertical-name {
    left: 13px;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  body.is-game-screen .monster-card .monster-vertical-meta {
    right: 13px;
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  body.is-game-screen .monster-card .stat-badge {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
  }

  body.is-game-screen .monster-card .stat-badge .badge-value {
    font-size: 0.95rem;
  }

  body.is-game-screen .monster-card .stat-badge .badge-bg {
    font-size: 1.15rem;
    opacity: 0.48;
  }

  body.is-game-screen .monster-card .monster-health-vial {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
  }

  body.is-game-screen .monster-card .vial-value {
    font-size: 0.74rem;
  }

  body.is-game-screen .monster-card .monster-status-overlay {
    padding: 3px 5px;
    gap: 3px;
  }

  body.is-game-screen .monster-card .monster-status-overlay .status-badge {
    font-size: 0.55rem;
  }

  body.is-game-screen .monster-card .monster-top-stack .monster-target-badge {
    margin-top: 4px;
  }

  body.is-game-screen .monster-card .monster-badge-left {
    bottom: 6px;
    left: 6px;
    gap: 4px;
  }

  body.is-game-screen .monster-card .monster-health-vial {
    bottom: 6px;
    right: 6px;
  }

  .hand {
    gap: 8px;
    padding: 82px 10px 18px;
    margin-top: -70px;
  }

  .play-card {
    flex-basis: 214px;
    min-height: 306px;
    padding: 6px;
  }

  .play-card:hover,
  .play-card:focus-within {
    transform: translateY(-44px) scale(1.18);
  }

  .card-body strong {
    font-size: 0.82rem;
  }

  .card-body p {
    font-size: 0.7rem;
  }

  .tcg-card button,
  .tcg-card select {
    font-size: 0.72rem;
  }
}

body.is-game-screen .right-rail {
  grid-template-columns: none;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Supreme Card Button ── */
.supreme-container {
  position: relative;
  display: inline-flex;
  width: auto;
}

.supreme-btn {
  width: auto;
  white-space: nowrap;
  background: linear-gradient(135deg, #a8720a 0%, #f5c200 45%, #e88a00 100%);
  color: #1a1000;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(245, 194, 0, 0.55), 0 0 4px rgba(245, 194, 0, 0.3);
  animation: supremePulse 2.4s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 0;
}

.supreme-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(245, 194, 0, 0.9), 0 0 10px rgba(245, 194, 0, 0.6);
}

.supreme-btn:disabled {
  opacity: 0.4;
  animation: none;
  cursor: not-allowed;
}

.supreme-hover-preview {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

.supreme-container:hover .supreme-hover-preview {
  opacity: 1;
  transform: translateX(-50%) translateY(-20px);
}

.supreme-preview-card {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  min-height: 330px !important;
  background: linear-gradient(145deg, #ffd785, #3a2503 12%, #181002 16%, #0b0700 72%, #ffd785) !important;
  border-color: #ffd785 !important;
  box-shadow: 0 20px 48px rgba(255, 215, 133, 0.4), 0 0 16px rgba(255, 215, 133, 0.2) !important;
  transform: none !important;
}

.supreme-preview-card:hover {
  transform: none !important;
  box-shadow: 0 20px 48px rgba(255, 215, 133, 0.4), 0 0 16px rgba(255, 215, 133, 0.2) !important;
  filter: none !important;
  z-index: 9999 !important;
}

.supreme-preview-card::before {
  border-color: rgba(255, 215, 133, 0.5) !important;
}

/* ── Buy Card Button ── */
.buy-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  background: linear-gradient(135deg, #1b3d54 0%, #3e8eb5 45%, #185a80 100%);
  color: #d1f2ff;
  border: 1.5px solid rgba(102, 231, 255, 0.6);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(62, 142, 181, 0.5), inset 0 0 4px rgba(102, 231, 255, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}

.buy-card-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 16px rgba(102, 231, 255, 0.8);
}

.buy-card-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.buy-card-text {
  font-size: 0.95rem;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  margin-bottom: 2px;
}

.buy-card-cost {
  font-size: 0.85rem;
  color: #ffd785;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

@keyframes supremePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(245, 194, 0, 0.55), 0 0 4px rgba(245, 194, 0, 0.3); }
  50%       { box-shadow: 0 0 30px rgba(245, 194, 0, 0.9), 0 0 12px rgba(245, 194, 0, 0.6); }
}

.supreme-used {
  font-size: 0.75rem;
  opacity: 0.5;
  white-space: nowrap;
}

/* ── Shield Allocation Modal ── */
.shield-alloc-modal {
  width: min(600px, calc(100vw - 28px));
  padding: 22px;
  display: grid;
  gap: 14px;
}

.shield-alloc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shield-alloc-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ── Pending discard modal ── */
.discard-modal {
  width: min(820px, calc(100vw - 28px));
  padding: 22px;
  display: grid;
  gap: 14px;
}

.discard-modal .reaction-cards .tcg-card button.danger {
  background: linear-gradient(135deg, #7a0018, #c1001c);
  border: none;
}

.trap-card.trap-disabled {
  opacity: 0.5;
  filter: grayscale(85%) contrast(85%);
  border-color: rgba(255, 75, 75, 0.2);
}

/* ── Trap Turn Counter ── */
.trap-turn-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  border: 1px solid rgba(255, 139, 122, 0.15);
}

.trap-counter-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 196, 188, 0.6);
  white-space: nowrap;
}

.trap-counter-bar {
  display: flex;
  gap: 3px;
  flex: 1;
}

.trap-counter-pip {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.trap-counter-pip.filled {
  background: linear-gradient(135deg, #ff8b7a, #ff5a47);
  box-shadow: 0 0 6px rgba(255, 90, 71, 0.5);
}

.trap-counter-text {
  font-size: 0.78rem;
  font-weight: 900;
  color: #ff8b7a;
  min-width: 24px;
  text-align: right;
}

.trap-counter-warning {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffd785;
  white-space: nowrap;
  animation: trapWarningPulse 1.5s ease-in-out infinite;
}

.trap-about-to-change {
  border-color: rgba(255, 215, 133, 0.3);
  background: rgba(255, 215, 133, 0.08);
}

@keyframes trapWarningPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(255, 215, 133, 0.6); }
}

/* ── Trap Change Cinematic Banner ── */
.cinematic-banner.trap-change {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.95), rgba(180, 40, 0, 0.9), rgba(100, 0, 0, 0.95));
  border-top: 2px solid #ff5a47;
  border-bottom: 2px solid #ff5a47;
  box-shadow: 0 0 60px rgba(255, 90, 71, 0.3), inset 0 0 80px rgba(0, 0, 0, 0.4);
}

.cinematic-banner.trap-change .cinematic-banner-title {
  color: #ff8b7a;
  text-shadow: 0 0 20px rgba(255, 90, 71, 0.6);
}

.cinematic-banner.trap-change .cinematic-banner-subtitle {
  color: #ffc4bc;
  font-size: 0.95rem;
  max-width: 600px;
  line-height: 1.4;
}

/* ── Recent Actions Panel ── */
.recent-actions-panel {
  padding: 10px 14px;
  display: grid;
  gap: 8px;
  background: linear-gradient(145deg, rgba(10, 18, 23, 0.85), rgba(7, 10, 13, 0.95));
}

.recent-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 246, 223, 0.08);
  padding-bottom: 4px;
}

.recent-actions-list {
  display: grid;
  gap: 5px;
}

.recent-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #e5dbc3;
  font-weight: 500;
  line-height: 1.3;
}

.recent-action-item .action-bullet {
  width: 6px;
  height: 6px;
  background-color: #ffd785;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255, 215, 133, 0.7);
}

.recent-action-item:first-child {
  color: #ffffff;
  font-weight: 750;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.recent-action-item:first-child .action-bullet {
  background-color: #ffd785;
  box-shadow: 0 0 8px #ffd785, 0 0 15px #ffd785;
  animation: actionPulse 2s infinite alternate;
}

.recent-action-item:not(:first-child) {
  opacity: 0.65;
}

.recent-action-item:not(:first-child) .action-bullet {
  background-color: #bfb69c;
  box-shadow: none;
}

@keyframes actionPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 4px #ffd785;
  }
  100% {
    transform: scale(1.15);
    box-shadow: 0 0 10px #ffd785, 0 0 18px #ffd785;
  }
}

/* ── Summary Card (Resumo de Combate) ── */
.summary-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.summary-section {
  display: grid;
  gap: 4px;
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid transparent;
}

.summary-section h3 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 246, 223, 0.5);
}

.summary-content {
  font-size: 0.84rem;
  line-height: 1.35;
}

/* Colors and left borders */
.summary-intention {
  border-left-color: #ffd785;
}
.summary-intention .summary-content {
  color: #ffe8b5;
}
.summary-intention .summary-content strong {
  color: #ffd785;
}

.summary-trap {
  border-left-color: #ff8b7a;
}
.summary-trap .summary-content {
  color: #ffc4bc;
}
.summary-trap .summary-content strong {
  color: #ff8b7a;
}

.summary-room {
  border-left-color: #66e7ff;
}
.summary-room .summary-content {
  color: #bdefff;
}
.summary-room .summary-content strong {
  color: #66e7ff;
}

/* ============================================================
   INTENCAO DA MASMORRA — A CARTA
   O MESMO desenho em dois tamanhos: a carta grande da cinematica da virada da
   rodada (.intention-reveal-card) e o painel da barra da direita, logo abaixo do
   "Finalizar turno" (.intention-summary). O HTML sai de um gerador so
   (corpoDaIntencao em app.js) — o que muda aqui e a escala.

   Cada uma das quatro partes tem cor, icone e uma tarja de QUANDO resolve:
   Pressagio (ambar, ja resolveu), Comuns (azul) e Brutais (vermelho) na Fase da
   Masmorra, Represalia (roxo) no fim dela. Foi para isso que os blocos ganharam
   fundo proprio: o painel antigo era so texto corrido com uma barrinha lateral, e
   ninguem separava o que ja aconteceu do que ainda vai acontecer.
   ============================================================ */
.intention-summary {
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 215, 133, 0.34);
  background:
    linear-gradient(160deg, rgba(60, 32, 8, 0.9), rgba(10, 12, 16, 0.96)),
    url("assets/background-arena.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 26px rgba(255, 215, 133, 0.1), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.intencao-cabecalho {
  display: grid;
  gap: 1px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 215, 133, 0.2);
}

.intencao-selo {
  color: #f6bd5f;
  font-size: 0.6rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.intencao-nome {
  color: #fff6df;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1.1;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* A regra que vale para os dois blocos de mira, dita uma vez so no alto: repetida
   dentro de cada bloco ela sozinha comia quatro linhas da coluna de 300px. */
.intencao-regra {
  margin: 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 215, 133, 0.09);
  border: 1px solid rgba(255, 215, 133, 0.18);
  font-size: 0.72rem;
  line-height: 1.3;
  color: #f3e6cd;
  text-align: left;
}

.intencao-regra b {
  color: #ffd785;
  font-weight: 900;
}

.intencao-blocos {
  display: grid;
  gap: 5px;
  text-align: left;
}

.intencao-bloco {
  padding: 5px 8px 6px 9px;
  border-left: 3px solid currentColor;
  border-radius: 7px;
}

.intencao-bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.intencao-bloco-rotulo {
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* O que o Pressagio deixou ligado pelo resto da rodada. Fica entre o Pressagio e a
   mira porque e efeito que ainda vale, e nao historico. */
.intencao-marca {
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.14);
  border: 1px dashed rgba(246, 189, 95, 0.45);
  font-size: 0.71rem;
  line-height: 1.28;
  color: #ffe8c4;
}

/* A tarja do QUANDO: "ja resolveu", "no fim da rodada", "2 em campo". */
.intencao-quando {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 246, 223, 0.66);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.intencao-bloco-texto {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.3;
}

.intencao-bloco-texto b {
  font-weight: 900;
}

.intencao-bloco-nota {
  margin: 3px 0 0;
  font-size: 0.7rem;
  line-height: 1.28;
  color: rgba(255, 246, 223, 0.6);
}

/* Quem esta na mira AGORA — o dado mais volatil do painel, e o unico que muda no
   meio do proprio turno. Por isso ele mora na tarja do cabecalho do bloco (canto
   direito, sempre no mesmo lugar) e nao no meio do texto. */
.intencao-quando.intencao-mira {
  background: rgba(220, 38, 38, 0.4);
  border: 1px solid rgba(255, 157, 157, 0.5);
  color: #ffe0e0;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.66rem;
}

.bloco-presagio {
  color: #f6bd5f;
  background: rgba(217, 119, 6, 0.16);
}
.bloco-presagio .intencao-bloco-texto { color: #ffe8c4; }

.bloco-comuns {
  color: #7fb2ff;
  background: rgba(37, 99, 235, 0.16);
}
.bloco-comuns .intencao-bloco-texto { color: #dbeafe; }

.bloco-brutais {
  color: #f87171;
  background: rgba(220, 38, 38, 0.16);
}
.bloco-brutais .intencao-bloco-texto { color: #fee2e2; }

.bloco-represalia {
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.18);
}
.bloco-represalia .intencao-bloco-texto { color: #ece2ff; }

/* A letra miuda da mira: como o alvo muda e o que acontece em empate. */
.intencao-rodape {
  margin: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 215, 133, 0.16);
  font-size: 0.66rem;
  line-height: 1.26;
  font-style: italic;
  color: rgba(255, 246, 223, 0.5);
  text-align: left;
}

/* A MESMA carta, em tamanho de cinematica. */
.intencao-corpo-grande {
  margin-top: 6px;
}

.intencao-corpo-grande .intencao-regra {
  padding: 9px 13px;
  font-size: 0.86rem;
  margin-bottom: 10px;
}

.intencao-corpo-grande .intencao-marca {
  padding: 8px 13px;
  font-size: 0.82rem;
}

.intencao-corpo-grande .intencao-blocos {
  gap: 10px;
}

.intencao-corpo-grande .intencao-bloco {
  padding: 10px 14px;
  border-radius: 8px;
}

.intencao-corpo-grande .intencao-bloco-rotulo {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.intencao-corpo-grande .intencao-quando {
  font-size: 0.64rem;
}

.intencao-corpo-grande .intencao-bloco-texto {
  font-size: 0.9rem;
  line-height: 1.4;
}

.intencao-corpo-grande .intencao-bloco-nota,
.intencao-corpo-grande .intencao-rodape {
  font-size: 0.76rem;
}

.intencao-corpo-grande .intencao-rodape {
  padding-top: 10px;
  margin-top: 4px;
}

/* ── Reward Card Choices ── */
.reward-card-choice {
  width: 190px;
  flex: 0 0 190px;
  min-height: 280px;
  padding: 8px;
  font-size: 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reward-card-choice img {
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 6px;
}

.reward-card-choice .card-body {
  padding: 6px;
  display: grid;
  gap: 4px;
}

.reward-card-choice .card-body strong {
  font-size: 0.88rem;
  color: #ffd785;
}

.reward-card-choice .card-body p {
  font-size: 0.72rem;
  line-height: 1.3;
  color: #e8dcc1;
  margin: 0;
}

/* A regra comum das recompensas-carta (custo 0, fora do limite da mao, uso unico)
   saiu das sete descricoes e virou uma linha acima das cartas — era ela que ocupava
   a maior parte de cada texto e escondia o efeito. Esta etiqueta e o que liga as
   duas pontas: diz QUAIS recompensas seguem aquela regra, sem repeti-la. */
.reward-card-choice .reward-tipo-tag {
  justify-self: start;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fd8ff;
  border: 1px solid rgba(159, 216, 255, 0.35);
  background: rgba(159, 216, 255, 0.1);
  border-radius: 999px;
  padding: 1px 7px;
}

.reward-card-choice:hover:not(.reward-disabled):not(.reward-selected) {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.reward-card-choice.reward-disabled {
  filter: grayscale(100%) brightness(0.3);
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
}

.reward-card-choice.reward-disabled .card-cost {
  background: #333 !important;
  color: #777 !important;
  border-color: #444 !important;
  box-shadow: none !important;
}

.reward-card-choice.reward-disabled .card-body strong {
  color: #666 !important;
}

.reward-card-choice.reward-disabled .card-body p {
  color: #555 !important;
}

.reward-card-choice.reward-selected {
  outline: 4px solid #ffd785 !important;
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 30px rgba(255, 215, 133, 0.55), 0 0 10px rgba(255, 215, 133, 0.3) !important;
}

.already-chosen-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(0, 0, 0, 0.9);
  color: #ff5555;
  border: 2.5px solid #ff5555;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ── Manual Rules Style ── */
.manual-rules-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 8px;
}

.manual-section {
  background: rgba(20, 20, 20, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 18px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.manual-section h3 {
  color: #ffd785;
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 215, 133, 0.15);
  padding-bottom: 6px;
  text-shadow: 0 0 10px rgba(255, 215, 133, 0.1);
}

.manual-section p {
  color: #e8dcc1;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 12px;
}

.manual-section p strong {
  color: #fff;
}

.manual-section ul, .manual-section ol {
  margin: 0;
  padding-left: 20px;
  color: #e8dcc1;
  font-size: 0.9rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-section ul li, .manual-section ol li {
  margin-bottom: 4px;
}

.manual-section ul li strong, .manual-section ol li strong {
  color: #fff6df;
}

.manual-section em {
  color: #ffd785;
  font-style: normal;
}

/* ── Additional Rules Styles ── */
.theme-forest {
  background: rgba(46, 125, 50, 0.15);
  color: #81c784;
  border: 1px solid rgba(46, 125, 50, 0.3);
}

.theme-crypt {
  background: rgba(141, 110, 99, 0.15);
  color: #d7ccc8;
  border: 1px solid rgba(141, 110, 99, 0.3);
}

.theme-sanctum {
  background: rgba(100, 181, 246, 0.15);
  color: #90caf9;
  border: 1px solid rgba(100, 181, 246, 0.3);
}

.badge-danger {
  background: rgba(211, 47, 47, 0.15);
  color: #ff8a80;
  border: 1px solid rgba(211, 47, 47, 0.3);
}

.target-code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 4px;
  border-radius: 4px;
  color: #66e7ff;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-entry-subtitle {
  font-size: 0.8rem;
  color: #a1887f;
  margin: 2px 0 8px 0;
}

.room-entry-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.7), rgba(15, 15, 15, 0.75));
}

.intention-entry-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(30, 25, 20, 0.7), rgba(20, 15, 10, 0.75));
}

.trap-entry-card {
  border-color: rgba(211, 47, 47, 0.15);
  background: linear-gradient(145deg, rgba(30, 15, 15, 0.7), rgba(20, 10, 10, 0.75));
}

/* Intention Cards v2 Styles */
.new-intention-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: linear-gradient(145deg, rgba(36, 22, 15, 0.9), rgba(8, 12, 16, 0.94)) !important;
  border: 1px solid rgba(255, 246, 223, 0.18) !important;
}

.new-intention-v2 .intention-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 2px solid #C9922A;
  margin-bottom: 8px;
}

.new-intention-v2 .intention-header h2 {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: bold;
  color: #F5E6C4;
  margin: 0;
}

.new-intention-v2 .card-number {
  font-size: 0.8rem;
  font-weight: bold;
  color: #C9922A;
}

.new-intention-v2 .intention-rules-v2 {
  display: grid;
  gap: 6px;
  padding: 0 4px 6px 4px;
}

.new-intention-v2 .section-v2 {
  padding: 6px 10px;
  font-size: 0.82rem;
  line-height: 1.35;
  border-radius: 6px;
  text-align: left;
}

.new-intention-v2 .section-v2 p {
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border-left: none !important;
  color: inherit !important;
}

.new-intention-v2 .label-v2 {
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.new-intention-v2 .presagio-v2 {
  background: rgba(217, 119, 6, 0.12);
  border-left: 3px solid #d97706;
  color: #ffe3b3;
}
.new-intention-v2 .presagio-v2 .label-v2 { color: #f59e0b; }

.new-intention-v2 .comum-v2 {
  background: rgba(37, 99, 235, 0.12);
  border-left: 3px solid #2563eb;
  color: #dbeafe;
}
.new-intention-v2 .comum-v2 .label-v2 { color: #60a5fa; }

.new-intention-v2 .brutal-v2 {
  background: rgba(220, 38, 38, 0.12);
  border-left: 3px solid #dc2626;
  color: #fee2e2;
}
.new-intention-v2 .brutal-v2 .label-v2 { color: #f87171; }

.new-intention-v2 .represalia-v2 {
  background: rgba(124, 58, 237, 0.12);
  border-left: 3px solid #7c3aed;
  color: #f3e8ff;
}
.new-intention-v2 .represalia-v2 .label-v2 { color: #a78bfa; }

/* Summary Intentions v2 Styles */
.summary-rules-v2 {
  display: grid;
  gap: 6px;
  text-align: left;
}

.summary-section-v2 {
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.3;
  border-radius: 4px;
}

.presagio-sum {
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid #d97706;
  color: #ffe3b3;
}
.comum-sum {
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563eb;
  color: #dbeafe;
}
.brutal-sum {
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
  color: #fee2e2;
}
.represalia-sum {
  background: rgba(124, 58, 237, 0.08);
  border-left: 3px solid #7c3aed;
  color: #f3e8ff;
}

/* Responsiveness and size overrides */
body.is-game-screen .new-intention-v2 .section-v2 {
  padding: 4px 6px;
  font-size: 0.72rem;
}
body.is-game-screen .right-rail .new-intention-v2 .section-v2 {
  padding: 6px 10px;
  font-size: 0.82rem;
}

/* ── Status Effects & Keywords (v2) ── */
.status-effects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.status-badge.veneno {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.status-badge.queimadura {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.status-badge.vacuo {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c084fc;
}
.status-badge.enfraquecido {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.status-badge.exposto {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.status-badge.marcado {
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.3);
  color: #f472b6;
}
.status-badge.envenenamento {
  background: rgba(132, 204, 22, 0.15);
  border-color: rgba(132, 204, 22, 0.3);
  color: #a3e635;
}
.status-badge.bleed {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.monster-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 2px;
}
.monster-keyword-badge {
  background: rgba(201, 146, 42, 0.12);
  border: 1px solid rgba(201, 146, 42, 0.25);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 750;
  padding: 1px 5px;
  color: #ffd785;
}

/* ── Monster Target Badge ── */
.monster-target-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3; /* Above the artwork! */
  background: rgba(18, 6, 6, 0.88);
  border: 1px solid rgba(255, 122, 100, 0.42);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 900;
  color: #cfc5aa;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 122, 100, 0.2);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.monster-target-badge span {
  color: #ff6656; /* Red glowing color for target */
  text-shadow: 0 0 6px rgba(255, 102, 86, 0.6);
  margin-left: 3px;
  font-weight: 950;
}

/* Adjust size on smaller cards */
body.is-game-screen .monster-card .monster-target-badge {
  padding: 2px 8px;
  font-size: 0.64rem;
}

/* ==========================================================================
   ── Sala 4 - Boss Fight Styles ──
   ========================================================================== */

/* ── Boss Selection Phase ── */
.boss-selection-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  background: radial-gradient(circle at center, #1b122c 0%, #080511 100%);
  overflow-y: auto;
}

.boss-selection-container {
  width: 100%;
  max-width: 1100px;
  padding: 40px;
  text-align: center;
  background: rgba(15, 10, 25, 0.55);
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(139, 92, 246, 0.15);
  border-radius: 12px;
}

.boss-select-title {
  font-family: Georgia, serif;
  font-size: 2.8rem;
  color: #f5e6c4;
  margin-top: 10px;
  margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(245, 230, 196, 0.25);
}

.boss-select-subtitle {
  font-size: 1.1rem;
  color: #bfb5c7;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

.boss-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.boss-card-choice {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: linear-gradient(135deg, rgba(28, 20, 48, 0.7) 0%, rgba(13, 8, 25, 0.9) 100%);
  border: 1px solid rgba(167, 139, 250, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.boss-card-choice::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  opacity: 0.7;
}

.boss-card-choice:hover {
  transform: translateY(-8px);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.35);
}

.boss-card-header h2 {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  color: #fff;
  margin: 0;
}

.boss-title {
  display: block;
  font-size: 0.9rem;
  color: #a78bfa;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  margin-bottom: 20px;
}

.boss-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.boss-stat {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.boss-stat .stat-label {
  display: block;
  font-size: 0.75rem;
  color: #8c829e;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.boss-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 800;
}

.boss-stat .stat-value.life { color: #f87171; }
.boss-stat .stat-value.shield { color: #60a5fa; }
.boss-stat .stat-value.attack { color: #fbbf24; }

.boss-description-box {
  flex-grow: 1;
  text-align: left;
  margin-bottom: 30px;
}

.boss-desc-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #d1c8db;
  margin-bottom: 16px;
}

.boss-mechanics {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 15px;
  border-left: 3px solid #8b5cf6;
}

.boss-mechanics strong {
  display: block;
  font-size: 0.85rem;
  color: #a78bfa;
  margin-bottom: 8px;
}

.boss-mechanics ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #bfb5c7;
}

.boss-mechanics li {
  margin-bottom: 6px;
}

.boss-mechanics li strong {
  display: inline;
  color: #fff;
}

.select-boss-btn {
  width: 100%;
  padding: 14px;
  font-weight: 800;
  font-size: 1.05rem;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  border: none;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, box-shadow 0.2s;
}

.select-boss-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.7);
}

/* ── Boss HUD Bar (Battlefield Top) ── */
.boss-hud-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(26, 12, 47, 0.88) 0%, rgba(13, 8, 25, 0.94) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* Pilha das marcas do rodape da carta do Chefe. Na Fase 3 as duas aparecem juntas
   ([PROTEGIDO] pelos Esqueletos e [PODER ANULADO]); empilhadas aqui, nenhuma cobre
   a outra. Dentro da pilha as marcas deixam de se ancorar sozinhas. */
.boss-badges-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.boss-badges-stack .poder-anulado-badge,
.boss-badges-stack .barreira-ossos-badge {
  position: static;
}

/* BARREIRA DE OSSOS — marca da Fase 3: os Esqueletos blindam o Chefe contra
   ataque direto. Tom osso/azulado para nao se confundir com o vermelho do
   PODER ANULADO, que fica logo abaixo dela. */
.barreira-ossos-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 5px;
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.55), rgba(38, 78, 120, 0.96));
  border-top: 2px solid #7dd3fc;
  box-shadow: 0 -4px 16px rgba(56, 160, 220, 0.5);
}
.barreira-ossos-tag {
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  font-size: 0.62rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.barreira-ossos-card {
  font-size: 0.55rem;
  color: #d6ecff;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PODER ANULADO — marca vermelha na carta do Chefe (Açougueiro de Ossos) e um chip
   no HUD do Chefe indicando a carta anulada nesta rodada. */
.poder-anulado-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 5px;
  background: linear-gradient(180deg, rgba(120, 0, 0, 0.55), rgba(150, 8, 8, 0.96));
  border-top: 2px solid #ff3b3b;
  box-shadow: 0 -4px 16px rgba(220, 0, 0, 0.55);
  animation: poderAnuladoPulse 1.4s ease-in-out infinite;
}
.poder-anulado-tag {
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  font-size: 0.62rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.poder-anulado-card {
  font-size: 0.55rem;
  color: #ffdada;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boss-hud-anulado {
  background: linear-gradient(90deg, rgba(150, 8, 8, 0.96), rgba(90, 0, 0, 0.9));
  border: 1px solid #ff3b3b;
  color: #fff;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  box-shadow: 0 0 12px rgba(220, 0, 0, 0.5);
  animation: poderAnuladoPulse 1.4s ease-in-out infinite;
}
@keyframes poderAnuladoPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

.boss-hud-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.boss-hud-name {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.boss-hud-bar .badge {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.boss-hud-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.clock-icon {
  font-size: 1.1rem;
}

.clock-label {
  font-size: 0.8rem;
  color: #a197b0;
}

.clock-value {
  font-size: 1rem;
  color: #ffd785;
}

.clock-value.warning {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* .boss-hud-torment/.torment-badge/.torment-name sairam junto com o chip
   "Tormento: <nome>" da barra do Chefe (card #136): o Tormento e a propria
   armadilha ativa, ja desenhada por inteiro em .trap-card. */

/* ── Torment Card (Right Rail) ── */
.torment-card {
  border-color: rgba(168, 85, 247, 0.25) !important;
  background: linear-gradient(145deg, rgba(39, 12, 64, 0.9), rgba(11, 7, 16, 0.94)) !important;
}

.torment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #a855f7;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.torment-header h2 {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: #faf5ff;
  margin: 0;
}

.torment-header .card-number {
  font-size: 0.75rem;
  font-weight: bold;
  color: #c084fc;
}

.torment-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #f3e8ff;
  margin: 0;
  text-align: left;
}

/* ── End Game screen ── */
.endgame-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  overflow-y: auto;
}

.endgame-screen.victory {
  background: radial-gradient(circle at center, #112d18 0%, #030a05 100%);
}

.endgame-screen.defeat {
  background: radial-gradient(circle at center, #2e080d 0%, #0e0204 100%);
}

.endgame-container {
  width: 100%;
  max-width: 800px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  border-radius: 12px;
}

.endgame-screen.victory .endgame-container {
  background: rgba(10, 25, 15, 0.55);
  border: 1px solid rgba(34, 197, 94, 0.25);
  box-shadow: 0 0 40px rgba(34, 197, 94, 0.15), 0 30px 60px rgba(0, 0, 0, 0.8);
}

.endgame-screen.defeat .endgame-container {
  background: rgba(25, 10, 12, 0.55);
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.15), 0 30px 60px rgba(0, 0, 0, 0.8);
}

.result-badge {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.endgame-screen.victory .result-badge {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.endgame-screen.defeat .result-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.endgame-header h1 {
  font-family: Georgia, serif;
  font-size: 3.2rem;
  margin: 0 0 10px 0;
}

.endgame-screen.victory h1 {
  color: #fff;
  text-shadow: 0 0 25px rgba(74, 222, 128, 0.35);
}

.endgame-screen.defeat h1 {
  color: #fff;
  text-shadow: 0 0 25px rgba(248, 113, 113, 0.35);
}

.endgame-subtitle {
  font-size: 1.15rem;
  color: #d1c2cc;
  max-width: 600px;
  margin: 0 auto 30px;
  line-height: 1.45;
}

.match-summary-box {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 35px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.match-summary-box h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.2rem;
  color: #fff;
  font-family: Georgia, serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

.global-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.global-stat-item {
  background: rgba(0, 0, 0, 0.25);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.gstat-label {
  display: block;
  font-size: 0.72rem;
  color: #a19ba8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.gstat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.heroes-summary-list h4 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1rem;
  color: #ffd785;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.heroes-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.hero-stat-card {
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.hcard-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hcard-header h5 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

.hero-tag {
  font-size: 0.75rem;
  color: #ffd785;
  font-weight: bold;
}

.hcard-body {
  display: grid;
  gap: 6px;
}

.hcard-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #c5bac9;
}

.hcard-row strong {
  color: #fff;
}

.endgame-actions button {
  padding: 16px 40px;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.endgame-screen.victory .endgame-actions button {
  background: linear-gradient(135deg, #15803d, #22c55e);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.endgame-screen.victory .endgame-actions button:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.7);
}

.endgame-screen.defeat .endgame-actions button {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.endgame-screen.defeat .endgame-actions button:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
}

/* Animations */
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

.animate-pulse {
  animation: pulseWarning 1.5s infinite alternate;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulseWarning {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}


/* ============================================================
   CINEMATIC ANIMATION SYSTEM
   ============================================================ */

/* --- Keyframes --- */
@keyframes bannerIn {
  0%   { opacity: 0; transform: translateY(-32px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bannerOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes spotlightIn {
  0%   { opacity: 0; transform: scale(0.78) translateY(40px); }
  70%  { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spotlightOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.88) translateY(24px); }
}

@keyframes monsterEntrySlide {
  0%   { opacity: 0; transform: translateY(48px) scale(0.8); }
  65%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 32px rgba(255, 215, 133, 0.3), 0 0 80px rgba(255, 215, 133, 0.1); }
  50%       { box-shadow: 0 0 56px rgba(255, 215, 133, 0.55), 0 0 120px rgba(255, 215, 133, 0.2); }
}

@keyframes dangerGlowPulse {
  0%, 100% { box-shadow: 0 0 32px rgba(251, 122, 100, 0.3), 0 0 80px rgba(251, 122, 100, 0.1); }
  50%       { box-shadow: 0 0 56px rgba(251, 122, 100, 0.55), 0 0 120px rgba(251, 122, 100, 0.2); }
}

@keyframes textReveal {
  0%   { opacity: 0; letter-spacing: 0.5em; }
  100% { opacity: 1; letter-spacing: normal; }
}

@keyframes subtextReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* --- Cinematic Overlay --- */
#cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(4, 7, 10, 0.86);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  /* o carimbo DENIED comeca 9x maior que a tela e vem de fora: sem isto o excesso
     dele viraria barra de rolagem no meio da cinematica */
  overflow: hidden;
}

#cinematic-overlay.fade-in {
  animation: overlayFadeIn 0.38s ease forwards;
}

#cinematic-overlay.fade-out {
  animation: overlayFadeOut 0.38s ease forwards;
  pointer-events: none;
}

/* --- Cinematic Banner --- */
.cinematic-banner {
  position: relative;
  text-align: center;
  padding: 40px 60px;
  max-width: 780px;
  width: 90vw;
}

.cinematic-banner.enter {
  animation: bannerIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinematic-banner.exit {
  animation: bannerOut 0.38s ease forwards;
}

.cinematic-banner-eyebrow {
  display: block;
  color: #f6bd5f;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0;
  animation: subtextReveal 0.4s ease 0.15s forwards;
}

.cinematic-banner-title {
  display: block;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 950;
  line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fff6df, #ffd785 45%, #e8a830);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: textReveal 0.56s ease 0.2s forwards;
  text-shadow: none;
}

.cinematic-banner.dungeon-turn .cinematic-banner-title {
  background: linear-gradient(135deg, #ffd6cc, #fb7a64 45%, #c93c30);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cinematic-banner.hero-turn .cinematic-banner-title {
  background: linear-gradient(135deg, #c8f0ff, #66e7ff 45%, #2ab8e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cinematic-banner-subtitle {
  display: block;
  color: #cfc5aa;
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0;
  animation: subtextReveal 0.4s ease 0.45s forwards;
}

.cinematic-banner-divider {
  width: 80px;
  height: 2px;
  margin: 16px auto;
  background: linear-gradient(90deg, transparent, #ffd785, transparent);
  opacity: 0;
  animation: subtextReveal 0.4s ease 0.35s forwards;
}

.cinematic-banner.dungeon-turn .cinematic-banner-divider {
  background: linear-gradient(90deg, transparent, #fb7a64, transparent);
}

.cinematic-banner.hero-turn .cinematic-banner-divider {
  background: linear-gradient(90deg, transparent, #66e7ff, transparent);
}

/* --- Monster Spotlight Modal --- */
.monster-spotlight-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 460px;
  width: 90vw;
  text-align: center;
}

.monster-spotlight-modal.enter {
  animation: spotlightIn 0.56s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.monster-spotlight-modal.exit {
  animation: spotlightOut 0.36s ease forwards;
}

.spotlight-card-wrap {
  position: relative;
  width: 220px;
}

.spotlight-card-wrap .monster-card {
  width: 220px;
  height: 320px;
  border-radius: 16px;
  border: 2px solid rgba(251, 122, 100, 0.6);
  box-shadow: 0 0 48px rgba(251, 122, 100, 0.22), 0 24px 64px rgba(0, 0, 0, 0.64);
  animation: dangerGlowPulse 2s infinite;
  transform: none !important;
  margin: 0 auto;
}

.spotlight-card-wrap .monster-card.brutal {
  border-color: rgba(168, 85, 247, 0.6);
  animation: glowPulse 2s infinite;
  box-shadow: 0 0 48px rgba(168, 85, 247, 0.22), 0 24px 64px rgba(0, 0, 0, 0.64);
}

.spotlight-card-wrap .monster-card.boss-card-type {
  border-color: rgba(255, 215, 133, 0.7);
  animation: glowPulse 2s infinite;
}

.spotlight-action-text {
  color: #fff6df;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.2;
  max-width: 380px;
  opacity: 0;
  animation: subtextReveal 0.4s ease 0.3s forwards;
}

.spotlight-action-text .action-verb {
  color: #fb7a64;
}

.spotlight-action-text .action-target {
  color: #ffd785;
}

.spotlight-action-text .action-damage {
  display: inline-block;
  margin-top: 6px;
  color: #ff6b6b;
  font-size: 1.5rem;
  font-weight: 950;
}

.spotlight-eyebrow {
  color: #f6bd5f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  animation: subtextReveal 0.4s ease 0.12s forwards;
}

/* --- Room Reveal Modal --- */
.room-reveal-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 520px;
  width: 90vw;
  text-align: center;
}

.room-reveal-modal.enter {
  animation: spotlightIn 0.56s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.room-reveal-modal.exit {
  animation: spotlightOut 0.36s ease forwards;
}

.room-reveal-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 246, 223, 0.24);
  background:
    linear-gradient(160deg, rgba(18, 38, 34, 0.9), rgba(11, 12, 15, 0.96)),
    url("assets/background-arena.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 48px rgba(255, 215, 133, 0.18), 0 24px 64px rgba(0, 0, 0, 0.64);
  animation: glowPulse 2.2s infinite;
  padding: 28px;
  display: grid;
  gap: 12px;
}

.room-reveal-label {
  color: #f6bd5f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.room-reveal-name {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 950;
  line-height: 1;
  color: #fff6df;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.62);
}

.room-reveal-subtitle {
  color: #cfc5aa;
  font-size: 1rem;
}

.room-reveal-setup {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.room-reveal-setup .pill {
  font-size: 0.84rem;
}


/* --- Monster Entry Slide (on the board) --- */
.monster-card.monster-entry-anim {
  animation: monsterEntrySlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Reaction Window during dungeon sequence --- */
.reaction-window {
  animation: reactionWindowIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reactionWindowIn {
  0%   { opacity: 0; transform: scale(0.96) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Intention Reveal Card --- */
.intention-reveal-card {
  background: linear-gradient(160deg, rgba(60,32,8,0.94), rgba(8,12,16,0.96)) !important;
  border-color: rgba(255,215,133,0.45) !important;
  box-shadow: 0 0 56px rgba(255,215,133,0.22), 0 24px 64px rgba(0,0,0,0.64) !important;
  animation: glowPulse 2s infinite !important;
  /* A carta passou a trazer as quatro partes por extenso: em janela baixa ela rola
     dentro de si mesma em vez de vazar para fora da tela. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Quit Confirmation Modal ── */
.quit-confirm-overlay {
  position: fixed;
  z-index: 9500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 2, 8, 0.85);
  backdrop-filter: blur(12px);
}

.quit-confirm-card {
  width: min(440px, 100%);
  padding: 30px;
  background: linear-gradient(135deg, rgba(30, 15, 20, 0.95), rgba(12, 12, 16, 0.98));
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.15), 0 30px 60px rgba(0, 0, 0, 0.85);
  border-radius: 16px;
  text-align: center;
}

.quit-confirm-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.quit-confirm-header .warning-icon {
  font-size: 3rem;
  animation: pulseWarning 1.5s infinite alternate;
}

.quit-confirm-header h2 {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  color: #fff;
  margin: 0;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.quit-confirm-card p {
  color: #bfb5c7;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 28px 0;
}

.quit-confirm-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.btn-quit-confirm {
  flex: 1;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-quit-confirm.danger {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  color: #fff;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.btn-quit-confirm.danger:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
}

.btn-quit-confirm.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #d1c8db;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-quit-confirm.secondary:hover {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Buffed Attack Badge styling */
.stat-badge.attack.buffed {
  border-color: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.4), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.8);
}
.stat-badge.attack.buffed .badge-value {
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.6), 0 1px 3px #000;
}

/* Debuffed Attack Badge styling */
.stat-badge.attack.debuffed {
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.8);
}
.stat-badge.attack.debuffed .badge-value {
  color: #ff6b6b;
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.6), 0 1px 3px #000;
}

.spotlight-card-wrap .trap-card {
  width: 220px;
  height: 320px;
  border-radius: 16px;
  border: 2px solid rgba(251, 122, 100, 0.6);
  box-shadow: 0 0 48px rgba(251, 122, 100, 0.22), 0 24px 64px rgba(0, 0, 0, 0.64);
  animation: dangerGlowPulse 2s infinite;
  transform: none !important;
  margin: 0 auto;
}

/* ── Reward Cards Scrollable Container ── */
.reward-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 190px);
  gap: 16px;
  justify-content: center;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  margin: 0 auto 24px;
  max-width: 630px;
  scrollbar-color: rgba(255, 215, 133, 0.62) rgba(0, 0, 0, 0.28);
  scrollbar-width: thin;
}

.reward-cards-container::-webkit-scrollbar {
  width: 8px;
}

.reward-cards-container::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.reward-cards-container::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5a24, #ffd785);
}

@media (max-width: 680px) {
  .reward-cards-container {
    grid-template-columns: repeat(2, 190px);
    max-width: 420px;
  }
}

@media (max-width: 460px) {
  .reward-cards-container {
    grid-template-columns: 1fr;
    max-width: 220px;
  }
}

/* ── Supreme Crystals ── */
.supreme-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.supreme-crystals {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 10;
  pointer-events: none;
}

.crystal-slot {
  font-size: 0.85rem;
  opacity: 0.25;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.crystal-slot.active {
  opacity: 1;
  filter: grayscale(0%) drop-shadow(0 0 4px #60a5fa);
  animation: crystalGlow 2s ease-in-out infinite alternate;
}

@keyframes crystalGlow {
  0% {
    transform: scale(1);
    filter: grayscale(0%) drop-shadow(0 0 2px #60a5fa);
  }
  100% {
    transform: scale(1.15);
    filter: grayscale(0%) drop-shadow(0 0 8px #a855f7);
  }
}

@keyframes shieldPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(102, 231, 255, 0.5), inset 0 0 4px rgba(102, 231, 255, 0.3);
    border-color: rgba(102, 231, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 16px rgba(102, 231, 255, 0.9), inset 0 0 8px rgba(102, 231, 255, 0.5);
    border-color: rgba(102, 231, 255, 1);
  }
}

/* ==========================================================================
   Restruturação do Layout do Jogo - Custom Styles & Overrides
   ========================================================================== */

/* 1. Battlefield Grid & Background Image Overrides */
body.is-game-screen .battlefield {
  /* O fundo da arena sai desta variavel. Enquanto um Terreno do Vince estiver em
     campo, a regra [data-terreno] logo abaixo a reaponta para a arte daquele
     terreno; quando o terreno expira o atributo some e o fundo volta sozinho.  */
  --arena-bg: url("assets/background-arena.jpg");
  grid-template-rows: auto 1fr auto !important;
  background:
    linear-gradient(180deg, rgba(8, 12, 16, 0.4) 0%, rgba(8, 12, 16, 0.75) 100%),
    var(--arena-bg) no-repeat center !important;
  background-size: cover !important;
  border: 1px solid rgba(255, 215, 133, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  padding: 16px !important;
  /* a troca da imagem em si nao e animavel; a borda colorida e o brilho sao, e é o
     que faz a mudanca ler como efeito de carta em vez de um salto de tela */
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

/* ── Terrenos do Arcanista Vince: a arena vira o terreno enquanto ele durar ── */
body.is-game-screen .battlefield[data-terreno="arcano"] {
  --arena-bg: url("assets/terrenos/terreno-arcano.jpg");
  border-color: rgba(217, 70, 239, 0.6) !important;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.72), 0 0 34px rgba(217, 70, 239, 0.3), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

body.is-game-screen .battlefield[data-terreno="montanhoso"] {
  --arena-bg: url("assets/terrenos/terreno-montanhoso.jpg");
  border-color: rgba(234, 179, 8, 0.6) !important;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.72), 0 0 34px rgba(234, 179, 8, 0.3), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

body.is-game-screen .battlefield[data-terreno="cosmico"] {
  --arena-bg: url("assets/terrenos/terreno-cosmico.jpg");
  border-color: rgba(6, 182, 212, 0.6) !important;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.72), 0 0 34px rgba(6, 182, 212, 0.3), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Stylish Gold Fantasy Borders */
body.is-game-screen .glass-panel,
body.is-game-screen .arena-zone,
body.is-game-screen .boss-hud-bar,
body.is-game-screen .recent-actions-panel {
  border: 1px solid rgba(197, 159, 99, 0.4) !important;
  outline: 1.5px solid rgba(197, 159, 99, 0.12) !important;
  outline-offset: -4px !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 12px rgba(197, 159, 99, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  background: linear-gradient(145deg, rgba(13, 22, 28, 0.92), rgba(9, 13, 17, 0.97)) !important;
}

/* 3. Compact Player HUD Sheets (Sidebar Left) */
body.is-game-screen .hero-party-panel .player-hud {
  grid-template-columns: 80px minmax(0, 1fr) !important;
  min-height: 0 !important;
  padding: 10px !important;
  gap: 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(197, 159, 99, 0.35) !important;
}

body.is-game-screen .hero-party-panel .portrait-container {
  width: 80px !important;
  height: 120px !important; /* Forces 2/3 ratio */
  border-width: 2.5px !important;
  border-radius: 8px !important;
  border-color: rgba(197, 159, 99, 0.6) !important;
}

body.is-game-screen .hero-party-panel .hud-main {
  gap: 6px !important;
}

body.is-game-screen .hero-party-panel .hud-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.is-game-screen .hero-party-panel .hud-title strong {
  font-size: 1.15rem !important;
}

body.is-game-screen .hero-party-panel .hud-title span {
  font-size: 0.92rem !important;
  color: #ffd785 !important;
  font-weight: 800 !important;
}

/* Redesigned player statistics block (no bars, clean layout) */
.player-hud-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  /* A FICHA MANDA NA LARGURA, NUNCA O TEXTO DE DENTRO DELA. Sem este min-width, o
     bloco de recursos e uma faixa "auto" cujo piso e o texto mais largo que ele
     contem — e um recurso comprido (o "Preparado: Rasteira, Soco, Chute" do Monge
     com as tres familias armadas) empurrava a faixa inteira para fora da carta.
     As barras de Vida e Energia tem width:100% dessa faixa, entao elas saiam junto:
     e o bug que apareceu com a Suprema do Chi Won em 2026-08-04. */
  min-width: 0;
}

.hud-status-row {
  min-width: 0;
}

.hud-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Um recurso nunca parte no meio ("Escudo:" em cima, "12" embaixo). A linha que
     os contem (.hud-status-row) continua podendo quebrar ENTRE itens — o que nao
     pode e um item sozinho virar duas linhas e mudar a altura da ficha, porque a
     compactacao das fichas e decidida por medicao (card #103). */
  white-space: nowrap;
  /* ...e o preco de nunca quebrar e poder ENCOLHER: um recurso que nao cabe inteiro
     nem sozinho numa linha e aparado com reticencias em vez de vazar da ficha. O
     icone fica (ele nao encolhe) e o texto completo continua na dica da ficha e no
     painel "Suas habilidades". */
  min-width: 0;
}

.hud-stat-icon {
  font-size: 0.85rem;
  display: inline-block;
  width: 16px;
  text-align: center;
  flex: none;
}

.hud-stat-value {
  font-size: 0.82rem;
  font-weight: 850;
  color: #ffe3a8;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* o "Preparado" do Monge e o unico recurso com MAIS DE UM icone (um por familia
   armada): a caixa fixa de 16px cortaria o segundo e o terceiro. */
.hud-stat-item.preparado .hud-stat-icon {
  width: auto;
}

.hud-stat-item.life .hud-stat-value {
  color: #ff9b9b;
}

.hud-stat-item.energy .hud-stat-value {
  color: #66e7ff;
}

.hud-stat-item.charge .hud-stat-value {
  color: #ffd785;
}

/* ============================================================
   FICHAS DOS JOGADORES — NIVEIS DE DENSIDADE
   As classes .fichas-1/2/3 sao postas em ajustarFichasDosJogadores(), e SO quando a
   medicao diz que as fichas nao cabem na barra da esquerda. Enquanto couber, nenhuma
   destas regras existe: quem joga em tela grande, ou em trio, ve exatamente o que via
   antes. Cada nivel corta um pouco mais, na ordem do que menos custa para ler:

     1  retrato menor, nome do heroi ao lado do nome do jogador, fontes um ponto menores
     2  medidor em UMA linha (rotulo · barra · numero) em vez de duas
     3  retrato pequeno, rotulo do medidor vira so o icone

   O que NUNCA sai, em nenhum nivel: retrato, nome, barra de Vida, barra de Energia,
   numero de cada uma e a linha de Escudo/recurso da classe. E por elas que se
   acompanha o dano e a cura durante o ataque da masmorra — o motivo de tudo isto.
   ============================================================ */

/* ---- nivel 1 ---- */
body.is-game-screen .hero-party-panel.fichas-1 .player-list {
  gap: 8px !important;
}

/* row-gap zerado: a ficha tem uma segunda linha na grade (os pips de buff) que quase
   sempre esta vazia — e o gap dela cobrava ~8px de cada ficha sem desenhar nada. */
body.is-game-screen .hero-party-panel.fichas-1 .player-hud {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  padding: 8px !important;
  column-gap: 9px !important;
  row-gap: 0 !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .portrait-container {
  width: 76px !important;
  height: 114px !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hud-main {
  gap: 4px !important;
}

/* o nome do heroi sobe para a linha do nome do jogador: era a linha inteira que se
   ganhava mais barato, e a leitura ate melhora ("Brugo · Donovan"). */
body.is-game-screen .hero-party-panel.fichas-1 .hud-title {
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hud-title-linha {
  width: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* o ponto separa os dois nomes agora que eles dividem a linha */
body.is-game-screen .hero-party-panel.fichas-1 .hud-heroi::before {
  content: "·";
  margin-right: 5px;
  opacity: 0.55;
}

body.is-game-screen .hero-party-panel.fichas-1 .hud-title strong {
  font-size: 1rem !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hud-heroi {
  font-size: 0.8rem !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hero-resource {
  gap: 3px !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hero-resource-top strong {
  font-size: 0.92rem !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hero-resource-rotulo {
  font-size: 0.7rem !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .player-hud-stats {
  gap: 2px !important;
  margin-top: 2px !important;
}

body.is-game-screen .hero-party-panel.fichas-1 .hud-status-row {
  gap: 8px !important;
  font-size: 0.78rem !important;
  margin-top: 2px !important;
}

/* ---- nivel 2: o medidor deixa de ocupar duas linhas ---- */
body.is-game-screen .hero-party-panel.fichas-2 .player-hud {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  padding: 7px !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .portrait-container {
  width: 64px !important;
  height: 96px !important;
}

/* display:contents dissolve o .hero-resource-top: rotulo, barra e numero viram
   filhos diretos da grade do .hero-resource e se alinham na mesma linha. */
body.is-game-screen .hero-party-panel.fichas-2 .hero-resource {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hero-resource-top {
  display: contents !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hero-resource-rotulo {
  order: 1 !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hero-resource .meter {
  order: 2 !important;
  height: 12px !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hero-resource-top strong {
  order: 3 !important;
  font-size: 0.86rem !important;
  white-space: nowrap !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hud-status-row {
  font-size: 0.74rem !important;
  gap: 7px !important;
}

body.is-game-screen .hero-party-panel.fichas-2 .hud-extra-badges span {
  font-size: 0.66rem !important;
  padding: 1px 4px !important;
}

/* ---- nivel 3: so o icone no rotulo ---- */
body.is-game-screen .hero-party-panel.fichas-3 .player-list {
  gap: 6px !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .player-hud {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  padding: 5px !important;
  column-gap: 8px !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .portrait-container {
  width: 54px !important;
  height: 81px !important;
  border-width: 2px !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .hero-resource-rotulo i {
  display: none !important;
}

/* O selo de turno finalizado fica so no visto: a palavra tomava metade da linha do
   nome, e a moldura do selo ainda esticava a linha inteira. O aviso nao se perde — a
   ficha toda ja muda de cor quando o jogador encerra. */
body.is-game-screen .hero-party-panel.fichas-3 .hud-turn-ended-tag i {
  display: none !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .hud-turn-ended-tag {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-size: 0.86rem !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .hud-title strong {
  font-size: 0.92rem !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .hud-heroi {
  font-size: 0.74rem !important;
}

body.is-game-screen .hero-party-panel.fichas-3 .hud-status-row {
  font-size: 0.7rem !important;
  gap: 6px !important;
}

/* ---- nivel 4: o minimo que ainda e uma ficha ----
   So chega aqui quem tem a mesa cheia numa tela baixa (720p com 5 herois). O nome do
   heroi sai — o retrato ja diz quem e — mas Vida, Energia, os numeros e o Escudo
   continuam, porque e o que se acompanha durante o ataque. */
body.is-game-screen .hero-party-panel.fichas-4 .player-list {
  gap: 5px !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .player-hud {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  padding: 4px !important;
  column-gap: 7px !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .portrait-container {
  width: 44px !important;
  height: 66px !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .hud-heroi {
  display: none !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .hud-title strong {
  font-size: 0.86rem !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .hero-resource .meter {
  height: 10px !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .hero-resource-top strong {
  font-size: 0.8rem !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .player-hud-stats {
  gap: 1px !important;
  margin-top: 1px !important;
}

body.is-game-screen .hero-party-panel.fichas-4 .hud-status-row {
  font-size: 0.66rem !important;
  margin-top: 1px !important;
}

/* a palavra do rotulo ("Vida"/"Energia") e um <i> so para poder sumir no nivel 3 —
   sem o italico que o <i> traz de fabrica. */
.hero-resource-rotulo i {
  font-style: normal;
}

/* 4. Pulsing Glowing Red Border for Active Monsters */
@keyframes monsterRedPulse {
  0% {
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.35), 0 16px 42px rgba(0, 0, 0, 0.4);
  }
  50% {
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 16px 42px rgba(0, 0, 0, 0.4);
  }
  100% {
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.35), 0 16px 42px rgba(0, 0, 0, 0.4);
  }
}

body.is-game-screen .monster-card:not(.defeated) {
  border: 2px solid rgba(220, 38, 38, 0.8) !important;
  animation: monsterRedPulse 2s infinite ease-in-out !important;
}

/* 5. Mini Arena Cards & Empty Slots */
body.is-game-screen .arena-zone {
  grid-row: 3 !important;
  min-height: 140px !important;
  max-height: 160px !important;
  padding: 8px 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(8, 12, 16, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  margin-bottom: 145px !important;
}

body.is-game-screen .arena-label {
  margin-bottom: 6px !important;
}

body.is-game-screen .arena-cards {
  min-height: 110px !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
  align-items: center;
}

body.is-game-screen .table-card {
  min-height: 0 !important;
  height: 110px !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 auto !important;
  padding: 4px !important;
}

body.is-game-screen .table-card-face {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  height: 100% !important;
}

body.is-game-screen .table-card img {
  height: 60px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

body.is-game-screen .table-card strong {
  font-size: 0.64rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  color: #ffe3a8 !important;
}

body.is-game-screen .table-card span {
  font-size: 0.58rem !important;
  color: #a0a0a0 !important;
}

body.is-game-screen .table-card.empty-slot {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1.5px dashed rgba(255, 215, 133, 0.15) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: none !important;
  pointer-events: none !important;
  border-radius: 6px !important;
}

.empty-slot-icon {
  animation: none;
  opacity: 0.35;
}

/* 6. Game Board Header (Top Stats Bar) Styling */
.game-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(16, 20, 24, 0.95), rgba(8, 10, 12, 0.98));
  border: 1px solid rgba(255, 215, 133, 0.22);
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  outline: 1.5px solid rgba(255, 215, 133, 0.08);
  outline-offset: -4px;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-btn {
  background: transparent;
  border: none;
  color: #ffd785;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: transform 0.2s, color 0.2s;
  line-height: 1;
}

.header-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

.header-crown {
  font-size: 1.3rem;
  color: #ffd785;
  filter: drop-shadow(0 0 5px rgba(255, 215, 133, 0.5));
  line-height: 1;
}

.phase-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
}

.phase-badge.action-phase {
  color: #ffd785;
  background: rgba(255, 215, 133, 0.08);
  border-color: rgba(255, 215, 133, 0.35);
}

.phase-badge.dungeon-phase {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Sao QUATRO bolhas desde que "Energia gasta" entrou ao lado de "Derrotados", e a
   quarta e a de rotulo mais longo. Numa janela apertada o flex espremia justo ela: o
   rotulo quebrava em duas linhas e a bolha crescia 9px, deixando a fileira torta.
   Agora as bolhas nao se deformam (flex-shrink: 0 + rotulo em nowrap) e, quando
   faltar largura de verdade, elas passam INTEIRAS para uma segunda linha. */
.header-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
}

.header-stat-bubble {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 215, 133, 0.18);
  border-radius: 20px;
  padding: 5px 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}

/* NIVEL DE AMEACA: a unica bolha do topo que nao e um placar do passado — ela sobe
   com a Energia gasta e e ela que vai ligar as ordens da masmorra. O azul de mana a
   separa das outras tres (fundo quase preto) e amarra a leitura ao recurso que ela
   mede, sem gritar como um alerta vermelho. */
.header-stat-bubble.bubble-ameaca {
  background:
    radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.35), transparent 70%),
    linear-gradient(145deg, rgba(23, 58, 110, 0.95), rgba(12, 28, 58, 0.95));
  border-color: rgba(125, 190, 255, 0.55);
  box-shadow: inset 0 0 12px rgba(8, 20, 45, 0.75), 0 0 10px rgba(59, 130, 246, 0.18);
}

.header-stat-bubble.bubble-ameaca .bubble-label {
  color: #9ec9ff;
}

.header-stat-bubble.bubble-ameaca .bubble-icon {
  filter: drop-shadow(0 0 5px rgba(125, 190, 255, 0.7));
}

/* NIVEL DE AMEACA: a bolha vizinha da QUANTIDADE, e a que diz o que a quantidade
   virou. Ela nasce apagada (nivel 0, cinza) e vai esquentando junto com as cartas
   que entram na barra da direita — as cores sao AS MESMAS de .ameaca-card.nivel-N,
   de proposito: o jogador amarra a bolha ao card que acabou de aparecer sem ter de
   ler os dois. */
.header-stat-bubble.bubble-nivel-ameaca {
  background:
    radial-gradient(circle at 20% 0%, rgba(148, 163, 184, 0.28), transparent 70%),
    linear-gradient(145deg, rgba(38, 42, 52, 0.95), rgba(14, 16, 22, 0.95));
  border-color: rgba(148, 163, 184, 0.45);
}

.header-stat-bubble.bubble-nivel-ameaca .bubble-label {
  color: #b9c2d0;
}

.header-stat-bubble.bubble-nivel-ameaca.nivel-1 {
  background:
    radial-gradient(circle at 20% 0%, rgba(250, 204, 21, 0.35), transparent 70%),
    linear-gradient(145deg, rgba(88, 63, 8, 0.95), rgba(32, 24, 6, 0.95));
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: inset 0 0 12px rgba(45, 32, 4, 0.75), 0 0 10px rgba(250, 204, 21, 0.2);
}

.header-stat-bubble.bubble-nivel-ameaca.nivel-1 .bubble-label { color: #fde68a; }

.header-stat-bubble.bubble-nivel-ameaca.nivel-2 {
  background:
    radial-gradient(circle at 20% 0%, rgba(251, 146, 60, 0.35), transparent 70%),
    linear-gradient(145deg, rgba(97, 48, 8, 0.95), rgba(36, 18, 5, 0.95));
  border-color: rgba(251, 146, 60, 0.65);
  box-shadow: inset 0 0 12px rgba(50, 24, 4, 0.75), 0 0 10px rgba(251, 146, 60, 0.24);
}

.header-stat-bubble.bubble-nivel-ameaca.nivel-2 .bubble-label { color: #fed7aa; }

.header-stat-bubble.bubble-nivel-ameaca.nivel-3 {
  background:
    radial-gradient(circle at 20% 0%, rgba(248, 113, 113, 0.38), transparent 70%),
    linear-gradient(145deg, rgba(104, 20, 20, 0.95), rgba(38, 8, 8, 0.95));
  border-color: rgba(248, 113, 113, 0.7);
  box-shadow: inset 0 0 12px rgba(52, 10, 10, 0.75), 0 0 12px rgba(239, 68, 68, 0.28);
}

.header-stat-bubble.bubble-nivel-ameaca.nivel-3 .bubble-label { color: #fecaca; }

.header-stat-bubble.bubble-nivel-ameaca.nivel-4 {
  background:
    radial-gradient(circle at 20% 0%, rgba(192, 132, 252, 0.4), transparent 70%),
    linear-gradient(145deg, rgba(76, 19, 110, 0.96), rgba(28, 8, 42, 0.96));
  border-color: rgba(192, 132, 252, 0.75);
  box-shadow: inset 0 0 12px rgba(34, 8, 50, 0.8), 0 0 14px rgba(168, 85, 247, 0.35);
}

.header-stat-bubble.bubble-nivel-ameaca.nivel-4 .bubble-label { color: #e9d5ff; }

.bubble-icon {
  font-size: 1rem;
}

.bubble-label {
  color: #b0a080;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.bubble-value {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 950;
}

.header-btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 133, 0.18);
  color: #ffd785;
  font-size: 1.1rem;
  padding: 5px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
}

.header-btn-icon:hover {
  background: rgba(255, 215, 133, 0.12);
  border-color: rgba(255, 215, 133, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* 7. Floating Recent Actions Panel */
.floating-recent-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 320px;
  max-height: 380px;
  z-index: 50;
  background: rgba(8, 12, 16, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(197, 159, 99, 0.4) !important;
  border-radius: 10px;
  padding: 12px !important;
  box-shadow: inset 0 0 12px rgba(197, 159, 99, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.floating-recent-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(197, 159, 99, 0.25);
  padding-bottom: 6px;
}

.close-btn-x {
  background: transparent;
  border: none;
  color: #ffd785;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.close-btn-x:hover {
  color: #fff;
}

.floating-recent-actions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.floating-recent-actions-list .recent-action-item {
  display: flex;
  align-items: start;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.25;
}

.floating-recent-actions-list .action-bullet {
  width: 5px;
  height: 5px;
  background: #ffd785;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.floating-recent-actions-list .action-text {
  color: #eadfc6;
}

body.is-game-screen .boss-hud-bar {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  margin-bottom: 0 !important;
  background: rgba(13, 22, 28, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(197, 159, 99, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 12px rgba(197, 159, 99, 0.08), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.is-game-screen .battlefield.has-boss .monster-row {
  padding-top: 75px !important;
}

/* Legendary Boss Card Style (Wide Landscape 3:2 Aspect Ratio) */
body.is-game-screen .monster-card.boss {
  aspect-ratio: 3 / 2 !important;
  height: 80% !important;
  max-width: clamp(340px, 42vw, 560px) !important;
  border: 2px solid rgba(255, 215, 133, 0.85) !important;
  box-shadow: 0 0 28px rgba(255, 215, 133, 0.45), 0 16px 42px rgba(0, 0, 0, 0.6) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 215, 133, 0.18), transparent 7rem),
    linear-gradient(145deg, rgba(31, 22, 15, 0.95), rgba(12, 10, 9, 0.98)) !important;
}

body.is-game-screen .monster-card.boss .monster-art img {
  object-fit: cover !important;
  object-position: center !important;
}

/* ── Efeitos visuais do Provocar e Redirecionamento ── */
.player-hud.is-protected {
  border-color: rgba(102, 231, 255, 0.45) !important;
  box-shadow: 0 0 14px rgba(102, 231, 255, 0.25) !important;
}

.player-hud.is-half-protected {
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.25) !important;
}

.player-hud.is-protecting {
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25) !important;
}

.player-hud.is-protected.bastiao {
  border-color: rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3) !important;
}

.player-hud.is-protecting.bastiao {
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25) !important;
}

.provoke-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(3px);
  z-index: 5;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.provoke-badge.protected {
  background: linear-gradient(0deg, rgba(8, 28, 44, 0.96) 0%, rgba(8, 28, 44, 0.8) 100%);
  border-top: 1px solid rgba(102, 231, 255, 0.4);
  color: #66e7ff;
  animation: pulse-protected-border 2s infinite ease-in-out;
}

.provoke-badge.protected.bastiao {
  background: linear-gradient(0deg, rgba(35, 8, 44, 0.96) 0%, rgba(20, 5, 30, 0.85) 100%);
  border-top: 1px solid rgba(168, 85, 247, 0.6);
  color: #e9d5ff;
  animation: pulse-bastiao-border 2s infinite ease-in-out;
}

.provoke-badge.half-protected {
  background: linear-gradient(0deg, rgba(28, 12, 44, 0.96) 0%, rgba(28, 12, 44, 0.8) 100%);
  border-top: 1px solid rgba(167, 139, 250, 0.4);
  color: #c084fc;
  animation: pulse-half-protected-border 2s infinite ease-in-out;
}

.provoke-badge.protecting {
  background: linear-gradient(0deg, rgba(38, 20, 4, 0.96) 0%, rgba(38, 20, 4, 0.8) 100%);
  border-top: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  animation: pulse-protecting-border 2s infinite ease-in-out;
}

.provoke-badge.protecting.bastiao {
  background: linear-gradient(0deg, rgba(35, 8, 44, 0.96) 0%, rgba(35, 8, 44, 0.8) 100%);
  border-top: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
  animation: pulse-bastiao-border 2s infinite ease-in-out;
}

.provoke-badge.immortal {
  background: linear-gradient(0deg, rgba(45, 10, 60, 0.96) 0%, rgba(20, 5, 30, 0.85) 100%);
  border-top: 1px solid rgba(168, 85, 247, 0.7);
  color: #e9d5ff;
  animation: pulse-bastiao-border 1.5s infinite ease-in-out;
}

.provoke-badge .provoke-icon {
  font-size: 0.95rem;
}

.provoke-badge.immortal .provoke-icon {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.9));
}

.provoke-badge.protected .provoke-icon {
  filter: drop-shadow(0 0 4px rgba(102, 231, 255, 0.6));
}

.provoke-badge.protected.bastiao .provoke-icon {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.9));
}

.provoke-badge.half-protected .provoke-icon {
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.6));
}

.provoke-badge.protecting .provoke-icon {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}

.provoke-badge.protecting.bastiao .provoke-icon {
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6));
}

.provoke-badge .provoke-text {
  font-size: 0.58rem;
  font-weight: 900;
}

@keyframes pulse-protected-border {
  0%, 100% { border-top-color: rgba(102, 231, 255, 0.3); }
  50% { border-top-color: rgba(102, 231, 255, 0.95); }
}

@keyframes pulse-half-protected-border {
  0%, 100% { border-top-color: rgba(167, 139, 250, 0.3); }
  50% { border-top-color: rgba(167, 139, 250, 0.95); }
}

@keyframes pulse-protecting-border {
  0%, 100% { border-top-color: rgba(245, 158, 11, 0.3); }
  50% { border-top-color: rgba(245, 158, 11, 0.95); }
}

@keyframes pulse-bastiao-border {
  0%, 100% { border-top-color: rgba(168, 85, 247, 0.3); }
  50% { border-top-color: rgba(168, 85, 247, 0.95); }
}

/* ── Efeitos visuais das Marcas do Warlock ── */
.monster-card.has-warlock-mark {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.monster-card.warlock-mark-vulnerability {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35), inset 0 0 12px rgba(168, 85, 247, 0.15) !important;
}

.monster-card.warlock-mark-drain {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35), inset 0 0 12px rgba(239, 68, 68, 0.15) !important;
}

.warlock-mark-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(12, 5, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  backdrop-filter: blur(2px);
  animation: warlock-mark-pulse 2s infinite ease-in-out;
}

.warlock-mark-overlay.vulnerability {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.warlock-mark-overlay.drain {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25), 0 4px 8px rgba(0, 0, 0, 0.5);
}

.warlock-mark-rune {
  font-size: 1rem;
  line-height: 1;
}

.warlock-mark-overlay.vulnerability .warlock-mark-rune {
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.8));
}

.warlock-mark-overlay.drain .warlock-mark-rune {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
}

.warlock-mark-label {
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.warlock-mark-overlay.vulnerability .warlock-mark-label {
  color: #e9d5ff;
  text-shadow: 0 0 4px rgba(168, 85, 247, 0.5);
}

.warlock-mark-overlay.drain .warlock-mark-label {
  color: #fee2e2;
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

@keyframes warlock-mark-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

/* ── IMMUNIDADE A ARMADILHAS (Antecipação do Perigo) ── */
.player-hud.has-trap-immunity {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3) !important;
}

.portrait-container .trap-immunity-overlay-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 3px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(180deg, rgba(4, 47, 38, 0.95) 0%, rgba(6, 78, 59, 0.85) 100%);
  border-bottom: 1px solid rgba(52, 211, 153, 0.6);
  color: #a7f3d0;
  z-index: 6;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: pulse-trap-immunity 2s infinite ease-in-out;
}

.portrait-container .trap-immunity-overlay-badge .trap-icon {
  font-size: 0.75rem;
  filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.8));
}

.portrait-container .trap-immunity-overlay-badge .trap-text {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes pulse-trap-immunity {
  0%, 100% {
    border-bottom-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  }
  50% {
    border-bottom-color: rgba(52, 211, 153, 1);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.7);
  }
}

/* ============================================================
   MARCA DE DEFESA/BUFF: heroi que usou defesa, protecao,
   esquiva ou buff nesta rodada ganha um brasao no retrato
   ============================================================ */
.player-hud.has-defesa-buff .portrait-container,
body.is-game-screen .player-hud.has-defesa-buff .portrait-container,
body.is-game-screen .hero-party-panel .player-hud.has-defesa-buff .portrait-container {
  border-color: rgba(125, 211, 252, 0.9) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.6) !important;
}

.portrait-container .defesa-buff-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(125, 211, 252, 0.95), rgba(12, 74, 110, 0.95));
  border: 1.5px solid rgba(186, 230, 253, 0.9);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  z-index: 7;
  pointer-events: auto;
  animation: pulse-defesa-buff 1.8s infinite ease-in-out;
}

.portrait-container .defesa-buff-badge .defesa-buff-icon {
  font-size: 0.7rem;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(186, 230, 253, 0.9));
}

@keyframes pulse-defesa-buff {
  0%, 100% { box-shadow: 0 0 6px rgba(56, 189, 248, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 12px rgba(56, 189, 248, 0.95); transform: scale(1.08); }
}

/* ============================================================
   MONSTER CARD BACK OVERLAY (MOUSEOVER VERSO DA CARTA)
   ============================================================ */
.monster-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  box-sizing: border-box;
  /* comeca abaixo da faixa de condicoes, que continua visivel por cima do verso
     (--status-strip-h e medida no render, em ajustarFaixaDeCondicoes) */
  padding: calc(10px + var(--status-strip-h, 0px)) 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background:
    radial-gradient(circle at 50% 10%, rgba(30, 24, 38, 0.98), rgba(12, 10, 16, 0.99)),
    linear-gradient(180deg, rgba(20, 16, 24, 0.98), rgba(8, 6, 12, 1));
  border: 1px solid rgba(255, 215, 133, 0.4);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-90deg) scale(0.95);
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  backface-visibility: hidden;
  overflow-y: auto;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.9);
}

/* Custom scrollbar inside card back if text is long */
.monster-card-back::-webkit-scrollbar {
  width: 3px;
}
.monster-card-back::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 133, 0.3);
  border-radius: 3px;
}

/* A faixa das condicoes e IMUNE ao mouse over da carta: com o mouse sobre ela o
   verso nao vira, para dar tempo de ler o balao de cada condicao. */
.monster-card:not(.defeated):hover:not(:has(.monster-status-overlay:hover)) .monster-card-back {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
}

.monster-card.brutal .monster-card-back {
  border-color: rgba(239, 68, 68, 0.5);
  background:
    radial-gradient(circle at 50% 10%, rgba(45, 16, 20, 0.98), rgba(14, 8, 10, 0.99)),
    linear-gradient(180deg, rgba(30, 12, 16, 0.98), rgba(10, 4, 6, 1));
}

.monster-card.mystic .monster-card-back {
  border-color: rgba(168, 85, 247, 0.5);
  background:
    radial-gradient(circle at 50% 10%, rgba(35, 18, 48, 0.98), rgba(12, 8, 18, 0.99)),
    linear-gradient(180deg, rgba(24, 12, 34, 0.98), rgba(8, 4, 12, 1));
}

.monster-card.boss .monster-card-back {
  border-color: rgba(234, 179, 8, 0.6);
  background:
    radial-gradient(circle at 50% 10%, rgba(48, 38, 18, 0.98), rgba(18, 14, 8, 0.99)),
    linear-gradient(180deg, rgba(34, 26, 12, 0.98), rgba(12, 8, 4, 1));
}

.card-back-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.card-back-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.card-back-category {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.card-back-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 6px;
}

.card-back-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
}

.card-back-stat .stat-icon {
  font-size: 0.75rem;
}

.card-back-stat .stat-val {
  font-weight: 800;
  color: #fff;
}

.card-back-stat.life .stat-val {
  color: #ef4444;
}

.card-back-stat.attack .stat-val {
  color: #f97316;
}

.card-back-stat.shield .stat-val {
  color: #3b82f6;
}

.card-back-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-back-section-title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffd785;
}

.card-back-section-body {
  font-size: 0.72rem;
  line-height: 1.25;
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.04);
  padding: 5px 6px;
  border-radius: 5px;
  border-left: 2px solid #ffd785;
}

.card-back-section.keywords .card-back-section-body,
.card-back-section.statuses .card-back-section-body {
  border-left: 2px solid #a855f7;
  background: rgba(168, 85, 247, 0.08);
}

.card-back-effect-item {
  margin-bottom: 2px;
}

.card-back-effect-item:last-child {
  margin-bottom: 0;
}



/* ===== Resumo do herói: consulta rápida de habilidades e buffs ativos ===== */
.hero-summary-panel {
  margin-top: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}
.hero-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.hero-summary-header .eyebrow { flex: 0 0 auto; }
.hero-summary-header strong {
  flex: 1 1 auto;
  color: #ffd785;
  font-size: 0.86rem;
  line-height: 1.2;
}
.hero-summary-arrow { color: #ffd785; font-size: 0.9rem; }
.hero-summary-intro {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #c9bda4;
}
.hero-summary-section { display: grid; gap: 5px; }
.hero-summary-label {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9d8f76;
  border-bottom: 1px solid rgba(255, 215, 133, 0.18);
  padding-bottom: 3px;
}
.hero-summary-item {
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.32);
  border-left: 2px solid rgba(255, 215, 133, 0.35);
}
.hero-summary-item.is-active {
  background: rgba(255, 215, 133, 0.1);
  border-left-color: #ffd785;
}
.hero-summary-item-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffe3a8;
}
.hero-summary-item-text {
  font-size: 0.73rem;
  line-height: 1.35;
  color: #cabfa8;
}
.hero-summary-empty {
  font-size: 0.74rem;
  color: #8d8272;
  font-style: italic;
  padding: 4px 7px;
}

/* Aviso de monstro adicional que foge do combate */
.impact-number.apavorado {
  color: #fde68a;
  font-weight: 950;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(253, 230, 138, 0.9), 0 2px 6px rgba(0, 0, 0, 0.95);
}

/* ── Menu principal (hamburguer) e Ajustes de Dificuldade ── */
.settings-card,
.main-menu-card {
  width: min(560px, 100%);
  padding: 26px 28px 22px;
  background: linear-gradient(135deg, rgba(24, 20, 34, 0.97), rgba(10, 11, 16, 0.98));
  border: 1px solid rgba(255, 215, 133, 0.26);
  box-shadow: 0 0 44px rgba(255, 215, 133, 0.12), 0 30px 60px rgba(0, 0, 0, 0.85);
  border-radius: 16px;
  max-height: 88vh;
  overflow-y: auto;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.settings-header h2 {
  font-family: Georgia, serif;
  font-size: 1.45rem;
  color: #fff6df;
  margin: 0;
}

.settings-hint,
.settings-lock {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 18px;
}

.settings-hint { color: #a99f8d; }

.settings-lock {
  color: #ffd08a;
  background: rgba(217, 119, 6, 0.14);
  border-left: 3px solid #d97706;
  border-radius: 8px;
  padding: 10px 14px;
}

.settings-list {
  display: grid;
  gap: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.settings-row.on {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.07);
}

.settings-row-text strong {
  display: block;
  color: #fff6df;
  font-size: 0.98rem;
  margin-bottom: 5px;
}

.settings-row-text p {
  color: #a99f8d;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.settings-sigla {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  border-radius: 5px;
  background: rgba(255, 215, 133, 0.16);
  border: 1px solid rgba(255, 215, 133, 0.35);
  color: #ffd98a;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.settings-switch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(239, 68, 68, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.settings-switch.on {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.22);
}

.settings-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.settings-knob {
  position: relative;
  width: 44px;
  height: 20px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.settings-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff8f8f;
  transition: transform 0.18s ease, background 0.18s ease;
}

.settings-switch.on .settings-knob {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.6);
}

.settings-switch.on .settings-knob::after {
  transform: translateX(24px);
  background: #4ade80;
}

.settings-switch-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ff8f8f;
}

.settings-switch.on .settings-switch-label { color: #4ade80; }

/* --- reforço manual: fileira de porcentagens --- */
.settings-subtitulo {
  margin: 22px 0 6px;
  font-family: Georgia, serif;
  font-size: 1.02rem;
  color: #fff6df;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}

.settings-subtitulo + .settings-hint { margin-bottom: 12px; }
.settings-hint strong { color: #ffd98a; }

.settings-row.escala {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.settings-row.escala.on {
  border-color: rgba(255, 215, 133, 0.4);
  background: rgba(255, 215, 133, 0.07);
}

.settings-escala {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
}

.settings-chip {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #a99f8d;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.settings-chip:hover:not(:disabled) {
  color: #fff6df;
  border-color: rgba(255, 215, 133, 0.4);
  background: rgba(255, 215, 133, 0.08);
}

.settings-chip.sel {
  color: #10100c;
  background: linear-gradient(180deg, #ffe6ab, #ffd07a);
  border-color: rgba(255, 215, 133, 0.9);
  box-shadow: 0 0 12px rgba(255, 215, 133, 0.28);
}

.settings-chip:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.settings-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.settings-combo {
  font-size: 0.82rem;
  color: #a99f8d;
}

.settings-combo strong { color: #ffd98a; }

/* --- itens do menu principal --- */
.main-menu-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.main-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.main-menu-item:hover {
  background: rgba(255, 215, 133, 0.08);
  border-color: rgba(255, 215, 133, 0.35);
  transform: translateX(3px);
}

.main-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.45);
}

.main-menu-icon { font-size: 1.5rem; }

.main-menu-text strong {
  display: block;
  color: #fff6df;
  font-size: 0.96rem;
  margin-bottom: 3px;
}

.main-menu-text small {
  color: #a99f8d;
  font-size: 0.78rem;
}

@media (max-width: 560px) {
  .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .settings-switch { flex-direction: row; justify-content: center; min-width: 0; }
}

/* ── FOCO DE PODER (Arcanista Vince): borda eletrica na ficha do heroi ──
   A carta escolhe um heroi e dobra o proximo dano dele, mas nao deixava rastro
   nenhum na interface: ninguem sabia em quem o buff tinha caido. As camadas abaixo
   desenham a MESMA borda tres vezes (halo largo, nucleo nitido, brilho difuso) e
   deformam as tres com o ruido animado de #foco-poder-turbulencia, declarado no
   index.html. A borda some sozinha: o engine apaga player.focoDePoder no mesmo
   golpe em que dobra o dano, e o proximo render nao emite mais estas camadas. */
.svg-filtros {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.player-hud.has-foco-poder {
  --foco-aura-rgb: 192, 132, 252;
  border-color: rgba(192, 132, 252, 0.5);
  animation: focoPoderAura 2.4s ease-in-out infinite;
}

/* ANJO (Oraculo Niely): a MESMA moldura crepitante, em branco. O seguro contra a
   morte so aparecia nos pips do resumo, entao a mesa nao tinha como saber quem
   estava protegido. As cores de cada moldura vivem no proprio .foco-poder-eletrico
   (e nao na ficha) porque os dois efeitos podem cair no mesmo heroi: o Espelho
   Arcano do Vince escolhe um ALIADO, e esse aliado pode ser a Niely de Anjo ativo.
   Nesse caso saem duas molduras, uma dentro da outra — e so o halo da ficha, que e
   um so, fica com a cor do Anjo (a regra abaixo vem depois na cascata). */
.player-hud.has-anjo {
  --foco-aura-rgb: 255, 255, 255;
  border-color: rgba(255, 255, 255, 0.55);
  animation: focoPoderAura 2.4s ease-in-out infinite;
}

.foco-poder-eletrico {
  --foco-cor: #c084fc;
  --foco-cor-clara: #f0abfc;
  --foco-cor-halo: rgba(192, 132, 252, 0.5);
  position: absolute;
  inset: -3px;
  /* 10px do canto da ficha + os 3px que a moldura avanca para fora dela */
  border-radius: 13px;
  pointer-events: none; /* e enfeite: nao pode roubar o clique da ficha */
  z-index: 4;
}

/* 3px mais para fora que a roxa: com os dois efeitos ativos ao mesmo tempo as
   molduras precisam ser dois aneis distintos, nao uma cobrindo a outra. */
.foco-poder-eletrico.eletrico-anjo {
  --foco-cor: #ffffff;
  --foco-cor-clara: #f1f5f9;
  --foco-cor-halo: rgba(255, 255, 255, 0.6);
  inset: -6px;
  border-radius: 16px;
}

.foco-poder-eletrico span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--foco-cor);
}

/* ATENCAO: este border-color NAO vence hoje — ".foco-poder-eletrico span" acima tem
   especificidade maior e a cor cheia de --foco-cor prevalece nas tres camadas. Vem
   assim desde o Foco de Poder; o valor fica declarado como intencao (o halo devia
   ser a versao suave da cor), e agora acompanha a moldura em vez de ser roxo fixo. */
.foco-eletrico-halo {
  border-color: var(--foco-cor-halo);
  filter: blur(3px) url(#foco-poder-turbulencia);
}

.foco-eletrico-borda {
  filter: url(#foco-poder-turbulencia);
}

.foco-eletrico-brilho {
  border-color: var(--foco-cor-clara);
  filter: blur(6px) url(#foco-poder-turbulencia);
  animation: focoPoderBrilho 2.4s ease-in-out infinite;
}

@keyframes focoPoderAura {
  0%, 100% { box-shadow: 0 0 12px rgba(var(--foco-aura-rgb), 0.28); }
  50%      { box-shadow: 0 0 22px rgba(var(--foco-aura-rgb), 0.55); }
}

@keyframes focoPoderBrilho {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}

/* Quem pede menos movimento perde as duas pulsacoes (o halo que respira e o brilho
   que vai e volta), mas NAO perde o crepitar da borda. O Windows liga essa
   preferencia junto com "efeitos de animacao" do sistema, ou seja, muita gente a
   tem ativa sem nunca ter pedido nada: suprimir o filtro ali apagava o efeito
   inteiro e a carta voltava a nao ter marca nenhuma na ficha. O que o ruido faz e
   um tremor de poucos pixels na moldura, nao deslocamento de conteudo. */
@media (prefers-reduced-motion: reduce) {
  .player-hud.has-foco-poder { animation: none; box-shadow: 0 0 18px rgba(192, 132, 252, 0.45); }
  .foco-eletrico-brilho { animation: none; opacity: 0.75; }
}

/* ============================================================
   PESO DO ARCANO (armadilha): a bola de custo azul fica VERMELHA
   enquanto a armadilha estiver em campo. E o unico sinal de que a
   mao inteira ficou 1 de Energia mais cara — o numero sozinho nao
   denuncia nada, porque ninguem decora o custo de cada carta.
   ============================================================ */
.card-cost.custo-agravado {
  border-color: #fecaca;
  background: radial-gradient(circle at 34% 28%, #fca5a5, #dc2626 58%, #450a0a 60%);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.55);
  animation: pulse-custo-agravado 1.8s infinite ease-in-out;
}

@keyframes pulse-custo-agravado {
  0%, 100% { box-shadow: 0 0 12px rgba(248, 113, 113, 0.4); }
  50% { box-shadow: 0 0 22px rgba(248, 113, 113, 0.85); }
}

/* ============================================================
   BRACO TREMULO (armadilha): o heroi sorteado leva uma tarja no
   retrato, para a mesa inteira saber de quem os ataques estao
   saindo pela metade. Fica no rodape do retrato, junto da marca
   do abate — as duas nunca disputam o mesmo lugar porque a marca
   do Chefe so existe na Camara Final.
   ============================================================ */
.portrait-container .dano-metade-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(0deg, rgba(67, 20, 7, 0.96) 0%, rgba(124, 45, 18, 0.86) 100%);
  border-top: 1px solid rgba(251, 146, 60, 0.7);
  color: #fed7aa;
  z-index: 6;
  pointer-events: auto;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
}

.portrait-container .dano-metade-badge .dano-metade-icon {
  font-size: 0.75rem;
  filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.9));
}

.portrait-container .dano-metade-badge .dano-metade-text {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A marca do abate (Chefe) manda no rodape do retrato: quando as duas coincidem,
   o Braco Tremulo sobe para a faixa de cima em vez de sumir por baixo dela. */
.portrait-container:has(.acougueiro-mark-badge) .dano-metade-badge {
  bottom: auto;
  top: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(251, 146, 60, 0.7);
}

/* ============================================================
   SELO "IMPOSSIVEL DE SER REMOVIDA": faixa dourada atravessada
   sobre a arte da armadilha. Toda armadilha faz o teste (30%) ao
   entrar em campo, entao o selo tem de saltar aos olhos — e ele
   que diz se vale a pena gastar uma carta de remocao nesta rodada.
   Fica na base da arte, acima do rodape, para nao brigar com o
   selo do nome (canto de cima) nem com o "Desativada" (canto de
   baixo, a direita).
   ============================================================ */
.trap-art .trap-selada {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  top: auto;
  display: block;
  text-align: center;
  border: 1px solid rgba(251, 191, 36, 0.85);
  border-radius: 6px;
  padding: 0.26rem 0.3rem;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95), rgba(69, 26, 3, 0.95));
  color: #fde68a;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  animation: pulse-trap-selada 2.2s infinite ease-in-out;
}

/* com a armadilha desativada, o "Desativada (N rod.)" ocupa o canto de baixo:
   o selo sobe um degrau para os dois nao se sobreporem */
.trap-art .trap-off ~ .trap-selada,
.trap-art:has(.trap-off) .trap-selada {
  bottom: 40px;
}

@keyframes pulse-trap-selada {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.3); border-color: rgba(251, 191, 36, 0.55); }
  50% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.75); border-color: rgba(251, 191, 36, 1); }
}

/* ============================================================
   CARIMBO "DENIED" — monstro impedido de agir
   O selo chega de MUITO longe (escala 9, desfocado, torto), bate
   na carta do monstro e assenta com um esmagamento. No instante
   do impacto saem a onda de choque e o tremor da carta: os tres
   sao disparados pelo mesmo relogio (atraso de animacao), entao
   caem sempre no mesmo quadro.
   Marcas do tempo: voo comeca em 700ms (a carta ja entrou),
   impacto em ~1025ms, tudo assentado em 1200ms.
   ============================================================ */
.carimbo-denied {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 30;
  pointer-events: none;
}

.carimbo-denied .carimbo-texto {
  display: block;
  padding: 0.14em 0.34em;
  border: 0.11em solid #ff3b30;
  border-radius: 10px;
  outline: 0.04em solid rgba(255, 59, 48, 0.45);
  outline-offset: 0.07em;
  background: rgba(69, 10, 10, 0.28);
  color: #ff544a;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 59, 48, 0.75), 0 4px 10px rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 30px rgba(255, 59, 48, 0.45), inset 0 0 22px rgba(255, 59, 48, 0.25);
  transform: rotate(-38deg) scale(9);
  opacity: 0;
  animation: carimbo-stomp 500ms cubic-bezier(0.22, 1.2, 0.36, 1) 700ms forwards;
}

/* onda de choque: nasce no impacto e se abre para fora */
.carimbo-denied .carimbo-onda {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 10px solid rgba(255, 59, 48, 0.8);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.15);
  animation: carimbo-onda 460ms ease-out 1025ms forwards;
}

@keyframes carimbo-stomp {
  0%   { transform: rotate(-38deg) scale(9);    opacity: 0;   filter: blur(16px); }
  30%  { opacity: 0.85; }
  65%  { transform: rotate(-13deg) scale(1.04); opacity: 1;   filter: blur(0); }
  /* o esmagamento: o selo afunda na carta antes de assentar */
  80%  { transform: rotate(-13deg) scale(0.88); }
  92%  { transform: rotate(-13deg) scale(1.05); }
  100% { transform: rotate(-13deg) scale(1);    opacity: 1;   filter: blur(0); }
}

@keyframes carimbo-onda {
  0%   { transform: scale(0.15); opacity: 0.85; border-width: 10px; }
  100% { transform: scale(2.6);  opacity: 0;    border-width: 1px; }
}

/* a carta leva a pancada: tremor curto, no quadro do impacto */
.spotlight-impedido .spotlight-card-wrap {
  animation: carimbo-tremor 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1025ms both;
}

@keyframes carimbo-tremor {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12% { transform: translate3d(-7px, 5px, 0) rotate(-1.2deg); }
  26% { transform: translate3d(6px, -4px, 0) rotate(1deg); }
  42% { transform: translate3d(-5px, 3px, 0) rotate(-0.6deg); }
  58% { transform: translate3d(4px, -2px, 0) rotate(0.4deg); }
  76% { transform: translate3d(-2px, 1px, 0) rotate(0deg); }
}

/* A CARTA PERDE A COR NO IMPACTO, e nao antes.
   A cor precisa cair QUANDO o selo bate — e o que liga uma coisa a outra. Aqui
   nao dava para usar `transition ... delay`: o elemento ja nasce com a classe, e
   transicao so anima quando o valor MUDA depois de o elemento estar na tela, entao
   a carta aparecia cinza desde o primeiro quadro. E tambem nao dava para animar
   `filter` no wrap: filtro no pai pinta os filhos junto, e o selo vermelho iria
   junto para o cinza. Sobra a classe `carimbo-bateu`, posta no quadro do impacto,
   com a transicao morando na carta. */
.spotlight-impedido .spotlight-card-wrap .monster-card {
  transition: filter 280ms ease;
}

.spotlight-impedido.carimbo-bateu .spotlight-card-wrap .monster-card {
  filter: grayscale(0.55) brightness(0.82);
}

.spotlight-action-text .action-verb.impedido {
  color: #ff544a;
}

.spotlight-action-text .action-impedido-sub {
  display: block;
  margin-top: 6px;
  color: #cfc5aa;
  font-size: 0.92rem;
  font-weight: 700;
}

/* O CARIMBO NAO SE DESLIGA COM "prefers-reduced-motion".
   Havia aqui um bloco que, com a preferencia de menos animacao ligada no sistema
   (Windows: Acessibilidade > Efeitos visuais > Efeitos de animacao), punha o selo
   ja assentado e a carta ja em preto e branco — ou seja, o efeito inteiro sumia e
   sobrava um "DENIED" escrito por cima da carta, sem voo, sem impacto, sem nada.
   Foi exatamente o que aconteceu na maquina do Brugo, e nao e um caso raro: essa
   preferencia vem ligada em muita instalacao do Windows.
   A cinematica desta masmorra e o jogo — o banner de turno, a entrada do monstro,
   o spotlight, o tremor da carta: NADA disso consulta a preferencia. Este selo
   nao podia ser a unica peca que se apaga sozinha, ainda mais sendo a unica
   maneira de ver que a carta de controle funcionou.
   Se um dia fizer falta, o caminho e um interruptor DENTRO do jogo ("menos
   animacoes"), que o jogador liga sabendo o que esta desligando. */

/* ============================================================
   BALAO DAS CONDICOES (marcas de status da carta do monstro)
   ============================================================
   Substitui o `title` do HTML nas marcas de condicao: aquele balao do navegador
   demora quase um segundo para abrir, some ao menor movimento do mouse e chega
   sem cor nenhuma. Este vive fora da carta (position: fixed) porque a carta tem
   overflow: hidden e cortaria qualquer coisa maior que ela. */
.status-tip {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.status-tip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.status-tip.is-above {
  transform: translateY(6px) scale(0.96);
}

.status-tip.is-above.visible {
  transform: translateY(0) scale(1);
}

.status-tip-card {
  position: relative;
  width: max-content;
  max-width: 268px;
  box-sizing: border-box;
  padding: 9px 12px 10px;
  border: 1px solid rgba(255, 215, 133, 0.55);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 0%, rgba(52, 40, 28, 0.99), rgba(16, 12, 12, 0.99)),
    linear-gradient(180deg, rgba(26, 20, 18, 0.99), rgba(10, 8, 8, 1));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 215, 133, 0.14),
    inset 0 1px 0 rgba(255, 235, 190, 0.14);
}

/* a setinha aponta para a marca; --tip-arrow-x vem do posicionamento em JS */
.status-tip-card::before {
  content: "";
  position: absolute;
  left: var(--tip-arrow-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: rgba(30, 23, 20, 1);
  border: 1px solid rgba(255, 215, 133, 0.55);
}

.status-tip.is-below .status-tip-card::before {
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}

.status-tip.is-above .status-tip-card::before {
  bottom: -6px;
  border-left: 0;
  border-top: 0;
}

.status-tip-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 215, 133, 0.22);
}

.status-tip-head strong {
  color: #ffd785;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-tip-icon {
  font-size: 1.05rem;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(255, 215, 133, 0.55));
}

.status-tip-text {
  margin: 0;
  color: #f3e6cd;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.42;
}

/* ============================================================
   MORTE DE MONSTRO — o monstro nao fica cinza, ele e destruido
   ============================================================
   A sequencia inteira e conduzida pelo GSAP em vfx.js (clarao, hit-stop,
   tremor, cacos com gravidade, brasas, alma). Daqui vem so a APARENCIA
   das pecas: posicao, cor e forma. Tudo que se move e movido de la, porque
   os cacos precisam de velocidade e giro proprios — coisa que keyframe nao
   sabe fazer.

   O palco vive fora do #app (ver o comentario no topo de vfx.js): o render()
   reescreve o #app inteiro e levaria a animacao junto no meio do caminho.
   ============================================================ */

#vfx-palco {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

.vfx-morte {
  position: fixed;
  pointer-events: none;
  will-change: transform;
}

/* a copia da carta, ainda colorida — e ela que estoura antes de quebrar */
.vfx-morte-corpo {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

/* o branco que cobre a carta no quadro do impacto */
.vfx-morte-clarao {
  position: absolute;
  inset: -2px;
  z-index: 3;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #ffd9a0 38%, rgba(255, 90, 40, 0.55) 68%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}

.vfx-morte-cacos {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Cada caco e uma JANELA com a arte inteira dentro, deslocada pelo negativo da
   propria posicao (vfx.js monta a conta). Assim o recorte bate com a carta sem
   precisar saber o tamanho natural da imagem. A borda clara de um lado e a
   sombra do outro sao o que fazem o pedaco ler como "quebrado" e nao como
   "quadrado da imagem". */
.vfx-morte-caco {
  position: absolute;
  overflow: hidden;
  will-change: transform;
  box-shadow:
    inset 1px 1px 0 rgba(255, 226, 180, 0.42),
    inset -1px -1px 0 rgba(0, 0, 0, 0.75);
}

.vfx-morte-caco-arte {
  background-position: center;
  background-size: cover;
  filter: brightness(1.25) saturate(0.75);
}

.vfx-morte-brasa {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #ffb038 42%, #e2380f 100%);
  box-shadow: 0 0 10px rgba(255, 150, 50, 0.95);
  will-change: transform;
}

/* Aqui morava uma ONDA DE CHOQUE: um anel laranja que nascia no centro da carta
   e abria para fora, na mesma ideia do carimbo "DENIED". Saiu a pedido do Brugo
   em 2026-08-05 — como ela e um circulo perfeito e crescia ate quase o tamanho
   do tabuleiro, lia como uma "borda redonda em volta da animacao inteira" em vez
   de leitura de impacto, e competia com os cacos, que sao a parte que importa.
   Se um dia voltar: o desenho era um `border` grosso com `border-radius: 50%`,
   animado de `scale(0.12)` a `scale(3.2)` (4.6 no Chefe) sumindo em 550ms. */

/* A ALMA. E o unico movimento lento da sequencia — depois do estouro, do
   tremor e dos cacos, alguma coisa precisa subir devagar para o golpe ter
   desfecho em vez de so parar. */
   Ela e a UNICA coisa que ainda nasce no meio da carta, entao esta propositalmente
   difusa: gradiente que se apaga cedo e desfoque grande, para ler como um clarao
   que sobe e nao como uma bola desenhada ali. */
.vfx-morte-alma {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 6;
  width: 72%;
  aspect-ratio: 1;
  margin-left: -36%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 240, 255, 0.55) 0%, rgba(140, 195, 255, 0.22) 34%, transparent 66%);
  filter: blur(14px);
  opacity: 0;
}

/* clarao de tela cheia: no monstro comum e um lampejo; no Chefe cega mesmo */
.vfx-clarao-tela {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 244, 214, 0.9), rgba(255, 130, 60, 0.35) 45%, transparent 78%);
  opacity: 0;
}

.vfx-clarao-tela.chefe {
  background: radial-gradient(circle at 50% 45%, #fff, rgba(255, 214, 150, 0.75) 40%, rgba(255, 90, 40, 0.3) 70%, transparent 100%);
}

/* A CARTA NAO VOLTA. Ela fica invisivel enquanto os cacos voam — quem esta na
   tela naquele intervalo e a copia — e depois sai da fileira de vez (o app.js
   para de desenha-la e o Flip fecha o buraco). Uma carta que se despedaçou e
   reaparece em preto e branco com o selo "DERROTADO" faz parecer que ha duas
   copias do monstro e que a explosao foi noutra carta.

   Aqui e `visibility` e nao `display`: durante o estilhaco a carta precisa
   continuar OCUPANDO o lugar dela. Se saisse do layout ja neste instante, as
   cartas vizinhas deslizariam enquanto os pedacos ainda estao voando, e o numero
   do dano do golpe final — que e posicionado a partir do retangulo desta carta —
   nasceria no lugar errado. */
.monster-card--morrendo {
  visibility: hidden;
}