/* Molde comum das janelas largas (28/09/2026, o dono: "faça todas as outras que ainda falta no mesmo molde dessas outras").
   O molde é o da Ficha, da Guilda, das Quests, da Loja, do Altar e do VIP: janela larga, colunas com moldura de bronze, título em
   versalete dourado, cartão escuro, botão de ação forte. Uma janela entra no molde assim:
     1. registra a chave em JAN_LARGAS (interface.js): JAN_LARGAS.add('hunts') — o abreJan põe #jan.jlarga e #jan[data-jan="hunts"];
     2. monta o HTML com as classes abaixo (md, md-col, md-t, md-card…); o que for só dela vai num css próprio, escopado em
        #jan[data-jan="<chave>"].
   Só pinta: nada de regra aqui. */

/* colunas: .md é a grade; a primeira e a última coluna têm largura fixa, o meio estica */
.md { display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.md.md-2 { grid-template-columns: 300px minmax(0, 1fr); }
.md.md-2d { grid-template-columns: minmax(0, 1fr) 340px; }
.md-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* caixa com moldura de bronze */
.md-caixa, .md .win { padding: 10px 12px 12px; border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c, 0 0 0 3px #1a140c, inset 0 0 0 1px rgba(228,188,108,.14) !important; }

/* título da caixa: versalete dourado, ícone do acervo à esquerda, nota miúda à direita */
.md-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid rgba(92,74,44,.7); color: #ffd98a;
  font: 700 14px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.md-t img { width: 24px; height: 24px; image-rendering: pixelated; }
.md-t small { margin-left: auto; color: var(--ink-muted); font: 400 11px var(--font-serif); letter-spacing: 0; text-transform: none; }

/* cabeçalho grande da coluna do meio (nome, subtítulo, selo) */
.md-cab { display: flex; gap: 14px; align-items: center; }
.md-cab h3 { margin: 0; color: #ffd98a; font: 700 24px/1.1 var(--font-display); letter-spacing: .03em; text-shadow: 0 2px 2px #000; }
.md-cab p { margin: 2px 0 0; color: var(--ink-muted); }
.md-selo { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 700 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; background: #1d2a1a; color: #8fdc8a; box-shadow: 0 0 0 1px #3f6a3a; }
.md-selo.neg { background: #3a1512; color: #ff9d8a; box-shadow: 0 0 0 1px #8a3a2a; } .md-selo.ouro { background: #2a2213; color: #ffd98a; box-shadow: 0 0 0 1px #8a6d3b; }

/* lista da esquerda: itens clicáveis, o escolhido emoldurado em ouro */
.md-lista { display: flex; flex-direction: column; gap: 6px; }
.md-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px #2c2417; }
.md-item:hover { box-shadow: 0 0 0 1px #8a6d3b; }
.md-item.on { background: linear-gradient(rgba(58,46,23,.55), rgba(20,16,9,.6)); box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 0 12px rgba(228,188,108,.25); }
.md-item.off { opacity: .5; }
.md-item > img, .md-ico { flex: none; width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; border-radius: 5px; background: #07080a; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #3d3322; }
.md-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-item b { color: var(--ink); font: 700 14px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-item small { color: var(--ink-muted); font-size: 12px; }

/* cartões em grade (o meio) */
.md-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.md-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 6px; background: rgba(8,9,11,.85); box-shadow: 0 0 0 1px #000, 0 0 0 2px #3d3322; }
.md-card.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 0 10px rgba(228,188,108,.3); }
.md-card h5 { margin: 0; color: var(--ink); font: 700 14px var(--font-display); }
.md-card p { margin: 0; color: var(--ink-muted); font-size: 12px; }

/* linhas rótulo/valor (atributos, custos) */
.md-linha { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(92,74,44,.3); color: var(--ink-muted); font-size: 13px; }
.md-linha:last-child { border-bottom: 0; } .md-linha b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; text-align: right; }

/* cena: imagem do acervo escurecida atrás de um conteúdo (ex.: sprites/preview_<hunt>.png, marca/topo-castelo.webp) */
.md-cena { position: relative; min-height: 180px; border-radius: 6px; overflow: hidden; background: #07080a center / cover no-repeat; box-shadow: inset 0 0 0 1px #000; }
.md-cena::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(6,7,9,.15), rgba(6,7,9,.8)); pointer-events: none; }
.md-cena > * { position: relative; z-index: 1; }

/* botões: a ação principal é forte (vermelho com fio de ouro, ou verde para comprar/confirmar) */
.md-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.md-bts .bt { flex: 1; min-height: 38px; }
.md-acao, .md-acao-v { min-height: 48px; font: 700 14px var(--font-display) !important; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; border: 0 !important; }
.md-acao { background: linear-gradient(#b3322a, #6e1511) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #d9a441 !important; }
.md-acao-v { background: linear-gradient(#35b556, #0e6b2a) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #d9a441 !important; }
.md-acao:hover:not(:disabled), .md-acao-v:hover:not(:disabled) { filter: brightness(1.15); }
.md-acao:disabled, .md-acao-v:disabled { filter: grayscale(1) brightness(.6); }

/* abas internas no molde (fita com ícone) */
.md-abas { display: flex; margin: 0 0 12px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c; }
.md-abas .bt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 0; font: 700 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.md-abas .bt + .bt { border-left: 1px solid rgba(92,74,44,.6) !important; } .md-abas .bt img { width: 22px; height: 22px; image-rendering: pixelated; }

.md-nota { color: var(--ink-muted); font-size: 12px; margin: 6px 0 0; }
.md-vazio { color: var(--ink-muted); padding: 12px; text-align: center; }

@media (max-width: 1350px) { .md { grid-template-columns: 250px minmax(0, 1fr); } .md > .md-col:last-child:not(:nth-child(2)) { grid-column: 1 / -1; } }
@media (max-width: 900px) { .md, .md.md-2, .md.md-2d { grid-template-columns: minmax(0, 1fr); } .md-abas { flex-wrap: wrap; } .md-abas .bt { flex: 1 1 30%; } }