/* ============================================================
   materiais.css — A Casa de Trocas
   As medalhas são SVG forjado; o CSS aqui só constrói a vitrine.
   ============================================================ */

.mt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.mt-coluna { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

.mt-bloco {
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(255,255,255,.035), rgba(0,0,0,.22));
  border: 1px solid rgba(148,163,184,.13);
}
.mt-lbl {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-section); font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .85rem;
}
.mt-op { font-weight: 400; letter-spacing: .06em; text-transform: none; opacity: .7; }
.mt-contador {
  margin-left: auto; letter-spacing: .06em; text-transform: none;
  color: var(--gold-bright); font-size: .68rem;
}

/* ── Busca do destinatário ─────────────────────────────── */
.mt-busca { position: relative; }
.mt-input {
  width: 100%; padding: .7rem .9rem; border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(148,163,184,.2);
  color: var(--text-primary);
  font-family: var(--font-section); font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.mt-input::placeholder { color: var(--text-dim); }
.mt-input:focus {
  outline: none; border-color: var(--purple-glow);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mt-busca-estado {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  font-size: .95rem; pointer-events: none;
}
.mt-ok   { color: #34d399; }
.mt-erro { color: #f87171; }
.mt-erro-txt {
  margin-top: .55rem; font-size: .74rem; color: #fca5a5;
  font-family: var(--font-section);
}
.mt-spin {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(148,163,184,.25);
  border-top-color: var(--purple-glow);
  border-radius: 50%;
  animation: mt-girar .7s linear infinite;
}
@keyframes mt-girar { to { transform: rotate(360deg); } }

.mt-destino {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .7rem; padding: .7rem .85rem;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(52,211,153,.1), transparent);
  border: 1px solid rgba(52,211,153,.3);
  animation: mt-surgir .35s ease both;
}
@keyframes mt-surgir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.mt-destino-av {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--purple-main), var(--blue-mana));
  border: 2px solid rgba(52,211,153,.45);
}
.mt-destino-av img { width: 100%; height: 100%; object-fit: cover; }
.mt-destino-nome {
  font-family: var(--font-section); font-size: .95rem; font-weight: 700;
  color: var(--text-primary);
}
.mt-destino-sub { font-size: .68rem; color: var(--text-muted); margin-top: .1rem; }
.mt-destino-selo {
  margin-left: auto; white-space: nowrap;
  font-family: var(--font-section); font-size: .55rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #34d399;
  padding: .2rem .6rem; border-radius: 100px;
  border: 1px solid rgba(52,211,153,.35); background: rgba(52,211,153,.08);
}

/* ── Vitrine de materiais ──────────────────────────────── */
.mt-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .7rem;
}
.mt-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem .6rem .8rem;
  border-radius: 15px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.12), rgba(0,0,0,.3));
  border: 1px solid rgba(148,163,184,.15);
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), border-color .22s, box-shadow .22s;
}
.mt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251,191,36,.5);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.mt-card.on {
  border-color: var(--gold-bright);
  background: radial-gradient(ellipse at 50% 0%, rgba(251,191,36,.2), rgba(0,0,0,.35));
  box-shadow: 0 0 26px rgba(251,191,36,.35), inset 0 0 20px rgba(251,191,36,.07);
}
.mt-card-medalha {
  height: 92px; display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.mt-card:hover .mt-card-medalha { transform: scale(1.07); }
.mt-card-nome {
  margin-top: .55rem; text-align: center;
  font-family: var(--font-section); font-size: .76rem; font-weight: 700;
  line-height: 1.25; color: var(--text-primary);
}
.mt-card-origem {
  margin-top: .18rem; font-size: .6rem; color: var(--text-dim); font-style: italic;
}
.mt-check, .mt-cadeado {
  position: absolute; top: .5rem; right: .55rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem;
}
.mt-check {
  color: #0b0b12; background: var(--gold-bright);
  opacity: 0; transform: scale(.4);
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.6,.64,1);
}
.mt-card.on .mt-check { opacity: 1; transform: scale(1); }
.mt-cadeado { opacity: .5; }

/* Conquistados: à mostra, mas acorrentados */
.mt-card.preso {
  cursor: default;
  filter: saturate(.55) brightness(.85);
  border-style: dashed;
  border-color: rgba(148,163,184,.18);
  background: rgba(255,255,255,.02);
}
.mt-card.preso:hover { transform: none; box-shadow: none; border-color: rgba(148,163,184,.28); }
.mt-card.preso:hover .mt-card-medalha { transform: none; }
.mt-grade-presos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.mt-grade-presos .mt-card-medalha { height: 72px; }

/* ── Ação ──────────────────────────────────────────────── */
.mt-enviar {
  width: 100%;
  font-family: var(--font-section); font-size: .86rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .85rem 1.2rem; border-radius: 12px; cursor: pointer;
  color: #fff;
  background: linear-gradient(100deg, #6d28d9, #a855f7);
  border: 1px solid var(--purple-glow);
  box-shadow: 0 0 22px rgba(124,58,237,.35);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.mt-enviar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(168,85,247,.6);
}
.mt-enviar:disabled {
  opacity: .35; cursor: not-allowed;
  background: rgba(255,255,255,.05); border-color: rgba(148,163,184,.2);
  box-shadow: none;
}
.mt-aviso {
  text-align: center; margin-top: -.35rem;
  font-family: var(--font-section); font-size: .68rem; color: var(--text-dim);
}

/* ── Livro de Trocas ───────────────────────────────────── */
.mt-log { display: flex; flex-direction: column; gap: .45rem; max-height: 460px; overflow-y: auto; }
.mt-log-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: 11px;
  background: rgba(255,255,255,.025);
  border-left: 3px solid transparent;
}
.mt-log-item.enviado  { border-left-color: rgba(248,113,113,.6); }
.mt-log-item.recebido { border-left-color: rgba(52,211,153,.6); }
.mt-log-seta { font-size: 1rem; flex-shrink: 0; }
.mt-log-item.enviado  .mt-log-seta { color: #f87171; }
.mt-log-item.recebido .mt-log-seta { color: #34d399; }
.mt-log-med { flex-shrink: 0; display: flex; }
.mt-log-info { min-width: 0; flex: 1; }
.mt-log-titulo {
  font-family: var(--font-section); font-size: .8rem; font-weight: 700;
  color: var(--text-primary);
}
.mt-log-sub { font-size: .66rem; color: var(--text-muted); margin-top: .08rem; }
.mt-log-msg {
  font-size: .66rem; color: var(--text-secondary);
  font-style: italic; margin-top: .18rem; opacity: .85;
}

/* ── Forja do Arquiteto ────────────────────────────────── */
.mt-forja {
  background: linear-gradient(155deg, rgba(251,191,36,.07), rgba(0,0,0,.28));
  border-color: rgba(251,191,36,.28);
}
.mt-lbl-arq {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(251,191,36,.45);
}
.mt-forja-nota {
  font-family: var(--font-section); font-size: .7rem; line-height: 1.6;
  color: var(--text-muted); margin: -.4rem 0 .8rem;
}
/* Faixa horizontal no topo: todas as medalhas visíveis de uma vez,
   sem precisar rolar a página para achar a Forja. */
.mt-forja-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: .55rem;
}
.mt-forja-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .75rem .5rem .6rem; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.14);
  color: var(--text-primary);
  transition: all .2s;
}
.mt-forja-item:hover:not(:disabled) {
  border-color: var(--gold-bright);
  background: rgba(251,191,36,.1);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.mt-forja-item:disabled { opacity: .5; cursor: wait; }
.mt-forja-med {
  flex-shrink: 0; height: 58px;
  display: flex; align-items: center; justify-content: center;
}
.mt-forja-nome {
  font-family: var(--font-section); font-size: .72rem; font-weight: 700;
  line-height: 1.25; text-align: center;
}
.mt-forja-acao {
  position: absolute; top: .4rem; right: .45rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: #0b0b12; background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(251,191,36,.5);
}
.mt-forja-item.tem .mt-forja-acao {
  color: #34d399; background: rgba(52,211,153,.15);
  box-shadow: none; border: 1px solid rgba(52,211,153,.4);
}

/* -- Abas da Forja (Emblemas / Auras / futuras) ---- */
.mt-forja-tabs {
  display: flex; gap: .35rem; margin-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: .4rem;
}
.mt-forja-tab {
  font-family: var(--font-section); font-size: .6rem; letter-spacing: .1em;
  padding: .3rem .8rem; border-radius: 4px 4px 0 0;
  background: transparent; border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted); cursor: pointer; transition: all .2s;
  text-transform: uppercase;
}
.mt-forja-tab:hover   { color: var(--text-main); border-color: rgba(255,255,255,.2); }
.mt-forja-tab.active  {
  color: var(--gold-bright); border-color: var(--gold-bright);
  border-bottom-color: transparent; background: rgba(251,191,36,.06);
}
.mt-forja-painel      { animation: fadeIn .18s ease; }


/* ── Estados vazios ────────────────────────────────────── */
.mt-vazio {
  text-align: center; padding: 2.5rem 1rem;
  font-family: var(--font-section); font-size: .88rem; color: var(--text-muted);
}
.mt-vazio-suave {
  text-align: center; padding: 1.6rem .8rem;
  font-family: var(--font-section); font-size: .76rem; line-height: 1.7;
  color: var(--text-dim);
  border: 1px dashed rgba(148,163,184,.16); border-radius: 12px;
}
.mt-fallback { display: inline-block; line-height: 1; }

/* ── Botão deletar (X) nos cards ───────────────────── */
.mt-card { position: relative; }
.mt-card-del {
  position: absolute; top: .35rem; right: .35rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4);
  color: #ef4444; font-size: .62rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; z-index: 5; padding: 0;
}
.mt-card-del:hover { background: rgba(239,68,68,.4); border-color: #ef4444; transform: scale(1.15); }

@media (max-width: 980px) {
  .mt-layout { grid-template-columns: 1fr; }
}