/*
 * JANELA — Raids (26/08)
 *
 * DOIS painéis do jogo moram aqui: a LISTA (`.panel.raids`, 5 cartões de
 * raid) e a LUTA (`.panel.raid-battle`, a cena de combate contra o chefe).
 * O React troca um pelo outro sem passar pelo menu — ver `raids.js`.
 *
 * ── A LISTA ────────────────────────────────────────────────────────────
 * Cada `.raid-card` é uma grade própria de 4 colunas × 3 linhas:
 *
 *   ┌────────┬──────────────────────┬──────────┬────────────┐
 *   │        │ nome · chefe         │  prêmio  │  Desafiar  │
 *   │  boss  │ recarga              │  (ícone) │            │
 *   │        │                      │          │   Rank     │
 *   │        ├──────────────────────┴──────────┴────────────┤
 *   │        │ fileira dos 10 níveis · nível · poder rec.    │
 *   └────────┴────────────────────────────────────────────────┘
 *
 * `.panel.raids` vira coluna que ROLA por dentro (cabeçalho `sticky`); nada
 * rola de lado, e em 844×390 é a rolagem — não fonte de 3px — que resolve a
 * falta de altura.
 *
 * 🚨 O botão "Rank" (`.rr-btn`) é de OUTRO shim (`raidrank/index.js`), que o
 * posiciona por JS com `position:absolute` + `left/top` medidos do botão
 * "Desafiar" a cada pintura, e reserva espaço com `padding-bottom` inline no
 * cartão. Aqui ele veste `position:static!important` e ganha uma CÉLULA
 * própria na grade (embaixo do Desafiar) — o `left/top` inline passa a não
 * fazer nada (só vale para elemento posicionado) e o `padding-bottom` inline
 * é neutralizado pelo `!important` no padding do cartão. Testado nos dois
 * estados: com Rank (raid disponível) e sem ele (raid em recarga, nível
 * nunca jogado — o outro shim não cria o botão se não achar "Desafiar").
 *
 * ── A LUTA ─────────────────────────────────────────────────────────────
 * `.panel.raid-battle` vira grade: nome+timer com o "Desistir" ao lado (não
 * embaixo — sobra altura pro resto), a cena 16:9 no meio encolhendo pelo que
 * sobra (`minmax(0,1fr)`), e HP · skills · dano compactos embaixo. Antes
 * disso a fileira de skills saía cortada pela borda da janela (cena fixa
 * grande demais, sem `min-height:0`).
 *
 * `.hpbar`, `.skillbar`, `.scene` etc. são classes do HUD de COMBATE
 * normal, reusadas aqui — por isso todo seletor delas vem preso a
 * `.panel.raid-battle` na frente: sem isso a regra vazaria para a HUD real,
 * que continua viva (mas escondida atrás do véu) enquanto a janela está
 * aberta.
 *
 * Ver o contrato em www/rpg/CONTRATO.md. Validar com:
 *   node ferramentas/foto.mjs raids
 *   node ferramentas/inspetor-janela.mjs raids
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. A LISTA — `.panel.raids`
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='raids'] .panel.raids {
  /* 🚨 `!important`: o kit crava `display:block!important` no conteúdo
     marcado; sem repetir a marca aqui a coluna nunca liga. */
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  gap: calc(10px * var(--rpg-un, 1));
  padding: 0 calc(14px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #8a7255 #100a05;
}
html[data-rpgw='raids'] .panel.raids::-webkit-scrollbar { width: calc(8px * var(--rpg-un, 1)) }
html[data-rpgw='raids'] .panel.raids::-webkit-scrollbar-track { background: #100a05; border-radius: 999px }
html[data-rpgw='raids'] .panel.raids::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b5a3f, #3f3120);
  border-radius: 999px;
}
/* 🚨 A ROLAGEM NÃO SE ANUNCIA SOZINHA: o navegador de captura usa barra
   overlay (não ocupa largura, `offsetWidth === clientWidth`), então o único
   sinal de "tem mais raid abaixo" era o 3º cartão literalmente decepado no
   meio da fileira de níveis — lê como bug de render, não como lista longa.
   Esta faixa (mesma receita do degradê fixo no topo, `.raids__header`) é o
   ÚLTIMO filho, `sticky` no fundo: sobrepõe o corte com um esmaecimento que
   avisa "role", e desaparece sozinha quando o scroll chega no fim de
   verdade (a última linha real some por baixo dela, então ela nunca some —
   por isso a margem negativa: ela não some, só encolhe pra caber). */
html[data-rpgw='raids'] .panel.raids::after {
  content: '';
  order: 999;
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  width: 100%;
  height: calc(38px * var(--rpg-un, 1));
  margin-top: calc(-38px * var(--rpg-un, 1));
  background: linear-gradient(180deg, #100a0500 0%, #100a05 55%);
  pointer-events: none;
}

/* ── cabeçalho: fica preso no topo enquanto a lista rola ──────────────
   O ícone e o "Raids" já estão no cabeçalho do quadro do kit — repeti-los
   aqui só duplicaria a mesma palavra dois centímetros abaixo. Só a dica
   ("Derrote o chefe…") sobra, e vira a legenda fixa da lista. */
html[data-rpgw='raids'] .raids__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin: 0 calc(-14px * var(--rpg-un, 1)) 0;
  padding: calc(10px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1));
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-a) 78%, #24160900 100%);
}
html[data-rpgw='raids'] .raids__header > img,
html[data-rpgw='raids'] .raids__header h2 {
  display: none;
}
html[data-rpgw='raids'] .raids__hint {
  margin: 0;
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 15px);
  color: var(--rpg-tinta-2);
}

/* ── estado vazio ──────────────────────────────────────────────────── */
html[data-rpgw='raids'] .raids__empty {
  margin: calc(30px * var(--rpg-un, 1)) auto;
  max-width: calc(280px * var(--rpg-un, 1));
  padding: 0;
  text-align: center;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  line-height: 1.5;
  color: var(--rpg-tinta-2) !important;
}

/* ── o cartão de cada raid ─────────────────────────────────────────── */

html[data-rpgw='raids'] .panel.raids .raid-card {
  /* 🚨 A moldura de pedra do jogo (`border-image: moldura.webp`) é o
     desenho ANTIGO, em px cravado — sai. Entra o cartão-poço do kit. */
  display: grid !important;
  /* 🚨 CINCO colunas, não quatro: entre o texto e o prêmio mora uma coluna
     VAZIA e flexível (`minmax(0,1fr)`), sem elemento nenhum dentro dela — só
     ela absorve a sobra de largura. Antes, quem sobrava era a própria coluna
     de texto (também `1fr`), que crescia bem além do nome/recarga e deixava
     um vão de nada ENTRE o fim do texto e o selo de prêmio (medido: ~45% da
     largura do cartão). Com o texto do tamanho do próprio conteúdo
     (`max-content`) e a folga isolada numa coluna própria, o vazio vira uma
     respiração ENTRE dois blocos — não um buraco no meio de um bloco só. */
  grid-template-columns: calc(76px * var(--rpg-un, 1)) minmax(0, max-content) minmax(0, 1fr) auto auto;
  grid-template-rows: auto calc(28px * var(--rpg-un, 1)) auto;
  align-items: center;
  column-gap: calc(16px * var(--rpg-un, 1));
  row-gap: calc(3px * var(--rpg-un, 1));
  /* O teto agora é só pra não deixar a coluna-respiro (acima) esticar até
     virar um vão exagerado em telas muito largas — não pra esconder um
     buraco interno, que a coluna dedicada já resolveu. */
  width: 100%;
  max-width: calc(1000px * var(--rpg-un, 1));
  margin-inline: auto;
  flex: 0 0 auto;
  padding: calc(12px * var(--rpg-un, 1)) !important;
  border: calc(1px * var(--rpg-un, 1)) solid #9c7c4e40;
  border-image: none !important;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
}

/* Raid em recarga: continua legível, só perde um pouco de força — quem lê
   "24:17" já entendeu que não é agora, não precisa de cinza-morto. */
html[data-rpgw='raids'] .panel.raids .raid-card[data-available='false'] .raid-card__boss {
  filter: grayscale(0.7) brightness(0.68) drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(3px * var(--rpg-un, 1)) #000a);
}
html[data-rpgw='raids'] .panel.raids .raid-card[data-available='false'] .raid-card__nome {
  color: var(--rpg-tinta-2) !important;
}

/* boss ── */
html[data-rpgw='raids'] .panel.raids .raid-card__palco {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
  width: calc(76px * var(--rpg-un, 1));
  height: calc(76px * var(--rpg-un, 1));
  display: grid;
  place-items: center;
  border-radius: calc(12px * var(--rpg-un, 1));
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1f;
  overflow: hidden;
}
html[data-rpgw='raids'] .panel.raids .raid-card__boss {
  width: 82% !important;
  max-width: 82% !important;
  height: auto !important;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 calc(3px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}

/* nome · chefe · recarga ── */
html[data-rpgw='raids'] .panel.raids .raid-card__texto {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--rpg-un, 1));
  min-width: 0;
}
html[data-rpgw='raids'] .panel.raids .raid-card__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(9.5px, calc(17px * var(--rpg-un, 1)), 22px);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--rpg-tinta) !important;
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  text-shadow: none !important;
}
html[data-rpgw='raids'] .panel.raids .raid-card__desc {
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  line-height: 1.2;
  color: var(--rpg-tinta-2) !important;
}
html[data-rpgw='raids'] .panel.raids .raid-card__recarga {
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
  color: var(--rpg-tinta-3) !important;
}

/* prêmio (ícone + quantidade do nível escolhido + quanto o jogador tem) ── */
html[data-rpgw='raids'] .panel.raids .raid-card__premio {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: calc(7px * var(--rpg-un, 1));
  row-gap: 0;
  justify-self: auto;
  justify-content: unset;
  padding: calc(4px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1));
  border-radius: 999px;
  /* 🚨 CORRIGIDO (14/09, achado do Zerg): #0c0e12 é preto de TOM FRIO
     (B>G>R) — mesma família do tema azul antigo, mesmo escondido num
     "quase preto". Trocado pro poço madeira (--rpg-poço, #100a05, o
     mesmo "buraco: trilho de barra, slot vazio" usado no resto do kit). */
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
}
html[data-rpgw='raids'] .panel.raids .raid-card__premio img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  object-fit: contain;
}
html[data-rpgw='raids'] .panel.raids .raid-card__premio b {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(9px, calc(14px * var(--rpg-un, 1)), 18px);
  font-weight: 800;
  color: var(--rpg-ouro) !important;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  text-shadow: none !important;
}
html[data-rpgw='raids'] .panel.raids .raid-card__premio span {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(9px, calc(9.5px * var(--rpg-un, 1)), 12.5px);
  white-space: nowrap;
  color: var(--rpg-tinta-3) !important;
}

/* Desafiar — a ÚNICA ação de verdade do cartão (entra na raid, gasta o
   bilhete): é ela quem veste o dourado do kit, não o seletor de nível. Antes
   Desafiar era azul e o nível escolhido é que saía pintado de dourado — o
   olho caía no número antes de cair no botão que precisa ser apertado. */
html[data-rpgw='raids'] .panel.raids .raid-card__go {
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
  width: auto;
  min-height: calc(34px * var(--rpg-un, 1));
  padding: 0 calc(18px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008;
  color: #2a1200;
  font-size: clamp(9px, calc(14px * var(--rpg-un, 1)), 18px);
  font-weight: 700;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  text-shadow: none;
  cursor: pointer;
  transition: filter 0.12s ease;
}
html[data-rpgw='raids'] .panel.raids .raid-card__go:hover { filter: brightness(1.14) }
html[data-rpgw='raids'] .panel.raids .raid-card__go:active { filter: brightness(0.94) }

/* Em recarga: um MOSTRADOR, não um botão — sem borda nem relevo de pressão,
   a mesma pílula neutra que o resto do kit usa pra valor só-leitura
   (`.rpg-pill`). Com borda + realce ela tinha a cara clicável do RANK ao
   lado, ocupando o lugar de onde o Desafiar acabou de sair. */
html[data-rpgw='raids'] .panel.raids .raid-card__cooldown {
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
  width: auto;
  min-height: calc(34px * var(--rpg-un, 1));
  padding: 0 calc(14px * var(--rpg-un, 1));
  display: flex;
  align-items: center;
  gap: calc(5px * var(--rpg-un, 1));
  border: none;
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  color: var(--rpg-tinta-3) !important;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: none !important;
  cursor: default;
}
html[data-rpgw='raids'] .panel.raids .raid-card__cooldown::before {
  content: '⏳';
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}

/* Rank — de outro shim; ver o comentário grande no topo do arquivo.
   🚨 `text-transform:none`: sem isso o "Rank" (caixa mista, de propósito —
   é o `textContent` que o shim escreve) some atrás de um CAPS que não é
   nosso nem dele; e o tamanho sobe (era pequeno demais) pra não destoar
   tanto do peso visual do Desafiar logo acima, ambos na família tipográfica
   do kit (mesmo `paint-order`/contorno das pílulas). */
html[data-rpgw='raids'] .rr-btn {
  position: static !important;
  grid-column: 5;
  grid-row: 2;
  align-self: stretch;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  min-height: calc(24px * var(--rpg-un, 1)) !important;
  height: auto !important;
  padding: 0 calc(10px * var(--rpg-un, 1)) !important;
  margin: 0 !important;
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255 !important;
  border-radius: var(--rpg-raio-p) !important;
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%) !important;
  box-shadow: none !important;
  color: var(--rpg-tinta-2) !important;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  z-index: auto !important;
}
/* CORRIGIDO (madeira+bronze, 14/09): hover era troca de borda pra azul-claro
   (#71b1da) — vira a mesma receita do `.rpg-btn` do kit (só realce de brilho,
   sem trocar cor de borda), em vez de inventar um segundo bronze. */
html[data-rpgw='raids'] .rr-btn:hover {
  filter: brightness(1.14) !important;
  color: var(--rpg-tinta) !important;
}
html[data-rpgw='raids'] .rr-btn:focus-visible {
  outline: calc(2px * var(--rpg-un, 1)) solid var(--rpg-ouro) !important;
  outline-offset: calc(2px * var(--rpg-un, 1)) !important;
}

/* ── a fileira dos 10 níveis + a linha de prêmio do nível ───────────── */

html[data-rpgw='raids'] .rn {
  grid-column: 2 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--rpg-un, 1));
  margin: 0;
  padding-top: calc(8px * var(--rpg-un, 1));
  border-top: calc(1px * var(--rpg-un, 1)) solid #ffffff1a;
}
html[data-rpgw='raids'] .rn__rot {
  display: flex;
  align-items: baseline;
  gap: calc(8px * var(--rpg-un, 1));
  margin: 0;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3) !important;
}
html[data-rpgw='raids'] .rn__rot em {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rpg-tinta-2) !important;
}
html[data-rpgw='raids'] .rn__niveis {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .rn__nivel {
  min-width: calc(26px * var(--rpg-un, 1));
  height: calc(26px * var(--rpg-un, 1));
  padding: 0 calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  border-radius: calc(6px * var(--rpg-un, 1));
  background: var(--rpg-poço);
  color: var(--rpg-tinta-3);
  font: inherit;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
html[data-rpgw='raids'] .rn__nivel:hover:not(:disabled) {
  border-color: #ffffff44;
  color: var(--rpg-tinta);
}
/* O nível escolhido: só o CONTORNO e o NÚMERO ficam dourados — como o valor
   de um atributo no Perfil, não como um botão. Antes era um bloco cheio
   (mesmo gradiente do CTA) e, com 3 a 5 cartões na tela ao mesmo tempo, virava
   um segundo dourado brigando com o Desafiar — o contrato pede um só. */
html[data-rpgw='raids'] .rn__nivel[aria-pressed='true'] {
  border-color: var(--rpg-aro-ouro);
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffc94a55;
  color: var(--rpg-ouro);
}
html[data-rpgw='raids'] .rn__nivel:focus-visible {
  outline: calc(2px * var(--rpg-un, 1)) solid var(--rpg-ouro);
  outline-offset: calc(2px * var(--rpg-un, 1));
}
/* Travado: tracejado + cadeado (já no texto do botão) — "help" no cursor
   convida a passar o mouse e ler quantos isekais faltam, no `title`. */
html[data-rpgw='raids'] .rn__nivel[data-liberado='0'] {
  border-style: dashed;
  border-color: #ffffff26;
  opacity: 0.55;
  cursor: help;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
}

html[data-rpgw='raids'] .rn__premio {
  margin: 0;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  line-height: 1.35;
  color: var(--rpg-tinta-2) !important;
}
html[data-rpgw='raids'] .rn__premio b {
  color: var(--rpg-ouro) !important;
}
html[data-rpgw='raids'] .rn__meu {
  font-style: normal;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-3) !important;
}
/* Poder recomendado: verde quando o jogador alcança, âmbar quando falta —
   nunca vermelho, "falta poder" é indisponibilidade, não perigo. */
html[data-rpgw='raids'] .rn__rec {
  display: inline-block;
  padding: calc(1px * var(--rpg-un, 1)) calc(7px * var(--rpg-un, 1));
  border-radius: 999px;
  border: calc(1px * var(--rpg-un, 1)) solid currentColor;
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
html[data-rpgw='raids'] .rn__rec[data-ok='1'] {
  color: var(--rpg-bom) !important;
  background: rgb(143 216 23 / 0.14);
}
html[data-rpgw='raids'] .rn__rec[data-ok='0'] {
  color: var(--rpg-ambar) !important;
  background: rgb(255 161 41 / 0.14);
  border-width: calc(2px * var(--rpg-un, 1));
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. A LUTA — `.panel.raid-battle`
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='raids'] .panel.raid-battle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  min-height: 0;
  padding: calc(12px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
}

/* nome da raid + timer — "Desistir" mora ao lado (ver mais abaixo), não
   embaixo: em 844×390 cada linha a menos é altura que sobra pra cena. */
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__head {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(9px, calc(16px * var(--rpg-un, 1)), 21px);
  font-weight: 800;
  color: var(--rpg-tinta);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__timer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: calc(22px * var(--rpg-un, 1));
  padding: 0 calc(10px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #100a05cc;
  box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff24;
  color: var(--rpg-ouro) !important;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  font-weight: 800;
  white-space: nowrap;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__timer[data-low='true'] {
  color: var(--rpg-perigo) !important;
}

html[data-rpgw='raids'] .panel.raid-battle .raid-battle__surrender {
  grid-column: 2;
  grid-row: 1;
  min-height: calc(26px * var(--rpg-un, 1));
  padding: 0 calc(12px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
/* Vermelho só aparece ao passar o mouse — é o convite pra pensar duas vezes
   antes de desistir, sem deixar o botão gritando perigo o tempo todo. */
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__surrender:hover {
  border-color: var(--rpg-perigo);
  color: var(--rpg-perigo);
}

/* a cena 16:9 — a MAIOR caixa 16:9 que cabe na faixa (largura do vão ×
   altura que sobra depois do cabeçalho, HP, habilidades e dano). `width:100%`
   + `height:100%` juntos deixavam o `aspect-ratio` morto: com as DUAS
   dimensões já definidas pela faixa (que quase nunca é 16:9 — a faixa é a
   diferença entre a altura do painel e a soma das outras quatro linhas), o
   navegador não tinha eixo livre para aplicar a proporção, e a cena saía
   esmagada (2,7:1 em vez de 1,78:1), sobrando tarja lisa embaixo do desenho.
   `calc()` puro não enxerga a altura do avô — o mesmo problema já resolvido
   na HUD de combate (`--hud16-pw/ph`) — então `raids.js` mede a faixa
   (`medirCenaLuta`) e publica `--raid-cena-w/h`; aqui só o `var()`. */
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  min-height: 0;
  min-width: 0;
  width: var(--raid-cena-w, 100%);
  height: var(--raid-cena-h, 100%);
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: var(--rpg-raio-p);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a,
    0 calc(6px * var(--rpg-un, 1)) calc(18px * var(--rpg-un, 1)) #0008;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .scene__hud {
  inset: calc(20px * var(--rpg-un, 1)) calc(8px * var(--rpg-un, 1)) auto;
  gap: calc(8px * var(--rpg-un, 1));
}
/* 🚨 A PLACA DO CHEFE NÃO RENDERIZAVA: `html[data-hud16] .enemy-plate` (a
   folha da HUD de combate, que continua ativa por baixo do véu) crava
   `display:none!important`, e nenhuma regra daqui tinha `!important` pra
   vencer — o nó existia, tinha o texto certo, e computava largura/altura
   zero. Sem ela, a raid inteira (o ponto é derrubar milhões de HP) não dava
   nenhum retorno de progresso. A moldura pintada do jogo (`border-image`,
   preta, do painel FORA do palco 16:9) também é o desenho antigo — sai pelo
   mesmo motivo que saiu do `.raid-card`: entra o poço + aro do kit. */
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate {
  display: flex !important;
  width: min(calc(320px * var(--rpg-un, 1)), 80%);
  padding: calc(9px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  gap: calc(9px * var(--rpg-un, 1));
  border-image: none !important;
  border-radius: calc(12px * var(--rpg-un, 1));
  background: linear-gradient(180deg, #241609e6 0%, #100a05e6 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1f,
    0 calc(4px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1)) #0008;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate__face {
  width: calc(42px * var(--rpg-un, 1));
  height: calc(42px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate__body {
  gap: calc(3px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate__name {
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  color: var(--rpg-tinta) !important;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
  text-shadow: none !important;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate__bar {
  height: calc(16px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__scene .enemy-plate__value {
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-2) !important;
}

/* barra de vida do herói — poço + trilho dourado do kit, no lugar do
   retângulo genérico `#00060feb` do bundle. */
html[data-rpgw='raids'] .panel.raid-battle .panel.hpbar {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  width: 100%;
  min-height: calc(26px * var(--rpg-un, 1));
  height: auto;
  padding: 0 calc(12px * var(--rpg-un, 1));
  border-radius: 999px;
  background: var(--rpg-poço);
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
  pointer-events: none;
}
html[data-rpgw='raids'] .panel.raid-battle .panel.hpbar > span:first-child {
  flex: 0 0 auto;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  line-height: 1;
}
html[data-rpgw='raids'] .panel.raid-battle .panel.hpbar strong {
  flex: 0 0 auto;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rpg-tinta-3) !important;
}
html[data-rpgw='raids'] .panel.raid-battle .panel.hpbar .bar {
  flex: 1 1 auto;
  height: calc(10px * var(--rpg-un, 1));
  border-radius: 999px;
  background: #00000055;
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff1a;
}
html[data-rpgw='raids'] .panel.raid-battle .panel.hpbar .bar::after {
  inset: calc(2px * var(--rpg-un, 1)) auto calc(2px * var(--rpg-un, 1)) calc(2px * var(--rpg-un, 1));
  width: calc(var(--fill, 0%) - calc(4px * var(--rpg-un, 1)));
  background: linear-gradient(180deg, #7ee06a, #2f9e35);
  border-radius: 999px;
}
html[data-rpgw='raids'] .panel.raid-battle .hpbar__value {
  flex: 0 0 auto;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  color: var(--rpg-tinta-2) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* fileira de skills ── */
html[data-rpgw='raids'] .panel.raid-battle .panel.skillbar {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .orb {
  width: calc(42px * var(--rpg-un, 1));
  height: calc(42px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
}
html[data-rpgw='raids'] .panel.raid-battle .orb--auto {
  gap: calc(1px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(7px * var(--rpg-un, 1)), 9px);
}
html[data-rpgw='raids'] .panel.raid-battle .orb--auto img,
html[data-rpgw='raids'] .panel.raid-battle .orb--manage img,
html[data-rpgw='raids'] .panel.raid-battle .orb--seed img {
  width: calc(15px * var(--rpg-un, 1));
  height: calc(15px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .orb__icon {
  width: calc(30px * var(--rpg-un, 1));
  height: calc(30px * var(--rpg-un, 1));
  border-radius: calc(6px * var(--rpg-un, 1));
}
html[data-rpgw='raids'] .panel.raid-battle .orb__auto {
  top: calc(1px * var(--rpg-un, 1));
  right: calc(2px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(8px * var(--rpg-un, 1)), 10.5px);
}
html[data-rpgw='raids'] .panel.raid-battle .orb__cooldown {
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}
html[data-rpgw='raids'] .panel.raid-battle .orb__count {
  right: calc(2px * var(--rpg-un, 1));
  bottom: 0;
  font-size: clamp(9px, calc(8px * var(--rpg-un, 1)), 10.5px);
}
html[data-rpgw='raids'] .panel.raid-battle .orb__level {
  min-width: calc(14px * var(--rpg-un, 1));
  bottom: calc(-2px * var(--rpg-un, 1));
  padding: 0 calc(3px * var(--rpg-un, 1));
  border-width: calc(1px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(8px * var(--rpg-un, 1)), 10.5px);
  line-height: calc(12px * var(--rpg-un, 1));
}

/* rodapé de dano ── */
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__damage {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  justify-content: space-between;
  gap: calc(8px * var(--rpg-un, 1));
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
  color: var(--rpg-tinta-3) !important;
}
html[data-rpgw='raids'] .panel.raid-battle .raid-battle__damage span:last-child:not(:only-child) {
  color: var(--rpg-ambar) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. TELA BAIXA (celular deitado) — a LISTA precisa de âncora de leitura
 *
 * 🚨 Em 844×390 a folha de mesa (acima) inteira multiplicada por
 * `--rpg-un≈0,41` dava fonte de 4-5px em quase tudo — medido: 110 dos 115
 * nós de texto da janela abaixo de 6px, o MAIOR (o nome da raid) com 6,96px.
 * `--rpg-un` encolhe a JANELA inteira de propósito (celular não é mesa em
 * miniatura); o que faltava era esta camada, como a Loja já tem: números
 * `Npx` MAIORES, calibrados pra este palco baixo, não pro de 1280 — e menos
 * texto por cartão, porque cabe menos.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 520px) {
  /* A dica ("Derrote o chefe…") já foi lida na primeira vez que a janela
     abriu — em tela baixa ela só rouba altura da lista. */
  html[data-rpgw='raids'] .raids__header {
    padding-bottom: calc(4px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .raids__hint {
    display: none;
  }
  html[data-rpgw='raids'] .panel.raids {
    gap: calc(14px * var(--rpg-un, 1));
  }

  /* ── cartão: boss maior, texto secundário sai, CTA e prêmio crescem ────
     Mesmas CINCO colunas da mesa (boss · texto · respiro · prêmio · ação) —
     só os números mudam de escala. Trocar a contagem de colunas aqui sem
     tocar no `grid-column` do prêmio/CTA os jogaria pra uma coluna
     implícita, fora do desenho. */
  html[data-rpgw='raids'] .panel.raids .raid-card {
    grid-template-columns: calc(112px * var(--rpg-un, 1)) minmax(0, max-content) minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    row-gap: calc(8px * var(--rpg-un, 1));
    column-gap: calc(20px * var(--rpg-un, 1));
    padding: calc(16px * var(--rpg-un, 1)) !important;
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__palco {
    grid-row: 1 / 3;
    width: calc(112px * var(--rpg-un, 1));
    height: calc(112px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__texto {
    align-self: center;
  }
  /* "Chefe: X" some daqui — o nome do chefe também está na linha de prêmio
     do nível (abaixo) e no `title` do botão de nível; três lugares pra dizer
     a mesma coisa na MESMA tela era o que sobrava de espaço pro que falta. */
  html[data-rpgw='raids'] .panel.raids .raid-card__desc {
    display: none;
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__nome {
    font-size: clamp(16.5px, calc(30px * var(--rpg-un, 1)), 39px);
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__recarga {
    font-size: clamp(10px, calc(18px * var(--rpg-un, 1)), 23.5px);
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__premio {
    padding: calc(6px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__premio img {
    width: calc(38px * var(--rpg-un, 1));
    height: calc(38px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__premio b {
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
  }
  /* "você tem N" repete o que a pílula de posse já existe pra dizer noutra
     tela — aqui é o 3º texto minúsculo mais fraco do cartão, sem espaço. */
  html[data-rpgw='raids'] .panel.raids .raid-card__premio span {
    display: none;
  }
  html[data-rpgw='raids'] .panel.raids .raid-card__go,
  html[data-rpgw='raids'] .panel.raids .raid-card__cooldown {
    min-height: calc(54px * var(--rpg-un, 1));
    padding: 0 calc(24px * var(--rpg-un, 1));
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
  }
  /* Rank é o segundo olhar (placar), não o primeiro — em tela de celular
     deitado ele sai pra sobrar altura pro que decide a partida: nível e
     Desafiar. Continua em telas maiores. */
  html[data-rpgw='raids'] .rr-btn {
    display: none !important;
  }

  /* ── fileira de níveis: pílulas maiores, uma linha de prêmio só, sem a
     nota de progresso (isekais feitos) que só interessa em nível travado —
     e esse já mostra tudo no `title` ao toque ─────────────────────────── */
  html[data-rpgw='raids'] .rn {
    grid-column: 2 / -1;
    grid-row: 2;
    padding-top: calc(10px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .rn__rot {
    font-size: clamp(9px, calc(16px * var(--rpg-un, 1)), 21px);
  }
  html[data-rpgw='raids'] .rn__rot em {
    display: none;
  }
  html[data-rpgw='raids'] .rn__niveis {
    gap: calc(8px * var(--rpg-un, 1));
  }
  html[data-rpgw='raids'] .rn__nivel {
    min-width: calc(46px * var(--rpg-un, 1));
    height: calc(46px * var(--rpg-un, 1));
    font-size: clamp(10.5px, calc(19px * var(--rpg-un, 1)), 24.5px);
  }
  html[data-rpgw='raids'] .rn__premio {
    font-size: clamp(9.5px, calc(17px * var(--rpg-un, 1)), 22px);
  }
  html[data-rpgw='raids'] .rn__meu {
    display: none;
  }
  html[data-rpgw='raids'] .rn__rec {
    font-size: clamp(9.5px, calc(17px * var(--rpg-un, 1)), 22px);
    padding: calc(2px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  }
}