/* ==========================================================================
   KEMU — Telas de Gamificação (js/screens/missions.js, challenges.js,
   ranking.js, shop.js)

   Mobile-first: bloco padrão = celular (≤767px); tablet e desktop sobem por
   `min-width`. Nenhuma cor literal — só tokens de tokens.css (ou
   `color-mix()` a partir deles). Sem `!important`. Tudo prefixado por
   `.screen--missions`, `.screen--challenges`, `.screen--ranking` ou
   `.screen--shop` para não vazar para outras telas.

   Sumário
     0.  Compartilhado entre as 4 telas (faixa "Dica Kemu", pills de filtro)
     1.  Missões — herói, lista de missões, card de sequência, conquistas
     2.  Desafios — filtros, banner roxo, em andamento, disponíveis, concluídos
     3.  Ranking — abas, herói, pódio, lista, linha "grudada"
     4.  Loja — banner, poderes, cosméticos, pacotes, plano Kemuch, resgate XP
   ========================================================================== */


/* ==========================================================================
   0. Compartilhado
   ==========================================================================
   `.kemu-tip` é usada por missions.js e challenges.js (faixa "Dica Kemu" com
   o mascote). Nenhum outro CSS a estiliza — escopamos às duas telas donas
   deste arquivo para não vazar para as telas de Estudo/Relatórios.
   -------------------------------------------------------------------------- */

.screen--missions .kemu-tip,
.screen--challenges .kemu-tip {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}

.screen--missions .kemu-tip__icon,
.screen--challenges .kemu-tip__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
  background: var(--surface);
  box-shadow: var(--sh-xs);
}

.screen--missions .kemu-tip__body,
.screen--challenges .kemu-tip__body {
  flex: 1 1 auto;
  min-width: 0;
}

.screen--missions .kemu-tip__title,
.screen--challenges .kemu-tip__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
}

.screen--missions .kemu-tip__text,
.screen--challenges .kemu-tip__text {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

.screen--missions .kemu-tip__mascot,
.screen--challenges .kemu-tip__mascot {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .screen--missions .kemu-tip__mascot,
  .screen--challenges .kemu-tip__mascot {
    display: block;
  }
}

/* Blocos de seção genéricos usados nas quatro telas */
.screen--missions__block,
.screen--challenges__block,
.screen--ranking__block,
.screen--shop__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}


/* ==========================================================================
   1. Missões (#/missoes)
   ========================================================================== */

.screen--missions {
  display: flex;
  flex-direction: column;
}

/* ---- 1.1 Herói ---- */

.screen--missions__hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-2xl);
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700) 70%, var(--brand-800));
  box-shadow: var(--sh-brand);
}

.screen--missions__hero-main {
  min-width: 0;
}

.screen--missions__hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-inv) 16%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.screen--missions__hero-title {
  margin-top: var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-inv);
}

.screen--missions__hero-text {
  margin-top: var(--sp-2);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text-inv) 86%, transparent);
}

.screen--missions__hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.screen--missions__hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-inv) 14%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

.screen--missions__hero-ring {
  display: flex;
  justify-content: center;
}

.screen--missions__hero-ring .ring-label__value,
.screen--missions__hero-ring .ring-label__cap {
  color: var(--text-inv);
}

.screen--missions__hero-ring .ring-label__cap {
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

@media (min-width: 768px) {
  .screen--missions__hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  .screen--missions__hero-title {
    font-size: var(--fs-2xl);
  }
}

/* ---- 1.2 Lista de missões ---- */

.screen--missions__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.mission {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.mission.is-complete {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.mission.is-claimed {
  opacity: 0.72;
}

.mission__emoji {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  font-size: var(--fs-xl);
  background: var(--brand-50);
}

.mission.is-complete .mission__emoji {
  background: var(--success-b);
}

.mission__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mission__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.mission__desc {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

.mission__body .progress {
  margin-top: var(--sp-3);
}

.mission__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.mission__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.mission__rewards {
  display: flex;
  gap: var(--sp-3);
}

.mission__reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.mission__reward--xp { color: var(--xp); }
.mission__reward--coin { color: var(--coin-d); }

.mission__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.screen--missions__done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-3);
  min-height: 36px;
  border-radius: var(--r-full);
  background: var(--success-b);
  color: var(--success);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .mission {
    gap: var(--sp-3);
    padding: var(--sp-3);
  }

  .mission__emoji {
    width: 44px;
    height: 44px;
    font-size: var(--fs-lg);
  }

  .mission__action .btn {
    padding: 0 var(--sp-3);
  }
}

/* ---- 1.3 Card de sequência (7 dias) ---- */

.streak-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.streak-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.streak-card__flame {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  font-size: var(--fs-xl);
  background: color-mix(in srgb, var(--streak) 14%, var(--surface-3));
}

.streak-card__value {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.streak-card__cap {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.streak-card__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
}

.streak-card__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.streak-card__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: transparent;
  border: 1px solid var(--border);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.streak-card__day.is-on .streak-card__dot {
  background: var(--streak);
  border-color: var(--streak);
  color: var(--text-inv);
}

.streak-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-transform: uppercase;
}

.streak-card__day.is-on .streak-card__label {
  color: var(--text-2);
}

.streak-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.streak-card__foot-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.streak-card__foot-item .icon {
  color: var(--coin-d);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .streak-card__foot {
    flex-direction: row;
    justify-content: space-between;
  }

  .streak-card__dot {
    width: 36px;
    height: 36px;
  }
}

/* ---- 1.4 Conquistas ---- */

.screen--missions__achievements {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.achv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.achv:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.achv__medal {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  font-size: var(--fs-xl);
  background: var(--surface-3);
  color: var(--text-3);
}

.achv__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.achv__desc {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: var(--lh-snug);
  min-height: 2.4em;
}

.achv__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

.achv__tier {
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.achv__when,
.achv__reward {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
}

/* Estado bloqueado (padrão): cinza total */
.achv:not(.is-unlocked) {
  background: var(--surface-2);
}

.achv:not(.is-unlocked) .achv__name,
.achv:not(.is-unlocked) .achv__desc {
  color: var(--text-3);
}

/* Estado desbloqueado: cor por tier */
.achv.is-unlocked {
  border-color: var(--border-2);
}

.achv.is-unlocked[data-tier="bronze"] .achv__medal {
  background: color-mix(in srgb, var(--coin-d) 30%, var(--surface-3));
  color: var(--coin-d);
}

.achv.is-unlocked[data-tier="bronze"] .achv__tier {
  color: var(--coin-d);
}

.achv.is-unlocked[data-tier="prata"] .achv__medal {
  background: color-mix(in srgb, var(--text-3) 24%, var(--surface-3));
  color: var(--text-2);
}

.achv.is-unlocked[data-tier="prata"] .achv__tier {
  color: var(--text-2);
}

.achv.is-unlocked[data-tier="ouro"] .achv__medal {
  background: color-mix(in srgb, var(--coin) 32%, var(--surface-3));
  color: var(--coin-d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coin) 18%, transparent);
}

.achv.is-unlocked[data-tier="ouro"] .achv__tier {
  color: var(--coin-d);
}

.achv.is-unlocked[data-tier="lendario"] .achv__medal {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 24%, transparent);
}

.achv.is-unlocked[data-tier="lendario"] .achv__tier {
  color: var(--brand-600);
}

.achv.is-unlocked .achv__name {
  color: var(--text);
}

.achv.is-unlocked .achv__desc {
  color: var(--text-2);
}

@media (min-width: 768px) {
  .screen--missions__achievements {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--sp-4);
  }
}


/* ==========================================================================
   2. Desafios (#/desafios)
   ========================================================================== */

.screen--challenges {
  display: flex;
  flex-direction: column;
}

/* ---- 2.1 Filtros ---- */

.screen--challenges__filters {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
  margin: 0 calc(var(--sp-4) * -1) var(--sp-5);
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  scrollbar-width: none;
}

.screen--challenges__filters::-webkit-scrollbar {
  display: none;
}

.chall-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.chall-filter:hover {
  border-color: var(--border-2);
  color: var(--text);
}

.chall-filter:active {
  transform: scale(0.97);
}

.chall-filter.is-active {
  background: var(--brand-600);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: transparent;
  color: var(--text-inv);
  box-shadow: var(--sh-brand);
}

@media (min-width: 768px) {
  .screen--challenges__filters {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0 0 var(--sp-6);
    padding: 0;
  }
}

/* ---- 2.2 Banner roxo — desafios diários ---- */

.screen--challenges__banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-2xl);
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700) 70%, var(--brand-800));
  box-shadow: var(--sh-brand);
}

.screen--challenges__banner-art {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  font-size: 46px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--text-inv) 14%, transparent);
}

.screen--challenges__banner-main {
  min-width: 0;
}

.screen--challenges__banner-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-inv);
}

.screen--challenges__banner-text {
  margin-top: var(--sp-1);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text-inv) 86%, transparent);
}

.screen--challenges__banner-main .btn {
  margin-top: var(--sp-4);
}

.screen--challenges__banner-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.screen--challenges__stat {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text-inv) 12%, transparent);
}

.screen--challenges__stat-cap {
  display: block;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

.screen--challenges__stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.screen--challenges__stat-emoji {
  font-size: var(--fs-lg);
  line-height: 1;
}

.screen--challenges__stat-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text-inv);
}

.screen--challenges__stat-foot {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

@media (min-width: 768px) {
  .screen--challenges__banner {
    flex-direction: row;
    align-items: center;
  }

  .screen--challenges__banner-art {
    display: grid;
  }

  .screen--challenges__banner-main {
    flex: 1 1 auto;
  }

  .screen--challenges__banner-stats {
    flex-direction: row;
    flex-shrink: 0;
  }

  .screen--challenges__stat {
    min-width: 148px;
  }
}

/* ---- 2.3 Cards de desafio (compartilham `.chall`) ---- */

.chall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.chall__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  line-height: 1;
}

.chall__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.chall__head {
  flex: 1 1 auto;
  min-width: 0;
}

.chall__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.chall__desc {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

/* ---- Em andamento ---- */

.screen--challenges__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.chall--running.is-claimable {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.chall__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chall__count {
  align-self: flex-end;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.chall__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.chall__xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--xp);
}

.chall__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  transition: background var(--t-fast), color var(--t-fast);
}

.chall__cta:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* ---- Disponíveis ---- */

.screen--challenges__available {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.chall--available {
  flex-direction: row;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.chall--available:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-2);
}

.chall--available:active {
  transform: translateY(0);
}

.chall__ends {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.chall__reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 3px;
  text-align: right;
}

.chall__reward-cap {
  font-size: 10px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.chall__reward-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--xp);
}

.chall__coins {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--coin-d);
}

.chall__lock {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: var(--r-full);
  background: var(--warning-b);
  color: var(--coin-d);
}

.chall--available.is-locked {
  background: var(--surface-2);
}

.chall--available.is-locked .chall__name,
.chall--available.is-locked .chall__desc {
  color: var(--text-2);
}

.chall--available.is-locked .chall__icon {
  opacity: 0.7;
}

/* ---- Concluídos ---- */

.screen--challenges__done {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.chall--done {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0.75;
  box-shadow: none;
  background: var(--surface-2);
}

.chall--done .chall__head {
  flex: 1 1 auto;
}

.chall__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--success-b);
  color: var(--success);
}

@media (min-width: 768px) {
  .chall {
    padding: var(--sp-5);
  }
}


/* ==========================================================================
   3. Ranking (#/ranking)
   ========================================================================== */

.screen--ranking {
  display: flex;
  flex-direction: column;
}

/* ---- 3.1 Abas ---- */

.screen--ranking__tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.screen--ranking__tabs::-webkit-scrollbar {
  display: none;
}

.rank-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.rank-tab__emoji {
  font-size: var(--fs-base);
  line-height: 1;
}

.rank-tab:hover {
  color: var(--text);
  border-color: var(--border-2);
}

.rank-tab.is-active {
  background: var(--brand-600);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: transparent;
  color: var(--text-inv);
  box-shadow: var(--sh-brand);
}

/* ---- 3.2 Herói ---- */

.screen--ranking__hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-2xl);
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700) 70%, var(--brand-800));
  box-shadow: var(--sh-brand);
}

.screen--ranking__hero-pos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.screen--ranking__hero-cap {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

.screen--ranking__hero-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-inv);
}

.screen--ranking__hero-foot {
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--text-inv) 82%, transparent);
}

.screen--ranking__hero-main {
  min-width: 0;
}

.screen--ranking__hero-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-inv);
}

.screen--ranking__hero-text {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text-inv) 86%, transparent);
}

.screen--ranking__hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.screen--ranking__hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-inv) 14%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

@media (min-width: 768px) {
  .screen--ranking__hero {
    flex-direction: row;
    align-items: center;
  }

  .screen--ranking__hero-pos {
    flex-shrink: 0;
    padding-right: var(--sp-6);
    border-right: 1px solid color-mix(in srgb, var(--text-inv) 22%, transparent);
  }

  .screen--ranking__hero-main {
    flex: 1 1 auto;
  }
}

/* ---- 3.3 Pódio ---- */

.screen--ranking__podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 30%;
  max-width: 176px;
  padding: var(--sp-4) var(--sp-2) 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  text-align: center;
}

.podium__medal {
  font-size: var(--fs-2xl);
  line-height: 1;
}

.podium .avatar {
  margin: 2px 0;
}

.podium__name {
  max-width: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.podium__xp {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-2);
}

.podium__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin-top: var(--sp-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--brand-50);
}

.podium__place {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--brand-600);
}

.podium__level {
  font-size: 10px;
  font-weight: var(--fw-semi);
  color: var(--brand-700);
}

.podium[data-place="1"] {
  order: 2;
  padding-top: var(--sp-5);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--coin) 45%, var(--border));
}

.podium[data-place="1"] .podium__base {
  height: 84px;
  background: linear-gradient(180deg, var(--coin), var(--coin-d));
}

.podium[data-place="1"] .podium__place,
.podium[data-place="1"] .podium__level {
  color: var(--text-inv);
}

.podium[data-place="2"] {
  order: 1;
}

.podium[data-place="2"] .podium__base {
  height: 60px;
}

.podium[data-place="3"] {
  order: 3;
}

.podium[data-place="3"] .podium__base {
  height: 42px;
  background: color-mix(in srgb, var(--streak) 16%, var(--surface-3));
}

.podium[data-place="3"] .podium__place {
  color: var(--streak);
}

.podium.is-you {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent);
}

@media (min-width: 768px) {
  .podium {
    padding: var(--sp-5) var(--sp-3) 0;
  }

  .podium__name {
    font-size: var(--fs-base);
  }

  .podium[data-place="1"] .podium__base { height: 104px; }
  .podium[data-place="2"] .podium__base { height: 76px; }
  .podium[data-place="3"] .podium__base { height: 54px; }
}

/* ---- 3.4 Lista de classificação ---- */

.screen--ranking__card {
  overflow: hidden;
}

.screen--ranking__list {
  display: flex;
  flex-direction: column;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}

.screen--ranking__list .rank-row:last-child {
  border-bottom: none;
}

.rank-row:hover {
  background: var(--surface-2);
}

.rank-row.is-you {
  background: var(--brand-50);
}

.rank-row.is-you:hover {
  background: var(--brand-100);
}

.rank-row__pos {
  flex-shrink: 0;
  width: 2.4em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rank-row.is-you .rank-row__pos {
  color: var(--brand-700);
}

.rank-row__info {
  flex: 1 1 auto;
  min-width: 0;
}

.rank-row__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.rank-row__sub {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.rank-row__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.rank-row__streak {
  display: none;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-2);
}

.rank-row__level {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
}

.rank-row__xp {
  min-width: 5.5em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--xp);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rank-row--compact .rank-row__xp {
  min-width: 0;
}

@media (min-width: 560px) {
  .rank-row__streak,
  .rank-row__level {
    display: inline-flex;
  }
}

/* ---- 3.5 Linha do usuário "grudada" no rodapé ---- */

.screen--ranking__sticky {
  position: sticky;
  bottom: var(--sp-3);
  z-index: var(--z-sticky);
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--brand-200);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  pointer-events: none;
}

.screen--ranking__sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.screen--ranking__sticky-cap {
  display: block;
  margin: 0 0 4px var(--sp-1);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-600);
}

.screen--ranking__sticky .rank-row {
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.screen--ranking__sticky .rank-row:hover {
  background: transparent;
}

/* ---- 3.6 Dicas ---- */

.rank-tips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.rank-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.rank-tip__emoji {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  font-size: var(--fs-md);
  background: var(--brand-50);
}

.rank-tip__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.rank-tip__text {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

@media (min-width: 768px) {
  .rank-tips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .screen--ranking__sticky {
    bottom: var(--sp-4);
  }
}


/* ==========================================================================
   4. Loja (#/loja)
   ========================================================================== */

.screen--shop {
  display: flex;
  flex-direction: column;
}

/* ---- 4.1 Banner ---- */

.screen--shop__banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-2xl);
  color: var(--text-inv);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700) 70%, var(--brand-800));
  box-shadow: var(--sh-brand);
}

.screen--shop__banner-main {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.screen--shop__banner-emoji {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 32px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--text-inv) 14%, transparent);
}

.screen--shop__banner-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-inv);
}

.screen--shop__banner-text {
  margin-top: 2px;
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text-inv) 86%, transparent);
}

.screen--shop__balance {
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--text-inv) 12%, transparent);
}

.screen--shop__balance-cap {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: color-mix(in srgb, var(--text-inv) 80%, transparent);
}

.screen--shop__balance-row {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.screen--shop__balance-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.screen--shop__balance-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-inv) 16%, transparent);
}

.screen--shop__balance-icon.is-coin { color: var(--coin); }
.screen--shop__balance-icon.is-xp { color: var(--text-inv); }

.screen--shop__balance-value {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: 1.1;
  color: var(--text-inv);
}

.screen--shop__balance-label {
  display: block;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text-inv) 80%, transparent);
}

@media (min-width: 768px) {
  .screen--shop__banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .screen--shop__balance {
    flex-shrink: 0;
  }
}

/* ---- 4.2 Layout de duas colunas ---- */

.screen--shop__cols {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.screen--shop__main {
  min-width: 0;
}

.screen--shop__main .screen--shop__block:first-child {
  margin-top: 0;
}

.screen--shop__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

@media (min-width: 1024px) {
  .screen--shop__cols {
    flex-direction: row;
    align-items: flex-start;
  }

  .screen--shop__main {
    flex: 1 1 auto;
  }

  .screen--shop__aside {
    flex: 0 0 300px;
    position: sticky;
    top: var(--sp-6);
  }
}

/* ---- 4.3 Poderes ---- */

.screen--shop__powers {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.power {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  text-align: center;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.power:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.power__qty {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  color: var(--text-inv);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

.power__emoji {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  font-size: var(--fs-xl);
  background: var(--brand-50);
}

.power[data-tone="info"] .power__emoji { background: var(--info-b); }
.power[data-tone="success"] .power__emoji { background: var(--success-b); }
.power[data-tone="warning"] .power__emoji { background: var(--warning-b); }
.power[data-tone="danger"] .power__emoji { background: var(--danger-b); }

.power__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.power__desc {
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: var(--lh-snug);
  min-height: 2.4em;
}

.power__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: 2px;
  border-radius: var(--r-md);
  background: var(--warning-b);
  color: var(--coin-d);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: background var(--t-fast), transform var(--t-fast);
}

.power__buy:hover {
  background: color-mix(in srgb, var(--coin) 24%, var(--warning-b));
}

.power__buy:active {
  transform: scale(0.97);
}

/* ---- 4.4 Itens cosméticos ---- */

.screen--shop__cosmetics {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.cosmetic-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}

.cosmetic-group__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.cosmetic-group__preview {
  display: flex;
  gap: 6px;
}

.cosmetic-group__chip {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  font-size: var(--fs-base);
  background: var(--surface-3);
}

.cosmetic-group__count {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.cosmetic-group .btn {
  margin-top: auto;
}

/* Grade dentro do modal "Ver itens" */
.cosmetic-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}

.cosmetic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
}

.cosmetic__emoji {
  font-size: var(--fs-2xl);
  line-height: 1;
}

.cosmetic__info {
  min-width: 0;
}

.cosmetic__name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.cosmetic__tier {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  color: var(--text-3);
}

.cosmetic__action {
  width: 100%;
  margin-top: 2px;
}

.cosmetic__action .btn {
  width: 100%;
}

.cosmetic__equipped {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--success);
}

.cosmetic__locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
}

.cosmetic.is-equipped {
  background: var(--success-b);
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.cosmetic.is-locked {
  opacity: 0.85;
}

/* ---- 4.5 Pacotes de moedas ---- */

.screen--shop__packs {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.pack:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

.pack:active {
  transform: translateY(0);
}

.pack__bonus {
  position: absolute;
  top: -9px;
  right: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--success);
  color: var(--text-inv);
  font-size: 10px;
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-xs);
}

.pack__coins {
  margin-top: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
}

.pack__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.pack__emoji {
  font-size: 36px;
  line-height: 1.3;
}

.pack__total {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--success);
  min-height: 1.4em;
}

.pack__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 100%;
  margin-top: 4px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* ---- 4.6 Painel do plano Kemuch ---- */

.plan-panel {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  color: var(--text-inv);
  background: var(--brand-600);
  background: linear-gradient(160deg, var(--brand-500), var(--brand-700) 70%, var(--brand-800));
  box-shadow: var(--sh-brand);
}

.plan-panel::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-inv) 12%, transparent);
  pointer-events: none;
}

.plan-panel__tag {
  position: relative;
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--coin);
  color: var(--brand-900);
  font-size: 10px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-panel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.plan-panel__crown {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--coin);
  background: color-mix(in srgb, var(--text-inv) 16%, transparent);
}

.plan-panel__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
  color: var(--text-inv);
}

.plan-panel__text {
  position: relative;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text-inv) 88%, transparent);
}

.plan-panel__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.plan-panel__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--text-inv) 92%, transparent);
}

.plan-panel__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--success) 55%, transparent);
  color: var(--text-inv);
}

.plan-panel__price {
  position: relative;
  margin-top: var(--sp-5);
}

.plan-panel__price-cap {
  display: block;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

.plan-panel__price-value {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-inv);
}

.plan-panel__price-foot {
  display: block;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--text-inv) 78%, transparent);
}

.plan-panel__active {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--text-inv) 14%, transparent);
  font-size: var(--fs-sm);
  color: var(--text-inv);
}

.plan-panel__cta {
  position: relative;
  margin-top: var(--sp-4);
  color: var(--brand-900);
  background: var(--coin);
  background: linear-gradient(135deg, var(--coin), var(--coin-d));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--coin) 35%, transparent);
}

.plan-panel__cta:hover {
  background: var(--coin);
  transform: translateY(-1px);
}

/* ---- 4.7 Resgatar com XP ---- */

.redeem {
  padding: var(--sp-5);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}

.redeem__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.redeem__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.redeem__text {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.redeem__emoji {
  flex-shrink: 0;
  font-size: var(--fs-2xl);
  line-height: 1;
}

.redeem__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--brand-50);
}

.redeem__row .icon {
  color: var(--brand-500);
  flex-shrink: 0;
}

.redeem__from,
.redeem__to {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-700);
  text-align: center;
}

.redeem__hint {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
}

@media (min-width: 1024px) {
  .screen--shop__powers,
  .screen--shop__cosmetics,
  .screen--shop__packs {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}


/* ==========================================================================
   5. Telas muito estreitas (≤400px)
   ========================================================================== */

@media (max-width: 400px) {
  .screen--missions__hero,
  .screen--challenges__banner,
  .screen--ranking__hero,
  .screen--shop__banner,
  .plan-panel,
  .redeem {
    padding: var(--sp-4);
  }

  .screen--ranking__podium {
    gap: var(--sp-2);
  }

  .podium {
    padding-left: 4px;
    padding-right: 4px;
  }

  .screen--missions__achievements,
  .screen--shop__powers,
  .screen--shop__cosmetics,
  .screen--shop__packs {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
}