/**
 * BASE VISUAL — fundação de CSS compartilhada (18/09/2026).
 *
 * Substitui `assets/index-Can-Rteu.css` (CSS compilado do bundle React
 * original, ~150KB) como fonte de verdade pro que ainda é usado de
 * verdade. Motivo: o jogo já foi reescrito quase inteiro em módulos
 * próprios (Inventário/Loja/Perfil/Talentos/Companions/Combate/as 13
 * janelas do kit `rpg/janela.js`) — mas uma fração pequena e real do CSS
 * antigo ainda é a base que módulos NOVOS constroem em cima, então não
 * dava pra apagar sem reescrever essa base primeiro.
 *
 * O que este arquivo cobre (cada peça verificada por execução real, não
 * suposição):
 * 1. Tokens de design (`:root` — cores/espaçamento/fontes/sombras) — usado
 *    em TODA tela, sempre necessário.
 * 2. Portal/splash + formulário de login/cadastro (`.portal`/`.splash*`/
 *    `.hexbtn*`/`.auth*`/`.field*`) — a única parte do React original que
 *    ainda roda de verdade (auth ainda não foi portado pra módulo próprio).
 * 3. Palco de combate (`.scene`/`.scene-canvas*`/`.game__palco`/
 *    `.game__scroll`) — o `<canvas>` do CombatCanvas (recuperado e
 *    reescrito em 17-18/09, ver `assets/CombatCanvas-CWCkqOUN.js`) É
 *    código nosso, mas o TAMANHO/POSIÇÃO dele no layout ainda vem daqui.
 *    🚨 Sem `.scene-canvas canvas{width:100%;height:100%}` a cena de
 *    combate encolhe pro canto — achado real, quase foi cortado por
 *    engano na 1ª tentativa deste corte (18/09).
 * 4. Base de popup (`.dialog*`) — moldura/fundo/`::backdrop`/animação de
 *    TODO `<dialog>` nativo do jogo (confirmações, detalhes de item) —
 *    ~15-20 módulos próprios (`descarte`, `bolsa-max`, `tirartudo`,
 *    `marcavestir`, `menu-opcoes`, etc.) criam `<dialog class="dialog ...">`
 *    de propósito, reusando esta base em vez de reescrever a mesma
 *    moldura em cada um. As 13 janelas do kit (`rpg/janela.js`) NÃO usam
 *    isto — têm CSS 100% próprio em `rpg/janela.css`.
 * 5. `.panel`/`.tooltip`/`.hpbar`/`.enemy-plate*`/`.pcard*`/`.status` —
 *    mesma lógica do item 4: base compartilhada por várias telas
 *    próprias, não sobra visual de tela substituída.
 * 6. Navegação nativa (`.sidenav*`/`.bottomnav*`/`.scene-atalhos*`/
 *    `.scene__gear`/`.scene__dock`) — ainda lida/controlada por
 *    `hud/index.js`/`batalha/*.js` pra esconder/mostrar conforme o
 *    estado (não é tela visível hoje, mas o CSS de base ainda é lido).
 * 7. Trabalho NOSSO recente, herdado sem alteração nenhuma — telas de
 *    Vitória/Derrota de raid, Renascimento, faixa "Era concluída",
 *    correção de dropdown nativo escuro (datado 07/08 e 20/08 no próprio
 *    comentário abaixo — mantidos peça por peça, byte a byte).
 *
 * O que NÃO está aqui: qualquer regra CSS do React original que não bateu
 * em NENHUM teste real (login+cadastro+13 janelas do kit+combate+popup de
 * confirmação) nem foi encontrada em uso por nenhum dos ~159 arquivos
 * ativos do projeto — ficou em quarentena
 * (`_quarentena/index-Can-Rteu.css.original-18-09.css`), reversível por
 * ~90 dias antes de apagar de vez.
 *
 * Histórico completo da investigação (3 achados que quase quebraram o
 * corte, cada um revertido a tempo): ver memória de sessão
 * `potato-auditoria-legado-nativo-18-09`.
 */

@font-face {
  font-family: Cinzel;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/potato/fonts/cinzel-latin.woff2) format("woff2");
}
:root {
  --surface-abyss: #01060f;
  --surface-base: #010c18;
  --surface-raised: #061a2b;
  --surface-inset: #000610;
  --surface-scrim: rgb(0 4 10 / 0.78);
  --gold-100: #fff3cf;
  --gold-300: #f2d089;
  --gold-500: #dc911e;
  --gold-700: #8a5a1c;
  --gold-900: #341c00;
  --accent-500: #2d72cd;
  --accent-700: #022e55;
  --line-cool: #0d2135;
  --line-cool-2: #1d4463;
  --line-gold: #8a5a1c;
  --ink: #000409;
  --bg: var(--surface-abyss);
  --panel: var(--surface-base);
  --panel-2: var(--surface-raised);
  --panel-dark: var(--surface-inset);
  --border: var(--line-cool);
  --border-2: var(--line-cool-2);
  --gold: var(--gold-300);
  --gold-light: var(--gold-100);
  --on-gold: #2a1a02;
  --text: #e9edf6;
  --muted: #8ea3bd;
  --faint: #55688a;
  --green: #4ade80;
  --green-2: #2fa85c;
  --red: #e5484d;
  --error: #ff5f6a;
  --on-parchment: var(--text);
  --wood-edge: var(--line-gold);
  --wood: var(--surface-raised);
  --wood-dark: var(--surface-base);
  --wood-light: var(--line-cool-2);
  --attr-str: #e5484d;
  --attr-vit: #35c46b;
  --attr-int: #2f8fe0;
  --attr-dex: #eab308;
  --attr-luk: #a855f7;
  --font-display: "Cinzel", "Georgia", serif;
  --fs-100: 10px;
  --fs-200: 11px;
  --fs-300: 12px;
  --fs-400: 13px;
  --fs-500: 15px;
  --fs-600: 18px;
  --fs-700: 24px;
  --fs-900: 34px;
  --lh-tight: 1.1;
  --lh-base: 1.35;
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);
  --e-hair: inset 0 0 0 1px var(--line-cool);
  --e-1: 0 2px 0 rgb(0 0 0 / 0.5);
  --e-2: 0 6px 14px -8px rgb(0 0 0 / 0.85), 0 1px 0 rgb(0 0 0 / 0.6);
  --e-3: 0 18px 40px -12px rgb(0 0 0 / 0.9);
  --glow-gold: 0 0 22px -4px rgb(242 208 137 / 0.45);
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
  --dur-slow: 0.26s;
  --dur-window: 0.22s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.3);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-window: 0ms;
  }
}
* {
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
input {
  font: inherit;
}
/* 19/09, A/B do corte de CSS: o reset global de botão sumiu no corte de 18/09 — todo botão sem fonte própria
   virava Arial 13px, branco, cursor de seta (login, Loja, Invocar, Correio, HUD, menus). Copiado do bundle de produção. */
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.orb--skill:disabled { opacity:1 }
.pet-card:disabled { opacity:1 }
.skill-card__pick:disabled { opacity:1 }
.equipment__slot:disabled { opacity:1 }
.panel {
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  background: linear-gradient(
    180deg,
    var(--surface-raised),
    var(--surface-base)
  );
  box-shadow:
    inset 0 0 0 1px var(--line-cool),
    var(--e-2);
}
.loading {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  color: var(--muted);
}
.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  isolation: isolate;
}
.portal__arte {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}
.portal__arte > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
  animation: portal-deriva 46s var(--ease-out) infinite alternate;
}
@keyframes portal-deriva {
  0% {
    scale: 1;
  }
  to {
    scale: 1.09;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal__arte > img {
    animation: none;
  }
}
.portal__arte:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      128% 94% at 50% 42%,
      transparent 48%,
      rgb(4 12 28 / 0.34) 100%
    ),
    linear-gradient(
      180deg,
      rgb(4 12 28 / 0.22) 0%,
      transparent 24%,
      rgb(4 12 28 / 0.58) 100%
    );
}
.portal__content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  padding: clamp(16px, 4vh, 40px) var(--sp-5) var(--sp-6);
}
.hexbtn {
  --ponta: 22px;
  padding: 2px;
  border: 0;
  background: linear-gradient(180deg, #eaf8ff, #9fd6f5 55%, #57a8dd);
  clip-path: polygon(
    var(--ponta) 0,
    calc(100% - var(--ponta)) 0,
    100% 50%,
    calc(100% - var(--ponta)) 100%,
    var(--ponta) 100%,
    0 50%
  );
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.55))
    drop-shadow(0 0 16px rgb(88 190 255 / 0.5));
  transition:
    translate var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}
.hexbtn__face {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 14px clamp(38px, 8vw, 66px);
  background: linear-gradient(180deg, #6fc8f2, #2f8fd8 46%, #1f63b6);
  box-shadow: inset 0 2px #ffffff80;
  clip-path: inherit;
  color: #fff;
  font-size: var(--fs-600);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px rgb(3 22 46 / 0.75);
}
.hexbtn:hover:not(:disabled) {
  translate: 0 -2px;
  filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.55))
    drop-shadow(0 0 22px rgb(120 210 255 / 0.7));
}
.hexbtn:active:not(:disabled) {
  translate: 0 2px;
}
.hexbtn:disabled {
  background: linear-gradient(180deg, #7d8ea3, #4a5a70);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.5));
  cursor: not-allowed;
}
.hexbtn:disabled .hexbtn__face {
  background: linear-gradient(180deg, #46586e, #2b3a4c);
  color: #97a8bc;
}
.hexbtn__icone {
  width: 22px;
  height: 22px;
}
.splash__logo {
  width: min(620px, 82vw);
  height: auto;
  margin-top: clamp(16px, 9vh, 92px);
  filter: drop-shadow(0 6px 12px rgb(4 14 34 / 0.75))
    drop-shadow(0 0 34px rgb(4 14 34 / 0.55));
  animation: splash-logo 0.62s var(--ease-out) both;
}
@keyframes splash-logo {
  0% {
    opacity: 0;
    scale: 0.94;
    translate: 0 -10px;
  }
}
.splash__acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
  margin-bottom: clamp(36px, 17vh, 170px);
}
.portal__content[data-aberto="true"] .splash__logo {
  width: min(420px, 70vw);
  margin-top: clamp(8px, 4vh, 40px);
}
.splash__acao[data-aberto="true"] {
  margin-block: auto;
}
.splash__rodape {
  margin: var(--sp-4) 0 0;
  color: #fff9;
  font-size: var(--fs-200);
  text-align: center;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.9);
}
/* 18/09: achado numa 2ª verificação — coberto pela cobertura de uso mas
   com o timing errado (o teste tirou o print rápido demais pra registrar
   estas 2 regras como "tocadas"). Moldura de canto cortado do cartão de
   login e o seletor Entrar/Criar conta (pílula com o "polegar" deslizando)
   — sem isto o seletor vira caixa cinza sem nenhum estilo. */
.glass {
  --corte: 18px;
  padding: 2px;
  background: linear-gradient(180deg, #d6efffeb, #78b0dcb3);
  clip-path: polygon(
    var(--corte) 0,
    calc(100% - var(--corte)) 0,
    100% var(--corte),
    100% calc(100% - var(--corte)),
    calc(100% - var(--corte)) 100%,
    var(--corte) 100%,
    0 calc(100% - var(--corte)),
    0 var(--corte)
  );
  filter: drop-shadow(0 18px 34px rgb(0 0 0 / 0.6));
}
.glass__face {
  background: linear-gradient(180deg, #18467ae0, #071a36f0);
  box-shadow: inset 0 2px #ffffff38;
  clip-path: inherit;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: var(--r-pill);
  background: #04102299;
  box-shadow:
    inset 0 2px 6px #0009,
    inset 0 0 0 1px #a0d2f547;
}
.segmented__thumb {
  position: absolute;
  inset: 3px 50% 3px 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #6fc8f2, #2f8fd8 55%, #1f63b6);
  box-shadow:
    inset 0 1px #ffffff80,
    0 0 12px #58beff73;
  transition: translate var(--dur-base) var(--ease-spring);
}
.segmented[data-active="register"] .segmented__thumb {
  translate: 100% 0;
}
.segmented__option {
  position: relative;
  height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: #c6def4cc;
  font-size: var(--fs-400);
  font-weight: 700;
  transition: color var(--dur-base) var(--ease-out);
}
.segmented__option[aria-pressed="true"] {
  color: #fff;
  text-shadow: 0 1px 3px rgb(3 22 46 / 0.8);
}

.auth {
  position: relative;
  width: min(100%, 430px);
  animation: auth-entra var(--dur-slow) var(--ease-spring) both;
}
@keyframes auth-entra {
  0% {
    opacity: 0;
    scale: 0.92;
    translate: 0 18px;
  }
}
.auth__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: auth-troca var(--dur-slow) var(--ease-out);
}
@keyframes auth-troca {
  0% {
    opacity: 0;
    translate: 0 6px;
  }
}
.auth__fechar {
  position: absolute;
  z-index: 2;
  top: -13px;
  right: -13px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid rgb(214 239 255 / 0.9);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #2f6ea8, #143c50);
  box-shadow: 0 4px 10px #00000080;
  color: #eaf6ff;
  font-size: var(--fs-500);
  line-height: 1;
}
.auth__fechar:hover {
  background: linear-gradient(180deg, #3f88c8, #1d4f80);
  color: #fff;
}
.auth__submit {
  align-self: center;
  width: min(100%, 300px);
  margin-top: var(--sp-1);
}
@keyframes selo-entra {
  0% {
    scale: 0.3;
    opacity: 0;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.field > label {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b0ceeacc;
}
.field__well {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  background: #04102299;
  box-shadow:
    inset 0 2px 6px #0000008c,
    inset 0 0 0 1px #a0d2f547;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.field__well:focus-within {
  box-shadow:
    inset 0 2px 6px #0000008c,
    inset 0 0 0 2px #6fc8f2,
    0 0 14px #58beff59;
}
.field__well:focus-within .field__icone {
  color: #9fdcff;
}
.field__icone {
  display: flex;
  color: #b0ceeab3;
  transition: color var(--dur-fast) var(--ease-out);
}
.field__well > input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  background: none;
  color: #fff;
}
.field__well > input:focus {
  outline: none;
}
.field__well > input::placeholder {
  color: #b0ceea73;
}
.field__well > input:disabled {
  opacity: 0.5;
}
.field__reveal {
  display: flex;
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: #b0ceeab3;
}
.field__reveal:hover {
  color: #9fdcff;
}
.game:not([data-wide="true"]) .game__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.game__scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.game__scroll > * {
  flex: 0 0 auto;
}
.game__main > .bottomnav {
  margin-top: 16px;
}
@media (max-height: 760px) {
  .game[data-wide="true"] > .game__profile {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.game[data-wide="true"] > .game__profile > .status {
  height: 100%;
}
.game[data-wide="true"] .game__scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.game[data-wide="true"] > .sidenav {
  grid-row: 3;
  grid-column: 1 / -1;
}
.game[data-wide="true"] .game__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.game[data-wide="true"] .game__scroll > .inventory {
  flex: 0 0 auto;
}
.game[data-wide="true"] .game__scroll > .inventory .bag {
  flex: 0 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  align-content: start;
}
.sidenav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 100%;
  padding: 6px 4px;
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  background: linear-gradient(
    180deg,
    var(--surface-raised),
    var(--surface-base)
  );
  box-shadow:
    inset 0 0 0 1px var(--line-cool),
    var(--e-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidenav--row {
  flex-direction: row;
  gap: 6px;
  max-height: none;
  padding: 6px;
  overflow: visible;
}
.sidenav--row .sidenav__item {
  flex: 1 1 0;
  height: 54px;
  padding-top: 5px;
}
.sidenav--row .sidenav__label {
  font-size: 11px;
}
.sidenav__item {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  height: 48px;
  padding: 6px 0 0;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #60a5fa1a, #60a5fa00 70%);
  color: #cdd3da;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  transition:
    background-color var(--dur-base) var(--ease-out),
    translate var(--dur-fast) var(--ease-out);
}
.sidenav__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 30px;
}
.sidenav__art img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: none;
}
.sidenav__item:hover {
  background: linear-gradient(180deg, #ffffff14, #ffffff03 70%);
}
.sidenav__item:active {
  translate: 0 1px;
}
.sidenav__item[aria-current="page"] {
  background: linear-gradient(180deg, #ffffff1c, #ffffff05 55%, #fff0);
  box-shadow: inset 1px 0 #ffffff24;
  color: #cdd3da;
}
.sidenav__label {
  margin-top: 4px;
  text-align: center;
}
.sidenav__dot {
  position: absolute;
  /* Zerg 22/09 (8º lote #8): era 10px. */
  top: -7px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: #d81a26;
  box-shadow: 0 0 6px #d81a26a6;
}
.sidenav__label {
  line-height: 1.05;
  text-align: center;
}
@keyframes power-delta {
  0% {
    opacity: 0;
    translate: 0 6px;
  }
  15% {
    opacity: 1;
    translate: 0 0;
  }
  75% {
    opacity: 1;
    translate: 0 -2px;
  }
  to {
    opacity: 0;
    translate: 0 -10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .power__delta {
    animation: none;
  }
}
.dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: 85dvh;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 40%),
    linear-gradient(180deg, var(--surface-raised), var(--surface-base));
  box-shadow:
    inset 0 0 0 1px var(--line-gold),
    inset 0 1px #ffffff14,
    var(--e-3);
  color: var(--text);
  overflow: auto;
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity var(--dur-window) var(--ease-out),
    translate var(--dur-window) var(--ease-spring),
    display var(--dur-window) allow-discrete,
    overlay var(--dur-window) allow-discrete;
}
.dialog[open] {
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .dialog[open] {
    opacity: 0;
    translate: 0 12px;
  }
}
.dialog::backdrop {
  background: transparent;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition:
    background-color var(--dur-window) var(--ease-out),
    display var(--dur-window) allow-discrete,
    overlay var(--dur-window) allow-discrete;
}
.dialog[open]::backdrop {
  background: var(--surface-scrim);
}
@starting-style {
  .dialog[open]::backdrop {
    background: transparent;
  }
}
.dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  color: var(--text);
}
.dialog__title {
  margin: 0;
  color: var(--gold-300);
  font-size: var(--fs-600);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.dialog__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-200);
}
.dialog__label {
  font-size: var(--fs-400);
  font-weight: 700;
}
.dialog__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.dialog__btn {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: linear-gradient(
    180deg,
    var(--surface-raised),
    var(--surface-base)
  );
  box-shadow:
    inset 0 0 0 1px var(--line-cool-2),
    0 3px #0000008c;
  color: var(--text);
  font-size: var(--fs-300);
  font-weight: 800;
  transition:
    filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    translate var(--dur-fast) var(--ease-out);
}
.dialog__btn:hover:not(:disabled) {
  filter: brightness(1.06);
}
.dialog__btn:active:not(:disabled) {
  translate: 0 3px;
  box-shadow: inset 0 0 0 1px var(--line-cool-2);
}
.dialog__btn--primary {
  border-color: var(--gold-900);
  background: linear-gradient(
    180deg,
    var(--gold-100),
    var(--gold-300) 30%,
    var(--gold-500)
  );
  box-shadow:
    inset 0 1px #fff9,
    0 3px 0 var(--gold-900);
  color: var(--on-gold);
}
.dialog__btn--primary:active:not(:disabled) {
  translate: 0 3px;
  box-shadow:
    inset 0 1px #fff6,
    0 0 0 var(--gold-900);
}
.dialog__btn--danger:not(:disabled) {
  border-color: #4a1013;
  background: linear-gradient(180deg, #ff9a9d, var(--red) 40%, #8c2226);
  box-shadow:
    inset 0 1px #ffffff59,
    0 3px #4a1013;
  color: #fff;
}
.dialog__btn--danger:active:not(:disabled) {
  translate: 0 3px;
  box-shadow:
    inset 0 1px #ffffff40,
    0 0 #4a1013;
}
@media (max-width: 620px) {
  .inventory__head {
    flex-direction: column;
    align-items: stretch;
  }
}
@keyframes forge-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes forge-pop {
  0% {
    transform: scale(0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .forge-result__rays,
  .forge-result__item {
    animation: none;
  }
}
.scene__dock {
  position: absolute;
  left: 2.5%;
  bottom: 3%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
/* 19/09, achado do Rafael ("o clique esquerdo não solta a skill"): a doca desliga o
   ponteiro pra NÃO engolir o clique do cenário por baixo, e no CSS ORIGINAL do React quem
   religava o clique era a própria barra — `.skillbar{...;pointer-events:auto}` (ainda no
   bundle de PRODUÇÃO `assets/index-Can-Rteu.css`). Essa regra se perdeu no corte de
   18/09 (esta folha substituiu o bundle): sem ela TODO orbe da doca (skills do herói,
   "+", auto, mapa, companions) herdava `none` e o clique de mouse atravessava pro
   canvas. Medido: `elementFromPoint` no centro do orbe devolvia o canvas; com a regra,
   clique real no orbe chama `/game/skill/cast` e `/game/companion/*`. A regra mais
   específica `body[data-recolhe-skill="1"] .panel.skillbar{pointer-events:none}` (barra
   recolhida) continua ganhando. NÃO perder esta regra num próximo corte de CSS. */
.skillbar {
  pointer-events: auto;
}
.game:not([data-wide="true"]) .scene {
  width: 100%;
}
.game:not([data-wide="true"]) .scene__dock {
  scale: 0.66;
  transform-origin: left bottom;
}
.game__scroll > .skills {
  flex: 1 1 auto;
  min-height: 0;
}
@supports (animation-timeline: scroll(self)) {
  .skills__colecao {
    animation: roll-list-fim linear both;
    animation-timeline: scroll(self);
  }
}
@media (hover: none) {
  .skill-card__info {
    display: block;
    width: 100%;
    min-height: 28px;
    padding: 0 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-inset);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
  }
}
@supports (animation-timeline: scroll(self)) {
  .roll-list {
    animation: roll-list-fim linear both;
    animation-timeline: scroll(self);
  }
}
@keyframes roll-list-fim {
  0%,
  90% {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 calc(100% - 28px),
      transparent
    );
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  to {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* Animação de cast da habilidade do herói (`.cast`, componente React de cast): as regras sumiram no corte de
   CSS de 18/09 e o rótulo (ícone/nome/dano) caía fora da tela. Copiadas do index-Can-Rteu.css de produção. */
.cast {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cast > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cast__label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cast-in 0.88s ease-out forwards;
}
.cast[data-on-hero='true'] .cast__label {
  justify-self: start;
  margin-left: 8%;
}
.cast__icon {
  font-size: 46px;
}
img.cast__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.8));
}
.cast__name {
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
}
.cast__damage,
.cast__heal {
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
}
.cast__damage {
  color: #ffd23c;
}
.cast__heal {
  color: var(--green);
}
@keyframes cast-in {
  0% {
    opacity: 1;
    transform: scale(0.7);
  }
  20% {
    transform: scale(1.06);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cast__label {
    animation: none;
  }
}
@keyframes target-pulse {
  50% {
    box-shadow: 0 0 0 5px #f5b91e26;
  }
}
@media (prefers-reduced-motion: reduce) {
  .equipment__slot[data-target="true"] {
    animation: none;
  }
}
.tooltip {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  padding: 10px;
  border: 2px solid var(--border-2);
  border-radius: 10px;
  background: #0d0b09f7;
  box-shadow: 0 6px 20px #00000080;
  overflow: hidden;
  pointer-events: none;
  animation: tooltip-in 90ms ease-out;
}
.tooltip[data-pinned="true"] {
  pointer-events: auto;
}
.tooltip__name {
  font-size: 13px;
  line-height: 1.2;
}
.tooltip__score {
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
}
.tooltip__meta {
  color: var(--muted);
  font-size: 10px;
}
.tooltip__affixes {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.tooltip__affixes > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.tooltip__affixes dt {
  color: var(--text);
}
.tooltip__affixes dd {
  margin: 0;
  color: var(--green);
  font-weight: 700;
}
.tooltip__affixes .tooltip__attr dt,
.tooltip__affixes .tooltip__attr dd {
  color: var(--gold-light);
}
.tooltip__fails {
  color: var(--error);
  font-size: 10px;
  font-weight: 700;
}
@keyframes tooltip-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    animation: none;
  }
}
.game[data-wide="true"] .hud__identity {
  display: none;
}
.hud__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 2px #00000059;
}
.hud__avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--panel-dark);
  line-height: 1;
}
.hud__avatar img {
  width: 26px;
  height: 26px;
}
.hud__level {
  position: absolute;
  bottom: -8px;
  min-width: 22px;
  padding: 0 5px;
  border: 2px solid var(--panel);
  border-radius: 9px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}
.hud__who {
  flex: 1;
  min-width: 0;
}
.hud__name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.6);
}
.hud__xp {
  position: relative;
  margin-top: 3px;
}
.hud__xp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.hud__xp[data-teto="true"] .xpbar:after {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.hud__xp[data-teto="true"] .hud__xp-text {
  color: #2a1a04;
  text-shadow: 0 1px 0 rgb(255 235 180 / 0.6);
}
.hud__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 10px;
  background: #00060f;
  border-bottom: 1px solid rgb(96 140 196 / 0.16);
  box-shadow: 0 5px 10px -2px #000000d9;
}
.game:not([data-wide="true"]) .hud__bar {
  flex-wrap: wrap;
  height: auto;
  min-height: 48px;
  padding-block: 5px;
  row-gap: 6px;
}
.scene {
  position: relative;
  aspect-ratio: 480 / 270;
  flex: 0 0 auto;
  max-height: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #000d1e;
  box-shadow:
    inset 0 0 0 1px #ffffff17,
    0 0 0 2px #00060f,
    0 8px 22px -10px #000000bf;
  overflow: hidden;
}
.game[data-wide="true"] .scene {
  flex: 0 0 auto;
  min-height: 0;
  width: min(100cqw, calc(var(--altura-cena) * 480 / 270));
  max-width: 100%;
  margin-inline: auto;
  margin-block: 0;
}
.scene-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}
.scene-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.scene-canvas__actors {
  position: absolute;
  inset: 0;
}
.scene-canvas__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene__loading {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    #1f8de8,
    #5cc4f5 55%,
    #3f9e3a 55%,
    #55b545
  );
}
.scene__hud {
  position: absolute;
  inset: 26px 8px auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.scene__gear {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #14141ed9;
}
.scene__gear:active {
  transform: translateY(1px);
}
.enemy-plate {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(340px, 80%);
  padding: 11px 20px 13px 13px;
  border-image: url(/potato/ui/bars/labelAdvanced_black.png) 62 fill / 26px
    stretch;
}
.enemy-plate[data-boss="true"] {
  filter: drop-shadow(0 0 8px rgb(245 197 66 / 0.55));
}
.enemy-plate__face {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6));
}
.enemy-plate[data-boss="true"] .enemy-plate__face {
  width: 55px;
  height: 55px;
}
.scene__boss {
  position: absolute;
  top: 13%;
  left: 50%;
  translate: -50% 0;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #7828a0f2, #341a70f2);
  box-shadow:
    inset 0 1px #ffffff40,
    0 0 14px #7828a080;
  color: #f0dcff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  pointer-events: none;
  animation: boss-pulse 1.6s ease-in-out infinite;
}
@keyframes boss-pulse {
  50% {
    box-shadow:
      inset 0 1px #ffffff40,
      0 0 22px #963cc8d9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene__boss {
    animation: none;
  }
}
.enemy-plate__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.enemy-plate__name {
  overflow: hidden;
  color: #ffd9a0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
  white-space: nowrap;
}
.enemy-plate__bar {
  position: relative;
  display: grid;
  place-items: center;
  height: 18px;
  border-image: url(/potato/ui/bars/progressBarBase_black.png) 40 fill / 8px
    stretch;
}
.enemy-plate__fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 4px;
  width: calc(var(--hp, 0%) - 8px);
  min-width: 0;
  border-image: url(/potato/ui/bars/progressBar_red.png) 26 fill / 5px stretch;
  transition: width 0.25s ease-out;
}
.enemy-plate__bar[data-low="true"] .enemy-plate__fill {
  border-image-source: url(/potato/ui/bars/progressBar_yellow.png);
  animation: enemy-pulse 0.7s ease-in-out infinite alternate;
}
.enemy-plate__value {
  position: relative;
  font-size: 10px;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.95),
    0 0 3px rgb(0 0 0 / 0.85);
}
@keyframes enemy-pulse {
  to {
    filter: brightness(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .enemy-plate__bar[data-low="true"] .enemy-plate__fill {
    animation: none;
  }
}
.hpbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: #00060feb;
  box-shadow: 0 3px 12px #0000008c;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}
.hpbar img {
  width: 17px;
  height: 16px;
}
.hpbar strong {
  color: #dcd7cd;
  font-size: 11px;
}
.hpbar .bar {
  height: 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: #00060e;
  box-shadow: inset 0 0 0 1px #0009;
}
.hpbar .bar:after {
  background: linear-gradient(
    180deg,
    #48782e,
    #85c35e 8%,
    #68af47 26%,
    #5b9934 42%,
    #46822c 62%,
    #376c24 84%,
    #203b1c
  );
}
.hpbar__value {
  font-size: 10px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .equipment__doll {
    --eq-slot: 46px;
  }
}
.status {
  --aperto: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--aperto) + 2px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
@media (max-height: 1000px) {
  .status {
    --aperto: 0.3;
  }
}
@media (max-height: 880px) {
  .status {
    --aperto: 0.3;
  }
}
@media (max-height: 780px) {
  .status {
    --aperto: 0.1;
  }
}
.status > * {
  flex: 0 0 auto;
}
.profile,
.power,
.pcard {
  border: 1px solid #193040;
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgb(30 70 110 / 0.3) 0%, transparent 22%),
    linear-gradient(0deg, rgb(20 55 90 / 0.22) 0%, transparent 12%), #01070f;
  box-shadow: inset 0 1px #78bee138;
}
.pcard {
  overflow: hidden;
}
.pcard__details {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 32px;
  border: 1px solid #16283a;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #0c1524, #040c17);
  box-shadow:
    inset 0 1px #5aa0c84d,
    inset 0 -1px #2d82b961;
  color: #f2f5f8;
  font-size: 14px;
  font-weight: 700;
  transition:
    filter var(--dur-fast) var(--ease-out),
    translate var(--dur-fast) var(--ease-out);
}
.pcard__details:hover {
  filter: brightness(1.3);
}
.pcard__details:active {
  translate: 0 1px;
}
.pcard__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(3px + 4px * var(--aperto, 1)) 12px;
  border-bottom: 1px solid var(--line-cool);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent);
  color: var(--muted);
  font-size: var(--fs-400);
}
.pcard__head > h2 {
  flex: 1;
  margin: 0;
  color: #f0dca4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: left;
  text-transform: uppercase;
}
.pcard__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transform: translateY(-50%);
}
.pcard__body {
  margin: 0;
  padding: 3px 12px 7px;
}
.pcard__rodape {
  padding: 8px 12px 10px;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}
@media (pointer: coarse) {
  .attr-row__plus {
    position: relative;
  }
  .attr-row__plus:after {
    content: "";
    position: absolute;
    inset: -7px;
  }
}
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  box-shadow:
    inset 0 0 0 1px var(--line-cool),
    inset 0 2px 4px #0009;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  box-shadow:
    inset 0 0 0 1px var(--line-cool),
    inset 0 2px 4px #0009;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-500));
  box-shadow:
    inset 0 0 0 1px var(--gold-700),
    0 2px 4px #0000008c;
  transition: filter var(--dur-fast) var(--ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold-700);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-500));
  box-shadow: 0 2px 4px #0000008c;
}
input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(1.12);
}
input[type="range"]:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}
.bottomnav {
  --nav-icon: 38px;
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  grid-template-columns: repeat(6, 1fr);
  margin-top: auto;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel-dark));
  box-shadow:
    inset 0 1px #ffffff0d,
    0 -4px 14px #00000059;
}
.bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 1px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.bottomnav__art {
  position: relative;
  height: var(--nav-icon);
}
.bottomnav__art img {
  display: block;
  width: 100%;
  height: var(--nav-icon);
  object-fit: contain;
  filter: saturate(0.7) brightness(0.82) drop-shadow(0 2px 2px rgb(0 0 0 / 0.5));
  transition:
    filter 0.12s,
    transform 0.12s;
}
.bottomnav__label {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(8px, 2.1vw, 11px);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottomnav__item[aria-current="page"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, #f5c54233, #f5c5420a);
  color: var(--gold-light);
}
.bottomnav__item[aria-current="page"] .bottomnav__art img {
  filter: drop-shadow(0 0 7px rgb(245 197 66 / 0.5))
    drop-shadow(0 2px 2px rgb(0 0 0 / 0.5));
  transform: translateY(-2px) scale(1.06);
}
@media (hover: hover) {
  .bottomnav__item:hover:not([aria-current="page"]) {
    background: #ffffff0d;
    color: var(--text);
  }
  .bottomnav__item:hover .bottomnav__art img {
    filter: saturate(0.9) brightness(0.95)
      drop-shadow(0 2px 2px rgb(0 0 0 / 0.5));
  }
}
.bottomnav__item:active {
  transform: translateY(1px);
}
.bottomnav__dot {
  position: absolute;
  /* Zerg 22/09 (8º lote #8): era 10px. */
  top: 0px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 0 2px #00000073;
}
.pets__active .dialog__btn {
  flex: 0 0 auto;
  min-width: 104px;
}
@keyframes reveal-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes reveal-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes reveal-fade {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal__rays,
  .reveal .item-icon,
  .reveal__label,
  .roll-list[data-single="true"] .roll-list__row,
  .pets__roll-art {
    animation: none;
  }
}
.tooltip__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 236px;
  padding-left: 8px;
  border-left: 3px solid var(--border-2);
}
.tooltip__desc {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
}
.tooltip__next {
  margin: 4px 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.tooltip__next-label,
.tooltip__next--max {
  color: var(--gold);
  font-weight: 700;
}
@keyframes rebirth-pulse {
  50% {
    box-shadow: 0 0 14px #f2d0898c;
  }
}
@media (prefers-reduced-motion: reduce) {
}
@media (prefers-reduced-motion: reduce) {
  .btn-arte {
    transition: none;
  }
}
.scene-atalhos {
  position: absolute;
  top: 56px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scene-atalhos__item {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgb(242 208 137 / 0.45);
  border-radius: 50%;
  background: #06101cb8;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    translate 0.12s ease;
}
.scene-atalhos__item:hover {
  border-color: var(--gold-300);
  background: #0a1a2ce6;
}
.scene-atalhos__item:active {
  translate: 0 1px;
}
.scene-atalhos__item:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}
.scene-atalhos__item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.scene-atalhos__rotulo {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  translate: 0 -50%;
  padding: 2px 7px;
  border: 1px solid var(--line-cool-2);
  border-radius: var(--r-sm);
  background: #030b16f0;
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.scene-atalhos__item:hover .scene-atalhos__rotulo,
.scene-atalhos__item:focus-visible .scene-atalhos__rotulo {
  opacity: 1;
}
.scene-atalhos__dot {
  position: absolute;
  /* Zerg 22/09 (8º lote #8): era 8px. */
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border: 1px solid #0a1622;
  border-radius: 50%;
  background: var(--red);
}
@media (max-width: 560px) {
  .scene-atalhos {
    top: 50px;
    gap: 5px;
  }
  .scene-atalhos__item {
    width: 29px;
    height: 29px;
  }
  .scene-atalhos__item img {
    width: 19px;
    height: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene-atalhos__item,
  .scene-atalhos__rotulo {
    transition: none;
  }
}
.game__palco {
  display: flex;
  justify-content: center;
}
.game[data-wide="true"] .game__palco {
  align-items: start;
  container-type: inline-size;
}
.game[data-wide="true"] .game__scroll > .game__palco {
  flex: 0 0 auto;
  min-height: 0;
}
.game__palco > .scene {
  margin-block: 0;
}
.scene__mapa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: clamp(112px, 26%, 200px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5));
  transition:
    translate 0.12s ease,
    filter 0.12s ease;
}
.scene__mapa img {
  display: block;
  width: 100%;
  height: auto;
}
.scene__mapa:hover {
  filter: drop-shadow(0 3px 10px rgb(245 197 66 / 0.45)) brightness(1.08);
}
.scene__mapa:active {
  translate: 0 1px;
}
.scene__mapa:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}
@keyframes mapa-espada {
  50% {
    translate: 0 -7px;
  }
}
@keyframes mapa-nuvem {
  0% {
    translate: -14px 0;
  }
  to {
    translate: 14px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene__mapa,
  .mapa__espada,
  .mapa__nuvens img,
  .mapa__item:hover .mapa__icone {
    animation: none;
    transition: none;
  }
}
@media (max-width: 480px), (max-height: 720px) {
  .gacha {
    --gacha-zoom: 0.82;
  }
}
@media (max-height: 560px) {
  .gacha {
    --gacha-zoom: 0.62;
  }
}
@keyframes gacha-respira {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gacha__pular {
    animation: none;
  }
}
@media (max-width: 1060px) {
  .premio__fechar {
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}
@keyframes premio-gira {
  to {
    rotate: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .destaque__aura:after {
    animation: none;
  }
}
@media (min-width: 1000px) {
  .carrossel__seta[data-lado="antes"] {
    margin-left: -46px;
  }
  .carrossel__seta[data-lado="depois"] {
    margin-right: -46px;
  }
}
@media (max-width: 620px) {
  .acoes {
    grid-template-columns: 1fr 1fr;
  }
  .acao--seguir {
    grid-column: 1 / -1;
  }
  .acoes[data-n="2"] .acao--seguir {
    grid-column: auto;
  }
  .acao img {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 720px) {
  .detalhe {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
  }
  .detalhe .atributos,
  .detalhe .corpo {
    grid-column: 1 / -1;
  }
  .destaque__aura:before,
  .destaque__aura:after {
    width: 240px;
    height: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VITÓRIA / DERROTA DE RAID — refeita (07/08) a pedido do dono.

   A versão anterior era emoji de 52px + texto + lista de definição num
   retângulo: o mesmo conteúdo que o gacha entrega com palco, brilho de
   raridade e tipografia de display. Aqui a linguagem do gacha é repetida —
   `--font-display`, brilho por `color-mix`, `clamp()` para escalar no celular
   — para as duas telas parecerem do mesmo jogo.

   Só CSS: a marcação vem do bundle e não foi tocada.
   ═══════════════════════════════════════════════════════════════════ */

.raid-result {
  /* A cor de acento troca com o resultado, como `--rarity` troca no gacha. */
  --vitoria: var(--green, #5ad431);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.6vh, 12px);
  padding: clamp(10px, 2.4vh, 20px) 4px 4px;
  text-align: center;
  isolation: isolate;
}

/**
 * Derrota fica VERMELHA sem precisar tocar no bundle: o bloco de recompensas só
 * é renderizado quando o jogador venceu, então a ausência dele é o sinal.
 * O padrão é o verde de propósito — se um navegador antigo ignorar `:has`, a
 * vitória (o caso comum) continua certa.
 */
.raid-result:not(:has(.raid-result__rewards)) {
  --vitoria: var(--error, #e74c3c);
}

/* Raios de vitória: um brilho radial atrás de tudo, preso ao ícone. */
.raid-result::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(4px, 1vh, 14px);
  width: min(420px, 92vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(
    circle at 50% 28%,
    color-mix(in srgb, var(--vitoria) 42%, transparent) 0%,
    color-mix(in srgb, var(--vitoria) 12%, transparent) 34%,
    transparent 62%
  );
  pointer-events: none;
}

.raid-result__icon img {
  width: clamp(56px, 13vmin, 88px);
  height: auto;
}

.raid-result__icon {
  /* Agora é arte do jogo, não emoji: o tamanho vem do componente e o `img`
     escala junto com a tela. O `font-size` fica só como resto inofensivo. */
  line-height: 1;
  filter: drop-shadow(
      0 0 26px color-mix(in srgb, var(--vitoria) 70%, transparent)
    )
    drop-shadow(0 6px 12px rgb(0 0 0 / 0.6));
  animation: raid-result-entrar 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.raid-result__title {
  font-family: var(--font-display, inherit);
  font-size: clamp(26px, 6.4vmin, 44px);
  font-weight: 900;
  letter-spacing: 0.16em;
  /* `text-indent` compensa o espaço que o letter-spacing joga depois da última
     letra — sem isto o título fica visivelmente fora de centro. */
  text-indent: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 30px color-mix(in srgb, var(--vitoria) 80%, transparent),
    0 2px 10px rgb(0 0 0 / 0.85);
  animation: raid-result-entrar 0.5s 0.06s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.raid-result__text {
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--vitoria) 22%, var(--text, #dce8f8));
  font-size: clamp(12px, 1.9vh, 15px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Recompensas ─────────────────────────────────────────────────── */

.raid-result__rewards {
  width: 100%;
  margin: clamp(2px, 1vh, 8px) 0 0;
  padding: clamp(10px, 2vh, 16px);
  border: 1px solid
    color-mix(in srgb, var(--vitoria) 26%, var(--border, #2c2f3a));
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--vitoria) 7%, transparent) 0%,
      transparent 58%
    ),
    var(--panel-2, #0d1424);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

.raid-result__rewards-title {
  margin: 0 0 10px;
  color: var(--gold, #f0c44a);
  font-size: clamp(10px, 1.5vh, 12px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

/* Cada linha vira uma ficha, em vez de duas pontas soltas de uma lista. */
.raid-result__rewards > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgb(255 255 255 / 0.035);
  font-size: clamp(12px, 1.8vh, 14px);
  animation: raid-result-subir 0.34s both;
}

/* Escadinha: as fichas entram uma depois da outra, como o gacha revela. */
.raid-result__rewards > div:nth-of-type(1) {
  animation-delay: 0.1s;
}
.raid-result__rewards > div:nth-of-type(2) {
  animation-delay: 0.17s;
}
.raid-result__rewards > div:nth-of-type(3) {
  animation-delay: 0.24s;
}
.raid-result__rewards > div:nth-of-type(4) {
  animation-delay: 0.31s;
}

.raid-result__rewards > div + div {
  margin-top: 5px;
}

.raid-result__rewards dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--text, #dce8f8) 78%, transparent);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* O ícone é a arte do jogo, não emoji — precisa do mesmo brilho do resto. */
.raid-result__rewards dt img {
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.7));
}

.raid-result__rewards dd {
  margin: 0;
  color: var(--vitoria);
  font-family: var(--font-display, inherit);
  font-size: 1.12em;
  font-weight: 900;
  text-shadow: 0 0 14px color-mix(in srgb, var(--vitoria) 55%, transparent);
}

@keyframes raid-result-entrar {
  from {
    opacity: 0;
    scale: 0.72;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes raid-result-subir {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Quem pediu menos movimento recebe a mesma tela, parada. */
@media (prefers-reduced-motion: reduce) {
  .raid-result__icon,
  .raid-result__title,
  .raid-result__rewards > div {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RENASCIMENTO — refeito (07/08) a pedido do dono.

   Renascer é o marco mais importante do jogo: fecha uma era inteira. A tela
   tratava isso como um aviso de formulário — título pequeno, dois parágrafos
   cinza e dois botões. Aqui ela ganha o peso do evento.

   A linguagem é a mesma do gacha e da vitória de raid: ouro, fonte de display,
   brilho por `color-mix` e `clamp()` para escalar no celular.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A faixa "Era concluída", na tela principal ───────────────────── */

.rebirth[data-ready="true"] {
  position: relative;
  overflow: hidden;
  border-color: var(--gold-500);
  background: linear-gradient(
    90deg,
    rgb(138 90 28 / 0.38),
    var(--surface-raised) 62%
  );
  box-shadow:
    0 0 0 1px #dc911e55,
    0 0 22px -6px #dc911e77,
    0 6px 18px #00000073;
}

/* Um brilho varre a faixa de tempos em tempos: chama o olho sem piscar. */
.rebirth[data-ready="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgb(255 233 176 / 0.16) 48%,
    transparent 58%
  );
  translate: -100% 0;
  animation: renascer-varrer 3.6s ease-in-out infinite;
  pointer-events: none;
}

.rebirth[data-ready="true"] .rebirth__title {
  color: var(--gold-100, #ffe9b0);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 0 16px #dc911e88;
}

/* O pulso do botão existia e estava desligado por um `animation:none` logo
   abaixo da própria regra. Aqui ele volta — é o único botão do jogo que abre
   uma era nova. */
.rebirth[data-ready="true"] .rebirth__btn {
  animation: renascer-pulsar 2.4s ease-in-out infinite;
}

/* ── O diálogo ───────────────────────────────────────────────────── */

.dialog--renascer {
  border-color: var(--gold-700, #8a5a1c);
  box-shadow:
    inset 0 0 0 1px var(--line-gold),
    inset 0 1px #ffffff1f,
    0 0 40px -8px #dc911e66,
    var(--e-3, 0 18px 50px #000a);
}

.dialog--renascer .dialog__content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Aurora dourada girando devagar atrás do conteúdo. É o "orçamento alto" da
   tela: um único elemento, sem imagem, sem custo de rede. */
.dialog--renascer .dialog__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -30%;
  width: 160%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(220 145 30 / 0.26) 42deg,
    transparent 96deg,
    rgb(255 233 176 / 0.18) 190deg,
    transparent 250deg,
    rgb(220 145 30 / 0.22) 320deg,
    transparent 360deg
  );
  animation: renascer-girar 22s linear infinite;
  pointer-events: none;
}

.dialog--renascer .dialog__title {
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 5.4vmin, 38px);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold-100, #ffe9b0);
  text-shadow:
    0 0 28px #dc911eaa,
    0 2px 10px rgb(0 0 0 / 0.8);
}

/* ── A transição de era ──────────────────────────────────────────── */

.renascer__eras {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  padding: clamp(10px, 2.2vh, 18px) 8px;
  border-block: 1px solid rgb(220 145 30 / 0.22);
}

.renascer__era {
  font-family: var(--font-display, inherit);
  font-size: clamp(15px, 3.4vmin, 22px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--faint, #7c8698);
  white-space: nowrap;
}

.renascer__era--nova {
  color: var(--gold-100, #ffe9b0);
  text-shadow: 0 0 22px #dc911ecc;
  animation: renascer-respirar 2.6s ease-in-out infinite;
}

/* A seta é desenhada, não é caractere: escala junto e não depende de fonte. */
.renascer__seta {
  position: relative;
  flex: 0 0 auto;
  width: clamp(34px, 9vw, 62px);
  height: 2px;
  background: linear-gradient(
    90deg,
    rgb(124 134 152 / 0.5),
    var(--gold-300, #f0c44a)
  );
}

.renascer__seta::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  rotate: 45deg;
  border-top: 2px solid var(--gold-300, #f0c44a);
  border-right: 2px solid var(--gold-300, #f0c44a);
}

/* ── O que se mantém e o que muda ────────────────────────────────── */

.dialog--renascer > .dialog__content > p:not([class]) {
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 2vh, 15px);
}

.dialog--renascer > .dialog__content > p strong {
  color: var(--gold-100, #ffe9b0);
}

.rebirth__keep {
  margin: 0;
  padding: 10px 12px 10px 34px;
  position: relative;
  border: 1px solid rgb(90 212 49 / 0.28);
  border-radius: 10px;
  background: rgb(90 212 49 / 0.07);
  color: var(--text, #dce8f8);
  font-size: clamp(11px, 1.7vh, 13px);
  line-height: 1.5;
}

/* Marca de "fica com você", desenhada em CSS — sem emoji e sem imagem. */
.rebirth__keep::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 15px;
  width: 6px;
  height: 11px;
  rotate: 45deg;
  border-right: 2px solid #5ad431;
  border-bottom: 2px solid #5ad431;
}

.rebirth__warn {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgb(220 145 30 / 0.3);
  border-radius: 10px;
  background: rgb(220 145 30 / 0.08);
  color: var(--gold-300, #f0c44a);
  font-size: clamp(11px, 1.7vh, 13px);
  text-align: center;
}

@keyframes renascer-varrer {
  0%,
  62% {
    translate: -100% 0;
  }
  100% {
    translate: 100% 0;
  }
}

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

@keyframes renascer-respirar {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 22px #dc911ecc;
  }
  50% {
    opacity: 0.82;
    text-shadow: 0 0 34px #dc911eff;
  }
}

@keyframes renascer-pulsar {
  0%,
  100% {
    box-shadow:
      inset 0 1px #fff9,
      0 3px 0 var(--gold-900),
      0 0 0 0 #dc911e66;
  }
  50% {
    box-shadow:
      inset 0 1px #fff9,
      0 3px 0 var(--gold-900),
      0 0 0 7px #dc911e00;
  }
}

/* Movimento reduzido: a mesma tela, parada. Nada de conteúdo se perde. */
@media (prefers-reduced-motion: reduce) {
  .rebirth[data-ready="true"]::after,
  .dialog--renascer .dialog__content::before,
  .renascer__era--nova,
  .rebirth[data-ready="true"] .rebirth__btn {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   A FAIXA "ERA CONCLUÍDA" — versão épica (07/08).

   No monitor largo ela virava uma tarja fina de ponta a ponta: o marco mais
   importante do jogo com a mesma presença de uma barra de aviso. Agora tem
   largura própria, raios de sol convergindo e moldura dourada.

   Os raios são `repeating-conic-gradient` — nenhuma imagem, nenhum download.
   Testei antes com a arte `panelEpic_yellow` de moldura e ficou berrante
   contra a interface escura; os raios em CSS dão o mesmo peso sem gritar.
   ═══════════════════════════════════════════════════════════════════ */

.rebirth[data-ready="true"] {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--gold-500, #dc911e);
  border-radius: 14px;
  background:
    radial-gradient(
      125% 190% at 50% 128%,
      rgb(220 145 30 / 0.34) 0%,
      rgb(220 145 30 / 0.12) 36%,
      transparent 72%
    ),
    var(--surface-raised);
  box-shadow:
    0 0 0 1px #dc911e55,
    0 0 34px -8px #dc911eaa,
    inset 0 1px #ffffff1f,
    0 6px 18px #00000073;
}

/* Raios convergindo no pé da faixa, como um nascer do sol. */
.rebirth[data-ready="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 132%,
    rgb(255 214 130 / 0.13) 0deg 6deg,
    transparent 6deg 14deg
  );
  mask-image: linear-gradient(180deg, transparent 8%, #000 62%);
}

/* O brilho que varre continua, agora por cima dos raios. */
.rebirth[data-ready="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgb(255 233 176 / 0.2) 48%,
    transparent 58%
  );
  translate: -100% 0;
  animation: renascer-varrer 3.6s ease-in-out infinite;
  pointer-events: none;
}

.rebirth[data-ready="true"] .rebirth__texts {
  position: relative;
  z-index: 1;
}

.rebirth[data-ready="true"] .rebirth__title {
  font-family: var(--font-display, inherit);
  font-size: clamp(14px, 2.4vh, 19px);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--gold-100, #ffe9b0);
  text-shadow:
    0 0 18px #dc911ecc,
    0 1px 2px rgb(0 0 0 / 0.8);
}

.rebirth[data-ready="true"] .rebirth__sub {
  color: color-mix(in srgb, var(--gold-100, #ffe9b0) 62%, var(--text));
}

.rebirth[data-ready="true"] .rebirth__btn {
  position: relative;
  z-index: 1;
  letter-spacing: 0.1em;
}

/* A frase do bônus único de classe (20/08). 🚨 Elemento criado pelo JS SEM
   regra no CSS já me mordeu quatro vezes neste projeto — nasce junto. */
.klass__unico {
  display: block;
  margin: 0 0 6px;
  color: #f0c44a;
  font-family: Cinzel, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}

/* ══════════════════════════════════════════════════════════════════
   DROPDOWN NATIVO ESCURO — em TODA parte (20/08)
   ══════════════════════════════════════════════════════════════════

   🚨 `color-scheme: dark` no `:root` NÃO basta. Medi os dois lados do problema
   que o Zerg fotografou: o select da Loja e o dos Pets têm ambos
   `color-scheme: dark`, e mesmo assim um abre branco e o outro escuro. A
   diferença é o FUNDO do próprio select — o dos Pets é opaco (#060d18) e o da
   Loja é `rgba(0,0,0,0)`. O Chrome pinta a lista com a cor de fundo do
   controle; sem cor, cai no branco do sistema.

   Por isso a regra é global e não por tela: qualquer `select` novo nasceria
   branco também, e ninguém lembraria disto.

   ⚠️ Não dá para conferir isto por captura de tela: a lista aberta é uma
   janela do SISTEMA e não aparece em screenshot nenhum. O que dá para medir é
   o fundo computado do controle, e é isso que o teste faz. */
/* 🚨 `!important` só na COR DE FUNDO, e com motivo medido.
 *
 * Vários selects do jogo (`.shop__ordenar select`, os dos armários) pintam o
 * fundo com GRADIENTE. Gradiente é background-IMAGE: o atalho `background:`
 * zera o background-COLOR junto, deixando-o transparente — e é a cor, não a
 * imagem, que o Chrome usa para pintar a lista aberta. Por isso um select
 * bonito e escuro abria uma lista branca.
 *
 * A cor entra POR BAIXO do gradiente: o controle fechado continua exatamente
 * como está (o gradiente é opaco e cobre tudo), e a lista passa a nascer
 * escura. Sem o `!important`, a regra específica de cada tela ganha desta e
 * volta o branco. */
select {
  background-color: #060d18 !important;
  color: var(--text, #e9edf6);
}

select option {
  background-color: #060d18;
  color: var(--text, #e9edf6);
}

/* 18/09, achado real (Zerg testou conta nova de verdade): a tela "Escolha
   sua classe" (`.classes*`/`.klass*`) ficou sem NENHUM estilo — os cartões
   apareciam vazios, sem nome/arte/stat. Essas classes tinham aparecido no
   meu grep de "referenciadas por 3+ arquivos" mas eu as descartei como
   "nome genérico demais pra confiar" sem checar uma por uma — erro meu,
   corrigido aqui. Regras extraídas verbatim do CSS original. */
.classes {
  gap: var(--sp-4);
  max-width: 1060px;
}
.classes__head {
  text-align: center;
}
.classes__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #fff;
  text-shadow:
    0 2px 0 rgb(6 20 42 / 0.9),
    0 6px 18px rgb(0 0 0 / 0.8);
}
.classes__subtitle {
  max-width: 48ch;
  margin: var(--sp-3) auto 0;
  color: #d6e8fae6;
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.95);
}
.classes__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  width: 100%;
  margin-block: auto;
}
.klass {
  --acento: #6fc8f2;
  position: relative;
  border: 0;
  text-align: center;
  transition:
    translate var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}
.klass[data-classe="GUERREIRO"] {
  --acento: #ff6b6b;
}
.klass[data-classe="ARQUEIRA"] {
  --acento: #ffcf5c;
}
.klass[data-classe="MAGA"] {
  --acento: #9b7bff;
}
.klass__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}
.klass:hover:not(:disabled) {
  translate: 0 -3px;
}
.klass[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffe9b0, #e2b45c);
  filter: drop-shadow(0 18px 34px rgb(0 0 0 / 0.6))
    drop-shadow(0 0 22px rgb(255 214 130 / 0.55));
}
.klass__palco {
  position: relative;
  display: grid;
  place-items: end center;
  width: 100%;
  height: 254px;
}
.klass__palco:before {
  content: "";
  position: absolute;
  inset: 6% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--acento) 45%, transparent),
    transparent 74%
  );
  filter: blur(6px);
}
.klass__palco:after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 156px;
  height: 34px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--acento) 70%, transparent),
    transparent
  );
}
.klass__doll {
  position: relative;
  z-index: 1;
  width: 230px;
  height: 254px;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.5));
}
.klass__selo {
  position: absolute;
  z-index: 2;
  top: var(--sp-3);
  right: var(--sp-3);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffe9b0, #e0a53c);
  box-shadow:
    inset 0 1px #fff9,
    0 0 14px #ffd682b3;
  color: #4a2f05;
  font-size: var(--fs-500);
  font-weight: 800;
  animation: selo-entra var(--dur-base) var(--ease-spring);
}
.klass__nome {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-700);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.7);
}
.klass__papel {
  margin: 0;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--acento) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 65%, transparent);
  color: var(--acento);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.klass__desc {
  margin: 0;
  min-height: 2.7em;
  color: #c8def4e6;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
}
.klass__stats {
  display: flex;
  gap: var(--sp-2);
}
.klass__stat {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px var(--sp-2) 4px 4px;
  border-radius: var(--r-pill);
  background: #04102299;
  box-shadow: inset 0 0 0 1px #a0d2f540;
  color: #fff;
  font-size: var(--fs-300);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.klass__stat > img {
  width: 20px;
  height: 20px;
}
.klass__bonus {
  margin: 0;
  color: #ffe2a0f2;
  font-size: var(--fs-200);
  font-weight: 700;
}
.classes__confirm {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  margin-top: auto;
  margin-inline: calc(var(--sp-5) * -1);
  padding: var(--sp-3) var(--sp-5) max(var(--sp-3), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #06162ebf, #030c1cf2);
  box-shadow: inset 0 1px #a0d2f559;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.classes__escolhida {
  flex: 1;
  margin: 0;
  color: #c8def4e6;
  font-size: var(--fs-400);
}
.classes__escolhida > strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-600);
}
.klass__unico {
  display: block;
  margin: 0 0 6px;
  color: #f0c44a;
  font-family: Cinzel, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}

/* 19/09, A/B do corte de CSS: regras que existem no bundle de produção e sumiram no corte (copiadas exatas). */
/* B. Áudio do Menu (sliders/checkbox sumiram) */
.settings__audio { display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface-inset);box-shadow:var(--e-hair) }
.settings__mute { display:flex;align-items:center;gap:var(--sp-2);color:var(--gold-300);font-size:var(--fs-400);font-weight:700;cursor:pointer }
.settings__mute input { width:18px;height:18px;accent-color:var(--gold-500) }
.settings__slider { display:grid;grid-template-columns:72px 1fr 32px;align-items:center;gap:var(--sp-2) }
.settings__slider-label { color:var(--muted);font-size:var(--fs-300) }
.settings__slider-valor { color:var(--text);font-size:var(--fs-200);font-variant-numeric:tabular-nums;text-align:right }
.settings__slider input:disabled { opacity:.4 }
/* C. Raids (cards) */
.raids__header { display:flex;align-items:center;gap:10px }
.raid-card { display:grid;grid-template-columns:132px minmax(0,1fr) minmax(150px,.7fr) auto;align-items:center;gap:14px;min-height:128px;padding:8px 18px 8px 8px;border:0;border-image:url(/potato/ui/dungeon/moldura.webp) 60 fill / 34px stretch }
.raid-card__palco { position:relative;display:grid;place-items:center;height:112px }
.raid-card__boss { position:relative;width:auto;max-width:128px;max-height:112px;filter:drop-shadow(0 6px 6px rgb(0 0 0 / .55)) }
.raid-card__recarga { color:#6f8794;font-size:12px;white-space:nowrap }
.raid-card__premio img { grid-row:span 2;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .6)) }
.raid-card__go { min-width:132px;padding:13px 26px;border:2px solid #072030;border-radius:12px;background:linear-gradient(180deg,#6fe4f7,#2a9dc6 52%,#12617f);box-shadow:inset 0 2px #ffffff73,0 4px #072e3c,0 10px 16px -6px #000000d9;color:#052029;font-size:17px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 0 rgb(255 255 255 / .35) }
/* D. Pets */
.pets { display:flex;flex-direction:column;gap:8px;padding:12px }
.pet-card__art { width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .45)) }
/* E. Poder (estrelas) */
.power__estrelas { display:flex;gap:6px;margin-top:4px;font-size:18px;line-height:1 }
.power__estrela[data-cheia=true] { background:linear-gradient(180deg,#fff3b4,#f2c15a 55%,#d68019);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none }

/* 19/09, A/B do corte de CSS (2ª rodada): moldura de grau do ícone de skill (`data-grade`) — o pacote/estilos.css já
   conta com ela (neutraliza na janela Habilidades e cita --skill-grade). Copiado do bundle de produção. */
[data-grade=true] { padding:4px;border-radius:8px;background:var(--skill-grade) center / 100% 100% no-repeat }
img.orb__icon { width:34px;height:34px;border-radius:8px;object-fit:contain;pointer-events:none }
img.orb__icon[data-grade=true] { width:38px;height:38px }

/* 19/09, A/B do corte de CSS: base do dock/orbes (o fallback que vale quando o <html> perde data-hud16/data-bt, ex.:
   Loja aberta no celular deitado). As regras da HUD16 (mais específicas) continuam mandando. Copiado do bundle de produção. */
.scene__dock { position: absolute; left: 2.5%; bottom: 3%; z-index: 3; display: flex; flex-direction: column; gap: 7px; width: max-content; max-width: 100%; pointer-events: none; }
.skillbar { display: flex; align-items: center; gap: 12px; padding: 0px; border: 0px; border-radius: 0px; background: none; box-shadow: none; overflow: visible; pointer-events: auto; }
.orb { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; background: url("/potato/ui/buttons/buttonCircle_black.png") center center / 100% 100% no-repeat; box-shadow: none; font-size: 20px; line-height: 1; }
.orb--auto { gap: 1px; color: var(--muted); font-size: 8px; font-weight: 700; }
.orb--manage { background-image: url("/potato/ui/buttons/buttonCircle_purple.png"); }
.orb--seed { background-image: url("/potato/ui/buttons/buttonCircle_green.png"); }
.orb--empty { opacity: 0.5; }
.orb--skill { background: radial-gradient(circle,color-mix(in srgb,var(--rarity) 45%,transparent),var(--panel-dark)); }
.orb__auto { position: absolute; top: 1px; right: 3px; color: var(--green); font-size: 9px; }
.orb__cooldown { position: absolute; inset: 0px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.72); color: rgb(255, 255, 255); font-size: 12px; font-weight: 700; }
.orb__level { position: absolute; bottom: -2px; left: 0px; min-width: 16px; padding: 0px 3px; border: 1px solid var(--gold-900); border-radius: 999px; background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); color: var(--on-gold); font-size: 9px; font-weight: 800; line-height: 13px; font-variant-numeric: tabular-nums; }

/* 19/09, A/B em PALCO (cópia de produção + lote 2, conta com pet ativo): regras que existem no bundle de produção e sumiram no corte.
   `.pet-card__flag` (crachá "EM CAMPO": sem `position:absolute` ele entrava no fluxo e o card ficava 17px mais alto), largura do slider do
   Áudio e a casca `.game*` do React (overflow/altura da janela). Copiadas exatas do index-Can-Rteu.css. */
.pet-card__flag { position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 6px; background: var(--green-2); color: var(--panel-dark); font-size: 8px; font-weight: 700; letter-spacing: 0.5px; }
.settings__slider input { width: 100%; }
.game { min-height: 100dvh; max-width: 560px; margin-inline: auto; padding-top: 8px; padding-right: 8px; padding-left: 8px; padding-bottom: max(8px,env(safe-area-inset-bottom)); }
.game:not([data-wide="true"]) > .hud { flex: 0 0 auto; }
.game__main { display: flex; flex-direction: column; gap: 8px; min-height: calc(100dvh - 16px); }
.game:not([data-wide="true"]) > .game__main { flex: 1 1 auto; min-height: 0px; }
.game__scroll { display: flex; flex: 1 1 0%; flex-direction: column; gap: 8px; min-height: 0px; }
.game__main > .bottomnav { margin-top: 16px; }
.game[data-wide="true"] { display: grid; align-items: start; gap: 12px; grid-template-columns: 328px minmax(0px, 1fr); grid-template-rows: 48px var(--altura-coluna) auto; place-content: start center; max-width: 2100px; height: 100dvh; padding: 0px; overflow: hidden; }
.game[data-wide="true"] > .game__profile > .status { height: 100%; }
.game[data-wide="true"] > .game__main { grid-area: 2 / 2; height: 100%; min-height: 0px; }
.game[data-wide="true"] .game__scroll { min-height: 0px; overflow-y: auto; overscroll-behavior: contain; }
.game[data-wide="true"] > .sidenav { grid-area: 3 / 1 / auto / -1; }
.game[data-wide="true"] .game__scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.game:not([data-wide="true"]) .scene { width: 100%; }
.game[data-wide="true"] .scene { flex: 0 0 auto; min-height: 0px; width: min(100cqw,calc(var(--altura-cena) * 480 / 270)); max-width: 100%; margin-inline: auto; margin-block: 0px; }
.game[data-wide="true"] .game__palco { align-items: start; container-type: inline-size; }
.game[data-wide="true"] { --altura-util: calc(100dvh - 144px); --altura-faixa: 0px; --altura-cena: var(--altura-util); --altura-coluna: calc( var(--altura-faixa) + min(var(--altura-cena), var(--largura-palco) * 270 / 480) ); --largura-palco: calc(min(100dvw, 2100px) - 344px); }

/* TELA DE PRÊMIO / TESOURO (Zerg 21/09, 6º lote #14/#15/#16): as regras de .gacha .premio .quadro .destaque .placa .posse .reveal (e a lista .atributos/.corpo/.detalhe, escopada em .premio) vinham do CSS do bundle (assets/index-Can-Rteu.css), que o index.html deixou de ligar — as telas de "item recebido" (Pandora, Nível, Comum) ficavam sem estilo. Restauradas do arquivo original; só entram as que o CSS atual não define. */
/* Zerg 22/09 (8º lote #5, opção C: "só trocar a cor da moldura, mantendo a animação de gacha inteira"): a moldura era AZUL-MARINHO (a
   "Direção de Arte antiga", de antes da identidade bronze/madeira que o resto do jogo já tem — ver rpg/janela.css). Recolori só os tons
   estáticos do quadro/plaquinhas/textos pra bronze (mesma luminosidade/função, paleta quente em vez de fria); NADA de JS/animação mudou,
   e `var(--rarity)`/`--gold-*` (a cor dinâmica por raridade do item e os dourados, que já estavam certos) ficaram intocados. Vale pras DUAS
   telas que usam este bloco — Baú de Nível e Baú de Pandora — o Zerg foi avisado disso e escolheu mesmo assim.
   🚨 `.destaque__fita[data-tom=frio]` é EXCEÇÃO deliberada: não virou dourado. Achei ela em uso real no bundle (`assets/index-BhP45dTP.js`,
   telas de companion/pet: "tom:frio" = "+1 nível"/"+1 carta" vs "tom:ouro" = "Novo!"/"Novo!") — são dois RESULTADOS diferentes de um
   sorteio (ganhou algo novo vs só um incremento no que já tinha), e o dourado já é o selo "ouro" bem vivo. Se os dois virassem dourado, o
   jogador perderia a distinção visual entre "novo" e "duplicado". Virou pewter/bronze escuro (`--accent-500`/`--accent-700` de
   rpg/janela.css, o mesmo secundário "apagado" já usado no botão de Coletar), continua na paleta nova mas continua SECUNDÁRIO ao ouro. */
.gacha__roll{min-height:42px;padding:0 18px;border:14px solid transparent;border-image:url(/potato/ui/buttons/buttonAdvanced_yellow.png) 38 fill / 14px stretch;border-radius:0;background:none;color:var(--on-gold);font-size:14px;font-weight:700}
.gacha__roll:active:not(:disabled){transform:translateY(2px)}
.gacha__roll:disabled{border-image-source:url(/potato/ui/buttons/buttonAdvanced_black.png);color:var(--muted)}
.reveal{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.reveal__label{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;animation:reveal-fade .32s ease-out both}
.reveal__rays{position:absolute;top:16px;left:50%;width:148px;height:148px;margin-left:-74px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg 12deg,var(--rarity) 12deg 20deg,transparent 20deg 45deg);border-radius:50%;opacity:.5;filter:blur(1px);-webkit-mask-image:radial-gradient(circle,transparent 32%,#000 42%,#000 76%,transparent 82%);mask-image:radial-gradient(circle,transparent 32%,#000 42%,#000 76%,transparent 82%);animation:reveal-spin 9s linear infinite}
.reveal .item-icon{position:relative;animation:reveal-pop .42s cubic-bezier(.2,1.5,.4,1) both}
@media(prefers-reduced-motion:reduce){.reveal__rays,.reveal .item-icon,.reveal__label,.roll-list[data-single=true] .roll-list__row,.pets__roll-art{animation:none}}
.gacha{--gacha-cy: 36%;--gacha-arte: 168px;--gacha-zoom: 1;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text);overflow:hidden}
.gacha::backdrop{background:#00020659;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media(max-width:480px),(max-height:720px){.gacha{--gacha-zoom: .82}}
@media(max-height:560px){.gacha{--gacha-zoom: .62}}
.gacha__canvas{position:absolute;inset:0;width:100%;height:100%}
.gacha__palco{position:absolute;inset:0;pointer-events:none}
.gacha__chamada{position:absolute;inset-inline:0;top:max(28px,9vh);margin:0;color:color-mix(in srgb,var(--rarity) 28%,#dce8f8);font-size:var(--fs-400);font-weight:700;letter-spacing:.4em;text-align:center;text-indent:.4em;text-transform:uppercase;text-shadow:0 2px 12px rgb(0 0 0 / .9),0 0 22px color-mix(in srgb,var(--rarity) 60%,transparent)}
.gacha__arte{position:absolute;left:50%;top:var(--gacha-cy);translate:-50% -50%;scale:calc(var(--gacha-escala, 1) * var(--gacha-zoom));filter:drop-shadow(0 0 26px color-mix(in srgb,var(--rarity) 65%,transparent)) drop-shadow(0 6px 14px rgb(0 0 0 / .6))}
.gacha__arte:after{content:"";position:absolute;inset:-14%;translate:calc((var(--gacha-varre, -1) - .5) * 230%) 0;background:linear-gradient(104deg,transparent 38%,rgb(255 255 255 / .55) 50%,transparent 62%);opacity:var(--gacha-varre-alfa, 0);mix-blend-mode:plus-lighter;pointer-events:none}
.gacha__arte>*{display:block;width:var(--gacha-arte);height:var(--gacha-arte)}
.gacha__arte img{object-fit:contain}
.gacha__tier{position:absolute;inset-inline:0;top:calc(var(--gacha-cy) + var(--gacha-arte) * var(--gacha-zoom) * .5 + 26px);margin:0;color:color-mix(in srgb,var(--rarity) 42%,#fff);font-family:var(--font-display);font-size:clamp(23px,5.2vmin,40px);font-weight:900;letter-spacing:.18em;line-height:1;text-align:center;text-indent:.18em;text-shadow:0 0 30px color-mix(in srgb,var(--rarity) 85%,transparent),0 0 8px rgb(0 0 0 / .8),0 3px 0 rgb(0 0 0 / .55)}
.gacha__ficha{position:absolute;left:50%;bottom:max(14px,3vh);transform:translate(-50%);display:flex;flex-direction:column;gap:var(--sp-3);width:min(440px,calc(100vw - 24px));max-height:min(46vh,400px);padding:var(--sp-4);border-radius:var(--r-xl);background:linear-gradient(180deg,rgb(255 255 255 / .05),transparent 40%),linear-gradient(180deg,var(--surface-raised),var(--surface-base));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity) 55%,var(--line-gold)),0 0 34px -6px color-mix(in srgb,var(--rarity) 60%,transparent),var(--e-3);overflow:auto;overscroll-behavior:contain}
.gacha__pular{position:absolute;inset-inline:0;bottom:max(18px,4vh);color:var(--faint);font-size:var(--fs-200);letter-spacing:.22em;text-align:center;text-transform:uppercase;animation:gacha-respira 1.9s ease-in-out infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.gacha__pular{animation:none}}
.gacha[data-painel=true][data-fase=ficha] .gacha__palco{opacity:0;transition:opacity .28s ease-out}
.gacha[data-painel=true][data-fase=ficha]::backdrop{background:#000206bd;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gacha__painel{position:absolute;inset:0;display:grid;place-items:safe center;padding:clamp(10px,2vh,26px) 12px;overflow:auto;overscroll-behavior:contain}
.premio{position:relative;width:min(760px,100%)}
.premio[data-lote=true]{width:min(980px,100%)}
.premio__fechar{position:absolute;top:-4px;right:-60px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid color-mix(in srgb,var(--line-cool-2) 90%,transparent);border-radius:50%;background:radial-gradient(circle at 50% 30%,#2c1c0d,#100a05);color:#cbb896;font-size:19px;line-height:1;cursor:pointer}
.premio__fechar:hover{border-color:var(--gold-500);color:var(--gold-100)}
@media(max-width:1060px){.premio__fechar{top:6px;right:6px;width:36px;height:36px;font-size:16px}}
.quadro{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);padding:clamp(18px,2.6vh,30px) clamp(14px,2.2vw,34px) clamp(12px,1.8vh,20px);border:2px solid #3a2610;border-radius:var(--r-xl);background:radial-gradient(120% 62% at 50% -8%,rgb(210 140 50 / .3),transparent 62%),linear-gradient(180deg,#241609,#1c1108 44%,#100a05);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-700) 65%,transparent),inset 0 24px 60px -30px #e2b45a8c,0 0 60px -12px #4a3218bf,0 18px 50px #000000b3}
.quadro:before{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--gold-500) 16%,transparent);border-radius:calc(var(--r-xl) - 7px);pointer-events:none}
.quadro__canto{position:absolute;width:26px;height:26px;border:2px solid color-mix(in srgb,var(--gold-500) 52%,transparent);pointer-events:none}
.quadro__canto:after{content:"";position:absolute;width:5px;height:5px;rotate:45deg;background:var(--gold-300);box-shadow:0 0 6px color-mix(in srgb,var(--gold-300) 70%,transparent)}
.quadro__canto[data-canto=no]{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:12px 0 0}
.quadro__canto[data-canto=ne]{top:7px;right:7px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.quadro__canto[data-canto=so]{bottom:7px;left:7px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.quadro__canto[data-canto=se]{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 12px}
.quadro__canto[data-canto=no]:after{right:-4px;bottom:-4px}
.quadro__canto[data-canto=ne]:after{left:-4px;bottom:-4px}
.quadro__canto[data-canto=so]:after{right:-4px;top:-4px}
.quadro__canto[data-canto=se]:after{left:-4px;top:-4px}
.quadro__titulo{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);margin:0;font-family:var(--font-display);font-size:clamp(20px,3.4vh,33px);font-weight:900;letter-spacing:.14em;line-height:1.1;text-align:center;text-transform:uppercase;background:linear-gradient(180deg,#fff,#ffe9c4 52%,#e2b45a);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .6)) drop-shadow(0 0 16px rgb(226 180 90 / .5))}
.quadro__orn{position:relative;width:clamp(30px,6vw,72px);height:2px;background:linear-gradient(90deg,transparent,rgb(226 180 90 / .55))}
.quadro__orn:after{content:"";position:absolute;top:50%;right:-3px;width:9px;height:9px;translate:0 -50%;rotate:45deg;background:#f0c878;box-shadow:0 0 10px #e2b45ae6}
.quadro__orn[data-lado=fim]{scale:-1 1}
.quadro__sub{margin:-4px 0 0;color:#cbb896;font-size:clamp(11px,1.6vh,14px);letter-spacing:.04em}
.destaque{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.1vh,12px);width:100%}
.destaque__aura{position:relative;display:grid;place-items:center;isolation:isolate;margin:clamp(6px,1.4vh,18px) 0 clamp(2px,.6vh,8px)}
.destaque__aura:before{content:"";position:absolute;z-index:-1;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 45%,#fff) 0%,color-mix(in srgb,var(--rarity) 70%,transparent) 24%,transparent 64%);filter:blur(3px)}
.destaque__aura:after{content:"";position:absolute;z-index:-1;width:420px;height:420px;background:repeating-conic-gradient(from 0deg,rgb(255 255 255 / .5) 0deg .9deg,transparent .9deg 9deg),repeating-conic-gradient(from 4deg,rgb(255 255 255 / .26) 0deg 2.6deg,transparent 2.6deg 31deg);-webkit-mask-image:radial-gradient(circle,transparent 20%,#000 38%,transparent 76%);mask-image:radial-gradient(circle,transparent 20%,#000 38%,transparent 76%);opacity:.75;animation:premio-gira 26s linear infinite}
@media(prefers-reduced-motion:reduce){.destaque__aura:after{animation:none}}
.destaque__fita{padding:3px 18px;border:1px solid #ffe6a8;border-radius:var(--r-pill);background:linear-gradient(180deg,#f7c860,#d9901c);color:#2a1a02;font-family:var(--font-display);font-size:clamp(9px,1.4vh,12px);font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.destaque__fita[data-tom=frio]{border-color:#a3927a;background:linear-gradient(180deg,#6b5a3f,#3f3120);color:#f0e6d4}
.destaque__nome{font-family:var(--font-display);font-size:clamp(25px,5vh,50px);font-weight:900;letter-spacing:.05em;line-height:1.05;text-align:center;text-transform:uppercase;background:linear-gradient(180deg,#fff,#ffe9c4 48%,#e2b45a);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 3px 2px rgb(0 0 0 / .7)) drop-shadow(0 0 18px color-mix(in srgb,var(--rarity) 55%,transparent))}
.destaque__placas{display:flex;flex-direction:column;align-items:center;margin-top:clamp(2px,.8vh,8px)}
.destaque__placas .placa--score{margin-top:-13px;padding-top:19px}
.placa{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:clamp(11px,1.7vh,15px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;filter:drop-shadow(1px 0 0 rgb(138 90 28 / .9)) drop-shadow(-1px 0 0 rgb(138 90 28 / .9)) drop-shadow(0 1px 0 rgb(138 90 28 / .9)) drop-shadow(0 -1px 0 rgb(138 90 28 / .9))}
.placa--raridade{z-index:1;padding:6px 34px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);background:linear-gradient(180deg,#4a3418,#241609);color:#fdf6e6}
.placa--score{position:relative;justify-content:center;min-width:300px;padding:11px 40px 12px;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);background:linear-gradient(180deg,#241609,#100a05);color:#cbb896}
.placa--score strong{color:var(--gold-300);font-size:1.6em;line-height:1;text-shadow:0 0 14px color-mix(in srgb,var(--gold-500) 70%,transparent)}
.placa--score:before,.placa--score:after{content:"";position:absolute;top:50%;width:5px;height:5px;translate:0 -50%;rotate:45deg;background:color-mix(in srgb,var(--gold-500) 65%,transparent)}
.placa--score:before{left:13px}
.placa--score:after{right:13px}
.detalhe .placa--score{min-width:0;padding:6px 26px}
.premio .atributos{display:grid;grid-template-columns:1.16fr .84fr;gap:0;width:100%;margin:clamp(4px,.8vh,10px) 0 0;padding:clamp(7px,1.2vh,13px) clamp(8px,1.4vw,16px);border:1px solid rgb(100 74 40 / .85);border-radius:var(--r-md);background:#100a0599}
.premio .atributos__coluna:first-child{padding-right:clamp(8px,1.6vw,22px)}
.premio .atributos__coluna+.atributos__coluna{padding-left:clamp(8px,1.6vw,22px);border-left:1px solid rgb(100 74 40 / .7)}
.premio .atributos__linha{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:clamp(3px,.62vh,7px) 0;font-size:clamp(11px,1.7vh,15px)}
.premio .atributos__linha dt{display:flex;align-items:center;gap:7px;min-width:0;margin:0;color:#e8dcc4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.premio .atributos__simbolo{flex:none;font-size:1.05em;line-height:1}
.premio .atributos__linha dd{margin:0;color:#57e08a;font-weight:700;text-shadow:0 0 10px rgb(60 200 120 / .35)}
.premio .corpo{display:flex;flex-direction:column;gap:clamp(5px,.9vh,10px);width:100%;margin:clamp(4px,.8vh,10px) 0 0;padding:clamp(7px,1.2vh,13px) clamp(10px,1.5vw,18px);border:1px solid rgb(100 74 40 / .85);border-radius:var(--r-md);background:#100a0599;text-align:left}
.premio .detalhe .corpo{margin:0}
.premio .corpo__efeito{margin:0;color:#e8dcc4;font-size:clamp(11px,1.7vh,15px);line-height:1.4}
.premio .corpo__progresso{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 10px}
.premio .corpo__rotulo{color:#a3927a;font-size:clamp(9px,1.35vh,12px);letter-spacing:.08em;text-transform:uppercase}
.premio .corpo__contagem{color:var(--gold-300);font-family:var(--font-display);font-size:clamp(11px,1.6vh,15px)}
.premio .corpo__trilho{grid-column:1 / -1;height:7px;border-radius:var(--r-pill);background:#1c1108;box-shadow:inset 0 0 0 1px #4a3418e6;overflow:hidden}
.premio .corpo__trilho i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 45%,#fff),var(--rarity));box-shadow:0 0 10px color-mix(in srgb,var(--rarity) 70%,transparent)}
.premio .corpo__linhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 clamp(10px,1.6vw,22px);margin:0}
.premio .corpo__linhas>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:clamp(2px,.5vh,5px) 0;font-size:clamp(11px,1.6vh,14px)}
.premio .corpo__linhas dt{margin:0;color:#a3927a}
.premio .corpo__linhas dd{margin:0;color:#f4ecd8;font-weight:700}
.premio .corpo__linhas dd[data-forte=true]{color:#57e08a;text-shadow:0 0 10px rgb(60 200 120 / .35)}
.premio .corpo__nota{margin:0;color:#a3927a;font-size:clamp(10px,1.5vh,13px)}
.premio .corpo__nota[data-tom=bom]{color:#57e08a}
.premio .detalhe{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.6vw,20px);width:100%;padding:clamp(8px,1.4vh,15px) clamp(10px,1.6vw,18px);border:1px solid rgb(90 66 34 / .9);border-radius:var(--r-lg);background:#1c110880}
.premio .detalhe__arte{display:grid;place-items:center;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--rarity) 45%,transparent))}
.premio .detalhe__ficha{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.premio .detalhe__nome{color:var(--gold-300);font-family:var(--font-display);font-size:clamp(15px,2.4vh,23px);line-height:1.1}
.premio .detalhe .atributos{margin:0}
.posse{position:relative;display:inline-flex;align-items:center;gap:12px;margin:clamp(2px,.8vh,8px) 0 0;padding:5px 22px;border:1px solid rgb(100 74 40 / .9);border-radius:var(--r-md);background:#100a05bf;color:#cbb896;font-size:clamp(10px,1.5vh,13px);line-height:1.25}
.posse img{flex:none;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .6))}
.posse strong{display:block;color:var(--gold-300);font-family:var(--font-display);font-size:1.25em}
.posse:before,.posse:after{content:"";position:absolute;top:50%;width:clamp(30px,9vw,130px);height:1px;background:linear-gradient(90deg,transparent,rgb(180 140 70 / .45))}
.posse:before{right:calc(100% + 16px)}
.posse:after{left:calc(100% + 16px);scale:-1 1}

/* CARROSSEL DE CARTAS (Zerg 22/09, follow-up #1 — "abrir os baús ainda está tudo bugado, um em cima do
   outro, com informações soltas"): a tela de Tesouro em LOTE (×5/×10) usa `.carrossel`/`.carta` pra
   listar os itens ganhos — igual `.gacha`/`.premio`/`.quadro` (restaurados no 6º lote acima), essas regras
   vinham do CSS do bundle que o index.html deixou de ligar, mas ficaram de fora daquela restauração: só os
   AJUSTES de @media pra elas sobreviveram (nas media queries mais abaixo neste arquivo), nunca a regra BASE
   — por isso os cartões nasciam sem tamanho/posição nenhum: viravam `<button>`/`<li>` puros do navegador
   (fundo cinza do botão, marcador "•"/"1." de lista sem estilo, tudo empilhado). Restauradas do arquivo
   original (`assets/index-Can-Rteu.css`), recoloridas pro bronze (mesmo critério do 6º lote): `.carrossel__seta`
   e `.carta__raridade`/`.detalhe__meta` eram frio (`#8fb2d8`/`#93aac6`/`#7d95b2`) → bronze/pergaminho
   (`#cbb896`/`#a3927a`); `.carta__selo[data-tom=frio]` (mesma distinção "novo" vs "duplicado" do
   `.destaque__fita[data-tom=frio]` já documentado acima) → mesmos tons pewter (`--accent-500`/`--accent-700`);
   `.acao--um` (botão "Abrir outro ×1", igual pattern do `.acao--dez` que já é roxo) → também sai do azul frio.
   `var(--rarity)`/os dourados de `.carta__selo`/`.acao--seguir` ficam intocados. */
.carrossel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(2px,.8vw,10px);width:100%}
.carrossel__seta{display:grid;place-items:center;width:clamp(24px,3vw,34px);height:clamp(44px,6vh,60px);padding:0;border:0;background:none;color:#cbb896;font-size:clamp(26px,4vh,40px);line-height:1;cursor:pointer}
.carrossel__seta:hover:not(:disabled){color:var(--gold-100);text-shadow:0 0 12px rgb(242 208 137 / .7)}
.carrossel__seta:disabled{opacity:.25;cursor:default}
.carrossel__pagina{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,.9vw,12px);margin:0;padding:0;list-style:none}
.carrossel__marcas{display:flex;gap:7px;margin:0;padding:0;list-style:none}
.carta{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:10px 2px 6px;border:0;border-radius:var(--r-md);background:none;color:inherit;cursor:pointer}
.carta[data-sel=true]{background:#ffdc8c12;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-500) 45%,transparent)}
.carta__quadro{position:relative;display:grid;place-items:center}
.carta[data-sel=true] .carta__quadro:after{content:"";position:absolute;inset:-5px;border:2px solid var(--gold-300);border-radius:15px;box-shadow:0 0 18px color-mix(in srgb,var(--gold-500) 75%,transparent),inset 0 0 12px color-mix(in srgb,var(--gold-500) 45%,transparent)}
.carta__score{position:absolute;right:3px;bottom:2px;padding:0 5px;border-radius:var(--r-xs);background:#100a05b8;color:#e7f0fb;font-size:clamp(9px,1.3vh,12px);font-weight:700;text-shadow:0 1px 2px #000}
.carta__selo{position:absolute;top:-3px;left:50%;z-index:1;translate:-50% 0;padding:2px 9px;border:1px solid #ffe6a8;border-radius:var(--r-pill);background:linear-gradient(180deg,#f7c860,#d9901c);color:#2a1a02;font-family:var(--font-display);font-size:clamp(8px,1.2vh,11px);font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.carta__selo[data-tom=frio]{border-color:#a3927a;background:linear-gradient(180deg,#6b5a3f,#3f3120);color:#f0e6d4}
.carta__nome{max-width:100%;margin-top:3px;color:var(--rarity);font-size:clamp(11px,1.7vh,15px);line-height:1.2;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.carta__raridade{color:#a3927a;font-size:clamp(8px,1.25vh,11px);letter-spacing:.1em;text-transform:uppercase}
.estrelas{display:inline-flex;gap:4px;font-size:clamp(13px,2vh,20px);line-height:1}
.estrelas[data-grande=true]{gap:7px;font-size:clamp(22px,3.8vh,36px)}
.detalhe__meta{color:#a3927a;font-size:clamp(10px,1.5vh,13px);letter-spacing:.03em}
.acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1vw,14px);width:100%;margin-top:clamp(2px,.6vh,6px)}
.acoes[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.acao{display:flex;align-items:center;justify-content:center;gap:10px;padding:clamp(9px,1.7vh,16px) clamp(4px,.8vw,12px);border:2px solid;border-radius:var(--r-md);font-family:var(--font-display);cursor:pointer}
.acao:hover:not(:disabled){filter:brightness(1.1)}
.acao:disabled{border-color:#3a2a12;background:linear-gradient(180deg,#241609,#140c05);color:#7a6a52;box-shadow:none;cursor:not-allowed}
.acao:disabled img{filter:grayscale(1) brightness(.55)}
.acao__texto{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.acao__rotulo{font-size:clamp(12px,1.95vh,18px);font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 2px rgb(0 0 0 / .5);white-space:nowrap}
.acao__custo{font-size:clamp(9px,1.35vh,12px);opacity:.85}
.acao__seta{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0000002e;font-size:13px}
.acao--seguir{justify-content:center;border-color:#ffe6a8;background:linear-gradient(180deg,#f9cd68,#d9901c);color:var(--on-gold);box-shadow:inset 0 1px #ffffff80,0 3px #6d3f06,0 0 26px -4px #f0b43ce6}
.acao--um{border-color:#c9a04c;background:linear-gradient(180deg,#6b5a3f,#3f3120);color:#f0e6d4;box-shadow:inset 0 1px #ffffff40,0 3px #1c1108,0 0 20px -4px #6b5a3fcc}
.acao--dez{border-color:#b884ef;background:linear-gradient(180deg,#8b3fd2,#4a1a80);color:#f6ecff;box-shadow:inset 0 1px #ffffff59,0 3px #2a0d4c,0 0 20px -4px #9646e6cc}
.premio__aviso{margin:0;color:var(--error);font-size:clamp(10px,1.5vh,13px)}
.quadro__rodape{display:flex;align-items:center;gap:8px;margin:clamp(2px,.6vh,6px) 0 0;color:#a3927a;font-size:clamp(10px,1.45vh,13px)}
.quadro__info{display:grid;place-items:center;width:16px;height:16px;border:1px solid #8a6a3a;border-radius:50%;color:#c9a55c;font-size:10px;font-style:italic;font-weight:700}
@media(max-width:720px){.premio .detalhe{grid-template-columns:auto minmax(0,1fr);row-gap:10px}.premio .detalhe .atributos,.premio .detalhe .corpo{grid-column:1 / -1}.destaque__aura:before,.destaque__aura:after{width:240px;height:240px}}
.premio .btn-gold,.gacha .btn-gold{border:1px solid var(--gold-900);border-radius:var(--r-md);background:linear-gradient(180deg,var(--gold-100) 0%,var(--gold-300) 20%,var(--gold-500) 62%,var(--gold-700) 100%);color:var(--on-gold);font-weight:800;text-shadow:0 1px 0 rgb(255 245 210 / .45);box-shadow:inset 0 1px #fff9,0 3px 0 var(--gold-900),var(--e-2);transition:filter var(--dur-fast) var(--ease-out),translate var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.premio .btn-gold,.gacha .btn-gold{width:100%;min-height:48px;font-size:var(--fs-400)}
.premio .btn-gold:hover:not(:disabled),.gacha .btn-gold:hover:not(:disabled){filter:brightness(1.08)}
.premio .btn-gold:active:not(:disabled),.gacha .btn-gold:active:not(:disabled){translate:0 3px;box-shadow:inset 0 1px #fff6,0 0 0 var(--gold-900)}
.premio .btn-gold:disabled,.gacha .btn-gold:disabled{border-color:var(--line-cool);background:var(--surface-inset);color:var(--faint);text-shadow:none;box-shadow:inset 0 0 0 1px var(--line-cool);cursor:not-allowed}
.premio .item-icon,.gacha .item-icon,.pandora-fundo .item-icon{display:grid;place-items:center;border:2px solid var(--border);border-radius:12px;background:var(--slot-skin, none) center / 100% 100% no-repeat,var(--panel-2)}