/* riftvault — o mesmo CSS no modo edição e no modo publicado.
   Pensado primeiro para telemóvel: os +/- têm de dar para carregar com o
   polegar enquanto se está a mexer nas cartas com a outra mão. */

:root {
  --bg: #0f1016;
  --panel: #181a24;
  --panel-2: #1f2230;
  --line: #2b2f40;
  --text: #e8e9f0;
  --dim: #9aa0b5;
  --accent: #7c8cff;      /* playset jogável */
  --accent-2: #f0b429;    /* master set */
  --ok: #3ecf8e;
  --bad: #ff6b6b;
  /* 104px dá 3 colunas num telemóvel de 375px. Menos do que isto e os +/-
     ficam pequenos de mais para o polegar. */
  --tile: 104px;

  /* A paleta do «layout H» (André, 2026-09-21), a da maqueta
     `layout-H-cartoes.html`. Por agora só o painel do topo da Coleção a usa;
     fica aqui em cima, e não espalhada pelas regras, para se alargar às
     outras abas quando ele quiser — muda-se num sítio. */
  --h-bg: #0E1526;          /* fundo da página */
  --h-card: #16203A;        /* cartão e quadro */
  --h-line: #233150;        /* borda */
  --h-track: #1E2A45;       /* o fundo das barras */
  --h-text: #EAF0FB;
  --h-dim: #9FB0CC;         /* texto secundário */
  --h-dim-2: #8093B0;       /* rótulos em maiúsculas, denominadores */
  --h-on: #4A93E0;          /* botão escolhido */
  --h-on-bg: rgba(74, 147, 224, .16);
  /* A rampa dos três níveis: 1 de cada (escura), 2 de cada, playset (clara). */
  --lvl-1: #3D6FA8;
  --lvl-2: #4A93E0;
  --lvl-3: #7FC8FF;
  /* As bolinhas das categorias, por raridade e por domínio. */
  --rar-common: #C3CEDF;
  --rar-uncommon: #7FD1A8;
  --rar-rare: #E06AA8;
  --rar-epic: #F59A3C;
  --rar-showcase: #C9A0FF;
  --dom-fury: #F05A62;
  --dom-body: #F59A3C;
  --dom-calm: #49C47E;
  --dom-mind: #58A6F5;
  --dom-chaos: #B57CF0;
  --dom-order: #E8C13E;
  --dom-none: #9AA8C0;
  --dom-multi: #D4A574;
}

* { box-sizing: border-box; }

/* O atributo `hidden` vale só `display: none` por omissão, e qualquer regra
   com `display: flex`/`grid` ganha-lhe. Sem isto, os separadores das edições
   ficavam à vista na secção dos decks. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- topo */

header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15, 16, 22, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: env(safe-area-inset-top) 0 0;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; }
.brand h1 { margin: 0; font-size: 16px; letter-spacing: .5px; font-weight: 700; }
.brand .tabs { padding: 0; margin-left: auto; }

.badge-mode {
  font-size: 11px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px;
}

.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  background: transparent; color: var(--dim);
  border: 1px solid transparent; border-radius: 99px;
  padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tab.is-on { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.tab:disabled { opacity: .35; cursor: default; }

.tabs-set { padding-top: 0; }
.tabs-set .tab { font-size: 14px; }
.tabs-set .tab small { display: block; font-weight: 400; font-size: 10px; opacity: .7; }

/* ------------------------------------------------------- barras e stats */

main { padding: 12px; max-width: 1500px; margin: 0 auto; }

.progress-wrap {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; margin-bottom: 10px;
}

.bar-label { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; margin-bottom: 5px; }
.bar-label b { font-variant-numeric: tabular-nums; }

.bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.bar-alt i { background: var(--accent-2); }
.bar-val i { background: var(--ok); }
.bar-block small { display: block; margin-top: 5px; font-size: 10px; color: var(--dim); }

.rarities { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.rarity {
  font-size: 11px; color: var(--dim);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px 9px;
}
.rarity b { color: var(--text); font-variant-numeric: tabular-nums; }
.rarity.is-done b { color: var(--ok); }

/* ------------------------------------------------------------ controlos */

.controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }

.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg-btn {
  background: transparent; color: var(--dim); border: 0;
  padding: 8px 11px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.seg-btn.is-on { background: var(--panel-2); color: var(--text); font-weight: 600; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips[hidden] { display: none; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; font-size: 12px; color: var(--dim);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 10px; cursor: pointer;
}
.chip input:checked + span { color: var(--text); border-color: var(--accent); }

#search {
  flex: 1 1 180px; min-width: 140px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; font: inherit; font-size: 13px;
}

.count-line { margin: 0 0 10px; font-size: 12px; color: var(--dim); }
.empty { color: var(--dim); text-align: center; padding: 40px 0; }

/* Modo publicado: dizer porque é que não há botões, em vez de deixar a
   pessoa a carregar no vazio. */
.banner {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 12px;
}
.banner b { font-size: 13px; }
.banner span { font-size: 12px; color: var(--dim); line-height: 1.5; }
.banner code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
  font-size: 11px; color: var(--text);
}

/* ---------------------------------------------------------------- grelha */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 10px;
  align-items: start;
}

/* Um grupo = uma carta impressa e as variantes que lhe pertencem. Quando tem
   mais do que uma impressão ganha moldura e faixa lateral partilhadas, para
   se ver de relance que as artes alternativas são daquela carta. */
.group { grid-column: span 1; }

.group.multi {
  grid-column: span var(--span, 2);
  display: grid;
  grid-template-columns: repeat(var(--span, 2), 1fr);
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  position: relative;
}
.group.multi::before {
  content: "";
  position: absolute; left: 5px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: var(--accent); opacity: .55;
}

/* Cabeçalho de secção quando se ordena por tipo, raridade ou custo.
   Ocupa a linha inteira da grelha. */
.section-head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 8px;
  margin: 10px 0 0; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; text-transform: capitalize;
}
.section-head:first-child { margin-top: 0; }
.section-head span {
  font-size: 11px; font-weight: 400; color: var(--dim); text-transform: none;
}

/* Os blocos que ficam DEPOIS da sequência do master set (André, 2026-09-08).
   Separador grosso, para se ver de longe que a sequência acabou e o que vem a
   seguir é outra coisa.

   `.cauda` é a cauda da COLEÇÃO — as runas especiais e as artes alternativas,
   1 de cada, que contam para a percentagem. `.fora` é o que não conta (os
   tokens): mesmo separador, mas apagado, porque é informação e não meta. */
.section-head.cauda,
.section-head.fora {
  margin-top: 26px; padding-top: 14px;
  border-top: 2px solid var(--line);
  text-transform: none;
}
.section-head.cauda { border-top-color: var(--accent-2); }
.section-head.fora { color: var(--dim); }
.section-head.fora b { color: var(--text); }

/* Os chips da percentagem por bloco, debaixo da barra do master set. */
.rarities.blocos { margin-top: 6px; }
.rarity.is-out { opacity: .55; }

/* Em «Todas» (2026-09-21) a grelha muda de edição dentro de cada bloco: um
   cabeçalho fino, sem o separador grosso dos blocos. */
.section-head.edicao {
  font-size: 12px; color: var(--dim); text-transform: none;
  margin-top: 14px; padding-bottom: 3px; border-bottom-style: dashed;
}

/* ---------------------------------------- o painel do topo (layout H)

   (André, 2026-09-21) Três cartões — 1 de cada, 2 de cada, playset — e por
   baixo dois quadros, Raridade e Domínio. Só a paleta `--h-*` de cima; os
   tamanhos e os espaços são os da maqueta. No telemóvel (< 700px) os três
   cartões empilham e os quadros passam a um por linha — é onde ele mais vê
   isto. Sem tipo de letra externo de propósito: o site não pede nada à rede
   além das imagens, e um pedido de fonte a falhar deixava o número em
   `serif` por um segundo. */
.painel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.painel:empty { display: none; }
.painel-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.painel-blocos .chip-b {
  background: transparent; color: var(--h-dim); border-color: var(--h-line);
  border-radius: 9px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 12px;
}
.painel-blocos .chip-b.is-on { color: var(--h-text); border-color: var(--h-on); background: var(--h-on-bg); }
.painel-nota { font-size: 11px; color: var(--h-dim-2); margin-left: auto; }

.painel-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cartao {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.cartao-rot {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--h-dim-2);
}
.cartao-num {
  font-size: 40px; font-weight: 700; line-height: 1; color: var(--h-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cartao-num span { font-size: 22px; font-weight: 500; color: var(--h-dim-2); }
.cartao-bar { height: 8px; border-radius: 5px; background: var(--h-track); overflow: hidden; }
.cartao-bar i, .mini i { display: block; height: 100%; border-radius: 5px; transition: width .25s; }
.cartao-falta { font-size: 13px; color: var(--h-dim); font-variant-numeric: tabular-nums; }
.cartao-falta b { color: var(--h-text); font-weight: 600; }
/* A rampa: escura, média, clara — a mesma nos cartões e nas mini-barras. */
.painel i.n1 { background: var(--lvl-1); }
.painel i.n2 { background: var(--lvl-2); }
.painel i.n3 { background: var(--lvl-3); }

.painel-quadros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.quadro {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.quadro-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quadro-tit { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--h-dim-2); }
.quadro-leg { font-size: 11px; color: var(--h-dim-2); letter-spacing: .06em; }
.quadro-linhas { display: flex; flex-direction: column; gap: 10px; }
.quadro-linhas .empty { padding: 6px 0; font-size: 12px; }
.ql { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--h-dim-2); flex: 0 0 auto; }
.dot.rar-common { background: var(--rar-common); }
.dot.rar-uncommon { background: var(--rar-uncommon); }
.dot.rar-rare { background: var(--rar-rare); }
.dot.rar-epic { background: var(--rar-epic); }
.dot.rar-showcase { background: var(--rar-showcase); }
.dot.dom-fury { background: var(--dom-fury); }
.dot.dom-body { background: var(--dom-body); }
.dot.dom-calm { background: var(--dom-calm); }
.dot.dom-mind { background: var(--dom-mind); }
.dot.dom-chaos { background: var(--dom-chaos); }
.dot.dom-order { background: var(--dom-order); }
.dot.dom-none { background: var(--dom-none); }
.dot.dom-multi { background: var(--dom-multi); }
.ql-nome {
  flex: 1 1 auto; font-size: 14px; color: var(--h-text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini {
  width: 54px; height: 5px; border-radius: 3px; background: var(--h-track);
  overflow: hidden; flex: 0 0 auto;
}
.ql-num {
  width: 72px; text-align: right; font-size: 14px; font-weight: 600; color: var(--h-text);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.ql-num span { color: var(--h-dim-2); font-weight: 400; }

@media (max-width: 699px) {
  .painel-cartoes, .painel-quadros { grid-template-columns: 1fr; gap: 10px; }
  .cartao { padding: 14px 16px; gap: 9px; }
  .cartao-num { font-size: 34px; }
  .painel-nota { margin-left: 0; flex-basis: 100%; }
  /* As três mini-barras e o «Multi-domínio» cabem numa linha de 375px. */
  .ql { gap: 8px; }
  .ql-nome { font-size: 13px; }
  .mini { width: 34px; }
  .ql-num { width: 52px; font-size: 13px; }
}

/* ---- Foil e não-foil (André, 2026-09-22) -------------------------------
   A tira por baixo do painel (o resumo da edição) e a linha de cada tile do
   âmbito. O foil tem uma cor própria (--foil), a meio caminho entre o dourado
   e o roxo, para se distinguir de relance do resto da página. */
:root { --foil: #d9a441; --foil-bg: rgba(217, 164, 65, .12); }

.foil-resumo {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px;
}
.foil-resumo[hidden], .foil-resumo:empty { display: none; }
.fo-head {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--h-dim);
}
.fo-head small {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--h-dim-2);
}
.fo-linhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fo-bloco {
  border: 1px solid var(--h-line); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.fo-bloco:first-child { border-color: var(--h-on); }
.fo-rot {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-dim);
}
.fo-num { font-size: 15px; color: var(--h-text); font-variant-numeric: tabular-nums; }
.fo-sub { font-size: 11px; color: var(--h-dim-2); font-variant-numeric: tabular-nums; }
b.fo, .fo-num b.fo { color: var(--foil); }

/* A linha no tile: «2 normais · 1 foil», com o contador pequeno à direita. */
.foil-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px; color: var(--muted); background: var(--foil-bg);
  border-radius: 6px; padding: 2px 6px; font-variant-numeric: tabular-nums;
}
.foil-txt b { color: var(--text); font-weight: 600; }
.steppers.foil { gap: 4px; align-items: center; }
.steppers.foil b { font-size: 11px; color: var(--foil); min-width: 10px; text-align: center; }
.steppers.foil .step {
  min-width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 1;
  color: var(--foil); border-color: rgba(217, 164, 65, .45);
}

@media (max-width: 699px) {
  .fo-linhas { grid-template-columns: 1fr; gap: 8px; }
}

.tile { position: relative; display: flex; flex-direction: column; gap: 5px; }

.art {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7;
  border-radius: 8px; overflow: hidden; background: var(--panel-2);
  border: 1px solid var(--line);
}
.art.landscape { aspect-ratio: 7 / 5; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s; }

/* Sem cópias: dessaturada e escurecida. */
.tile.none .art img { filter: grayscale(1) brightness(.42); }
.tile.done .art { border-color: rgba(62, 207, 142, .55); }

.label {
  position: absolute; left: 4px; top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  background: rgba(0, 0, 0, .72); color: #fff;
  border-radius: 5px; padding: 2px 6px;
}
.label.alt_art { background: rgba(124, 140, 255, .92); }
.label.signature { background: rgba(240, 180, 41, .92); color: #24160a; }
.label.token, .label.rune_promo, .label.special { background: rgba(255, 255, 255, .22); }

.badge {
  position: absolute; right: 4px; bottom: 4px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .78); color: #fff;
  border-radius: 6px; padding: 2px 7px;
}
.tile.partial .badge { background: rgba(240, 180, 41, .95); color: #24160a; }
.tile.done .badge { background: rgba(62, 207, 142, .18); color: var(--ok); font-weight: 600; }

/* Preço por cima da carta, só a partir de price_badge_min (1 € por omissão).
   Canto superior direito: é o único que não colide com a etiqueta de variante,
   o número de coleção nem o contador. */
.price {
  position: absolute; right: 4px; top: 4px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(62, 207, 142, .92); color: #04231a;
  border-radius: 5px; padding: 2px 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
/* Nas cartas que não tenho a imagem fica escurecida — o preço não deve
   desaparecer com ela. */
.tile.none .price { background: rgba(62, 207, 142, .82); }

.cn {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; color: #cfd3e4;
  background: rgba(0, 0, 0, .6); border-radius: 5px; padding: 1px 5px;
}

.tname {
  font-size: 10px; line-height: 1.25; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Os +/- estão SEMPRE visíveis e são grandes de propósito. */
.steppers { display: flex; gap: 6px; }
.step {
  flex: 1; min-height: 40px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.step:active { background: var(--accent); color: #0f1016; transform: scale(.96); }
.step.minus:disabled { opacity: .3; cursor: default; }

/* Cópias que saíram do binder para um deck. Âmbar, a mesma cor que a vista
   de decks usa para "está noutro deck". */
.indeck {
  font-size: 10px; text-align: center; color: var(--accent-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Que decks usam esta carta (2026-09-11) — «Azir 3 · Kennen 2 (faltam 2)». Uma
   linha por carta, no primeiro tile do grupo. Fica a vermelho quando algum
   deck não recebe o que pede: é o que ele tem de comprar. */
.emdecks {
  font-size: 10px; text-align: center; color: var(--accent-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emdecks.falta { color: var(--bad); }

.playset {
  font-size: 10px; color: var(--dim); text-align: center;
  font-variant-numeric: tabular-nums;
}
.playset.is-done { color: var(--ok); }

.tile.focus .art { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile.flash .badge { animation: flash .4s; }
@keyframes flash { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Modo publicado: sem controlos de edição. */
body.readonly .steppers { display: none; }

/* ------------------------------------------------------------------ decks */

.deck-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; margin-bottom: 14px;
}
.deck-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.deck-title b { font-size: 16px; }
.prio {
  font-size: 11px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px;
}

.deck-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 13px; }
.deck-meta i { color: var(--dim); font-style: normal; font-size: 11px; display: block; }

.chips-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-l {
  font-size: 11px; border-radius: 99px; padding: 3px 9px;
  border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.chip-l.ok { color: var(--ok); border-color: rgba(62, 207, 142, .4); }
.chip-l.bad { color: var(--bad); border-color: rgba(255, 107, 107, .45); }
/* Lugares tapados por outra versão (2026-09-17): nem tenho-a-base nem falta. */
.chip-l.outra { color: var(--accent-2); border-color: rgba(240, 180, 41, .45); }
/* As runas não se contam (2026-09-17, à noite): nem ok, nem falta — à mão. */
.chip-l.neutra { color: var(--dim); }
.bar-label .dim { font-style: normal; color: var(--dim); font-weight: normal; }
.dtile.nao-contada .need { background: rgba(255, 255, 255, .18); color: var(--text); }

/* Quantas cópias faltam por edição — cada carta conta na edição onde sai mais
   barata, que é onde ele a vai comprar. */
.falta-set { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.falta-lbl { font-size: 11px; color: var(--dim); }
.fs {
  font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px 9px; white-space: nowrap;
}
.fs b { color: var(--bad); font-weight: 700; }

.nota { display: block; margin-top: 8px; font-size: 11px; color: var(--dim); }
.nota.bad { color: var(--bad); }

.deck-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.btn:active { background: var(--accent); color: #0f1016; }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
body.readonly .deck-actions .btn[data-act="principal"],
body.readonly .deck-actions .btn[data-act="subir"],
body.readonly .deck-actions .btn[data-act="descer"],
body.readonly .deck-actions .btn[data-loc] { display: none; }

/* ONDE estão as cartas do deck (André, 2026-09-10): no deck, no binder
   Decks/Venda, na Coleção (não conta) ou por comprar. */
.locais-deck {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}

/* A proposta de marcação. Grava-se SÓ o que ele marcar — o «marcar tudo» liga
   as checkboxes e mais nada. */
.propor { margin-top: 12px; }
.propor h3 { font-size: 13px; margin: 0 0 8px; }
.propor h3 span { display: block; font-weight: 400; font-size: 11px; color: var(--dim); }
.propor-lista {
  max-height: 340px; overflow: auto; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2);
}
.propor-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer;
}
.propor-item:last-child { border-bottom: 0; }
.propor-item input { width: 18px; height: 18px; flex: 0 0 auto; }
.propor-item img { width: 26px; border-radius: 3px; flex: 0 0 auto; }
.propor-item .pn { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.propor-item .pc { color: var(--dim); font-variant-numeric: tabular-nums; }
.propor-item .pl { color: var(--dim); font-size: 10px; }
.propor-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* A grelha dos decks fala a mesma língua da Coleção: mesmo tamanho de tile,
   mesma moldura. O que muda é o que o badge conta — aqui é o que o deck pede
   contra o que lhe está alocado. */
.deck-grid { margin-bottom: 16px; }

/* Separador entre "o deck" e "o que falta comprar". */
.falta-head {
  margin: 26px 0 4px; padding-top: 16px;
  border-top: 2px solid var(--line);
  font-size: 15px; font-weight: 700;
}
.section-head.sub { font-size: 13px; }
/* Nesta secção o badge do preço faz sentido no canto; o contador não. */
.dtile .price {
  position: absolute; right: 4px; top: 4px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 107, 107, .95); color: #2a0d0d;
  border-radius: 5px; padding: 2px 6px;
}

.dtile { position: relative; display: flex; flex-direction: column; gap: 4px; }
.dtile .art { border-width: 2px; }
/* Faltam cópias: dessaturada, como na Coleção. */
.dtile.gone .art img, .dtile.shared .art img { filter: grayscale(1) brightness(.42); }
.dtile.ok .art { border-color: rgba(62, 207, 142, .55); }
.dtile.gone .art { border-color: rgba(255, 107, 107, .6); }
.dtile.shared .art { border-color: rgba(240, 180, 41, .7); }

/* Quantas o deck pede. */
.need {
  position: absolute; left: 4px; top: 4px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .78); color: #fff;
  border-radius: 5px; padding: 2px 6px;
}
.dtile .badge { background: rgba(62, 207, 142, .2); color: var(--ok); }
.dtile.gone .badge { background: rgba(255, 107, 107, .95); color: #2a0d0d; }
.dtile.shared .badge { background: rgba(240, 180, 41, .95); color: #24160a; }

/* Edição + número + preço. Monoespaçado e alinhado para se ler de relance
   quando se anda a procurar a carta. */
.codigo {
  font-size: 11px; color: var(--text); opacity: .8;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.onde { font-size: 10px; color: var(--dim); line-height: 1.35; }
.onde.falta { color: var(--bad); }
.onde.shared { color: var(--accent-2); }
.onde.tenho { color: var(--dim); opacity: .8; }
/* As versões que servem uma linha do deck, uma por sub-linha (2026-09-17):
   a base a cinzento, a que tapou um buraco («outra») em destaque. */
.onde.versoes span { display: block; padding-left: 6px; border-left: 2px solid var(--line); }
.onde.versoes span.outra { color: var(--accent-2); border-left-color: var(--accent-2); }


/* ------------------------------------------------------------------ faltas */

/* Sub-abas dos decks: podem ser muitas, por isso quebram de linha. */
.seg-wrap { flex-wrap: wrap; margin-bottom: 12px; }
.seg-wrap .seg-btn { border-right: 1px solid var(--line); }
.seg-wrap .seg-btn:last-child { border-right: 0; }
.seg-wrap .seg-btn b { color: var(--bad); margin-left: 4px; font-variant-numeric: tabular-nums; }
.seg-wrap .seg-btn.is-on b { color: var(--text); }

.resumo { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
          padding: 10px 12px; margin-bottom: 10px; }
.resumo b { font-size: 15px; }
.resumo span { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }

.wl-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aviso-foil {
  border-left: 3px solid var(--accent-2); padding-left: 10px;
  line-height: 1.6; font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}
.aviso-foil b { font-family: inherit; color: var(--accent-2); display: block; margin-bottom: 4px; }
.aviso-foil i { font-style: normal; color: var(--text); }

/* As linhas de foil podem ser centenas (307 na wantlist de tudo). Ficam
   dobradas num <details> para a página não acabar num muro de texto. */
.foil-lista { margin-top: 6px; }
.foil-lista > summary {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--accent); cursor: pointer; margin-bottom: 4px;
}

.wl-zona { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; align-items: flex-start; }
.wl-txt {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; line-height: 1.6; resize: vertical;
}

/* As wantlists do fim da Coleção (André, 2026-09-08). Separador grosso como os
   blocos da grelha: o que vem a seguir já não é a coleção, é o que falta dela. */
.wl-bloco { margin-top: 30px; }
.wl-head {
  padding-top: 14px; border-top: 2px solid var(--accent-2);
  text-transform: none;
}
.wl-bloco .note { font-size: 12px; color: var(--dim); line-height: 1.6; margin: 8px 0 0; }
.wl-stale { font-size: 12px; color: var(--accent-2); }
.wl-stale .btn { margin-left: 8px; }

/* O degrau da lista: até 1 de cada, até 2, o playset inteiro. Os dois blocos
   partilham a escolha, por isso ficam sempre com o mesmo chip aceso. */
.wl-niveis { margin-top: 10px; }

/* A linha do cabeçalho da edição que manda para o bloco lá em baixo. */
.falta-linha {
  grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--dim);
}
.falta-linha b { color: var(--text); font-variant-numeric: tabular-nums; }
.falta-linha a { color: var(--accent); }

.total-linha { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.total-linha b { color: var(--text); }

.decks-n {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700;
  background: rgba(124, 140, 255, .92); color: #0f1016;
  border-radius: 5px; padding: 2px 6px;
}
.dtile .cn { right: 4px; bottom: 4px; left: auto; }

/* Impressão que a RiftScribe não tem — veio do CardTrader e não conta para
   métrica nenhuma. */
.so-mercado {
  position: absolute; left: 4px; top: 22px;
  font-size: 9px; font-weight: 700;
  background: rgba(124, 140, 255, .92); color: #0f1016;
  border-radius: 5px; padding: 1px 5px;
}

.ja-tens {
  position: absolute; left: 4px; bottom: 4px;
  font-size: 10px; font-weight: 700;
  background: rgba(62, 207, 142, .92); color: #04231a;
  border-radius: 5px; padding: 2px 6px;
}

/* Encomendas: nem verde (tenho) nem vermelho (falta) — a chegar. */
.dtile.a-caminho .art { border-color: rgba(124, 140, 255, .55); border-style: dashed; }
.dtile.a-caminho .art img { filter: none; opacity: .92; }
.btn.chegou {
  width: 100%; padding: 7px 8px; font-size: 12px;
  border-color: rgba(124, 140, 255, .5); color: var(--accent);
}
.btn.chegou:disabled { opacity: .55; cursor: default; }
body.readonly .btn.chegou { display: none; }

.price.pago { background: rgba(124, 140, 255, .92); color: #0f1016; }

/* O «a caminho» leva o azul das encomendas em todo o lado, para não se
   confundir com falta (vermelho) nem com tenho (verde). */
.onde.caminho, .onde .caminho { color: #9aa8ff; }
.chip-l.caminho { color: #9aa8ff; border-color: rgba(124, 140, 255, .5); }
.dtile.a-caminho .badge { background: rgba(124, 140, 255, .25); color: #9aa8ff; }

/* --------------------------------------------------------- «Encomendas»

   O separador (2026-09-17): a grelha da Coleção, de Rara para cima. O tile é o
   `.tile` da Coleção — mesma arte, mesma etiqueta, mesmo crachá `q/alvo` — e o
   que muda são os botões: o `+`/`−` é do que ele COMPROU E AINDA NÃO CHEGOU
   e o «Chegou» dá entrada. Os `+`/`−` levam o azul das encomendas para nunca
   se confundirem com os da Coleção, que somam à caixa. */
.tile.enc.a-caminho .art { border-color: rgba(124, 140, 255, .7); border-style: dashed; }
.tile.enc.a-caminho.none .art img { filter: grayscale(.6) brightness(.6); }
.tile.enc .steppers.enc .step.plus { color: #9aa8ff; border-color: rgba(124, 140, 255, .45); }
.tile.enc .steppers.enc .step.plus:active { background: #9aa8ff; color: #0f1016; }
.tile.enc .steppers.enc .step:disabled { opacity: .3; cursor: default; }
.tile.enc .onde { text-align: center; }
.tile.enc .onde.tenho { opacity: .5; }
.tile.enc .btn.chegou { width: 100%; }
/* «+2» a caminho, ao lado do crachá da Coleção — em azul, nunca no crachá:
   encomendar não é ter. */
.enc-n {
  position: absolute; right: 4px; bottom: 28px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(124, 140, 255, .92); color: #0f1016;
  border-radius: 6px; padding: 2px 6px;
}
/* O que vem a caminho desta edição fora da grelha (abaixo da raridade mínima
   ou fora do catálogo): uma linha por impressão, com o «Chegou» ao lado. */
.enc-fora { margin-top: 10px; font-size: 12px; color: var(--dim); line-height: 1.7; }
.enc-fora b { color: var(--text); display: block; margin-bottom: 2px; }
.enc-fora-item {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 4px 0;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.enc-fora-item i { font-style: normal; color: var(--dim); font-size: 11px; }
.btn.chegou.mini { width: auto; padding: 3px 8px; font-size: 11px; }
/* Impressões que não são dele: sobem na mesma, mas sem alarme de cor. */
.dtile.neutro .art { border-color: var(--line); }
.dtile.neutro .art img { filter: none; }
.tname .var { font-style: normal; opacity: .65; }

/* --------------------------------------------- o bloco «Runas — 12 de cada»

   (2026-09-19) O contador DELE. Fecha a grelha da Coleção com o separador
   apagado dos blocos que não contam (`.fora`), a tracejado para se ver que
   não é um bloco da coleção; o crachá é o número que ele põe com os `+`/`−`
   (só no modo edição — `body.readonly .steppers` já os esconde) e a linha
   de baixo, discreta, é a referência «na coleção: N». */
.runas-vista:empty { display: none; }
.runas-vista { margin-top: 4px; }
/* O título não parte ao meio por causa da nota comprida; a nota é que dobra. */
.runas-vista .section-head.vista { border-top-style: dashed; white-space: nowrap; }
.runas-vista .section-head.vista span { white-space: normal; }
.runas-vista .section-head.vista .ref { font-weight: 400; opacity: .75; }
.dtile.vista .need { background: rgba(0, 0, 0, .78); color: #fff; }
.dtile.vista.ok .need { background: rgba(62, 207, 142, .92); color: #072616; }
.dtile.vista .onde.tenho.ref { font-size: 10px; opacity: .6; text-align: center; }
.dtile.vista .onde.tenho.ref b { color: var(--dim); font-weight: 600; }
/* Os `+`/`−` do contador: os mesmos botões da grelha, um pouco mais baixos
   porque o tile é mais estreito. */
.dtile.vista .steppers.runa .step { min-height: 34px; font-size: 16px; }

/* ------------------------------------- as cópias PRÓPRIAS de cada deck

   (2026-09-21) «colocas em cada deck o + e - para eu dizer se afinal tenho ou
   nao». Os `+`/`−` são os da grelha (o `body.readonly .steppers` esconde-os no
   site publicado), com o número de próprias da carta entre os dois, e
   escrevem no local `proprio:<slug>` — a Coleção não mexe. */
.dtile .steppers.proprias { margin: 4px 0 2px; align-items: center; justify-content: center; }
.dtile .steppers.proprias .step { min-height: 34px; font-size: 16px; }
.dtile .steppers.proprias .step:disabled { opacity: .3; cursor: default; }
.dtile .steppers.proprias .prop-n { min-width: 22px; text-align: center; font-weight: 700;
  font-size: 14px; color: #c9a9ff; }
.chip-l.propria { color: #c9a9ff; border-color: rgba(201, 169, 255, .5); }
.dtile .onde.tenho i { font-style: italic; opacity: .7; }
.emdecks i.dim { font-style: italic; opacity: .7; }

/* --------------------------------------------------------------- «Faltas»

   Por edição, quatro blocos (2026-09-15, fim da tarde; o quarto a
   2026-09-19). Os tiles são os `dtile` dos decks — a carta com imagem, o
   crachá a dizer quantas faltam. Cada bloco tem uma cor própria no
   cabeçalho: lê-se de longe em que bloco se está. */
.fe-set { margin-top: 22px; }
.fe-set span b { color: var(--text); }
.fe-bloco {
  --cor: var(--accent);
  margin-top: 14px; text-transform: none;
  display: flex; align-items: baseline; gap: 8px;
}
.fe-bloco::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor); flex: 0 0 auto; align-self: center;
}
.fe-bloco.master { --cor: var(--ok); }
.fe-bloco.alt_art { --cor: var(--accent-2); }
.fe-bloco.overnumbered { --cor: #c07cff; }
.fe-bloco.special { --cor: #ff9f6b; }
.fe-bloco small { font-size: 11px; color: var(--dim); font-weight: 400; }
.fe-bloco span { margin-left: auto; text-align: right; }
.fe-bloco span b { color: var(--text); }
/* Os blocos que se vêem mas não se compram: cabeçalho apagado, os tiles não. */
.fe-bloco.fe-ver { color: var(--dim); }
.fe-bloco.fe-ver small { color: var(--accent-2); }
.fe-grid { margin-bottom: 10px; }
.fe-vazio { padding: 8px 0 12px; font-size: 12px; }
.fe-set i.caminho, .fe-bloco i.caminho { font-style: normal; color: #9aa8ff; }
/* A wantlist de cada bloco (2026-09-19), por baixo dos tiles dele: um
   cabeçalho mais leve do que o das wantlists da Coleção — aqui há uma por
   bloco e por edição, e um separador grosso em cada uma partia a página. */
.fe-wl { margin: 6px 0 18px; }
.fe-wl-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--dim); text-transform: none;
  border-top: 1px dashed var(--line); padding-top: 10px; margin: 0;
}
.fe-wl-head span { margin-left: auto; font-weight: 400; }
.fe-wl .wl-zona { margin-top: 8px; }
@media (max-width: 560px) {
  .fe-bloco { flex-wrap: wrap; }
  .fe-bloco span { margin-left: 0; text-align: left; flex-basis: 100%; }
  .fe-wl-head span { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------------- «A mais»

   (2026-09-17) A mesma linguagem das Faltas: os `dtile` com a carta, o
   crachá a dizer quantas a mais ou quantas libertadas, um ponto de cor por
   bloco. Uma carta a mais não está em falta nem a caminho — a arte fica a
   cores, com a moldura na cor do bloco. */
.fe-bloco.am-excedente { --cor: var(--accent); }
.fe-bloco.am-libertadas { --cor: #c07cff; }
.dtile.a-mais .art { border-color: rgba(124, 140, 255, .55); }
.dtile.a-mais .art img { filter: none; }
.dtile.a-mais .need { background: rgba(124, 140, 255, .92); color: #0f1016; }
.dtile.a-mais.libertada .art { border-color: rgba(192, 124, 255, .55); }
.dtile.a-mais.libertada .need { background: rgba(192, 124, 255, .92); color: #1a0a26; }
/* O que está escondido da Coleção (tokens, runas sem numeração) não tem alvo:
   a moldura apagada diz que é a mais por não ser coleção, não por passar um número. */
.dtile.a-mais.escondida .art { border-color: var(--line); border-style: dashed; }
.dtile.a-mais .onde i { font-style: normal; color: var(--dim); opacity: .8; }

/* Os três botões das listas do Cardmarket, lado a lado. */
.cm-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.ghost { background: transparent; }

/* Chips de escolha única (os níveis das wantlists): botões, não checkboxes. */
.chip-b {
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.chip-b b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip-b.is-on { color: var(--text); border-color: var(--accent); }

.aviso {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px; padding: 14px 16px; max-width: 62ch;
}
.aviso b { display: block; margin-bottom: 8px; }
.aviso p { margin: 0 0 8px; font-size: 13px; color: var(--dim); line-height: 1.5; }
.aviso p:last-child { margin-bottom: 0; }
.aviso code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
  font-size: 12px; color: var(--text);
}

/* Lista de encomendas: aqui uma tabela lê-se melhor do que uma grelha —
   confere-se contra a fatura, não se olha para as artes. */
.deck-list { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.deck-list td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.deck-list td.q { width: 38px; color: var(--dim); font-variant-numeric: tabular-nums; }
.deck-list td.h {
  width: 76px; text-align: right; color: var(--dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.deck-list tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- toasts */

.toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; flex-direction: column-reverse; gap: 8px;
  width: min(440px, calc(100vw - 24px));
}

.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.toast.err { border-color: var(--bad); color: #ffd8d8; }
.toast span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast button {
  background: transparent; color: var(--accent); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 11px; font: inherit; font-weight: 600; cursor: pointer;
}

.foot { text-align: center; color: var(--dim); font-size: 11px; padding: 24px 12px 40px; }

/* ------------------------------------------------------------- ecrãs maiores */

@media (min-width: 620px) { :root { --tile: 132px; } .seg-btn { font-size: 13px; padding: 9px 13px; } }
@media (min-width: 1000px) { :root { --tile: 158px; } .progress-wrap { grid-template-columns: 1fr 1fr 1fr; } .rarities { grid-column: auto; align-items: center; } }