/* File: cards.css
   CARDS — the pack shop, the opening ritual, and the collection.

   Built on the same Amber/Asphalt tokens as the rest of the app (style.css :root). The one
   addition is a RARITY ramp, and it deliberately avoids a second amber: the accent already
   means "yours / active" everywhere else, so only LEGENDARY is allowed to borrow it.
   Rarity must be readable at thumbnail size, so every tier changes the border AND the
   label, never the border alone.

   Class names here are queried by cards.js (.card-tile, .pack-card, .reveal-card,
   .cards-subtab) — renaming one is a JS change, not just a style change. */

.cards-body { padding: 0 0 40px; position: relative; }

.cards-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 28px 4px;
  text-align: center;
}

/* ---------- rarity ramp ---------- */

.card-tile, .pack-card, .reveal-card {
  --rar: var(--text-dim);
  --rar-soft: rgba(154, 154, 162, 0.16);
}
/* Scoped to the three components that carry rarity, never left as a bare `.is-epic`:
   an unscoped rarity class would redefine --rar on anything anywhere that happens to use
   the same word — simulator.css already has a .sim-skill-note.is-legendary. */
.card-tile.is-common, .pack-card.is-common, .reveal-card.is-common       { --rar: #9a9aa2; --rar-soft: rgba(154,154,162,0.16); }
.card-tile.is-rare, .pack-card.is-rare, .reveal-card.is-rare             { --rar: var(--success); --rar-soft: rgba(79,180,119,0.18); }
.card-tile.is-epic, .pack-card.is-epic, .reveal-card.is-epic             { --rar: var(--neon-purple); --rar-soft: rgba(139,92,246,0.22); }
.card-tile.is-legendary, .pack-card.is-legendary, .reveal-card.is-legendary { --rar: var(--accent); --rar-soft: rgba(233,161,59,0.24); }

.pack-odds li.is-common span,  .cardadm-odd span.is-common,  .cardadm-preview .is-common  { color: #9a9aa2; }
.pack-odds li.is-rare span,    .cardadm-odd span.is-rare,    .cardadm-preview .is-rare    { color: var(--success); }
.pack-odds li.is-epic span,    .cardadm-odd span.is-epic,    .cardadm-preview .is-epic    { color: var(--neon-purple); }
.pack-odds li.is-legendary span, .cardadm-odd span.is-legendary, .cardadm-preview .is-legendary { color: var(--accent); }

/* ---------- sub-tabs ---------- */

.cards-subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cards-subtab {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cards-subtab:hover { color: var(--text); border-color: var(--border-strong); }
.cards-subtab.is-active { color: var(--accent); border-color: var(--accent); }
.cards-wallet {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--accent);
}

/* ---------- the shelf ---------- */

.packs-intro {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}
.packs-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.pack-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.2s var(--ease-smooth), border-color 0.2s var(--ease-smooth);
}
.pack-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pack-art {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(160deg, rgba(233,161,59,0.16), transparent 60%), var(--surface-2);
}
.pack-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-art-empty { display: block; width: 100%; height: 100%; }
.pack-count {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.66);
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pack-body { padding: 12px 14px; flex: 1; }
.pack-body h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.pack-desc {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Odds are printed on the pack, not buried in a tooltip. A gacha whose odds are not
   visible is the first thing a community accuses of being rigged, and the accusation is
   unanswerable once the numbers are private. */
.pack-odds {
  list-style: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
}
.pack-odds li {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 1px 0;
}
.pack-odds li b { color: var(--text); }

.pack-pity { font-size: 9px; color: var(--text-dim); letter-spacing: 0.06em; }
.pack-pity-bar {
  height: 4px;
  margin-bottom: 4px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.pack-pity-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-soft));
}

.pack-buy {
  margin: 0 14px 14px;
  padding: 10px 0;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #17110a;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: filter 0.15s;
}
.pack-buy:hover:not(:disabled) { filter: brightness(1.08); }
.pack-buy:disabled {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* ---------- the opening stage ----------
   Sits above the page (z 150, same layer as the app's modals) because the reveal is the
   one moment that deserves the whole screen. */

.pack-stage { display: none; }
.pack-stage.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 160;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 9, 0.9);
  backdrop-filter: blur(6px);
  animation: stage-in 0.25s var(--ease-smooth);
}
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }

.pack-stage-inner {
  width: min(96vw, 860px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px;
  text-align: center;
}

/* --- beat 1: the seal --- */
.seal { display: grid; place-items: center; gap: 16px; }
.seal-pack {
  width: 190px;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(233,161,59,0.22), transparent 65%), var(--surface);
  overflow: hidden;
  animation: seal-breathe 1.1s ease-in-out infinite;
}
.seal-pack img { width: 100%; height: 100%; object-fit: cover; }
@keyframes seal-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { transform: scale(1.03); box-shadow: 0 0 34px 2px var(--accent-glow); }
}
.seal-status {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--accent);
}

/* --- the header, carrying the commit --- */
.stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.stage-pack {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text);
}
/* The proof, on screen before a single card turns. */
.stage-commit {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.stage-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.stage-close:hover { color: var(--text); border-color: var(--border-strong); }
.stage-pity {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* --- beats 2 and 3: the cards --- */
.reveal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.reveal-card {
  width: 210px;
  height: 320px;
  perspective: 1200px;
  cursor: pointer;
  animation: deal-in 0.4s var(--ease-smooth) backwards;
}
.reveal-card:nth-child(2) { animation-delay: 0.08s; }
.reveal-card:nth-child(3) { animation-delay: 0.16s; }
.reveal-card:nth-child(4) { animation-delay: 0.24s; }
.reveal-card:nth-child(5) { animation-delay: 0.32s; }
@keyframes deal-in {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.reveal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s var(--ease-smooth);
}
.reveal-card.is-flipped .reveal-inner { transform: rotateY(180deg); }

.reveal-back,
.reveal-front {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rar);
  border-radius: 14px;
  background: var(--surface);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* The back glows in the colour of what is underneath — the telegraph. That half second
   between seeing gold and turning the card is the beat people screenshot. */
.reveal-back {
  display: grid;
  place-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 45%, var(--rar-soft), transparent 62%),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.02) 8px 16px),
    var(--surface);
  box-shadow: inset 0 0 40px -12px var(--rar);
}
.reveal-back-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border: 2px solid var(--rar);
  border-radius: 50%;
  box-shadow: 0 0 22px -4px var(--rar);
  opacity: 0.35;
}
/* Only the card about to be turned breathes. A row of three pulsing cards reads as
   decoration; one pulsing card reads as an instruction. */
.reveal-card.is-ondeck .reveal-back-mark {
  animation: back-pulse 1.5s ease-in-out infinite;
}
.reveal-card.is-ondeck .reveal-back {
  box-shadow: inset 0 0 46px -10px var(--rar), 0 0 26px -8px var(--rar);
}
@keyframes back-pulse { 0%,100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Cards further down the line stay anonymous — no colour, no name. Their rarity is part of
   what is being revealed, so leaking it on the back gives the whole pack away at once. */
.reveal-card.is-hidden { --rar: var(--border-strong); --rar-soft: rgba(255,255,255,0.04); }

.reveal-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.reveal-art {
  position: relative;
  height: 108px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--rar-soft), transparent), var(--surface-2);
}
.reveal-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal-front h4 {
  margin: 8px 10px 0;
  font-size: 13px;
  line-height: 1.2;
}
.reveal-slot {
  margin: 2px 10px 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.reveal-rolls { padding: 0 10px 10px; overflow-y: auto; }

/* --- beat 4: where the roll landed inside the mold's window --- */
.roll {
  display: grid;
  grid-template-columns: 46px 1fr 30px;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 9px;
}
.roll-stat { letter-spacing: 0.06em; color: var(--text-dim); }
.roll-track {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: var(--surface-2);
}
.roll-mark {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--rar);
  transform: translateY(-50%);
  box-shadow: 0 0 8px -1px var(--rar);
}
.roll-val { font-weight: 700; text-align: right; color: var(--text); }
.roll-window {
  grid-column: 2 / 4;
  font-size: 8px;
  color: var(--text-dim);
  opacity: 0.75;
}
.roll-badge {
  grid-column: 1 / 4;
  justify-self: start;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--rar-soft);
  color: var(--rar);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.roll-badge.is-perfect { background: var(--accent); color: #17110a; }
.roll-none {
  margin: 6px 0 0;
  font-size: 9px;
  color: var(--text-dim);
}

/* --- the prompt and the aftermath --- */
.stage-prompt .pvp-btn.is-primary,
.stage-actions .pvp-btn.is-primary { width: auto; padding-left: 18px; padding-right: 18px; }
.stage-prompt,
.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.stage-best {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.stage-best b { font-family: var(--font-display); color: var(--rar, var(--accent)); }
.stage-best b.is-common { color: #9a9aa2; }
.stage-best b.is-rare { color: var(--success); }
.stage-best b.is-epic { color: var(--neon-purple); }
.stage-best b.is-legendary { color: var(--accent); }

.stage-proof {
  margin: 14px auto 0;
  max-width: 560px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-deep);
  text-align: left;
}
.stage-proof p {
  display: flex;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 9px;
}
.stage-proof span { flex: 0 0 52px; color: var(--text-dim); letter-spacing: 0.1em; }
.stage-proof code {
  word-break: break-all;
  font-size: 9px;
  color: var(--accent);
}
.stage-proof-note {
  display: block !important;
  margin-top: 6px !important;
  font-size: 9px;
  line-height: 1.5;
  color: var(--text-dim);
}

@media (max-width: 700px) {
  .reveal-card { width: 150px; height: 250px; }
  .reveal-art { height: 78px; }
}

/* ---------- collection ---------- */

.cards-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.collection-note {
  margin: 0;
  max-width: 54ch;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
}
.collection-note b { color: var(--accent); }
.cards-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cards-filter {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cards-filter:hover { color: var(--text); border-color: var(--border-strong); }
.cards-filter.is-active { color: var(--accent); border-color: var(--accent); }
/* Dois GRUPOS de chips, nao duas filas: SLOT a esquerda (o que a carta E), lente a direita
   (o que ela FAZ). Quem manda no arranjo e a .cards-toolbar, que ja e flex com
   space-between e wrap — numa janela estreita o grupo da direita cai sozinho para a linha
   de baixo, com o gap de 12px da propria toolbar separando os dois.

   SEM margin-top aqui, e isso foi medido: a toolbar alinha por flex-end, entao uma margem
   no topo levanta este grupo 4px acima do outro quando os dois dividem a linha, e as duas
   filas de pilulas ficam visivelmente tortas. */
.cards-lenses { align-items: center; margin-left: auto; }

/* Carta presa numa corrida: nao entra na selecao de queimar. Apagada, e sem o cursor de
   clique — aqui, ao contrario do modal do PvP, nao ha nada a explicar que a propria linha
   "RACING ON #11" ja nao diga. */
.card-tile.is-locked { opacity: 0.55; cursor: default; }
.card-tile.is-locked .card-art { filter: grayscale(0.75); }
/* O MOTIVO nao apaga junto com o resto. Apagar o cartao inteiro deixava "RACING ON #11" —
   a unica coisa ali que explica por que ele esta apagado — na mesma penumbra do que ela
   explica, e ai o jogador ve um cartao morto sem legenda. */
.card-tile.is-locked .card-where { opacity: 1; color: var(--accent); }
.cards-lens-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }

.card-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.card-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
}
.card-tile:hover { transform: translateY(-2px); border-color: var(--rar); }
.card-tile.is-fitted { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }

.card-art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--rar-soft), transparent), var(--surface-2);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-art-empty { display: block; width: 100%; height: 100%; }
.card-rarity {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.62);
  color: var(--rar);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.card-meta { padding: 8px 9px 4px; }
.card-meta h4 { margin: 0; font-size: 12px; line-height: 1.25; }
.card-slot {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.card-stats { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 9px 8px; }
.card-stat {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
}
.card-stat.is-up { color: var(--success); }
.card-stat.is-down { color: var(--danger); }
.card-stat.is-none { opacity: 0.65; }

.card-where {
  margin: auto 9px 9px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-align: center;
}
.card-where.is-on { color: var(--accent); }

/* ---------- admin: molds and packs ----------
   Reuses .pvpadm-note / .pvpadm-check / .pvp-btn from pvp.css so the admin panels do not
   drift into two differently shaped forms. */

.cardadm-h {
  margin: 24px 0 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.cardadm-new,
.cardadm-row,
.packadm-row {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.cardadm-row { display: grid; grid-template-columns: 150px 1fr 220px; gap: 14px; align-items: start; }
.packadm-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) {
  .cardadm-row, .packadm-row { grid-template-columns: 1fr; }
}

.cardadm-art { text-align: center; }
.cardadm-art img,
.cardadm-noimg,
.cardadm-broken {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 10px;
  line-height: 6;
  text-align: center;
}
.cardadm-art b { display: block; margin-top: 6px; font-size: 12px; color: var(--text); }
.cardadm-art code { display: block; font-size: 9px; color: var(--text-dim); }

.cardadm-fields label,
.cardadm-grant label,
.cardadm-new label {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.cardadm-fields input,
.cardadm-fields select,
.cardadm-grant input,
.cardadm-new input,
.cardadm-new select {
  width: 100%;
  margin-top: 3px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-deep);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.cardadm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }

.cardadm-rolls,
.cardadm-odds {
  display: grid;
  gap: 4px;
  margin: 4px 0 10px;
  padding: 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
}
.cardadm-odds { grid-template-columns: repeat(4, 1fr); }
.cardadm-roll {
  display: grid !important;
  grid-template-columns: 62px 1fr 20px 1fr;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
.cardadm-roll input { margin-top: 0; text-align: center; }
.cardadm-roll i { font-style: normal; font-size: 9px; text-align: center; color: var(--text-dim); }
.cardadm-odd { margin: 0 !important; text-align: center; }
.cardadm-odd input { text-align: center; }
.cardadm-preview {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.cardadm-warn { color: var(--danger); }

.cardadm-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cardadm-grant { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-deep); }
.cardadm-hint { margin: 6px 0 0; font-size: 9px; line-height: 1.5; color: var(--text-dim); }

/* ---------- market ---------- */

.market-sorts { margin: -6px 0 14px; }
.market-mine,
.market-all { margin-bottom: 22px; }
.market-mine h3,
.market-all h3 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
/* Your own listing, sitting in the public shelf. It has to be obvious at a glance which
   ones are yours, or the first thing a player does is try to buy their own card. */
.card-tile.is-mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }

.listing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 4px 9px 0;
}
.listing-price b {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--accent);
}
.listing-price span { font-size: 8px; letter-spacing: 0.1em; color: var(--text-dim); }

.card-sell {
  margin: 0 9px 9px;
  padding: 5px 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.card-sell:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- the sell dialog ---------- */

.sell-dialog.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 165;
  align-items: center;
  justify-content: center;
  animation: stage-in 0.18s var(--ease-smooth);
}
.sell-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 9, 0.84);
  backdrop-filter: blur(5px);
}
.sell-box {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8);
}
.sell-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.sell-card img,
.sell-card .card-art-empty {
  width: 84px;
  height: 63px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  flex: 0 0 auto;
}
.sell-card b { display: block; font-size: 13px; }
.sell-card span { display: block; font-size: 9px; letter-spacing: 0.08em; color: var(--text-dim); }
.sell-card .card-stats { padding: 4px 0 0; }

.sell-warn {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(199, 68, 54, 0.5);
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
}
.sell-warn b { color: var(--danger); }

.sell-price { display: block; margin-bottom: 8px; }
.sell-price span {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.sell-price input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
}
.sell-price input:focus { outline: none; border-color: var(--accent); }

/* What the seller ACTUALLY receives, next to what they asked for. Quoting only the asking
   price and deducting the fee silently afterwards is the most reliable way to make people
   believe they were shortchanged. */
.sell-quote {
  margin: 0 0 14px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-dim);
}
.sell-quote b { color: var(--text); }
.sell-quote .sell-net { color: var(--accent); font-size: 12px; }

.sell-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sell-actions .pvp-btn { width: auto; padding-left: 16px; padding-right: 16px; }
.sell-actions .pvp-btn.is-primary { width: auto; }

/* ==========================================================================
   MOBILE — CARDS, e a barra de abas que o MARKET tambem usa.
   ==========================================================================
   Tudo daqui para baixo vive dentro de uma media query: nada nesta secao pode
   alterar o desktop, que e a razao de ela estar no fim do arquivo e nao espalhada
   pelas regras acima.

   O que estava errado, medido a 375px:
     * a barra de abas e display:flex sem wrap, e o saldo tem margin-left:auto —
       com tres abas (BROWSE/SELLING/ACTIVITY, 415px somados) ele era empurrado
       para fora e ficava CORTADO na borda. O jogador nao conseguia ler o proprio
       saldo na tela onde ele gasta dinheiro;
     * os filtros quebravam em seis linhas, ~300px de altura antes do primeiro
       card — a primeira tela inteira gasta em filtros;
     * abas com 26px e chips com 21px de altura, contra os 44px de alvo de toque
       confortavel.                                                            */

@media (max-width: 700px) {
  /* A barra de abas passa a quebrar, e o saldo ganha a propria linha. Um saldo
     legivel vale mais que uma linha economizada. */
  .cards-subtabs {
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
  }
  .cards-subtab {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 11px;
  }
  /* O saldo fica no FIM da linha das abas, e cai para a linha seguinte sozinho
     quando nao couber. Com wrap ligado ele nunca pode ser cortado — so descer —
     entao nao ha motivo para gastar uma linha inteira com ele a priori. */
  .cards-wallet {
    margin-left: auto;
    text-align: right;
    font-size: 15px;
  }

  /* Os filtros viram uma faixa que rola na horizontal, em vez de quebrarem em
     varias linhas: tres grupos passam a ocupar tres linhas em vez de seis, e o
     primeiro card sobe para dentro da primeira tela. */
  .cards-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* min-width:auto e o padrao de um item flex, e significa "nao encolha abaixo do
       seu conteudo" — com isso a faixa empurrava o pai para 367px num viewport de
       375 e as ultimas opcoes ficavam cortadas. Zerar isto e o que transfere a
       largura excedente para o scroll interno, que e o ponto da faixa. */
    min-width: 0;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .cards-filters::-webkit-scrollbar { display: none; }
  .cards-filter {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 13px;
  }

  /* A arte do pacote ocupava 211px de altura, entao um pacote era mais de meia
     tela e a prateleira exigia rolagem para ver que existe um segundo. */
  .pack-art { aspect-ratio: 16 / 9; }
  .pack-card { border-radius: 12px; }
  .pack-buy { min-height: 46px; }
  .pack-count { font-size: 10px; }

  /* A colecao pedia colunas de no minimo 158px e sobram 319px de largura util a
     375px: 2x158+12 = 328, nove pixels a mais do que cabe. Errava por tao pouco que
     a prateleira caia inteira para UMA coluna, e cada carta virava um bloco de ~350px
     de altura. Baixar o minimo devolve as duas colunas. */
  .card-shelf {
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 10px;
  }
  /* 4/3 numa coluna de 146px ainda sao 110px so de arte, antes de qualquer texto. */
  .card-art { aspect-ratio: 16 / 9; }
  .card-tile h4 { font-size: 12px; line-height: 1.25; }

  .card-sell { min-height: 38px; font-size: 10px; }
  .card-rarity, .card-slot, .card-where { font-size: 10px; }
}

/* ==========================================================================
   BURN — a aba de destruir carta
   ==========================================================================
   A tela tem um trabalho antes de ser bonita: deixar claro que isto NAO tem volta e NAO
   paga nada. Dai o vermelho ser usado com parcimonia — so no que confirma — e a barra so
   "armar" quando ha selecao. Uma tela inteira em alerta vira ruido e para de alertar.  */

.burn-note b { color: var(--danger); }

/* A barra de acao. Gruda no topo da prateleira porque a selecao acontece rolando: sem
   isso, marcar a trigesima carta significa rolar de volta ate o botao. */
.burn-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.18s var(--ease-smooth), background 0.18s var(--ease-smooth);
}
.burn-bar.is-armed {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 12%, transparent), var(--surface));
}
.burn-count { margin-right: auto; font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); }
.burn-count b { color: var(--danger); font-family: var(--font-display); font-size: 14px; }

/* Base dos botoes desta aba. cards.css nao tinha uma — .pack-buy e .card-sell sao cada
   um o seu proprio estilo completo — entao a barra de burn traz a sua, e so a sua. */
.cards-btn {
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, filter 0.15s;
}
.cards-btn:disabled { cursor: not-allowed; }
.cards-btn.is-ghost:not(:disabled):hover { color: var(--text); border-color: var(--text-dim); }

.cards-btn.is-burn {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.cards-btn.is-burn:disabled { opacity: 0.4; }
.cards-btn.is-burn:not(:disabled):hover { filter: brightness(1.12); }
.cards-btn.is-wide { width: 100%; }

/* --- o tile selecionavel --- */

.burn-tile { position: relative; cursor: pointer; }
.burn-tile.is-picked {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 35%, transparent);
}
.burn-tick {
  position: absolute;
  top: 7px; left: 7px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: rgba(6,6,9,0.8);
  color: transparent;
  font-size: 13px;
  font-weight: 700;
}
.burn-tick.is-on { border-color: var(--danger); background: var(--danger); color: #fff; }

/* --- O FOGO ---
   A carta encolhe, escurece de baixo para cima e some, enquanto cinco linguas de chama
   sobem do rodape. Dura o mesmo que BURN_FX_MS em cards.js; se um dos dois mudar, a carta
   some antes do fogo ou o buraco fica parado esperando.

   `pointer-events: none` durante a queima porque o elemento ja nao existe no servidor —
   continuar clicavel seria oferecer uma acao sobre algo que ja virou cinza. */

.burn-flames { display: none; }

.burn-tile.is-burning {
  pointer-events: none;
  animation: burn-consume 0.9s var(--ease-smooth) forwards;
}
/* A frente de brasa varrendo a carta de baixo para cima. Um gradiente animado por
   background-position em vez de um elemento se movendo: e uma camada so, e nao obriga o
   navegador a refazer o layout da prateleira trinta vezes. */
.burn-tile.is-burning::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgba(10,6,4,0.96) 0%,
    rgba(199,68,54,0.9) 12%,
    rgba(233,161,59,0.75) 20%,
    transparent 34%);
  background-size: 100% 300%;
  animation: burn-sweep 0.9s var(--ease-smooth) forwards;
}
.burn-tile.is-burning .burn-flames {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  z-index: 5;
  pointer-events: none;
}
.burn-tile.is-burning .burn-flames i {
  position: absolute;
  bottom: 0;
  width: 26%;
  height: 38px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 85%,
    #ffd76a 0%, var(--accent) 34%, var(--danger) 68%, transparent 78%);
  filter: blur(0.4px);
  opacity: 0;
  animation: burn-flicker 0.62s var(--ease-smooth) infinite;
}
/* Cinco linguas fora de fase e de tamanhos diferentes. Em fase, elas leem como uma barra
   pulsando; defasadas, leem como fogo. */
.burn-tile.is-burning .burn-flames i:nth-child(1) { left: -2%; animation-delay: 0s;    height: 34px; }
.burn-tile.is-burning .burn-flames i:nth-child(2) { left: 18%; animation-delay: 0.09s; height: 52px; }
.burn-tile.is-burning .burn-flames i:nth-child(3) { left: 38%; animation-delay: 0.04s; height: 42px; }
.burn-tile.is-burning .burn-flames i:nth-child(4) { left: 58%; animation-delay: 0.13s; height: 56px; }
.burn-tile.is-burning .burn-flames i:nth-child(5) { left: 78%; animation-delay: 0.06s; height: 38px; }

@keyframes burn-sweep {
  from { background-position: 0 100%; }
  to   { background-position: 0 0%; }
}
@keyframes burn-flicker {
  0%   { opacity: 0;    transform: translateY(6px)  scaleY(0.7); }
  40%  { opacity: 0.95; transform: translateY(-4px) scaleY(1.1); }
  100% { opacity: 0;    transform: translateY(-26px) scaleY(0.45); }
}
@keyframes burn-consume {
  0%   { opacity: 1; transform: none; filter: none; }
  55%  { opacity: 1; transform: scale(0.97) rotate(-0.6deg);
         filter: brightness(1.15);
         box-shadow: 0 6px 26px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { opacity: 0; transform: scale(0.9) translateY(10px); filter: brightness(0.4) saturate(0.4); }
}

/* Fogo e uma animacao decorativa, e quem pediu para o sistema parar de se mexer nao deve
   ter que assistir. O RESULTADO continua igual: a carta some do mesmo jeito, so que de
   uma vez. */
@media (prefers-reduced-motion: reduce) {
  .burn-tile.is-burning,
  .burn-tile.is-burning::after,
  .burn-tile.is-burning .burn-flames i { animation: none; }
  .burn-tile.is-burning { opacity: 0; }
}

/* A lista do dialogo reusa .bulk-list do mercado, que tem padding horizontal zero — a
   raridade encostava na borda com folga zero. Escopado ao dialogo de burn de proposito:
   .bulk-list tambem desenha o "remover varios anuncios" do mercado, e mexer na classe
   mudaria uma tela que ninguem pediu para mudar. */
.burn-dialog .bulk-list li { padding-right: 4px; }
.burn-dialog .bulk-list em { margin-left: 4px; }

@media (max-width: 700px) {
  .burn-bar { gap: 8px; padding: 9px 10px; }
  .burn-bar .cards-btn { min-height: 40px; }
  .burn-count { font-size: 10px; }
  .burn-tick { width: 26px; height: 26px; }
}