/* Invocação (v0.78): banner de cartas altas à esquerda e coluna de invocação à direita, com os círculos das
   garantias acima dos botões. Em tela estreita vira uma coluna só. */
.summon-view {
  display: grid;
  grid-template-columns: minmax(0, 700px) 300px;
  grid-template-areas:
    "head head"
    "banner side";
  justify-content: center;
  align-items: start;
  gap: var(--s-4) var(--s-5);
  padding-top: var(--s-4);
}

.summon-head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.summon-panel {
  grid-area: side;
  position: sticky;
  top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

@media (max-width: 1060px) {
  .summon-view {
    grid-template-columns: minmax(0, 700px);
    grid-template-areas:
      "head"
      "banner"
      "side";
  }

  .summon-panel {
    position: static;
  }
}

.summon-title {
  font-size: var(--fs-32);
}

.summon-desc {
  color: var(--text-2);
  font-size: var(--fs-16);
}

/* v0.281: seletor do banner (Mundo 1 / Mundo 2) logo abaixo da descrição; no celular os dois dividem a largura. */
.summon-world-switch {
  margin-top: var(--s-3);
}

@media (max-width: 600px) {
  .summon-head > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .summon-world-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .summon-world-btn {
    justify-content: center;
  }
}

.summon-world-btn {
  min-height: 40px;
  font-size: var(--fs-14);
  font-weight: 600;
}

.summon-rates {
  padding: var(--s-4);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.rates-title {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.summon-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

/* Ticket de Invocação (v0.154): a linha só aparece com ticket no saldo. */
.summon-ticket-row {
  margin-top: var(--s-3);
}

.summon-ticket-btn {
  width: 100%;
  flex-direction: column;
  gap: 2px;
}

/* Tickets Especiais (v0.235): um botão por ticket, só aparece com ticket na bolsa. A cor da raridade vem de .rarity-*. */
.summon-special-row {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.summon-special-btn {
  width: 100%;
  flex-direction: column;
  gap: 2px;
  border-color: var(--rarity);
}

.summon-special-btn .btn-top {
  color: var(--rarity);
}

.summon-btn {
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
}

.summon-btn .btn-top {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 700;
}

.summon-btn .btn-price {
  font-weight: 400;
}

.summon-note,
.summon-balance {
  color: var(--text-2);
}

.summon-balance strong {
  color: var(--text);
}

/* Venda automática de repetidos (v0.218): um seletor por raridade, fechado por padrão. */
.summon-autosell {
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}

.summon-autosell > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-3);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
}

.autosell-state {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
}

.autosell-state.is-on {
  color: var(--ok);
}

.autosell-help {
  padding: 0 var(--s-3);
  color: var(--text-2);
  font-size: 12px;
  line-height: 18px;
}

.autosell-rows {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
}

.autosell-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rarity);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.autosell-row.is-on {
  border-color: color-mix(in srgb, var(--rarity) 55%, var(--line));
  border-left-color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 9%, var(--surface-2));
}

.autosell-who {
  display: grid;
  gap: 1px;
}

.autosell-who .rarity-label {
  font-size: var(--fs-14);
}

.autosell-who small {
  color: var(--text-2);
  font-size: 12px;
}

/* Seletor de - e +: o valor no meio, em caixa escura; o - e o + são botões do tema. */
.autosell-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  overflow: hidden;
}

.autosell-step {
  width: 40px;
  min-height: 40px;
  border: 0;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.autosell-step:hover:not(:disabled) {
  background: var(--surface-4);
}

.autosell-step:disabled {
  color: var(--text-2);
  opacity: 0.4;
  cursor: default;
}

.autosell-value {
  display: grid;
  place-items: center;
  min-width: 92px;
  padding: 0 var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
}

.autosell-row.is-on .autosell-value {
  color: var(--text);
}

/* Revelar sozinhas (v0.219): uma pílula por raridade; a marcada ganha a cor da raridade. A caixa nativa fica escondida
   (continua no teclado e no leitor de tela) e a pílula faz o papel dela. */
.autoreveal-rows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3);
}

.autoreveal-row {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.autoreveal-row input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.autoreveal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.autoreveal-chip .rarity-label {
  font-size: var(--fs-13);
}

.autoreveal-mark {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}

.autoreveal-row:hover .autoreveal-chip {
  background: var(--surface-3);
}

.autoreveal-row input:checked + .autoreveal-chip {
  border-color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 14%, var(--surface-2));
}

.autoreveal-row input:checked + .autoreveal-chip .autoreveal-mark {
  border-color: var(--rarity);
  background: var(--rarity);
  box-shadow: inset 0 0 0 2px var(--surface-2);
}

.autoreveal-row input:focus-visible + .autoreveal-chip {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Garantias (v0.78): um círculo por raridade que enche a cada invocação do ciclo. Em 100% a próxima garante, e o
   círculo pulsa na cor da raridade: é o único brilho fora das cartas. */
.pity-rings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.pity-ring {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-1);
  --pity-pct: 0;
}

.pity-svg {
  width: 88px;
  height: 88px;
  transform: rotate(-90deg);
  overflow: visible;
}

.pity-track,
.pity-fill {
  fill: none;
  stroke-width: 7;
}

.pity-track {
  stroke: var(--surface-3);
}

.pity-fill {
  stroke: var(--rarity);
  stroke-dasharray: calc(var(--pity-pct) * 1) 100;
  transition: stroke-dasharray 0.4s ease-out;
}

.pity-ring.rarity-celestial .pity-fill {
  stroke: url(#pity-celestial-grad);
}

.pity-count {
  position: absolute;
  top: calc(var(--s-3) + 44px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pity-count b {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
}

.pity-count small {
  color: var(--text-2);
  font-size: 11px;
}

.pity-caption {
  color: var(--rarity);
  font-size: var(--fs-13);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.pity-ring.is-ready {
  border-color: var(--rarity);
  animation: pity-pulse 1.4s ease-in-out infinite;
}

.pity-ring.is-ready .pity-svg {
  filter: drop-shadow(0 0 6px var(--rarity));
}

@keyframes pity-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px var(--rarity), 0 0 10px color-mix(in srgb, var(--rarity) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px var(--rarity), 0 0 28px color-mix(in srgb, var(--rarity) 80%, transparent);
  }
}

.pity-note {
  color: var(--text-2);
  font-size: var(--fs-13);
}

/* Raridade e selo dividem a mesma linha da carta: o selo não acrescenta altura, então a carta com
   Garantia tem o tamanho das outras. */
.summon-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  min-width: 0;
  height: 18px;
}

.summon-pity-tag {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--r-mythic);
  border-radius: 999px;
  color: var(--r-mythic);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
}

/* Posse (v0.202): etiqueta de quem o jogador já tem. No banner, "Já tem" (com ×N se houver mais cópias); nas cartas
   do giro, "Novo" ou "Já tinha" (cópias de antes da carta). */
.own-tag {
  flex: none;
  align-self: flex-start;
  padding: 0 6px;
  border: 1px solid var(--ok);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 18%, rgba(8, 10, 14, 0.82));
  color: var(--ok);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.own-tag.is-sold {
  border-color: var(--text-2);
  background: rgba(8, 10, 14, 0.82);
  color: var(--text-2);
}

/* Carta vendida na hora (v0.219.2): a carta fica bem apagada e uma moeda marca o meio dela. */
.summon-card-item.is-autosold > .portrait,
.summon-card-item.is-autosold > .item-name,
.summon-card-item.is-autosold > .summon-card-head,
.summon-card-item.is-autosold > .own-tag {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.summon-card-item.is-autosold .summon-sold-note {
  opacity: 0.7;
}

.summon-sold-coin {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* O bloco de ranks fica no lugar (invisível) para a carta vendida ter a mesma altura das outras; a nota vai por cima. */
.summon-card-item .summon-stat-ranks.is-sold-placeholder {
  visibility: hidden;
}

.summon-sold-note {
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-3);
  left: var(--s-2);
  color: var(--text-2);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.own-tag.is-new {
  border-color: var(--r-mythic);
  background: color-mix(in srgb, var(--r-mythic) 18%, rgba(8, 10, 14, 0.82));
  color: var(--r-mythic);
}

.banner-card-art .own-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
}

/* O nome ocupa a linha de cima inteira; a etiqueta fica embaixo em vez de cortar o nome. */
.banner-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.banner-chip-text .banner-chip-name {
  max-width: 100%;
}

/* Revelação: o momento de aquisição. As cartas chegam viradas (16-reveal.css); Lendário+ ganha brilho. */
.summon-modal-card {
  width: min(760px, calc(100vw - 32px));
  padding: var(--s-4) var(--s-5);
  align-items: center;
  text-align: center;
}

.summon-result-title {
  font-size: var(--fs-24);
}

.summon-result-summary {
  color: var(--text-2);
}

.summon-cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-2) 0;
}

/* Dez cartas: duas fileiras de cinco, compactas, para caber em 720px de altura. */
.summon-cards-row.is-multi {
  display: grid;
  grid-template-columns: repeat(5, 116px);
  justify-content: center;
}

.summon-cards-row.is-multi .summon-card-item {
  width: auto;
}

.summon-cards-row.is-multi .portrait {
  aspect-ratio: 11 / 10;
}

.summon-cards-row.is-multi .item-name {
  font-size: var(--fs-13);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summon-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: 150px;
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  text-align: left;
  overflow: hidden;
}

.summon-card-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rarity);
}

.summon-card-item.rarity-legendary,
.summon-card-item.rarity-mythic,
.summon-card-item.rarity-celestial {
  border-color: var(--rarity);
  box-shadow: 0 0 0 1px var(--rarity), 0 0 24px color-mix(in srgb, var(--rarity) 45%, transparent);
}

.summon-card-item .portrait {
  width: 100%;
}

.summon-card-item .item-name {
  font-weight: 600;
  line-height: 1.2;
}

.summon-card-item .card-ranks {
  grid-template-columns: repeat(3, 1fr);
}

.summon-card-item .rank-cell {
  align-items: center;
  padding: 2px 0;
}

/* Banner (v0.75, visual v0.78): só Celestiais e Míticos, em cartas altas no estilo das vitrines de gacha. Moldura e
   fundo na cor da raridade, sprite grande, placa com nome e estrelas, título embaixo. Lendários, Épicos e Raros ficam
   no menu "Ver outros heróis". */
.summon-banner {
  grid-area: banner;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.summon-title {
  line-height: 1.1;
}

.banner-timer {
  color: var(--text-2);
  font-size: var(--fs-14);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}

.banner-timer strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.banner-stage {
  display: grid;
  grid-template-columns: 1fr 1.28fr 1fr 1.28fr 1fr;
  align-items: end;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, color-mix(in srgb, var(--r-celestial) 14%, transparent), transparent 70%),
    var(--surface-1);
}

.banner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 10px;
  border: 2px solid var(--rarity);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rarity) 42%, var(--surface-2)) 0%, color-mix(in srgb, var(--rarity) 14%, var(--surface-1)) 68%, var(--surface-1) 100%);
  overflow: hidden;
}

.banner-card.rarity-mythic {
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--rarity) 70%, transparent);
}

/* Celestial: moldura cônica ciano e rosa girando, a mesma das cartas Celestiais do inventário. */
.banner-card.rarity-celestial {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--r-celestial-2) 34%, var(--surface-2)) 0%, color-mix(in srgb, var(--r-celestial) 26%, var(--surface-1)) 55%, var(--surface-1) 100%) padding-box,
    conic-gradient(from var(--neon-angle), var(--r-celestial), #ffffff 10%, var(--r-celestial-2) 28%, var(--r-celestial) 50%, #ffffff 62%, var(--r-celestial-2) 80%, var(--r-celestial)) border-box;
  box-shadow:
    0 0 10px var(--r-celestial),
    0 0 30px -6px color-mix(in srgb, var(--r-celestial-2) 60%, transparent);
  animation: neon-spin 3s linear infinite;
}

.banner-card-art {
  position: relative;
  aspect-ratio: 3 / 4;
}

.banner-card-art .hero-sprite {
  --sprite-w: 190%;
  --sprite-top: 50%;
  --shadow-top: 90%;
}

.banner-card.rarity-celestial .banner-card-art .hero-sprite {
  --sprite-w: 178%;
}

.banner-card-plate {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin: 0 6px;
  padding: 5px 4px 4px;
  border-radius: var(--radius-s);
  background: rgba(8, 10, 14, 0.82);
  border: 1px solid color-mix(in srgb, var(--rarity) 55%, transparent);
}

.banner-card-name {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.banner-card-stars {
  color: var(--rarity);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
}

.banner-card.rarity-celestial .banner-card-stars {
  background: linear-gradient(90deg, var(--r-celestial), var(--r-celestial-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.banner-card-title {
  height: calc(2 * 1.2em);
  margin: 6px 6px 8px;
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.banner-card.rarity-celestial .banner-card-name {
  font-size: var(--fs-20);
}

/* Menu dos outros heróis: fechado por padrão. */
.banner-more {
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.banner-more summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.banner-more summary::-webkit-details-marker {
  display: none;
}

.banner-more summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-2);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 0.15s;
}

.banner-more[open] summary::before {
  transform: rotate(90deg);
}

.banner-more summary .num {
  color: var(--text-2);
  font-weight: 400;
}

.banner-more .banner-lists {
  padding: 0 var(--s-4) var(--s-4);
}

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

.banner-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--text-2);
}

.banner-group-title .rarity-label {
  font-size: var(--fs-13);
}

.banner-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.banner-chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: 2px var(--s-2) 2px 2px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rarity);
  background: var(--surface-2);
  font-size: var(--fs-13);
}

.banner-chip .banner-chip-art {
  flex: none;
  width: 36px;
  aspect-ratio: 1;
  border: 0;
}

/* Chip de 36 px: o quadro de 112 px em 1x mostra cabeça e tronco. */
.banner-chip .hero-sprite {
  --sprite-w: 311%;
  --sprite-top: 95%;
}

.banner-chip .hero-sprite::before {
  display: none;
}

.banner-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .summon-card-item {
    width: 128px;
  }

  .summon-cards-row.is-multi {
    grid-template-columns: repeat(2, 128px);
  }

  .summon-actions {
    grid-template-columns: 1fr;
  }

  .banner-stage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-2);
    padding: var(--s-3);
  }

  .banner-stage > .banner-card {
    grid-column: span 2;
    order: 2;
  }

  .banner-stage > .banner-card.rarity-celestial {
    grid-column: span 3;
    order: 1;
  }

  .banner-card-name {
    font-size: var(--fs-13);
  }

  .banner-card.rarity-celestial .banner-card-name {
    font-size: var(--fs-16);
  }

  .banner-card-art .hero-sprite {
    --sprite-w: 200%;
  }

  .banner-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}