/* Modo Desafio (v0.38): cartões de dificuldade, oferta, contagem, faixa da batalha e aviso de migração.
   Base neutra: o neon fica para raridade. A cor de dificuldade (--dc, vinda dos dados) só marca a borda,
   aqui e nos botões de dificuldade da Campanha (v0.98.2). */
#challenge-selection-box[hidden],
#challenge-offer[hidden],
#challenge-timer[hidden],
#btn-migration-download[hidden],
#overlay-challenge-waves[hidden],
#overlay-challenge-balance[hidden],
.chip-live[hidden] {
  display: none !important;
}

/* Quatro modos numa linha (Campanha, Infinito, Desafio, Raid); duas colunas em tela estreita.
   Com o Dojo ligado (DOJO_ON em ui/lobby.js) a linha passa a cinco cartões. */
.mode-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1241px) {
  .mode-list:has(#card-mode-training:not([hidden])) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.mode-select-card[hidden] {
  display: none;
}

@media (max-width: 1240px) {
  .mode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mode-list {
    grid-template-columns: 1fr;
  }
}

/* Dificuldades do Desafio */
.challenge-diff-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
}

.challenge-diff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-height: 112px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-1);
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.challenge-diff:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

.challenge-diff.active {
  background: var(--surface-2);
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

.challenge-diff.locked {
  border-style: dashed;
  background: var(--surface-1);
}

/* Cor da dificuldade na borda esquerda: cartões do Desafio e botões da Campanha (.diff-chip, 02-lobby.css).
   Este arquivo carrega depois do lobby, então estas regras vencem a borda inteira dos dois. */
.challenge-diff,
.diff-chip {
  border-left: 4px solid var(--dc, var(--line-strong));
}

.challenge-diff:hover,
.diff-chip:hover {
  border-left-color: var(--dc, var(--line-strong));
}

.challenge-diff.active,
.diff-chip.active {
  border-left-color: var(--dc, var(--text));
}

.challenge-diff.locked,
.diff-chip.locked {
  border-left-style: solid;
}

.challenge-diff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
}

.challenge-diff-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
}

.challenge-diff.active .challenge-diff-name::before {
  content: '✓';
  margin-right: var(--s-1);
}

.challenge-diff.locked .challenge-diff-name {
  color: var(--text-2);
}

.challenge-diff-state {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-2);
}

.challenge-diff-stage {
  font-size: var(--fs-13);
  color: var(--text-2);
}

.challenge-diff-stage strong {
  color: var(--text);
  font-weight: 600;
}

.challenge-diff-detail {
  font-size: var(--fs-13);
  color: var(--text-2);
}

.challenge-diff-reward {
  margin-top: auto;
  font-size: var(--fs-13);
}

.challenge-diff-progress {
  margin-top: auto;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.challenge-diff-progress > span {
  display: block;
  height: 100%;
  background: var(--text-2);
}

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

/* Oferta: modificadores sorteados, na coluna de escolhas. */
.mod-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-2) var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.mod-item.tier-heavy {
  border-color: var(--danger);
}

.mod-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--surface-3);
  color: var(--text);
}

.mod-item.tier-heavy .mod-ico {
  color: var(--danger);
}

.mod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
}

.mod-name {
  font-size: var(--fs-14);
}

.mod-tier {
  padding: 0 var(--s-2);
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-2);
}

.mod-item.tier-heavy .mod-tier {
  border-color: var(--danger);
  color: var(--danger);
}

.mod-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--text-2);
}

/* Contagem do intervalo */
.challenge-timer {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.challenge-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.challenge-timer-label {
  font-size: var(--fs-13);
  color: var(--text-2);
}

.challenge-timer-val {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-variant-numeric: tabular-nums;
}

.challenge-timer-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.challenge-timer-bar > div {
  height: 100%;
  width: 0;
  background: var(--text);
  transition: width 1s linear;
}

/* Faixa de modificadores na batalha */
.challenge-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 41px;
  padding: var(--s-1) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
}

.challenge-banner-label {
  flex: none;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-2);
}

.challenge-chips {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.challenge-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
}

.challenge-chip .mod-icon {
  width: 18px;
  height: 18px;
}

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

.challenge-chip.tier-heavy {
  border-color: var(--danger);
}

.challenge-chip.tier-heavy .mod-icon {
  color: var(--danger);
}

.challenge-chip .chip-live {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.challenge-chip.at-limit {
  background: var(--text);
  border-color: var(--text);
  color: var(--action-ink);
}

.challenge-chip.at-limit .chip-live {
  color: var(--action-ink);
}

.challenge-banner-detail {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aviso de migração */
.migration-card {
  width: min(520px, calc(100vw - 32px));
}

.migration-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--text-2);
}

.migration-changes {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}

.migration-changes > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

.migration-changes dt {
  color: var(--text-2);
}

.migration-changes dd {
  margin: 0;
  color: var(--text);
}

/* Celular: tudo em uma coluna, sem rolagem horizontal; a faixa de modificadores rola dentro dela. */
@media (max-width: 900px) {
  .challenge-banner {
    flex-wrap: wrap;
    padding: var(--s-1) var(--s-3);
  }

  .challenge-chips {
    flex-wrap: wrap;
  }

  .challenge-banner-detail {
    flex-basis: 100%;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .challenge-diff-list {
    grid-template-columns: 1fr;
  }

  .challenge-diff {
    min-height: 0;
  }

  .mod-list {
    grid-template-columns: 1fr;
  }

  .mod-item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--s-2);
  }

  .mod-ico {
    width: 32px;
    height: 32px;
  }
}

@media (pointer: coarse) {
  .challenge-chip {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-timer-bar > div {
    transition: none;
  }
}