/* ==========================================================================
   Duelo da Zoeira · css/estilo.css
   Tema do site (complementa o Bootstrap 5): cores, navegação, início,
   catálogo, deck, regras, login e salão online.
   ========================================================================== */

/* ---------- Fontes (arquivos em /fontes, licença SIL Open Font License) ---------- */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fontes/cinzel.woff2") format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fontes/crimson-pro.woff2") format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/crimson-pro-italico.woff2") format("woff2");
}

/* ---------- Variáveis ---------- */
:root {
  --fundo: #0c0806;
  --fundo-2: #150d09;
  --painel: #1b1410;
  --painel-2: #241a13;
  --borda: rgba(224, 180, 74, .32);
  --borda-forte: rgba(224, 180, 74, .6);
  --ouro: #e0b44a;
  --ouro-claro: #f6d77c;
  --ouro-escuro: #9c7424;
  --texto: #ece4d4;
  --texto-suave: #b8ad99;
  --verde: #1fbf75;
  --verde-escuro: #11834f;
  --vermelho: #e0313b;
  --lilas: #a99ee6;
  --teal: #1f9a82;

  --fonte-titulo: "Cinzel", Georgia, serif;
  --fonte-carta: "Crimson Pro", Georgia, serif;
  --fonte-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --altura-nav: 62px;

  --bs-body-bg: var(--fundo);
  --bs-body-color: var(--texto);
  --bs-border-color: rgba(224, 180, 74, .22);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--texto);
  font-family: var(--fonte-ui);
  background:
    radial-gradient(ellipse at 12% 95%, rgba(214, 110, 30, .16), transparent 45%),
    radial-gradient(ellipse at 88% 5%, rgba(170, 45, 20, .16), transparent 45%),
    radial-gradient(ellipse at 50% 40%, #1a110b, var(--fundo) 70%);
  background-attachment: fixed;
  overflow-x: hidden;
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

a {
  color: var(--ouro-claro);
}

a:hover {
  color: #fff0b8;
}

:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

.pular-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 3000;
  padding: .5rem 1rem;
  color: #000;
  background: var(--ouro);
  border-radius: .375rem;
}

.emblema-careca {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Botões ---------- */
.btn-ouro {
  --bs-btn-color: #1b1208;
  --bs-btn-bg: var(--ouro);
  --bs-btn-border-color: var(--ouro);
  --bs-btn-hover-color: #1b1208;
  --bs-btn-hover-bg: var(--ouro-claro);
  --bs-btn-hover-border-color: var(--ouro-claro);
  --bs-btn-active-bg: var(--ouro-escuro);
  --bs-btn-active-border-color: var(--ouro-escuro);
  --bs-btn-focus-shadow-rgb: 224, 180, 74;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(224, 180, 74, .25);
  transition: transform .2s ease, box-shadow .2s ease, background-color .15s ease;
}

.btn-ouro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(224, 180, 74, .4);
}

.btn-marrom {
  --bs-btn-color: #f5e9d2;
  --bs-btn-bg: #6b4a2e;
  --bs-btn-border-color: #8a6440;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #82593a;
  --bs-btn-hover-border-color: #a07650;
  font-weight: 700;
}

.btn-duelo {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d4141f;
  --bs-btn-border-color: #ff4a52;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f0202c;
  --bs-btn-hover-border-color: #ff7a80;
  font-size: 1.15rem;
}

.btn-icone {
  --bs-btn-color: var(--texto);
  --bs-btn-border-color: var(--borda);
  --bs-btn-hover-bg: rgba(224, 180, 74, .15);
  --bs-btn-hover-border-color: var(--ouro);
}

.btn-redondo {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  text-decoration: none;
  background: radial-gradient(circle at 35% 30%, #3a7bd5, #16408a);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(58, 123, 213, .5);
  transition: transform .2s ease;
}

.btn-redondo:nth-child(2) {
  background: radial-gradient(circle at 35% 30%, #3fd07a, #11834f);
  box-shadow: 0 0 12px rgba(31, 191, 117, .5);
}

.btn-redondo:hover {
  transform: translateY(-2px) scale(1.06);
}

.link-suave {
  color: var(--texto-suave);
  text-decoration: none;
}

/* ---------- Navegação ---------- */
.navbar-zoeira {
  min-height: var(--altura-nav);
  background: linear-gradient(180deg, rgba(20, 14, 10, .97), rgba(14, 10, 8, .95));
  border-bottom: 1px solid var(--borda);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
}

.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ouro-claro);
  text-decoration: none;
}

.marca__emblema {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 8px rgba(255, 210, 120, .45));
}

.marca__texto {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: linear-gradient(180deg, #fff3c4, var(--ouro) 60%, var(--ouro-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marca__texto small {
  font-size: .7em;
}

.navbar-zoeira .nav-link {
  position: relative;
  padding-inline: .6rem !important;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Entre 1200 e 1400px o menu fica mais justo para caber o chip do usuário */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-zoeira .nav-link {
    padding-inline: .38rem !important;
    font-size: .85rem;
  }

  .navbar-zoeira .nav-link::after {
    right: .38rem;
    left: .38rem;
  }

  .navbar-zoeira .logo-navbar {
    height: 46px;
  }

  /* só o avatar; o nick aparece ao passar o mouse e no salão */
  .navbar-zoeira .chip-usuario {
    padding: .2rem;
  }

  .navbar-zoeira .chip-usuario__nick {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.navbar-zoeira .nav-link::after {
  content: "";
  position: absolute;
  right: .6rem;
  bottom: .25rem;
  left: .6rem;
  height: 2px;
  background: var(--ouro);
  transform: scaleX(0);
  transition: transform .25s ease;
}

.navbar-zoeira .nav-link:hover::after,
.navbar-zoeira .nav-link.ativo::after {
  transform: scaleX(1);
}

.navbar-zoeira .nav-link.ativo {
  color: var(--ouro-claro);
}

.navbar-zoeira .navbar-toggler {
  border-color: var(--borda-forte);
}

.chip-usuario {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .7rem .2rem .2rem;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  background: rgba(224, 180, 74, .1);
  border: 1px solid var(--borda);
  border-radius: 2rem;
}

.chip-usuario img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

/* Faixa "Duelo pronto!" */
.faixa-duelo {
  position: sticky;
  top: 0;
  z-index: 1100;
  padding: .55rem 1rem;
  color: #fff;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #a8561a, #d98a2b, #a8561a);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  animation: pulsar-faixa 2s ease-in-out infinite;
}

.faixa-duelo a {
  color: #fff;
  font-weight: 800;
}

@keyframes pulsar-faixa {
  50% { filter: brightness(1.15); }
}

/* ---------- Telas ---------- */
.tela {
  padding: 2.5rem 0 3.5rem;
}

.titulo-secao {
  color: var(--ouro-claro);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: 1rem;
}

.titulo-secao::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: .5rem;
  background: linear-gradient(90deg, var(--ouro), transparent);
  border-radius: 2px;
}

.painel {
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(36, 26, 19, .92), rgba(22, 16, 12, .92));
  border: 1px solid var(--borda);
  border-radius: .75rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}

.painel .form-label {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: .9rem;
  font-weight: 600;
}

.form-control,
.form-select {
  color: var(--texto);
  background-color: rgba(0, 0, 0, .35);
  border-color: rgba(224, 180, 74, .28);
}

.form-control:focus,
.form-select:focus {
  color: var(--texto);
  background-color: rgba(0, 0, 0, .45);
  border-color: var(--ouro);
  box-shadow: 0 0 0 .2rem rgba(224, 180, 74, .25);
}

/* ---------- Início ---------- */
.tela-inicio {
  padding-top: 3rem;
}

.sobretitulo {
  margin-bottom: .4rem;
  color: var(--ouro);
  font-family: var(--fonte-titulo);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.titulo-hero {
  margin-bottom: 1.2rem;
  font-size: clamp(3rem, 9vw, 5.6rem);
  line-height: .95;
}

.titulo-hero__linha {
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #fff6d0, var(--ouro) 55%, #8a5f14);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6));
}

.titulo-hero__linha--brilho {
  background-image: linear-gradient(100deg, #fff6d0 0%, var(--ouro) 30%, #fffbe6 45%, var(--ouro) 60%, #8a5f14 100%);
  background-size: 250% 100%;
  animation: brilho-titulo 5s ease-in-out infinite;
}

@keyframes brilho-titulo {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

.titulo-hero__da {
  display: block;
  margin: -.1em 0 -.05em .1em;
  color: var(--texto-suave);
  font-size: .32em;
  letter-spacing: .4em;
  text-transform: uppercase;
}

.tela-inicio .lead {
  max-width: 36rem;
  color: #ddd3c0;
  font-size: 1.15rem;
}

.leque {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 11 / 10;
  margin-inline: auto;
  animation: flutuar 6s ease-in-out infinite;
}

.leque__carta {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 45%;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 3%;
  transform-origin: 50% 110%;
  transition: transform .35s ease, filter .35s ease;
}

.leque__carta--esquerda { transform: translateX(-92%) rotate(-13deg); }
.leque__carta--direita { transform: translateX(-8%) rotate(13deg); }
.leque__carta--centro { z-index: 2; transform: translateX(-50%) translateY(-3%); }

.leque:hover .leque__carta--esquerda { transform: translateX(-102%) rotate(-16deg); }
.leque:hover .leque__carta--direita { transform: translateX(2%) rotate(16deg); }

.leque__carta:hover,
.leque__carta:focus-visible {
  z-index: 3;
  filter: brightness(1.08) drop-shadow(0 18px 30px rgba(0, 0, 0, .6));
}

@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.destaques {
  margin-top: 3rem;
}

.destaque {
  height: 100%;
  padding: 1.3rem;
  background: linear-gradient(180deg, rgba(36, 26, 19, .85), rgba(18, 13, 10, .85));
  border: 1px solid var(--borda);
  border-radius: .8rem;
  transition: transform .25s ease, border-color .25s ease;
}

.destaque:hover {
  transform: translateY(-4px);
  border-color: var(--borda-forte);
}

.destaque__icone {
  display: block;
  margin-bottom: .4rem;
  font-size: 2rem;
}

.destaque h2 {
  color: var(--ouro-claro);
}

.destaque p {
  margin: 0;
  color: var(--texto-suave);
}

/* ---------- Notícias ---------- */
.noticia-destaque {
  margin-bottom: 2rem;
}

.noticia-faixa {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .8rem;
  color: var(--texto);
  text-decoration: none;
  background:
    radial-gradient(circle at 12% 50%, rgba(224, 180, 74, .18), transparent 55%),
    linear-gradient(180deg, rgba(36, 26, 19, .95), rgba(18, 13, 10, .95));
  border: 1px solid var(--borda-forte);
  border-radius: .9rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  transition: transform .25s ease, border-color .25s ease;
}

.noticia-faixa:hover,
.noticia-faixa:focus-visible {
  color: var(--texto);
  transform: translateY(-3px);
  border-color: var(--ouro);
}

.noticia-faixa__imagem {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: top;
  border-radius: .6rem;
  border: 1px solid var(--borda);
}

.noticia-faixa__corpo {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.noticia-faixa__rotulo {
  color: var(--ouro);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.noticia-faixa__titulo {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  line-height: 1.25;
}

.noticia-faixa__data {
  color: var(--texto-suave);
  font-size: .9rem;
}

.noticia-faixa__mais {
  color: var(--ouro);
  font-size: .9rem;
  font-weight: 600;
}

.lista-noticias {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.noticia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.3rem;
}

.noticia__imagem {
  display: block;
  overflow: hidden;
  border-radius: .7rem;
  border: 1px solid var(--borda);
}

.noticia__imagem img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

.noticia__imagem:hover img {
  transform: scale(1.02);
}

.noticia__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}

.noticia__categoria {
  padding: .15rem .6rem;
  color: #1b1208;
  font-weight: 700;
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  border-radius: 999px;
}

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

.noticia__titulo {
  margin-bottom: .6rem;
  color: var(--ouro-claro);
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
}

.noticia__evento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.noticia__data {
  padding: .3rem .7rem;
  font-weight: 600;
  background: rgba(224, 180, 74, .12);
  border: 1px solid var(--borda-forte);
  border-radius: .5rem;
}

.noticia__contagem {
  padding: .3rem .7rem;
  font-size: .9rem;
  font-weight: 700;
  border-radius: .5rem;
}

.noticia__contagem--breve,
.noticia__contagem--amanha {
  color: #1b1208;
  background: var(--ouro);
}

.noticia__contagem--hoje {
  color: #fff;
  background: var(--vermelho);
  animation: noticia-pulso 1.6s ease-in-out infinite;
}

.noticia__contagem--passou {
  color: var(--texto-suave);
  background: rgba(255, 255, 255, .06);
}

@keyframes noticia-pulso {
  50% { box-shadow: 0 0 0 6px rgba(224, 49, 59, .25); }
}

.noticia__texto {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .noticia {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .noticia-faixa__imagem {
    width: 72px;
    height: 72px;
  }
}

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

/* ---------- Catálogo ---------- */
.contagem {
  min-height: 1.5em;
  margin: 1rem 0;
  color: var(--texto-suave);
  font-style: italic;
  scroll-margin-top: calc(var(--altura-nav) + 1rem);
}

.item-catalogo {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
}

.item-catalogo__botao {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 3%;
  transition: transform .25s ease, filter .25s ease;
}

.item-catalogo__botao:hover,
.item-catalogo__botao:focus-visible {
  transform: translateY(-6px) rotate(-.6deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
}

.item-catalogo__info {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--texto-suave);
}

.selo-raridade {
  padding: .1rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
}

.selo-raridade[data-raridade="rara"] { color: #dfe7ee; border-color: #9aa6b1; }
.selo-raridade[data-raridade="super"] { color: #8ee6ff; border-color: #3aa6c9; }
.selo-raridade[data-raridade="ultra"] { color: var(--ouro-claro); border-color: var(--ouro); }
.selo-raridade[data-raridade="secreta"] {
  color: #1d1f26;
  border-color: #e9edf5;
  background: linear-gradient(100deg, #f4f6fb, #ffd9ef 30%, #fff3bf 45%, #cffff0 60%, #d6e3ff 75%, #f4f6fb);
}
.selo-raridade[data-raridade="lendaria"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #d43d6b, #c98c1a, #2aa56b, #2a7fc9, #8a3fd4);
}

.paginacao {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pagination {
  --bs-pagination-color: var(--ouro-claro);
  --bs-pagination-bg: rgba(0, 0, 0, .35);
  --bs-pagination-border-color: var(--borda);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: rgba(224, 180, 74, .2);
  --bs-pagination-active-color: #1b1208;
  --bs-pagination-active-bg: var(--ouro);
  --bs-pagination-active-border-color: var(--ouro);
  --bs-pagination-disabled-bg: rgba(0, 0, 0, .25);
  --bs-pagination-disabled-color: #6b6358;
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.status-area:empty {
  display: none;
}

.estado {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  text-align: center;
  border: 2px dashed var(--borda);
  border-radius: .75rem;
  background: rgba(0, 0, 0, .25);
}

/* Modal da carta */
.modal-content {
  color: var(--texto);
  background: linear-gradient(180deg, #221812, #150f0b);
  border: 1px solid var(--borda-forte);
}

.modal-title {
  color: var(--ouro-claro);
}

.detalhe-carta {
  max-width: 360px;
  margin-inline: auto;
}

.ficha dt {
  color: var(--texto-suave);
  font-family: var(--fonte-titulo);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ficha dd {
  margin-bottom: .8rem;
  font-weight: 600;
}

.titulo-ficha {
  color: var(--ouro-claro);
  margin-bottom: .4rem;
}

.citacao-carta {
  margin: 0;
  padding: .7rem 1rem;
  color: #f1e6cf;
  font-family: var(--fonte-carta);
  font-size: 1.15rem;
  font-style: italic;
  background: rgba(224, 180, 74, .08);
  border-left: 4px solid var(--ouro);
  border-radius: 0 .4rem .4rem 0;
}

.citacao-carta p {
  margin: 0;
}

.citacao-carta p::before { content: "“"; }
.citacao-carta p::after { content: "”"; }

.posicao-carta {
  min-width: 4.5rem;
  color: var(--texto-suave);
  text-align: center;
}

/* ---------- Deck ---------- */
.resumo-deck {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.grupo-deck {
  margin-bottom: 1.4rem;
  padding: 1.1rem 1.1rem 1.4rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 180, 74, .14), transparent 60%),
    linear-gradient(160deg, #2c1d12, #140c08);
  border: 1px solid var(--borda);
  border-radius: .8rem;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}

.grupo-deck h3 {
  margin-bottom: 1rem;
  color: var(--ouro-claro);
  font-size: 1.1rem;
}

.pilha {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  transition: transform .2s ease;
}

.pilha:hover,
.pilha:focus-visible {
  transform: translateY(-5px);
}

/* Cartas "atrás" para cada cópia extra */
.pilha[data-copias="2"] .carta__corpo {
  box-shadow: 5px 5px 0 -1px #3a2a20, 5px 5px 0 0 rgba(0, 0, 0, .6);
}

.pilha[data-copias="3"] .carta__corpo {
  box-shadow: 5px 5px 0 -1px #3a2a20, 5px 5px 0 0 rgba(0, 0, 0, .6), 10px 10px 0 -1px #3a2a20, 10px 10px 0 0 rgba(0, 0, 0, .6);
}

.pilha__copias {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #1b1208;
  font-weight: 800;
  background: var(--ouro);
  border: 2px solid #fff4c8;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

.dica {
  height: 100%;
  padding: .9rem 1rem;
  color: var(--texto-suave);
  background: rgba(0, 0, 0, .3);
  border-left: 4px solid var(--ouro);
  border-radius: 0 .5rem .5rem 0;
}

.dica strong {
  color: var(--texto);
}

/* Abas do deck */
.abas-deck {
  --bs-nav-pills-link-active-bg: var(--ouro);
  --bs-nav-pills-link-active-color: #1b1208;
  --bs-nav-link-color: var(--texto);
  --bs-nav-link-hover-color: var(--ouro-claro);
  gap: .4rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.abas-deck .nav-link {
  border: 1px solid var(--borda);
}

/* Editor do deck */
/* Os 3 decks salvos */
.deck-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-bottom: .8rem;
}

.deck-slot {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  padding: .55rem .8rem;
  color: var(--texto);
  text-align: left;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--borda);
  border-radius: .7rem;
}

.deck-slot:hover,
.deck-slot:focus-visible {
  border-color: var(--borda-forte);
}

.deck-slot[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(246, 215, 124, .18), rgba(156, 116, 36, .12));
  border-color: var(--ouro);
  box-shadow: 0 0 0 1px rgba(246, 215, 124, .35);
}

.deck-slot__nome {
  overflow: hidden;
  color: var(--ouro-claro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.deck-slot[data-ativo="true"] .deck-slot__info {
  color: #7ee2ab;
}

.barra-deck {
  position: sticky;
  top: calc(var(--altura-nav) + .5rem);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
  margin-bottom: .8rem;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, rgba(36, 26, 19, .97), rgba(22, 16, 12, .97));
  border: 1px solid var(--borda-forte);
  border-radius: .75rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

.barra-deck__contagem {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.barra-deck__contagem strong {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  line-height: 1;
}

.barra-deck__contagem strong[data-limite="min"],
.barra-deck__contagem strong[data-limite="max"] {
  color: #ffb36b;
}

.barra-deck__contagem span {
  font-weight: 700;
}

.barra-deck__contagem small {
  display: block;
  color: var(--texto-suave);
  font-size: .75rem;
  font-weight: 400;
}

.barra-deck__tipos {
  color: var(--texto-suave);
  font-weight: 600;
}

.barra-deck__status {
  color: var(--verde);
  font-size: .9rem;
  font-weight: 700;
}

.barra-deck__status[data-alterado="true"] {
  color: #ffc857;
}

.barra-deck__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-left: auto;
}

.ajuda-deck {
  color: var(--texto-suave);
  font-size: .95rem;
}

.titulo-editor {
  margin-bottom: .8rem;
  color: var(--ouro-claro);
  font-size: 1.1rem;
}

.grade-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1rem .8rem;
  min-height: 200px;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 180, 74, .12), transparent 60%),
    linear-gradient(160deg, #2c1d12, #140c08);
  border: 1px solid var(--borda);
  border-radius: .8rem;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}

#editor-colecao {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 180, 74, .12), transparent 60%),
    linear-gradient(160deg, #2d2418, #151009);
  border-color: var(--borda);
}

.item-editor {
  position: relative;
}

.item-editor__carta {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 4%;
  transition: transform .15s ease, filter .15s ease;
}

.item-editor[data-ativo="true"] .item-editor__carta:hover,
.item-editor[data-ativo="true"] .item-editor__carta:focus-visible {
  transform: translateY(-4px);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
}

.item-editor[data-ativo="false"] .item-editor__carta {
  filter: grayscale(.6) brightness(.6);
  cursor: not-allowed;
}

.item-editor__dica {
  position: absolute;
  bottom: 38%;
  left: 50%;
  z-index: 2;
  padding: .15rem .5rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1rem;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .15s ease;
  pointer-events: none;
}

.item-editor[data-ativo="true"] .item-editor__carta:hover .item-editor__dica,
.item-editor[data-ativo="true"] .item-editor__carta:focus-visible .item-editor__dica {
  opacity: 1;
}

.item-editor__qtd {
  position: absolute;
  top: -.55rem;
  right: -.55rem;
  z-index: 3;
  min-width: 2rem;
  padding: .15rem .4rem;
  color: #1b1208;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  background: var(--ouro);
  border: 2px solid #fff4c8;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.item-editor__lupa {
  position: absolute;
  top: -.5rem;
  left: -.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  font-size: .8rem;
  background: #221913;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
}

.item-editor__lupa:hover {
  background: #3a2a1d;
}

@media (max-width: 575.98px) {
  .grade-editor {
    grid-template-columns: repeat(3, 1fr);
    padding: .8rem .6rem;
  }

  .barra-deck__botoes {
    margin-left: 0;
  }
}

/* ---------- Regras ---------- */
.accordion {
  --bs-accordion-bg: rgba(27, 20, 16, .9);
  --bs-accordion-border-color: var(--borda);
  --bs-accordion-btn-color: var(--texto);
  --bs-accordion-active-color: var(--ouro-claro);
  --bs-accordion-active-bg: rgba(224, 180, 74, .1);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(224, 180, 74, .3);
}

.accordion-button {
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.tabela-tributos {
  --bs-table-bg: transparent;
  max-width: 44rem;
}

.tabela-tributos caption {
  caption-side: top;
  color: var(--texto-suave);
}

/* ---------- Login ---------- */
.boas-vindas {
  height: 100%;
  padding: 1.6rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224, 180, 74, .2), transparent 60%),
    linear-gradient(180deg, #221812, #120d0a);
  border: 1px solid var(--borda);
  border-radius: .8rem;
}

.boas-vindas__emblema {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto .8rem;
  filter: drop-shadow(0 0 20px rgba(255, 210, 120, .45));
  animation: flutuar 5s ease-in-out infinite;
}

.boas-vindas h3 {
  color: var(--ouro-claro);
}

.aviso-senha {
  padding: .7rem .9rem;
  color: #ffe2a8;
  font-size: .92rem;
  text-align: left;
  background: rgba(224, 120, 40, .12);
  border: 1px solid rgba(224, 140, 60, .4);
  border-radius: .5rem;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--borda);
  --bs-nav-tabs-link-active-color: var(--ouro-claro);
  --bs-nav-tabs-link-active-bg: rgba(224, 180, 74, .08);
  --bs-nav-tabs-link-active-border-color: var(--borda) var(--borda) transparent;
  --bs-nav-link-color: var(--texto-suave);
  --bs-nav-link-hover-color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.escolha-avatar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: .5rem;
}

.escolha-avatar label {
  position: relative;
  cursor: pointer;
}

.escolha-avatar input {
  position: absolute;
  opacity: 0;
}

.escolha-avatar img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 50%;
  filter: saturate(.7) brightness(.85);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.escolha-avatar input:checked + img {
  border-color: var(--ouro);
  filter: none;
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(224, 180, 74, .6);
}

.escolha-avatar input:focus-visible + img {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

.mensagem-form {
  min-height: 1.4em;
  margin-bottom: .6rem;
  color: #ff8a8f;
  font-weight: 600;
}

.mensagem-form.ok {
  color: var(--verde);
}

.mensagem-form.info {
  color: var(--texto-suave);
  font-weight: 400;
}

/* ---------- Salão online ---------- */
.salao {
  overflow: hidden;
  background: linear-gradient(180deg, #1c1511, #140f0c);
  border: 1px solid var(--borda);
  border-radius: .8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.salao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(180deg, #221913, #1a130f);
  border-bottom: 1px solid var(--borda);
}

.salao__titulo {
  margin: 0;
  color: #d8b98a;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.pilula-online {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(180deg, #16c784, #0d8f5c);
  border-radius: 2rem;
  box-shadow: 0 0 16px rgba(22, 199, 132, .45);
}

.status-conexao {
  font-size: .78rem;
  color: var(--texto-suave);
}

.status-conexao::before {
  content: "●";
  margin-right: .3rem;
  color: #888;
}

.status-conexao[data-status="conectado"]::before { color: var(--verde); }
.status-conexao[data-status="reconectando"]::before { color: #f0b429; }
.status-conexao[data-status="desconectado"]::before { color: var(--vermelho); }

.salao__info {
  padding: .7rem 1.1rem;
  font-size: .88rem;
  border-bottom: 1px solid rgba(224, 180, 74, .15);
}

.cor-voce { color: #5ee6b0; font-weight: 700; }
.cor-duelando { color: #ff8a5c; font-weight: 700; }
.cor-outros { color: var(--lilas); font-weight: 700; }

.salao__corpo {
  display: grid;
  grid-template-columns: 1fr 250px;
  min-height: 520px;
}

.salao__chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .8rem;
  border-right: 1px solid rgba(224, 180, 74, .15);
}

.abas-chat {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  border-bottom: 1px solid rgba(224, 180, 74, .25);
}

.aba-chat {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  color: var(--texto-suave);
  font-family: var(--fonte-titulo);
  font-size: .85rem;
  font-weight: 700;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
}

.aba-chat[aria-selected="true"] {
  color: #fff;
  border-bottom-color: var(--ouro);
}

.aba-chat__fechar {
  padding: 0 .15rem;
  color: #b58cff;
  font-size: 1rem;
  line-height: 1;
  background: none;
  border: 0;
}

.aba-chat__novas {
  min-width: 1.1rem;
  padding: 0 .3rem;
  color: #fff;
  font-size: .7rem;
  background: var(--vermelho);
  border-radius: 1rem;
}

.mensagens {
  flex: 1;
  height: 380px;
  min-height: 260px;
  margin: .6rem 0;
  padding: .6rem .8rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(224, 180, 74, .18);
  border-radius: .5rem;
}

.msg {
  margin-bottom: .45rem;
  font-size: .92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.msg__hora {
  margin-right: .35rem;
  color: #7d7466;
  font-size: .72rem;
}

.msg__autor {
  margin-right: .25rem;
  color: var(--lilas);
  font-weight: 800;
}

.msg--minha .msg__autor { color: #5ee6b0; }

.msg--sistema {
  padding: .5rem .8rem;
  color: #ffd87a;
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
  background: rgba(120, 70, 20, .35);
  border-left: 4px solid var(--ouro);
  border-radius: .3rem;
}

.caixa-desafio {
  max-width: 560px;
  margin: .8rem auto;
  padding: .9rem;
  text-align: center;
  background: #333a4a;
  border: 1px solid var(--ouro);
  border-radius: .5rem;
}

.caixa-desafio__titulo {
  margin-bottom: .5rem;
  color: #ffd84a;
  font-weight: 800;
}

.caixa-desafio__estado {
  color: #c9cbd3;
  font-size: .88rem;
}

.barra-emojis {
  display: flex;
  gap: .15rem;
  padding: .2rem;
  overflow-x: auto;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(224, 180, 74, .18);
  border-radius: .4rem;
  scrollbar-width: thin;
}

.barra-emojis button {
  flex-shrink: 0;
  padding: .15rem .3rem;
  font-size: 1.2rem;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: .3rem;
  transition: transform .15s ease;
}

.barra-emojis button:hover {
  transform: scale(1.25);
}

.envio-chat {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  margin-top: .6rem;
}

.envio-chat textarea {
  resize: none;
}

.salao__online {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem;
}

.online-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .5rem .7rem;
  color: #d8b98a;
  font-size: .9rem;
  background: rgba(224, 180, 74, .08);
  border: 1px solid var(--borda);
  border-radius: .5rem;
}

.online-titulo .pilula {
  margin-left: auto;
  padding: .05rem .5rem;
  color: #fff;
  font-size: .8rem;
  background: var(--verde-escuro);
  border-radius: 1rem;
}

.lista-online {
  flex: 1;
  max-height: 440px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.usuario-online {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4rem .3rem;
  color: var(--lilas);
  font-size: .88rem;
  font-weight: 700;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(224, 180, 74, .1);
  border-radius: .3rem;
}

.usuario-online:hover,
.usuario-online:focus-visible {
  background: rgba(224, 180, 74, .1);
}

.usuario-online[data-eu="true"] { color: #5ee6b0; }
.usuario-online[data-status="duelando"] { color: #ff8a5c; }

.usuario-online__bolinha {
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  background: var(--verde);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--verde);
}

.usuario-online[data-status="duelando"] .usuario-online__bolinha {
  background: #ff8a5c;
  box-shadow: 0 0 6px #ff8a5c;
}

.avatar {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid rgba(224, 180, 74, .6);
  border-radius: .35rem;
}

.avatar__nivel {
  position: absolute;
  bottom: -5px;
  left: -5px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 2px;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  background: #1b1b1b;
  border: 1.5px solid #fff;
  border-radius: 50%;
}

.tag-cla {
  color: #8fb8ff;
}

/* Menu de contexto (botão direito no duelista) */
.menu-contexto {
  position: fixed;
  z-index: 2000;
  min-width: 210px;
  padding: .35rem;
  background: #221913;
  border: 1px solid var(--borda-forte);
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}

.menu-contexto__titulo {
  padding: .3rem .6rem .45rem;
  color: var(--ouro-claro);
  font-size: .82rem;
  font-weight: 700;
  border-bottom: 1px solid var(--borda);
}

.menu-contexto button {
  display: block;
  width: 100%;
  padding: .45rem .6rem;
  color: var(--texto);
  font-size: .9rem;
  text-align: left;
  background: none;
  border: 0;
  border-radius: .3rem;
}

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

.menu-contexto button:disabled {
  color: #6b6358;
}

/* Perfil e ranking */
.perfil,
.ranking {
  margin-bottom: 1rem;
  padding: 1rem;
  background: linear-gradient(180deg, #221812, #150f0b);
  border: 1px solid var(--borda);
  border-radius: .8rem;
}

.perfil__topo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
}

.perfil__avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 3px solid var(--ouro);
  border-radius: .6rem;
  box-shadow: 0 0 14px rgba(224, 180, 74, .4);
}

.perfil__nick {
  margin: 0;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.perfil__nivel {
  color: var(--texto-suave);
  font-size: .85rem;
}

/* ADM: nome em vermelho com selo */
.nome-adm {
  color: #ff5a4f;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 70, 60, .45);
}

.selo-adm {
  display: inline-block;
  margin-left: .3em;
  padding: .05em .4em;
  color: #fff;
  font-size: .68em;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
  vertical-align: .12em;
  background: linear-gradient(180deg, #ff5a4f, #b3140c);
  border: 1px solid #ffd2cc;
  border-radius: .35em;
  box-shadow: 0 0 6px rgba(255, 60, 50, .55);
}

.msg--adm {
  background: rgba(255, 70, 60, .08);
  border-left: 3px solid #ff5a4f;
}

.msg__falso {
  margin-left: .35em;
  color: #ffb84d;
  font-size: .75em;
  font-weight: 700;
}

.msg--aviso {
  margin: .4rem 0;
  padding: .55rem .75rem;
  background: linear-gradient(180deg, rgba(255, 90, 79, .18), rgba(255, 90, 79, .06));
  border: 1px solid rgba(255, 110, 90, .6);
  border-radius: .6rem;
  box-shadow: 0 0 14px rgba(255, 70, 60, .2);
}

.msg__aviso-titulo {
  color: #ff8a7a;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.msg__aviso-texto {
  margin: .15rem 0;
  color: #fff;
  font-weight: 700;
}

.msg__aviso-de {
  color: var(--texto-suave);
  font-size: .78rem;
}

.painel-adm {
  margin-top: .9rem;
  padding: .7rem .8rem;
  background: rgba(255, 70, 60, .07);
  border: 1px solid rgba(255, 110, 90, .45);
  border-radius: .7rem;
}

.painel-adm__titulo {
  margin: 0 0 .4rem;
  color: #ff8a7a;
  font-size: .95rem;
  font-weight: 800;
}

.painel-adm__dica {
  margin-bottom: .5rem;
  color: var(--texto-suave);
  font-size: .8rem;
}

.painel-adm__form {
  display: grid;
  gap: .4rem;
}

.painel-adm__linha {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: .4rem;
}

.painel-adm__senha {
  display: grid;
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed rgba(255, 110, 90, .45);
}

.painel-adm__senha .painel-adm__titulo,
.painel-adm__senha .painel-adm__dica {
  margin: 0;
}

.painel-adm__achado {
  margin: 0;
  font-size: .82rem;
}

.painel-adm__achado:empty {
  display: none;
}

.painel-adm__achado--ok {
  color: #6dff9a;
}

.painel-adm__achado--erro {
  color: #ffb09a;
}

.painel-adm__parecido {
  margin: .15rem .25rem 0 0;
  padding: .05rem .5rem;
  color: var(--texto);
  font-size: .8rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--borda);
  border-radius: 1rem;
}

.painel-adm__parecido:hover,
.painel-adm__parecido:focus-visible {
  color: #1b1208;
  background: var(--ouro);
}

.painel-adm__feito {
  margin: .3rem 0 0;
  color: #6dff9a;
  font-size: .85rem;
}

.painel-adm__feito code {
  padding: .05rem .35rem;
  color: #fff;
  font-size: .95rem;
  letter-spacing: .06em;
  background: rgba(0, 0, 0, .4);
  border-radius: .3rem;
  user-select: all;
}

.painel-adm__linha--senha {
  grid-template-columns: 1fr auto auto;
}

.painel-adm__linha--senha input {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .06em;
}

/* Meu perfil: trocar a senha */
.trocar-senha {
  display: grid;
  gap: .4rem;
}

.trocar-senha__form {
  display: grid;
  gap: .4rem;
  padding: .6rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--borda);
  border-radius: .6rem;
}

.trocar-senha__form[hidden] {
  display: none;
}

.trocar-senha__aviso {
  margin: 0;
  color: var(--ouro-claro);
  font-size: .82rem;
}

.trocar-senha__form .mensagem-form:empty {
  display: none;
}

.linha-id {
  display: block;
  margin-top: .2rem;
  padding: 0;
  color: var(--texto-suave);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  background: none;
  border: 0;
}

.linha-id:hover {
  color: var(--ouro-claro);
}

/* Troféus e relíquias no perfil */
.premios__titulo {
  margin: .7rem 0 .4rem;
  color: var(--ouro-claro);
  font-size: .9rem;
  font-weight: 800;
}

.premios__trofeus {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.premios__trofeu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 74px;
  margin: 0;
  padding: .2rem .1rem;
  color: inherit;
  text-align: center;
  cursor: zoom-in;
  background: none;
  border: 1px solid transparent;
  border-radius: .5rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.premios__trofeu:hover,
.premios__trofeu:focus-visible {
  transform: translateY(-3px);
  background: rgba(224, 180, 74, .08);
  border-color: var(--borda);
}

.premios__trofeu:focus-visible,
.reliquia__img:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

.premios__trofeu img {
  width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
  transition: filter .2s ease;
}

.premios__trofeu:hover img {
  filter: drop-shadow(0 0 10px rgba(255, 210, 110, .45)) drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}

.premios__legenda {
  color: var(--texto-suave);
  font-size: .62rem;
  line-height: 1.15;
}

.reliquia {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: .3rem .6rem;
  align-items: center;
  margin-bottom: .5rem;
  padding: .5rem;
  background: linear-gradient(180deg, rgba(255, 200, 60, .12), rgba(255, 200, 60, .03));
  border: 1px solid rgba(255, 200, 80, .4);
  border-radius: .6rem;
}

.reliquia--equipada {
  border-color: #ffd75a;
  box-shadow: 0 0 12px rgba(255, 210, 80, .35);
}

.reliquia__img {
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: none;
  border: 0;
  border-radius: .45rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.reliquia__img img {
  display: block;
  width: 100%;
  height: 100%;
}

.reliquia__img:hover {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(255, 200, 80, .55);
}

/* ---------- Detalhes do troféu / relíquia (janela grande) ---------- */
.visor-premio {
  --cor-premio: 255, 200, 80;
  width: min(820px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
  color: var(--texto);
  background: transparent;
  border: 0;
}

.visor-premio--prata { --cor-premio: 190, 175, 255; }
.visor-premio--bronze { --cor-premio: 230, 130, 70; }

.visor-premio::backdrop {
  background: rgba(5, 3, 2, .82);
  backdrop-filter: blur(3px);
}

.visor-premio[open] .visor-premio__caixa {
  animation: visor-entrar .28s ease-out;
}

.visor-premio__caixa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  max-height: calc(100dvh - 32px);
  padding: 1.5rem;
  overflow-y: auto;
  background:
    radial-gradient(circle at 25% 40%, rgba(var(--cor-premio), .16), transparent 60%),
    linear-gradient(180deg, #241a13, #120d0a);
  border: 1px solid rgba(var(--cor-premio), .55);
  border-radius: 1rem;
  box-shadow: 0 0 40px rgba(var(--cor-premio), .18), 0 20px 60px rgba(0, 0, 0, .6);
}

.visor-premio__fechar {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--texto);
  font-size: 1rem;
  line-height: 1;
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--borda);
  border-radius: 50%;
}

.visor-premio__fechar:hover,
.visor-premio__fechar:focus-visible {
  color: #1b1208;
  background: var(--ouro);
}

.visor-premio__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.visor-premio__brilho {
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(circle, rgba(var(--cor-premio), .45), transparent 65%);
  filter: blur(18px);
  animation: visor-pulsar 3.2s ease-in-out infinite;
}

.visor-premio__img {
  position: relative;
  width: 100%;
  max-height: min(62vh, 520px);
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .65));
  animation: visor-flutuar 4s ease-in-out infinite;
}

.visor-premio--careca-do-milenio .visor-premio__img {
  border-radius: .7rem;
  box-shadow: 0 0 30px rgba(var(--cor-premio), .35);
}

.visor-premio__tipo {
  margin-bottom: .2rem;
  color: rgb(var(--cor-premio));
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.visor-premio__nome {
  margin-bottom: .4rem;
  color: var(--ouro-claro);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.visor-premio__posicao,
.visor-premio__habilidade {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .2rem .7rem;
  color: #1b1208;
  font-weight: 700;
  background: rgb(var(--cor-premio));
  border-radius: 999px;
}

.visor-premio__descricao {
  color: var(--texto-suave);
}

.visor-premio__ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .9rem;
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--borda);
  border-radius: .6rem;
}

.visor-premio__ficha dt {
  color: var(--texto-suave);
  font-weight: 600;
}

.visor-premio__ficha dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.visor-premio__selo {
  margin: 0;
  color: var(--verde);
  font-size: .85rem;
  font-weight: 600;
}

@keyframes visor-entrar {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
}

@keyframes visor-flutuar {
  50% { transform: translateY(-8px); }
}

@keyframes visor-pulsar {
  50% { opacity: .55; transform: scale(.94); }
}

@media (max-width: 767.98px) {
  .visor-premio__caixa {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.1rem;
  }

  .visor-premio__img {
    max-height: 42vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visor-premio__img,
  .visor-premio__brilho,
  .visor-premio[open] .visor-premio__caixa {
    animation: none;
  }
}

.reliquia__texto strong {
  display: block;
  color: #ffe9a6;
}

.reliquia__de {
  color: var(--texto-suave);
  font-size: .72rem;
}

.reliquia__texto p {
  margin: .15rem 0 0;
  font-size: .78rem;
}

.reliquia .btn {
  grid-column: 1 / -1;
}

/* Torneio */
.btn-loja {
  color: #1b1208;
  font-weight: 800;
  background: linear-gradient(180deg, #7ee0b0, #2fae73);
  border: 1px solid #1f8a59;
}

.btn-loja:hover,
.btn-loja:focus-visible {
  color: #1b1208;
  background: linear-gradient(180deg, #a3f0c9, #3cc585);
}

.btn-roleta {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, #b8322a, #d9a521, #7b3fc4);
  border: 1px solid rgba(255, 255, 255, .25);
}

.btn-roleta:hover,
.btn-roleta:focus-visible {
  color: #fff;
  filter: brightness(1.15);
}

/* ---------- Roleta Diária ---------- */
.roleta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

.roleta__roda-caixa {
  position: relative;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  padding-top: 14px;
}

.roleta__ponteiro {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
  border-top: 28px solid #f6d77c;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
  transform: translateX(-50%);
}

.roleta__roda {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(224, 180, 74, .35));
}

.roleta__fatia {
  stroke: rgba(0, 0, 0, .45);
  stroke-width: 1.2;
}

.roleta__aro {
  fill: none;
  stroke: #e0b44a;
  stroke-width: 5;
}

.roleta__centro {
  fill: #1b1410;
  stroke: #e0b44a;
  stroke-width: 3;
}

.roleta__texto,
.roleta__careca {
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.roleta__careca {
  font-size: 26px;
  dominant-baseline: auto;
}

.roleta__valor {
  fill: #fff;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .7);
  stroke-width: 3px;
}

.roleta__lado {
  display: grid;
  gap: .7rem;
}

.roleta__status {
  margin: 0;
  font-weight: 600;
}

.roleta__girar {
  justify-self: start;
}

.roleta__resultado:empty {
  display: none;
}

.roleta__resultado {
  padding: .8rem;
  text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--borda);
  border-radius: .7rem;
}

.roleta__resultado--raro {
  border-color: #f6d77c;
  box-shadow: 0 0 18px rgba(255, 210, 90, .45), inset 0 0 22px rgba(190, 110, 255, .2);
}

.roleta__premio {
  margin: 0;
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
}

.roleta__premio--nada {
  color: var(--texto-suave);
}

.roleta__premio-nome {
  margin: .2rem 0 .4rem;
  font-weight: 700;
}

.roleta__carta {
  width: min(180px, 60%);
  margin: .4rem auto;
}

.roleta__reliquia {
  width: min(150px, 55%);
  margin: .4rem auto;
  border-radius: .6rem;
  box-shadow: 0 0 22px rgba(255, 210, 80, .7);
}

.roleta__dica {
  margin: .3rem 0 0;
  color: var(--texto-suave);
  font-size: .9rem;
}

.roleta__chances summary {
  font-weight: 700;
  cursor: pointer;
}

.roleta__tabela {
  margin: .4rem 0 .2rem;
  font-size: .9rem;
}

.roleta__cor {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .45rem;
  vertical-align: -.1rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
}

.roleta__nota,
.roleta__regras {
  margin: 0;
  color: var(--texto-suave);
  font-size: .82rem;
}

@media (max-width: 767.98px) {
  .roleta {
    grid-template-columns: 1fr;
  }

  .roleta__roda-caixa {
    max-width: 280px;
  }

  .roleta__girar {
    justify-self: stretch;
  }
}

/* Botões do cabeçalho do salão: no celular quebram linha em vez de passar da tela */
@media (max-width: 575.98px) {
  .salao__cabecalho > .ms-auto {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .4rem;
  }
}

/* ---------- Moldura de avatar (cosmético) ----------
   A caixa fica do tamanho do avatar de antes; o avatar entra no buraco da moldura e a
   moldura passa um pouco por fora (--escala-moldura). Brilho: faixa de luz + faíscas. */
.com-moldura {
  --escala-moldura: 1.32;
  position: relative;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

.com-moldura__avatar {
  width: calc(var(--abertura) * var(--escala-moldura) * 104%);
  height: calc(var(--abertura) * var(--escala-moldura) * 104%);
  object-fit: cover;
  border-radius: 8%;
}

.com-moldura__moldura,
.com-moldura__brilho,
.com-moldura::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--escala-moldura) * 100%);
  height: calc(var(--escala-moldura) * 100%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.com-moldura__moldura {
  z-index: 1;
}

.com-moldura__brilho {
  z-index: 2;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 48%, rgba(255, 228, 150, .5) 52%, transparent 62%) 0 0 / 300% 100%;
  -webkit-mask: var(--mascara) center / 100% 100% no-repeat;
  mask: var(--mascara) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  animation: moldura-brilho 3.4s ease-in-out infinite;
}

.com-moldura::after {
  content: "";
  z-index: 3;
  background:
    radial-gradient(circle at 12% 16%, #fff 0 1.1%, transparent 2.6%),
    radial-gradient(circle at 88% 24%, #fff 0 .9%, transparent 2.3%),
    radial-gradient(circle at 80% 90%, #fff 0 1.1%, transparent 2.6%),
    radial-gradient(circle at 18% 84%, #fff 0 .8%, transparent 2.1%),
    radial-gradient(circle at 50% 4%, #fff 0 .9%, transparent 2.3%);
  filter: drop-shadow(0 0 3px #ffe9a8);
  opacity: 0;
  animation: moldura-faisca 2.8s ease-in-out infinite;
}

@keyframes moldura-brilho {
  0% { background-position: 110% 0; }
  55%, 100% { background-position: -10% 0; }
}

@keyframes moldura-faisca {
  0%, 100% { opacity: 0; }
  45% { opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
  .com-moldura__brilho,
  .com-moldura::after {
    display: none;
  }
}

/* Prêmio da roleta no chat */
.msg--roleta {
  color: var(--texto-suave);
  font-style: italic;
}

.msg--roleta-rara {
  padding: .5rem .7rem;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(90deg, rgba(184, 50, 42, .35), rgba(217, 165, 33, .35), rgba(123, 63, 196, .35));
  border: 1px solid #f6d77c;
  border-radius: .6rem;
  box-shadow: 0 0 14px rgba(255, 210, 90, .4);
}

.msg__roleta-titulo {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: .8rem;
  letter-spacing: .08em;
}

.selo-loja {
  padding: .05rem .45rem;
  color: #0f3d27;
  font-size: .72rem;
  font-weight: 800;
  background: #7ee0b0;
  border-radius: 1rem;
}

#detalhe-loja {
  margin-top: .4rem;
}

/* Loja da Zoeira */
.loja__topo {
  margin-bottom: 1rem;
}

.loja__saldo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .3rem;
  font-size: 1.05rem;
}

.loja__saldo strong {
  color: var(--ouro-claro);
  font-size: 1.25rem;
}

.loja__dica {
  margin: 0;
  color: var(--texto-suave);
  font-size: .85rem;
}

.loja__abas {
  display: flex;
  gap: .4rem;
  margin: .2rem 0 .5rem;
}

.loja__aba {
  padding: .35rem .9rem;
  color: var(--texto-suave);
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--borda);
  border-radius: 2rem;
}

.loja__aba[aria-selected="true"] {
  color: #1b1208;
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  border-color: var(--ouro);
}

.loja__secao {
  margin: 1rem 0 .5rem;
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
}

.loja__grade.loja__grade--campo {
  grid-template-columns: 1fr;
}

.loja__item--cosmetico .loja__info {
  align-items: flex-start;
}

.loja__descricao {
  color: var(--texto-suave);
  font-size: .85rem;
}

.loja__previa {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: .6rem;
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 100, 255, .18), rgba(0, 0, 0, .35));
  border-radius: .6rem;
}

.loja__previa-avatar,
.loja__previa .com-moldura {
  width: 104px;
  height: 104px;
}

.loja__previa--campo {
  padding: 0;
  overflow: hidden;
}

.loja__previa--campo img {
  display: block;
  width: 100%;
  height: auto;
}

.loja__previa--verso .carta-verso {
  width: 92px;
}

.loja__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.loja__item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .6rem;
  background: linear-gradient(180deg, rgba(36, 26, 19, .9), rgba(18, 13, 10, .9));
  border: 1px solid var(--borda);
  border-radius: .8rem;
}

.loja__item--minha {
  border-color: rgba(31, 191, 117, .6);
}

.loja__item--destaque {
  box-shadow: 0 0 0 2px var(--ouro), 0 0 18px rgba(224, 180, 74, .4);
}

.loja__carta {
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
}

.loja__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  text-align: center;
}

.loja__nome {
  color: var(--ouro-claro);
  font-size: .9rem;
  line-height: 1.2;
}

.loja__preco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.loja__tenho {
  color: #6dff9a;
  font-weight: 700;
}

.loja__falta {
  color: var(--texto-suave);
  font-size: .78rem;
}

.btn-torneio {
  position: relative;
  color: #1b1208;
  font-weight: 800;
  background: linear-gradient(180deg, #ffe08a, #d9a21b);
  border: 1px solid #ffe9a6;
}

.btn-torneio:hover {
  color: #1b1208;
  filter: brightness(1.08);
}

.btn-torneio[data-ativo="true"]::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  background: #ff4d4d;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pulsar-torneio 1.4s ease-in-out infinite;
}

@keyframes pulsar-torneio {
  50% { transform: scale(1.35); }
}

.torneio__topo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.torneio__nome {
  margin: 0;
  color: var(--ouro-claro);
  font-size: 1.3rem;
}

.torneio__status {
  padding: .1rem .55rem;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .08);
  border-radius: 1rem;
}

.torneio__status--inscricoes { color: #9fe7ff; }
.torneio__status--andamento { color: #6dff9a; }
.torneio__status--encerrado { color: #ffd75a; }

.torneio__sub,
.torneio__vazio {
  color: var(--texto-suave);
  font-size: .85rem;
}

.torneio__titulo {
  margin: .6rem 0 .4rem;
  color: var(--ouro-claro);
  font-size: .95rem;
  font-weight: 800;
}

.torneio__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem;
}

.torneio__inscritos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .7rem;
}

.torneio__jogador {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .15rem .5rem .15rem .2rem;
  font-size: .85rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
}

.torneio__jogador img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
}

.torneio__jogador--eu {
  color: #6dffb0;
  border-color: rgba(109, 255, 176, .5);
}

.torneio__remover {
  margin-left: .2rem;
  padding: 0 .3rem;
  color: #ff8a7a;
  font-weight: 900;
  line-height: 1;
  background: none;
  border: 0;
}

.torneio__chave {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  padding-bottom: .4rem;
}

.torneio__rodada {
  display: flex;
  flex: 0 0 230px;
  flex-direction: column;
  gap: .5rem;
}

.torneio__partida {
  padding: .45rem .5rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
}

.torneio__partida--minha {
  border-color: rgba(109, 255, 176, .6);
}

.torneio__partida--jogando {
  box-shadow: 0 0 0 2px rgba(255, 210, 80, .6);
}

.torneio__lado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  padding: .12rem 0;
}

.torneio__lado--venceu .torneio__jogador {
  color: #ffd75a;
  border-color: #ffd75a;
}

.torneio__placar {
  min-width: 1.2rem;
  font-size: 1rem;
  text-align: right;
}

.torneio__a-definir {
  color: var(--texto-suave);
  font-size: .8rem;
  font-style: italic;
}

.torneio__estado {
  margin-top: .25rem;
  color: var(--texto-suave);
  font-size: .75rem;
}

.torneio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .4rem;
}

.torneio__acoes .btn {
  padding: .1rem .4rem;
  font-size: .72rem;
}

.torneio__lugares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
}

.torneio__lugar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  width: 150px;
  text-align: center;
}

.torneio__lugar img {
  width: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .7));
}

.torneio__lugar--ouro img {
  width: 120%;
}

.torneio__lugar span {
  color: var(--texto-suave);
  font-size: .78rem;
}

/* Histórico de torneios */
.torneio-historico {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

.torneio-historico__titulo {
  margin: 0 0 .6rem;
  color: var(--ouro-claro);
  font-size: 1.05rem;
  font-weight: 800;
}

.torneio-historico__guardar {
  margin-bottom: .6rem;
}

.torneio-historico__item {
  margin-bottom: .7rem;
  padding: .7rem .8rem;
  background: linear-gradient(180deg, rgba(255, 215, 90, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .7rem;
}

.torneio-historico__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
}

.torneio-historico__nome {
  color: var(--ouro-claro);
  font-size: 1rem;
}

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

.torneio-historico__podio {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin: .55rem 0;
}

.torneio-historico__lugar {
  display: inline-grid;
  grid-template-columns: 30px auto;
  grid-template-rows: auto auto;
  column-gap: .4rem;
  align-items: center;
  padding: .25rem .7rem .25rem .3rem;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .6rem;
}

.torneio-historico__lugar img {
  grid-row: 1 / 3;
  width: 30px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}

.torneio-historico__lugar strong {
  font-size: .88rem;
}

.torneio-historico__posicao {
  color: var(--texto-suave);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.torneio-historico__lugar--ouro { border-color: rgba(255, 215, 90, .55); }
.torneio-historico__lugar--ouro .torneio-historico__posicao { color: #ffd75a; }
.torneio-historico__lugar--prata { border-color: rgba(200, 190, 255, .45); }
.torneio-historico__lugar--prata .torneio-historico__posicao { color: #cfc6ff; }
.torneio-historico__lugar--bronze { border-color: rgba(230, 140, 80, .5); }
.torneio-historico__lugar--bronze .torneio-historico__posicao { color: #f0a070; }

.torneio-historico__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.torneio-historico__item .torneio__chave {
  margin-top: .6rem;
}

@media (max-width: 575.98px) {
  .torneio__chave {
    flex-direction: column;
  }

  .torneio__rodada {
    flex-basis: auto;
  }

  .torneio__lugar {
    width: 92px;
  }
}

/* Careca Coins */
.selo-coins {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
  padding: .1rem .55rem .1rem .2rem;
  color: #ffe08a;
  font-size: .82rem;
  background: linear-gradient(180deg, rgba(255, 210, 90, .16), rgba(255, 210, 90, .06));
  border: 1px solid rgba(255, 200, 80, .45);
  border-radius: 1rem;
}

.selo-coins strong {
  color: #fff3c4;
  font-size: .95rem;
}

.coin {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.selo-coins .coin {
  width: 22px;
  height: 22px;
}

.barra-xp {
  height: .5rem;
  margin: .3rem 0 .8rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border-radius: 1rem;
}

.barra-xp span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro-claro));
}

.perfil__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: .8rem;
  text-align: center;
}

.perfil__stats div {
  padding: .4rem;
  background: rgba(0, 0, 0, .3);
  border-radius: .4rem;
}

.perfil__stats strong {
  display: block;
  color: var(--ouro-claro);
  font-size: 1.2rem;
}

.perfil__stats span {
  color: var(--texto-suave);
  font-size: .72rem;
  text-transform: uppercase;
}

.escolha-avatar--perfil {
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  margin-top: .8rem;
}

.avatar-opcao {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
}

.avatar-opcao img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 50%;
  filter: saturate(.7) brightness(.85);
  transition: transform .15s ease, filter .15s ease;
}

.avatar-opcao:hover img,
.avatar-opcao:focus-visible img {
  filter: none;
  transform: scale(1.08);
}

.avatar-opcao[aria-pressed="true"] img {
  border-color: var(--ouro);
  filter: none;
  box-shadow: 0 0 12px rgba(224, 180, 74, .6);
}

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

.ranking__titulo {
  color: var(--ouro-claro);
  font-size: 1rem;
}

.ranking__lista {
  margin: 0;
  padding-left: 1.4rem;
  font-size: .9rem;
}

.ranking__lista li {
  padding: .2rem 0;
}

.ranking__lista li::marker {
  color: var(--ouro);
  font-weight: 800;
}

.ranking__linha {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}

.ranking__linha > .link-perfil {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking__lista .ranking__v {
  flex: none;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* "Ver todos": a lista inteira rola dentro do quadro */
.ranking__lista--todos {
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

.ranking__mais {
  display: block;
  width: 100%;
  margin-top: .5rem;
}

/* Meu perfil (janela): posição e atalhos */
.pj__meu {
  margin: .6rem 0;
  padding: .6rem .7rem;
  background: rgba(224, 180, 74, .08);
  border: 1px solid var(--borda);
  border-radius: .6rem;
}

.pj__posicao {
  margin: 0 0 .5rem;
  color: var(--ouro-claro);
  font-weight: 700;
}

.pj__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Celular: o meu avatar no topo, ao lado do menu */
.avatar-topo {
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 2px solid var(--ouro);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(224, 180, 74, .35);
}

.avatar-topo[hidden] {
  display: none !important;
}

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

/* ---------- Salão no celular e tablet: abas (uma parte por vez) ---------- */
.salao-abas {
  display: none;
}

@media (max-width: 1199.98px) {
  .salao-abas {
    position: sticky;
    top: var(--altura-nav);
    z-index: 30;
    display: flex;
    gap: .3rem;
    margin-bottom: -.25rem;
    padding: .35rem;
    background: rgba(20, 14, 10, .96);
    border: 1px solid var(--borda);
    border-radius: .8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  }

  .salao-abas button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: .45rem .2rem;
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: .55rem;
  }

  .salao-abas button[aria-selected="true"] {
    color: #1b1208;
    background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  }

  .salao-abas__conta,
  .salao-abas__novas {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0 .3rem;
    font-size: .7rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 1rem;
  }

  .salao-abas__conta {
    color: #fff;
    background: rgba(31, 191, 117, .55);
  }

  .salao-abas__novas {
    color: #fff;
    background: var(--vermelho);
  }

  #painel-salao:not([data-painel="chat"]) .salao__chat,
  #painel-salao:not([data-painel="online"]) .salao__online,
  #painel-salao:not([data-painel="online"]) .salao__info,
  #painel-salao:not([data-painel="perfil"]) #perfil,
  #painel-salao:not([data-painel="ranking"]) .ranking,
  #painel-salao[data-painel="perfil"] .salao__corpo,
  #painel-salao[data-painel="ranking"] .salao__corpo {
    display: none;
  }

  #painel-salao .salao__corpo {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #painel-salao .salao__chat {
    border: 0;
  }

  /* o chat ocupa a tela */
  #painel-salao[data-painel="chat"] .mensagens {
    height: calc(100dvh - 360px);
    min-height: 220px;
  }

  #painel-salao[data-painel="online"] .lista-online {
    max-height: none;
  }

  #painel-salao .ranking {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .salao-abas button {
    font-size: .74rem;
  }
}

/* ---------- Arena vazia ---------- */
.arena-vazia {
  padding: 4rem 1rem;
  text-align: center;
}

.arena-vazia__emblema {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
  opacity: .9;
}

.arena-vazia h3 {
  color: var(--ouro-claro);
}

/* ---------- Duelos: Reino dos Carecas (ranked) ---------- */
.arena-vazia.duelos {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  text-align: left;
}

.reino,
.duelos__amistoso {
  padding: 1.4rem;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(246, 215, 124, .12), transparent 55%),
    linear-gradient(180deg, var(--painel-2), var(--painel));
  border: 1px solid var(--borda);
  border-radius: 1rem;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .35);
}

#reino {
  border-color: var(--borda-forte);
  box-shadow: 0 0 0 1px rgba(246, 215, 124, .12), 0 .8rem 2.4rem rgba(0, 0, 0, .45), 0 0 2.5rem rgba(224, 180, 74, .12);
}

.duelos__amistoso {
  text-align: center;
}

.duelos__amistoso .arena-vazia__emblema {
  width: 84px;
  height: 84px;
}

.reino__topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reino__coroa {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.9rem;
  background: radial-gradient(circle, rgba(246, 215, 124, .35), rgba(156, 116, 36, .15) 70%);
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  box-shadow: 0 0 1.2rem rgba(246, 215, 124, .35);
}

.reino__titulo {
  margin: 0;
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
}

.reino__sub {
  margin: 0;
  color: var(--texto-suave);
}

.reino__meu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}

.reino__meu:empty {
  display: none;
}

.reino__caixinha {
  padding: .6rem .4rem;
  text-align: center;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--borda);
  border-radius: .7rem;
}

.reino__caixinha strong {
  display: block;
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: 1.45rem;
  line-height: 1.1;
}

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

.reino__acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  background: rgba(0, 0, 0, .25);
  border: 1px dashed var(--borda);
  border-radius: .8rem;
}

.reino__jogar {
  min-width: min(100%, 16rem);
}

.reino__busca {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ouro-claro);
  font-size: 1.1rem;
}

.reino__contador {
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.reino__radar {
  width: .9rem;
  height: .9rem;
  background: var(--verde);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(31, 191, 117, .7);
  animation: reino-radar 1.4s ease-out infinite;
}

@keyframes reino-radar {
  to { box-shadow: 0 0 0 .9rem rgba(31, 191, 117, 0); }
}

.reino__trilho {
  width: min(100%, 20rem);
  height: .4rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border-radius: 1rem;
}

.reino__barra {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro-claro));
  transition: width 1s linear;
}

.reino__dica,
.reino__aviso {
  margin: 0;
  color: var(--texto-suave);
  font-size: .85rem;
}

.reino__regras {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
  color: var(--texto);
  font-size: .92rem;
}

.reino__regras li + li {
  margin-top: .25rem;
}

.reino__ban h4,
.reino__ranking-titulo {
  color: var(--ouro-claro);
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
}

.reino__banidas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .4rem;
}

.reino__banida {
  padding: .2rem .65rem;
  color: #ffd2d2;
  font-size: .82rem;
  background: rgba(224, 49, 59, .16);
  border: 1px solid rgba(224, 49, 59, .5);
  border-radius: 1rem;
}

button.reino__banida--tirar:hover,
button.reino__banida--tirar:focus-visible {
  background: rgba(224, 49, 59, .35);
}

/* Maleta do deck: cartas separadas por área, como na referência do Astral Vaelith. */
.deck-maleta { display: grid; gap: 1rem; }
.deck-maleta__secao { min-width: 0; padding: 1rem; background: linear-gradient(160deg, #261c16, #15100d); border: 1px solid var(--borda-forte); border-radius: .8rem; }
.deck-maleta__secao .titulo-editor { margin: 0 0 .45rem; }
.deck-maleta__subtitulo { display: flex; align-items: baseline; gap: .5rem; margin: .9rem 0 .45rem; color: var(--ouro-claro); font-family: var(--fonte-titulo); font-size: .95rem; }
.deck-maleta__subtitulo small { color: var(--texto-suave); font-family: sans-serif; font-size: .72rem; }
.deck-maleta__filtros { display: grid; grid-template-columns: 1fr minmax(170px, .55fr); gap: .5rem; margin-bottom: .85rem; }
.deck-maleta__ajuda { margin: 0 0 .7rem; color: var(--texto-suave); font-size: .84rem; }
.deck-maleta .grade-editor { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .45rem; min-height: 125px; padding: .65rem; background: #110f10; }
.deck-maleta #editor-colecao { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
.deck-maleta .item-editor__qtd { top: auto; right: .15rem; bottom: .1rem; min-width: 0; padding: .05rem .27rem; color: #fff; font-size: .66rem; background: #172c3a; border: 1px solid var(--ouro); border-radius: .35rem; }
.deck-maleta .item-editor__lupa { top: -.3rem; left: auto; right: -.2rem; width: 1.45rem; height: 1.45rem; background: #132936; }
.deck-maleta__vazio { grid-column: 1 / -1; margin: 0; color: var(--texto-suave); }
.reino__banidas:has(.reino__ban-carta) { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .8rem .5rem; }
.reino__ban-carta { display: grid; gap: .25rem; min-width: 0; padding: .3rem; color: var(--texto); background: #171313; border: 1px solid #9c5555; border-radius: .5rem; cursor: zoom-in; }
.reino__ban-carta:hover, .reino__ban-carta:focus-visible { border-color: #ff9999; transform: translateY(-2px); }
.reino__ban-carta-nome { overflow: hidden; font-size: .68rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) {
  .deck-maleta__secao { padding: .7rem; }
  .deck-maleta .grade-editor { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .deck-maleta__filtros { grid-template-columns: 1fr; }
}

.reino__tabela {
  padding: 0;
  margin: 0;
  list-style: none;
}

.reino__linha {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  gap: .6rem;
  align-items: center;
  padding: .45rem .6rem;
  border-bottom: 1px solid rgba(224, 180, 74, .12);
}

.reino__linha[data-podio] {
  background: rgba(246, 215, 124, .06);
}

.reino__linha[data-eu="true"] {
  background: rgba(31, 191, 117, .14);
  border-radius: .5rem;
}

.reino__pos {
  text-align: center;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.reino__linha[data-podio] .reino__pos {
  font-size: 1.2rem;
}

.reino__nick {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.reino__pontos {
  color: var(--ouro-claro);
  font-variant-numeric: tabular-nums;
}

.reino__ultima {
  padding: .7rem .9rem;
  margin-top: 1rem;
  font-size: .9rem;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--borda);
  border-radius: .7rem;
}

.reino__ultima h5 {
  margin-bottom: .4rem;
  color: var(--ouro-claro);
  font-size: .95rem;
}

.reino__adm {
  padding: .8rem 1rem;
  margin-top: 1rem;
  background: rgba(169, 158, 230, .08);
  border: 1px solid rgba(169, 158, 230, .4);
  border-radius: .7rem;
}

.reino__adm summary {
  color: var(--lilas);
  font-weight: 600;
  cursor: pointer;
}

.usuario-online[data-status="fila"] { color: var(--ouro-claro); }
.usuario-online[data-status="fila"] .usuario-online__bolinha { background: var(--ouro); }

@media (prefers-reduced-motion: reduce) {
  .reino__radar { animation: none; }
  .reino__barra { transition: none; }
}

/* ---------- Rodapé ---------- */
.rodape {
  padding: 1.3rem 0;
  color: var(--texto-suave);
  font-size: .85rem;
  background: rgba(10, 8, 6, .9);
  border-top: 1px solid var(--borda);
}

.rodape a {
  color: var(--ouro-claro);
  white-space: nowrap;
}

/* ---------- Aviso do jogo (sem fins comerciais, nome e imagem) ---------- */
.aviso-lista {
  display: grid;
  gap: .7rem;
  padding-left: 1.1rem;
}

.aviso-situacao {
  padding: .6rem .8rem;
  font-size: .92rem;
  background: rgba(31, 191, 117, .1);
  border: 1px solid rgba(31, 191, 117, .4);
  border-radius: .5rem;
}

.aviso-situacao--pendente {
  background: rgba(224, 180, 74, .1);
  border-color: var(--borda-forte);
}

/* ---------- Avisos (toasts) ---------- */
.aviso {
  min-width: 260px;
  max-width: 360px;
  margin-top: .5rem;
  padding: .7rem 1rem;
  color: var(--texto);
  background: #221913;
  border: 1px solid var(--borda-forte);
  border-left: 5px solid var(--ouro);
  border-radius: .5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  animation: entrar-aviso .3s ease;
}

.aviso[data-tipo="erro"] { border-left-color: var(--vermelho); }
.aviso[data-tipo="ok"] { border-left-color: var(--verde); }

@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 767.98px) {
  .salao__corpo {
    grid-template-columns: 1fr;
  }

  .salao__chat {
    border-right: 0;
    border-bottom: 1px solid rgba(224, 180, 74, .15);
  }

  .mensagens {
    height: 300px;
  }

  .lista-online {
    max-height: 260px;
  }

  .envio-chat {
    flex-wrap: wrap;
  }

  .envio-chat textarea {
    flex-basis: 100%;
  }

  .envio-chat .btn {
    flex: 1;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Logo e emblema (artes) ---------- */
.logo-navbar {
  display: block;
  width: auto;
  height: 46px;
}

.logo-hero {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-left: -1%;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .7));
}

[data-emblema] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 575.98px) {
  .logo-navbar {
    height: 38px;
  }
}

.careca-navbar {
  display: block;
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 10px rgba(255, 170, 60, .35));
  transition: transform .25s ease;
}

.marca:hover .careca-navbar {
  transform: rotate(-8deg) scale(1.08);
}

/* Início: só texto (o logo fica no menu) */
.titulo-hero {
  max-width: 34rem;
  margin-bottom: 1.2rem;
  color: #fff4dc;
  font-size: clamp(2.3rem, 5.5vw, 3.9rem);
  line-height: 1.08;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}

.titulo-hero span {
  color: transparent;
  background: linear-gradient(100deg, #fff6d0 0%, var(--ouro) 30%, #fffbe6 45%, var(--ouro) 60%, #8a5f14 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: brilho-titulo 5s ease-in-out infinite;
}

.navbar-zoeira .logo-navbar {
  height: 52px;
}

/* celular: logo menor para caber o meu avatar e o menu na mesma linha */
@media (max-width: 575.98px) {
  .navbar-zoeira .logo-navbar {
    height: 40px;
  }
}

.selo-limite {
  padding: .1rem .5rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #a0222b;
  border-radius: 1rem;
}

/* Ranking com abas */
.abas-ranking {
  display: flex;
  gap: .3rem;
  margin-bottom: .6rem;
}

.abas-ranking button {
  flex: 1;
  padding: .3rem .4rem;
  color: var(--texto-suave);
  font-size: .78rem;
  font-weight: 700;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--borda);
  border-radius: .4rem;
}

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

.ranking__lista li[data-medalha]::marker {
  content: attr(data-medalha) " ";
}

.ranking__minha {
  color: #5ee6b0;
  font-weight: 700;
}

.ranking__vazio {
  list-style: none;
  margin-left: -1.4rem;
  color: var(--texto-suave);
}

.ranking__eu {
  margin: .5rem 0 0;
  color: #5ee6b0;
  font-size: .82rem;
  font-weight: 700;
}

.ranking__eu:empty {
  display: none;
}

.ranking__nota {
  margin: .6rem 0 0;
  color: var(--texto-suave);
  font-size: .72rem;
}

/* ---------- Perfil de um duelista ---------- */
:where(.link-perfil) {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.link-perfil:hover,
.link-perfil:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pj__topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pj__avatar {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 3px solid var(--ouro);
  border-radius: .8rem;
  box-shadow: 0 0 16px rgba(224, 180, 74, .45);
}

.pj__info {
  flex: 1;
}

.pj__nivel {
  color: var(--ouro-claro);
  font-weight: 700;
}

.pj__status {
  color: var(--texto-suave);
  font-size: .88rem;
}

.pj__subtitulo {
  margin: 1rem 0 .6rem;
  color: #e3a85a;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.historico {
  margin: 0;
  padding: .6rem;
  list-style: none;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--borda);
  border-radius: .6rem;
}

.historico__item {
  margin-bottom: .4rem;
  padding: .55rem .7rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .82rem;
  line-height: 1.45;
  background: rgba(255, 255, 255, .04);
  border-radius: .35rem;
}

.historico__item:last-child {
  margin-bottom: 0;
}

.historico__data {
  color: #8b8378;
}

.historico__venceu {
  color: #2fe08a;
  font-weight: 700;
}

.historico__perdeu {
  color: #ff5a5f;
  font-weight: 700;
}

.historico__oponente {
  color: #5aa9ff;
  font-weight: 700;
}

.historico__extra {
  color: #8b8378;
}

.historico__vazio {
  padding: .6rem;
  color: var(--texto-suave);
  font-size: .9rem;
}

/* ---------- Tag da Zoeira 2vs2: mesa no chat ---------- */
.btn-tag {
  --bs-btn-color: #fff;
  --bs-btn-bg: linear-gradient(90deg, #2f6fd1, #d1303a);
  --bs-btn-hover-color: #fff;
  font-weight: 800;
  background: linear-gradient(90deg, #2f6fd1, #d1303a);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 0 12px rgba(209, 48, 58, .35);
}

.btn-tag:hover {
  filter: brightness(1.12);
}

.mesa-tag {
  max-width: 560px;
  margin: .8rem auto;
  padding: .8rem;
  background: #e9d8b4;
  border: 3px solid #b88a3c;
  border-radius: .8rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.mesa-tag__titulo {
  margin-bottom: .6rem;
  padding: .4rem .6rem;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, #6b5a46, #4a3c2e);
  border-radius: .5rem;
}

.mesa-tag__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .4rem;
  align-items: center;
}

.mesa-tag__time {
  display: grid;
  min-width: 0;
  gap: .35rem;
}

.mesa-tag__nome-time {
  color: #2f6fd1;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.mesa-tag__time--1 .mesa-tag__nome-time {
  color: #c4262f;
}

.mesa-tag__vaga {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.6rem;
  padding: .35rem .5rem;
  color: #fff;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #5aa0f2, #2f6fd1);
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: .45rem;
  opacity: .85;
  transition: transform .15s ease, filter .15s ease;
}

.mesa-tag__time--1 .mesa-tag__vaga {
  background: linear-gradient(180deg, #f27a80, #c4262f);
}

.mesa-tag__vaga:not(:disabled):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.mesa-tag__vaga--ocupada {
  opacity: 1;
}

.mesa-tag__vaga--minha {
  outline: 3px solid #ffd84a;
}

.mesa-tag__vaga:disabled {
  cursor: default;
}

.mesa-tag__vaga img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: .3rem;
}

.mesa-tag__p {
  padding: 0 .3rem;
  color: #1b1208;
  font-size: .68rem;
  background: rgba(255, 255, 255, .8);
  border-radius: .3rem;
  text-shadow: none;
}

.mesa-tag__nick {
  overflow: hidden;
  font-size: .85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mesa-tag__meio img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.mesa-tag__estado {
  margin-top: .5rem;
  color: #3b2a1a;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
}

.mesa-tag__vaga {
  min-width: 0;
}

.mesa-tag__nick {
  min-width: 0;
}

/* Celular: os times ficam um embaixo do outro */
@media (max-width: 575.98px) {
  .mesa-tag {
    padding: .6rem;
  }

  .mesa-tag__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .mesa-tag__meio {
    display: flex;
    justify-content: center;
    margin: -.1rem 0;
  }

  .mesa-tag__meio img {
    width: 40px;
    height: 40px;
  }

  .mesa-tag__titulo {
    font-size: .9rem;
  }
}

/* nada do chat empurra a tela para os lados */
.mensagens {
  overflow-x: hidden;
}