/* Tema "painel de comando" — os tokens do design system (design-system/tokens.css) aplicados ao layout
   que já existe. Azul-marinho no chão, fio de ouro em toda moldura, losango nos cantos, título em
   versalete dourado, barra fina com o número dentro, slot emoldurado.

   Pedido do dono em 24/09/2026, com uma referência na mão: "um tom de jogo mais de painel de
   administração, um azul mais escuro". O que veio da referência é linguagem visual: cor, moldura,
   letra, o cartão da party com retrato + sigla + papel + barras. A arte continua sendo a de sprites/.

   Segunda rodada (24/09/2026): o azul-marinho foi recusado. O que o dono quer da foto é "uma certa
   transparência e uma coisa moderna, o dourado contrastando bem": o cenário da hunt (preview_<id>.png)
   fica embaçado e escuro atrás de tudo (#raiz::before, a variável --cena vem de pintaCena()), os
   painéis são translúcidos com backdrop-filter, o fio é ouro vivo e o botão é madeira como na foto.

   É uma CAMADA: entra depois de styles.css e ux.css e só repinta. Layout, tamanhos e estrutura ficam
   onde estavam — tirar a linha do index.html devolve o visual anterior. (Exceção honesta: o cartão da
   party mudou de estrutura em interface.js/ux.css e não volta só tirando este arquivo.)

   O que o sistema manda, e vale para qualquer coisa nova:
   · todo painel, cartao, slot e campo é bg-100 com fio de 1px gold-line e losango nos cantos;
   · ouro fala (título, rótulo de seção, valor em ouro), ink relata, ink-muted é rótulo;
   · vida e mana são os únicos preenchimentos saturados; o resto do cartão é escuro;
   · OURO SÓ ONDE FALA (24/09/2026, "esse monte de texto amarelo não tá legal"): título de painel, marca,
     nome da hunt e aba ativa. Botão, seção, nome, valor e total são ink. Ouro é fio, não texto corrido;
   · sprite em tamanho inteiro, image-rendering: pixelated, nunca borrado. */

body { background: var(--bg-000); color: var(--ink); font-family: var(--font-serif); }
#raiz { position: relative; isolation: isolate; background: transparent; }
/* o cenário da hunt atrás de tudo: ampliado, embaçado e escurecido, para o painel translúcido ter o que mostrar
   (fixed, não absolute: com absolute a sobra de 24px entrava na área rolável e a página inteira deslizava 24px) */
#raiz::before { content: ''; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background: var(--bg-000) var(--cena, url('sprites/preview_cripta.png')) center / cover no-repeat;
  filter: blur(5px) brightness(.7) saturate(.9); }
/* com fundo.jpg gerado por IA (arte de verdade, não pixel art ampliado) o embaçado é só um véu */
html.fundo-ia #raiz::before { filter: blur(1.5px) brightness(.72) saturate(1); }
.lateral, #centro { background: transparent; }
/* calhas um pouco mais largas: é por elas que o cenário aparece entre os painéis */
.lateral { padding: 10px 8px; gap: 10px; }
#centro { padding: 10px 4px; gap: 10px; }
#battle-workspace { gap: 10px; }

/* ---------------- painel: translúcido, fio de ouro, losangos ---------------- */
.win { background: var(--panel) !important; border: 0 !important; border-radius: var(--radius-lg);
  box-shadow: var(--frame), var(--frame-inner); position: relative;
  backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
/* losango nos quatro cantos; o de baixo é do miolo, que se ancora no painel por não ter position */
.win.painel::before, .win.painel::after,
.win.painel > .miolo::before, .win.painel > .miolo::after,
#jan::before, #jan::after, #worldbar::before, #worldbar::after, #console::before, #console::after {
  content: '\25C6'; position: absolute; font-size: 8px; line-height: 8px;
  color: var(--gold-line-bright); pointer-events: none; z-index: 3;
}
.win.painel::before, #jan::before, #worldbar::before, #console::before { left: 4px; top: 3px; }
.win.painel::after, #jan::after, #worldbar::after, #console::after { right: 4px; top: 3px; }
.win.painel > .miolo::before { left: 4px; bottom: 3px; }
.win.painel > .miolo::after { right: 4px; bottom: 3px; }

/* ---------------- título: versalete dourado, fio embaixo ---------------- */
.titulo { background: transparent !important; border: 0 !important;
  border-bottom: 1px solid rgba(168, 137, 79, .55) !important; color: var(--gold) !important;
  font: 700 12px/17px var(--font-display) !important; letter-spacing: .10em; text-transform: uppercase;
  height: 26px !important; padding: 2px 14px 0 !important; }
.titulo > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titulo .bts .bt { background: transparent !important; box-shadow: none !important;
  color: var(--ink-muted) !important; height: 13px; }
.titulo .bts .bt:hover { color: var(--gold) !important; }
.titulo .bts span { color: var(--ink-muted); font: 600 10px var(--font-mono); letter-spacing: 0; }
.painel .miolo { padding: var(--space-2) var(--space-3) var(--space-3); }
.sec, h4.sec { color: var(--ink); font: 700 14px/18px var(--font-serif); letter-spacing: 0; text-transform: none; }

/* ---------------- a marca no alto da lateral ---------------- */
#marcaPainel { text-align: center; padding: 10px 6px 8px; }
#marcaPainel .marca { display: block; padding: 0; font-size: 20px; line-height: 24px; letter-spacing: .04em; text-shadow: none; white-space: nowrap;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
#marcaPainel #tHunt { display: block; margin-top: 3px; color: var(--ink-muted); font: 400 11px/14px var(--font-serif); letter-spacing: .06em; }

/* ---------------- linhas: rótulo apagado, valor firme ---------------- */
.linha { padding: 3px 0; color: var(--ink-muted); font-size: 13px; }
/* Hunt Analyzer e medidores da lateral esquerda maiores (o dono: "mais fácil de ver") */
#latE .linha { font-size: 14px; padding: 4px 0; }
#latE .linha b { font-size: 14px; }
.an .linha.dps b { font-size: 15px; }
.an .sig { color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.an .elems .linha { font-size: 11px; padding: 1px 0; border-top: 0; }
.an .elems .linha b { font-size: 11px; font-weight: 400; }
.an .elems .linha b small { font-size: 9px; }
.linha + .linha { border-top: 1px solid rgba(168, 137, 79, .28); }
.linha span { color: var(--ink-muted); }
.linha b { color: var(--ink) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.an .sepa { border-top: 1px solid rgba(168, 137, 79, .45); box-shadow: none; }

/* ---------------- barras: só vida e mana são saturadas; o número mora dentro ---------------- */
.barra { background: #181c1d !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(168, 137, 79, .6); border-radius: var(--radius-sm); height: var(--bar-h);
  margin: var(--space-1) 0; overflow: hidden; }
.barra i { box-shadow: none; }
.barra b { color: var(--on-bright); font: 600 11px/12px var(--font-mono); text-shadow: none; z-index: 2; }
.barra.hp i { background: var(--health) !important; }
.barra.mp i { background: var(--mana) !important; }
.barra.mp b { color: var(--ink); }
.barra.xp i { background: var(--health) !important; }
/* XP em gomos, como na referência: a régua de traços escuros por cima do preenchimento */
.mb .barra { box-shadow: 0 0 0 1px rgba(0,0,0,.6); border-radius: 3px; }
.mb .barra.xp i { background: #e2c04e !important; }
.barra.xp b { color: var(--ink); }
#vitais .duas .barra, .inv .barra { height: 10px; }

/* ---------------- botões: aço escuro com fio de ouro discreto e letra pergaminho ----------------
   (25/09/2026, o dono: "o botão é amarelo num marrom com letra branca, muito ruim; faz um botão melhor e com uma
   fonte melhor"). A madeira #2e2218 com anel dourado vivo e Alegreya branca saiu. Agora: degradê frio no tom dos
   painéis, fio de ouro apagado, brilho de 1px no alto, letra Barlow Semi Condensed (legível em 11–12px) em
   pergaminho. O ouro só acende sob o mouse e no botão ativo — "ouro só onde fala". */
.bt { background: linear-gradient(180deg, #232b30 0%, #171d21 55%, #12171a 100%) !important;
  border: 0 !important; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 0 1px rgba(168,137,79,.55), 0 2px 5px rgba(0,0,0,.45);
  color: #e6dcc6 !important; font-family: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif;
  font-weight: 600; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  transition: background .15s, box-shadow .15s, color .15s, transform .08s; }
.bt:hover { background: linear-gradient(180deg, #2e3438 0%, #1f2427 55%, #181c1f 100%) !important; color: #fff6de !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 0 1px var(--gold-line-bright), 0 0 10px rgba(228,188,108,.22); }
.bt:active { transform: translateY(1px); }
.bt:active, .bt.on { background: linear-gradient(180deg, #3a2f1f 0%, #2a2116 60%, #211a11 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,233,140,.12), inset 0 -2px 0 var(--gold-line-bright),
    0 0 0 1px var(--gold-line-bright), 0 0 10px rgba(228,188,108,.2) !important;
  color: var(--gold-bright) !important; }
.bt:disabled, .bt[disabled] { background: #111416 !important; color: #6d7477 !important; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(168,137,79,.25) !important; transform: none; }
.bt.g { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; }
.bt.ouro { color: var(--gold-soft) !important; box-shadow: inset 0 1px 0 rgba(255,233,140,.1), inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 0 1px var(--gold-line-bright), 0 2px 5px rgba(0,0,0,.45); }
.bt:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
#velocidades .bt { font-family: var(--font-mono); font-weight: 600; }

/* ---------------- menu de cima ---------------- */
#menu { background: var(--panel) !important; border: 0 !important; box-shadow: inset 0 -1px 0 var(--gold-line);
  backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
.mi { color: var(--ink-muted); border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-serif); }
.mi:hover { color: var(--ink); background: var(--bg-300); border-color: var(--gold-line); }
.mi.on, .mi:active { color: var(--gold); background: var(--bg-300); border-color: var(--gold-line-bright); }
#ouroTopo b { color: var(--gold); font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
#coinsTopo b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
#topoMarca .marca { filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.mi-grupo .sub { background: rgba(13, 16, 19, .94); border: 1px solid var(--gold-line); box-shadow: 0 8px 24px rgba(0,0,0,.6); backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
.si { color: var(--ink); font-family: var(--font-serif); } .si:hover { color: var(--ink); background: var(--bg-300); border-color: var(--gold-line); }

/* ---------------- faixa da hunt e o palco ---------------- */
#worldbar { background: var(--panel) !important; border: 0 !important; box-shadow: var(--frame); position: relative; border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
#worldbar small { color: var(--ink-muted); font: 700 10px var(--font-display); letter-spacing: .12em; }
#worldbar strong { color: var(--gold); font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
#worldState { color: var(--ink-muted); }
#palco { background: transparent; }
#moldura { background: var(--bg-000); border: 0; box-shadow: var(--frame); position: relative; border-radius: var(--radius-md); }
#moldura::before, #moldura::after { content: '\25C6'; position: absolute; font-size: 8px; line-height: 8px;
  color: var(--gold-line-bright); z-index: 3; pointer-events: none; }
#moldura::before { left: 4px; top: 3px; }
#moldura::after { right: 4px; bottom: 3px; }
#acoes { background: var(--panel); border: 0; box-shadow: var(--frame); border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
#acoes .grupo { background: var(--panel-solid); border: 0; box-shadow: 0 0 0 1px rgba(168,137,79,.5); border-radius: var(--radius-md); }
#acoes .grupo.sel { box-shadow: 0 0 0 1px var(--gold-line-bright); }
#acoes.aberto { background: rgba(12, 15, 18, .82); box-shadow: var(--frame); }
#acoes .gnome span:first-child { color: var(--ink); font-family: var(--font-display); }
#acoes .gnome span:last-child, .skill-label, .fila small { color: var(--ink-muted); }
.fila + .fila { border-top: 1px solid rgba(168,137,79,.3); box-shadow: none; }

/* ---------------- slots: poço de pedra ---------------- */
.inv .slot, .bolsa .slot, .fundo.ret, .sk, .mb .eq div {
  background-color: var(--bg-000) !important; border: 0 !important;
  border-radius: var(--radius-sm); box-shadow: var(--well); image-rendering: pixelated; }
.inv .slot:hover, .bolsa .slot:hover, .sk:hover, .mb .eq div:hover {
  box-shadow: 0 0 0 1px var(--gold-line-bright), inset 0 2px 6px rgba(0,0,0,.8); }
.sk.on { box-shadow: var(--glow-gold), inset 0 2px 6px rgba(0,0,0,.8); }
.bolsa .slot b { color: var(--ink); font: 600 11px/11px var(--font-mono);
  text-shadow: 1px 1px 0 var(--bg-000), -1px -1px 0 var(--bg-000), 1px -1px 0 var(--bg-000), -1px 1px 0 var(--bg-000); }
.bolsa .rod { color: var(--ink-muted); }

/* ---------------- cartão da party: retrato, sigla, papel, nome, nível e as três barras ---------------- */
.mb { background: transparent; border: 0; box-shadow: none; border-radius: var(--radius-md); transition: background .15s; }
.mb:hover { background: rgba(255,255,255,.03); }
.mb.sel { background: rgba(255,255,255,.05); box-shadow: inset 3px 0 0 var(--gold); }
.mb .tag { border: 0; border-radius: var(--radius-sm); box-shadow: none;
  font: 700 10px/16px var(--font-display); letter-spacing: .08em; padding: 0 6px; }
.tag.TANK { background: var(--role-tank); color: var(--role-tank-text); }
.tag.DPS { background: var(--role-dps); color: var(--role-dps-text); }
.tag.SUP { background: var(--role-sup); color: var(--role-sup-text); }
.mb .nomeM { color: var(--ink); font-weight: 700; }
.mb.sel .nomeM { color: #fff; }
.mb .nv, .mb .sub { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mb .seta { color: var(--ink-muted); } .mb .seta:hover { color: var(--gold); }
.mb.bloq { background: transparent; box-shadow: none; opacity: .75; }
.mb.bloq .tag { background: var(--bg-300); color: var(--ink-muted); }
.mb.bloq .preco { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

/* ---------------- console: aba com caixa dourada, log monoespaçado ---------------- */
#console { background: var(--panel) !important; border: 0 !important; box-shadow: var(--frame); position: relative; border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--panel-blur)); -webkit-backdrop-filter: blur(var(--panel-blur)); }
#abas { border-bottom: 1px solid rgba(168,137,79,.55); padding: 0 14px; }
#abas .bt { background: transparent !important; box-shadow: none !important; border-radius: 0;
  color: var(--ink-muted) !important; position: relative; font-weight: 700; }
#abas .bt + .bt { border-left: 1px solid rgba(168,137,79,.3); }
#abas .bt:hover { color: var(--ink) !important; background: rgba(46,34,24,.5) !important; }
#abas .bt.on { color: var(--gold) !important; background: #372d20 !important;   /* a aba ativa da foto: caixa de madeira clara */
  box-shadow: inset 0 -2px 0 var(--gold-bright) !important; }
#log, #digita { background: rgba(8, 12, 18, .75) !important; color: var(--ink); font: 400 12px/18px var(--font-mono); }
.c-info, .c-xp, .c-dano { color: var(--ink); }
.c-loot { color: var(--positive); }
.c-sis { color: var(--gold-soft); }
.c-morte { color: var(--negative); }
.c-magia { color: var(--elem-fire); }
.c-cura { color: var(--mana-text); }

/* ---------------- cartões, janelas e a tela de entrada ---------------- */
.cartao { background: var(--panel-solid) !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--gold-line); border-radius: var(--radius-md); transition: background .15s, box-shadow .15s; }
.cartao:hover { background: var(--bg-300) !important; box-shadow: 0 0 0 1px var(--gold-line-bright); }
.cartao.atual { box-shadow: var(--glow-gold) !important; }
.cartao h5 { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.cartao p { color: var(--ink-muted); }
#jan { box-shadow: var(--overlay), var(--frame-inner); background: rgba(12, 15, 18, .92) !important; }
#jan > .titulo { height: 40px !important; font-size: 15px !important; }
.fundo, .campo, select, input[type=text], input[type=number] { background: rgba(15, 19, 23, .9) !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--gold-line); color: var(--ink); border-radius: var(--radius-sm); }
.campo:focus, select:focus, input:focus { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
#login { background: var(--bg-000) url('sprites/preview_cripta.png') center / cover no-repeat; }
#login::before { content: ''; position: absolute; inset: 0; background: rgba(4, 6, 8, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#login .caixa { position: relative; box-shadow: var(--overlay), var(--frame-inner); }
.marca { color: var(--gold) !important; font-family: var(--font-display) !important; font-weight: 900 !important;
  letter-spacing: .02em; background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #b9822a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.nota, .cab { color: var(--ink-muted); }
.voc.on { box-shadow: var(--glow-gold); }
#dlg .ico { color: var(--ink); }
/* ---------------- ouro só onde fala: o que a tela antiga pintava de amarelo volta para o ink ---------------- */
.forte { color: var(--ink) !important; font-weight: 700; }
/* a exceção do Hunt Analyzer, como no Baiak: loot e saldo positivo em ouro, supplies e saldo negativo em vermelho */
.linha b.ouro { color: var(--gold) !important; } .linha b.neg { color: var(--negative) !important; }
.cartao h5, .hunt-card .hunt-level, .hunt-preparation summary, .hunt-preparo h4, .protected-note, .item-lock,
.hnav .bt.on, .modos .bt.on, .htopo .bt.on, .progress-nav .on, .voc.on b, .hcorpo h4,
#jan > .titulo, .cab { color: var(--ink) !important; }
.mi.ouro { color: var(--gold-soft); }
#jan > .titulo { color: var(--gold) !important; }   /* o título da janela continua sendo título */
#dlg .rodape { border-top: 1px solid rgba(168,137,79,.55); box-shadow: none; }
#dica.win { background: rgba(12, 15, 18, .94) !important; }
/* celular fraco: o embaçado é o primeiro a sair */
@media (max-width: 700px) { .win, #menu, #worldbar, #acoes, #console { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------------- laterais estreitas: título e marca encolhem antes de cortar ---------------- */
@media (max-width: 1200px) {
  .titulo { font-size: 11px !important; letter-spacing: .05em; padding: 1px 10px 0 !important; }
  #marcaPainel .marca { font-size: 16px; }
}

/* ---------------- celular: o ornamento sai, a largura é disputada ---------------- */
@media (max-width: 700px) {
  .lateral { padding: 6px; gap: 6px; } #centro { padding: 3px; gap: 3px; } #battle-workspace { gap: 3px; }
  .win.painel::before, .win.painel::after,
  .win.painel > .miolo::before, .win.painel > .miolo::after,
  #moldura::before, #moldura::after, #console::before, #console::after { display: none; }
  .titulo { font-size: 10px !important; letter-spacing: .06em; padding: 0 7px !important; }
  #abas { padding: 0; }
}