.rarity-mark {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rarity);
}

/* Inventário: navegação lateral curta + área principal. */
.inventory-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.inventory-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.inv-subtab-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-m);
  color: var(--text-2);
  font-weight: 600;
  text-align: left;
}

.inv-subtab-btn:disabled {
  cursor: default;
}

.inv-subtab-btn .soon-tag {
  margin-left: auto;
}

.inventory-subtab-pane {
  display: none;
}

.inventory-subtab-pane.active {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.inv-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

/* Equipe de batalha: faixa compacta presa ao topo da área rolável (a página rola, a equipe fica). */
.team-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-3);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.team-sticky .section-head {
  flex-wrap: nowrap;
}

.team-rarity-limit {
  margin: 0;
  font-size: var(--fs-12, 0.75rem);
}

.team-rarity-limit .at-limit {
  color: var(--text);
  font-weight: 600;
}

.team-sticky .section-title {
  font-size: var(--fs-16);
}

/* Foco por teclado e rolagem até um elemento não deixam o alvo atrás da faixa. */
.lobby-content:has(#subtab-content-cards.active) {
  scroll-padding-top: 150px;
}

.team-slots-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}

/* Cada slot: retrato à esquerda (--tp, em px, dá a largura e a escala do sprite) e três linhas de texto. */
.team-slot-card {
  --tp: 52;
  position: relative;
  min-width: 0;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
}

.team-slot-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rarity, transparent);
}

.team-slot-card.empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
}

.slot-open-btn,
.slot-empty-row {
  display: grid;
  grid-template-columns: calc(var(--tp) * 1px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-2);
  width: 100%;
  min-width: 0;
  padding: calc(var(--s-1) + 3px) var(--s-2) var(--s-1) var(--s-1);
  text-align: left;
  border-radius: var(--radius-s);
}

.slot-open-btn .portrait,
.slot-empty-row .slot-empty-box {
  width: calc(var(--tp) * 1px);
  --sprite-w: calc(11200% / var(--tp));
}

.slot-empty-box {
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-s);
  border: 1px dashed var(--line-strong);
}

.slot-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.slot-order-badge {
  padding-right: 26px;
  font-size: var(--fs-12);
  color: var(--text-2);
}

.team-slot-card .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.team-slot-card.empty .card-title {
  color: var(--text-2);
  font-weight: 400;
}

.team-slot-meta {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-2);
}

/* Brilho mais curto que o das cartas da grade: a faixa fica colada no cabeçalho e no conteúdo. */
.team-sticky .team-slot-card.rarity-rare,
.team-sticky .team-slot-card.rarity-epic,
.team-sticky .team-slot-card.rarity-legendary,
.team-sticky .team-slot-card.rarity-mythic,
.team-sticky .team-slot-card.rarity-celestial,
.team-sticky .team-slot-card.rarity-awakened {
  box-shadow: 0 0 8px -2px color-mix(in srgb, var(--rarity) 70%, transparent);
}

.slot-remove-btn {
  position: absolute;
  top: calc(var(--s-1) + 3px);
  right: var(--s-1);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-16);
  line-height: 1;
  z-index: 1;
}

.slot-remove-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Barra de ferramentas da coleção. */
.collection-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.collection-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.collection-stats div {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
}

.collection-stats dt {
  color: var(--text-2);
}

.collection-stats dd {
  font-size: var(--fs-16);
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.toolbar-row .chip-group {
  margin-right: auto;
}

.multi-select-toggle-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--action-ink);
}

/* Lote: barra presa ao rodapé da área rolável enquanto o modo de seleção está ligado. */
.inventory-batch-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-menu);
}

.batch-info {
  color: var(--text-2);
}

.batch-info strong {
  color: var(--text);
}

.batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

@media (max-width: 1240px) {
  .inventory-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--s-4);
  }
}

@media (max-width: 900px) {
  .inventory-layout {
    grid-template-columns: 1fr;
  }

  .inventory-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }

}

/* Abaixo de 1280 px o texto não cabe ao lado do retrato: o slot vira ladrilho (retrato, tecla e nome). */
@media (max-width: 1279px) {
  .team-sticky .section-head .muted {
    display: none;
  }

  .team-slot-card {
    --tp: 46;
  }

  .slot-open-btn,
  .slot-empty-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--s-1);
    padding: calc(var(--s-1) + 3px) var(--s-1) var(--s-1);
  }

  .slot-text {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .slot-order-badge {
    padding-right: 0;
  }

  .team-slot-card .card-title {
    -webkit-line-clamp: 1;
    font-size: var(--fs-12);
  }

  .team-slot-meta {
    display: none;
  }

  .slot-remove-btn {
    width: 24px;
    height: 24px;
    right: 2px;
    top: calc(var(--s-1) + 3px);
  }
}

/* Celular: só os seis retratos, com o número da tecla; o nome vem no rótulo e no detalhe. */
@media (max-width: 900px) {
  .team-sticky {
    padding: var(--s-1) 0 var(--s-2);
  }

  .team-slots-row {
    gap: var(--s-1);
  }

  .team-slot-card {
    --tp: 44;
  }

  .slot-text {
    display: none;
  }

  .slot-open-btn::after,
  .slot-empty-row::after {
    content: attr(data-key);
    position: absolute;
    left: 6px;
    bottom: 4px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(14, 16, 21, 0.86);
    font-size: var(--fs-12);
    font-weight: 600;
    text-align: center;
    pointer-events: none;
  }

  .lobby-content:has(#subtab-content-cards.active) {
    scroll-padding-top: 110px;
  }
}

/* Equipes salvas: quatro slots em grade, cada um com a fila das seis posições e as ações. */
.team-presets-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.preset-slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  min-width: 0;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.preset-slot.empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
}

.preset-slot.in-use {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.preset-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  min-width: 0;
}

.preset-name {
  font-size: var(--fs-16);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-tag {
  padding: 1px var(--s-2);
  border-radius: var(--radius-s);
  border: 1px solid var(--ok);
  color: var(--ok);
  font-size: var(--fs-12);
  font-weight: 600;
}

.preset-status {
  margin-left: auto;
  font-size: var(--fs-12);
}

.preset-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-1);
}

.preset-strip .mini-portrait {
  width: 100%;
}

.preset-slot.empty .mini-portrait {
  border-style: dashed;
  background: transparent;
}

.preset-member {
  position: relative;
  min-width: 0;
}

.preset-member::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: var(--rarity, transparent);
}

.preset-member.is-gone .mini-portrait {
  opacity: 0.35;
  filter: grayscale(1);
  border-style: dashed;
}

.preset-member.is-gone::after {
  display: none;
}

.preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.preset-actions .btn {
  padding: 0 var(--s-3);
}

.preset-hint {
  font-size: var(--fs-12);
}

.preset-rename-label {
  display: block;
  margin-bottom: var(--s-2);
}

.preset-rename-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
}

@media (max-width: 560px) {
  .team-presets-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .preset-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sub-aba Itens (v0.148): uma ficha por item de evolução, no mesmo vidro afundado dos itens possíveis da fase. */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}

.items-grid[hidden] {
  display: none;
}

/* Filtros da sub-aba Itens (v0.247.0): tipo e raridade, nos mesmos chips das cartas. */
.items-toolbar[hidden],
#items-filter-empty[hidden] {
  display: none;
}

.item-card {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}

.item-card-icon {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
}

.item-card-qty {
  position: absolute;
  right: -6px;
  bottom: -6px;
  padding: 0 6px;
  font-size: var(--fs-12);
  border-radius: var(--radius-s, 4px);
  background: var(--surface-1, #131620);
  border: 1px solid var(--line);
}

.item-card-name {
  font-size: var(--fs-14);
  font-weight: 600;
}

.item-card-text {
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--text-1, inherit);
}

.item-card-meta {
  margin-top: 4px;
  font-size: var(--fs-12);
  color: var(--text-2);
}

/* Arrastar para ordenar a equipe (ui/team-drag.js). */
.team-slot-card:not(.empty) .slot-open-btn,
.inventory-grid:not(.multi-select-active) .inventory-card {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.team-slot-card.is-dragging,
.inventory-card.is-dragging {
  opacity: 0.4;
}

body.team-dragging,
body.team-dragging * {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
}

body.team-dragging .team-slot-card.empty {
  border-color: var(--text-2);
}

.team-slot-card.drop-target {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.team-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 190px;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1279px) {
  .team-drag-ghost {
    width: 110px;
  }
}

/* Acessórios (v0.194): ícone, linhas de bônus e escolha na ficha da carta. */
.acc-icon { flex: none; }
.acc-diff { font-size: 0.8em; font-weight: 600; margin-left: 4px; }
.acc-lines { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.acc-line { font-size: 0.82rem; }
.acc-line-on { color: #5fe08a; }
.acc-line-off { color: #7d8794; }
.acc-equipped { display: inline-flex; align-items: center; gap: 6px; }
/* Slot quadrado do acessório na ficha da carta (v0.225): vazio com "+", cheio com o ícone e a borda da raridade. */
.acc-slot-row { display: flex; align-items: flex-start; gap: 10px; }
.acc-slot { flex: none; width: 56px; height: 56px; padding: 2px; display: grid; place-items: center; cursor: pointer; color: var(--text-2); border: 0; background: transparent; }
.acc-slot-plus { font-family: var(--font-pixel, inherit); font-size: 32px; line-height: 1; }
.acc-slot-empty { border: 2px dashed var(--line-strong); background: rgba(255, 255, 255, 0.03); }
.acc-slot-empty:hover:not(:disabled), .acc-slot-empty:focus-visible { border-color: #ffd32a; color: #ffd32a; }
.acc-slot-full:hover, .acc-slot-full:focus-visible { filter: brightness(1.25); }
.acc-slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acc-slot:disabled { cursor: not-allowed; opacity: 0.5; }
.acc-slot-info { min-width: 0; flex: 1 1 110px; }
.acc-slot-info .acc-equipped { flex-direction: column; align-items: flex-start; gap: 0; }
.acc-slot-info .acc-diff { margin-left: 0; }
.acc-slot-info .acc-lines { margin: 2px 0 0; }
.acc-slot-hint { color: var(--text-2); font-size: 0.82rem; line-height: 56px; }
.acc-pick-current { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; border: 1px solid #ffd32a; background: rgba(255, 211, 42, 0.07); }
.acc-pick-current .acc-pick-body { flex: 1; min-width: 0; }
.acc-pick-list .acc-slot-hint { line-height: 1.4; }
.item-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.acc-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.acc-pick { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: inherit; cursor: pointer; }
.acc-pick:hover, .acc-pick:focus-visible { border-color: #ffd32a; }
.acc-pick-body { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) { .acc-pick-list { max-height: 60vh; } }

/* Filtros da janela de escolha do acessório (v0.261.0): mesmos chips da aba Itens, um pouco mais baixos para caber no diálogo. */
.acc-pick-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.acc-pick-filters .chip-group { gap: 4px; }
.acc-pick-filters .chip { min-height: 32px; padding: 0 8px; gap: 6px; }
.acc-pick-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acc-pick-stat { display: flex; flex: 1 1 150px; min-width: 0; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-2); }
.acc-pick-stat .guild-select { flex: 1; min-width: 0; min-height: 32px; }
.acc-pick-filters + .acc-pick-list { max-height: 44vh; }
.acc-pick[hidden], .acc-pick-clear[hidden], .acc-pick-empty[hidden] { display: none; }
/* "Tudo verde" usa o verde das linhas que rendem no herói. */
.acc-fit-chip .acc-fit-mark { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #5fe08a; }
/* Bolsa ou "Em outros heróis" (v0.308.0): a marca usa o amarelo do slot de acessório; o dono aparece embaixo dos bônus. */
.acc-pick-source { gap: 4px; margin-bottom: 6px; }
.acc-pick-source .chip { min-height: 32px; padding: 0 10px; gap: 6px; }
.acc-other-mark { flex: none; width: 8px; height: 8px; border: 2px solid #ffd32a; border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.acc-pick-owner { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-12); color: var(--text-2); }
.acc-pick-owner strong { color: var(--text); }
.acc-pick-bag-empty[hidden] { display: none; }
@media (max-width: 640px), (pointer: coarse) { .acc-pick-source .chip { min-height: 40px; } }
@media (max-width: 640px), (pointer: coarse) { .acc-pick-filters .chip, .acc-pick-stat .guild-select { min-height: 40px; } }

/* Balão de descrição de item (v0.199): abre ao passar o mouse, clicar ou tocar. */
[data-tip-kind] { cursor: help; }
[data-tip-kind]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.item-tip {
  position: fixed;
  z-index: 300;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  font-size: 0.86rem;
  line-height: 1.35;
  pointer-events: none;
}
.item-tip.pinned { pointer-events: auto; border-color: var(--text-2); }
.item-tip[hidden] { display: none; }
.tip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tip-head svg { flex: none; }
.tip-title { display: block; font-size: 1rem; }
.tip-tag { display: block; font-size: 0.78rem; }
.tip-text { margin: 4px 0 8px; }
.tip-note { margin: 8px 0 0; font-size: 0.78rem; color: var(--text-2); }
.tip-tiers { width: 100%; border-collapse: collapse; font-size: 0.78rem; text-align: center; }
.tip-tiers th, .tip-tiers td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
.tip-tiers th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-2); }
.tip-tiers .tip-cur { background: rgba(255, 255, 255, 0.09); font-weight: 700; }

/* Balão da carta de um jogador na sala do grupo (v0.301): ranks, aura e acessório, sem o kit. */
.hero-tip-face { width: 44px; height: 44px; }
.hero-tip-label { margin: 10px 0 4px; font-size: 0.74rem; font-weight: 600; color: var(--text-2); }
.item-tip .card-ranks { grid-area: auto; }
.item-tip .rank-cell { background: var(--surface-3); }
.hero-tip-aura { margin: 0; }
.hero-tip-aura .aura-tag { white-space: normal; }
.hero-tip-acc { display: flex; align-items: flex-start; gap: 8px; }
.hero-tip-acc svg { flex: none; }
.hero-tip-acc .acc-lines { margin: 2px 0 0; }
.hero-tip-none { margin: 0; color: var(--text-2); }

/* Filtros "Com item" (cartas) e "Equipados" (Itens), v0.254.0: a marca usa o amarelo do slot de acessório da ficha. */
.item-filter-chip .item-mark-mini {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid #ffd32a;
  border-radius: 2px;
  transform: rotate(45deg) scale(0.85);
}

/* Ficha de um acessório equipado: o botão com o herói abre a ficha da carta. */
.acc-owner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-3);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.acc-owner:hover,
.acc-owner:focus-visible {
  border-color: #ffd32a;
}

.acc-owner:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.acc-owner-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font-size: var(--fs-12);
  line-height: 1.25;
}

.acc-owner-text strong {
  font-size: var(--fs-13);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-owner-text span {
  color: var(--text-2);
}

.acc-owner-go {
  flex: none;
  font-size: var(--fs-12);
  color: #ffd32a;
}

.item-card-equipped .item-card-body {
  flex: 1;
  min-width: 0;
}