/* tabletold — mercado entre jogadores e créditos/planos (Fase 105b). Tokens de app.css ("Luz de
   vela"): ouro para moedas, violeta arcano para créditos, brasa só para falta de saldo. */

/* ---------- mercado ---------- */
.mk-rules { display: flex; flex-direction: column; gap: 6px; border-color: var(--line); background: linear-gradient(180deg, var(--surface), var(--gold-soft)); }
.mk-seg { position: sticky; top: calc(var(--topbar-h, 56px) + 4px); z-index: 2; }
.mk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chip {
  flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font: 600 13px var(--f-ui); cursor: pointer;
}
.mk-chip.on { color: var(--on-gold); background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); border-color: transparent; box-shadow: 0 2px 10px var(--gold-glow); }
.mk-grid { align-items: start; }
.mk-listing { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-seller { padding-left: 4px; }
.mk-price { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.mk-price svg { width: 15px; height: 15px; }
.mk-buy { min-width: 92px; }
.loot-card:has(.mk-sell), .mk-sellgrid .loot-card { flex-wrap: wrap; }
.loot-card:has(.mk-sell) .loot-action, .mk-sellgrid .loot-action { flex: 1 1 100%; }
.mk-sellgrid .loot-action > .chip { width: fit-content; }
.mk-sell { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mk-sell-row { gap: 8px; }
.mk-price-input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.mk-confirm .loot-card { box-shadow: none; }
.mk-receipt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; padding: 14px;
  border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-soft); font-size: 15px;
}
.mk-receipt dt { color: var(--text-2); }
.mk-receipt dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-receipt .sum { padding-top: 8px; border-top: 1px dashed var(--line); color: var(--text); font-weight: 700; }
.mk-receipt dd.short { color: var(--ember); }

/* ---------- créditos e planos ---------- */
.pl-split { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.pl-split > div { padding: 10px 4px; border-radius: var(--r-s); background: var(--surface-2); display: flex; flex-direction: column; }
.pl-split strong { font: 700 22px/1.1 var(--f-titulo); }
.pl-split small { color: var(--text-2); font-size: 12px; }
.pl-split .hi { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); }
.pl-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.pl-pack {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-l);
  background: radial-gradient(circle at 50% 0%, var(--arcane-soft), var(--surface) 70%); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.pl-pack.pack-tesouro { background: radial-gradient(circle at 50% 0%, var(--gold-glow), var(--surface) 72%); border-color: var(--gold-lo); }
.pl-pack-name { font: 600 13px var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.pl-pack-credits { font: 700 30px/1 var(--f-titulo); color: var(--arcane); }
.pl-pack-credits small { font: 600 13px var(--f-ui); color: var(--text-2); }
.pl-pack-price { font: 700 17px var(--f-ui); }
.pl-bonus { color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.pl-bonus svg { width: 14px; height: 14px; }
.pl-pack .btn { margin-top: 6px; }
.pl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pl-plan {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.pl-plan.plan-guilda { border-color: var(--gold-lo); box-shadow: 0 0 0 1px var(--gold-soft), 0 10px 30px var(--gold-glow); }
.pl-plan.current { outline: 2px solid var(--gold-lo); outline-offset: 2px; }
.pl-plan-head { display: flex; align-items: center; gap: 8px; }
.pl-plan-head h3 { flex: 1; margin: 0; font: 600 22px var(--f-titulo); }
.pl-plan-price { margin: 0; }
.pl-plan-price strong { font: 700 26px var(--f-titulo); color: var(--gold); }
.pl-plan .earn-list { font-size: 14px; }
.pl-maturing { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.pl-maturing svg { width: 16px; height: 16px; flex: none; color: var(--arcane); }
.pl-conv { gap: 10px; align-items: center; }
.pl-conv .input { width: 110px; flex: none; font-variant-numeric: tabular-nums; }
.pl-conv-out { font: 700 18px var(--f-titulo); color: var(--gold); }
.balance-split { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); margin: -4px 0 0; }
.inv-more { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* cartão estreito: os botões descem para a linha de baixo em vez de espremer o nome do item */
.loot-card:has(.inv-more) { flex-wrap: wrap; }
.loot-card:has(.inv-more) .loot-info { flex: 1 1 140px; }
.loot-card:has(.inv-more) .loot-action { flex: 1 1 auto; }
.inv-engrave { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 100%; }
.inv-engrave .input { flex: 1 1 140px; min-width: 0; }
.loot-card:has(.inv-engrave) { flex-wrap: wrap; }
.loot-card:has(.inv-engrave) .loot-action { flex: 1 1 100%; }
.mk-link { justify-content: center; }
.loot-engraved { font-family: var(--f-prosa); font-style: italic; color: var(--gold); }

@media (max-width: 380px) {
  .pl-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}