/* Layout "cara de World of Warcraft" (26/09/2026; o dono escolheu a variação A, a de unit frames; quem move o DOM é layout.js).
   Party à ESQUERDA com retrato redondo, Hunt Analyzer e medidores à DIREITA, e embaixo da hunt uma doca com a action bar
   (botão quadrado, número do atalho no canto); as quatro bolsas embaixo da party e o chat translúcido por cima do mapa, no
   canto direito, recolhível (01/10/2026: o mapa com o espaço todo e as habilidades logo embaixo dele). Cores de classe do WoW nos nomes e
   nos medidores (estilo Details!: barra na cor da classe atrás do número). Topo no molde da tela do dono: castelo de fundo
   (marca/topo-castelo.webp), logo grande, abas com o ícone em cima e a ativa emoldurada em ouro, ouro e coins numa caixa à
   direita. Camada como o tema.css: sem data-layout (abaixo de 980px) nada daqui pinta, a não ser esconder o retrato e a
   fileira de equipamento que o cartão da party passou a trazer. */

.mb .retM, .mb .eqMini { display: none; }

/* ---------------- party, medidores e doca ---------------- */
[data-layout] { --c-knight: #c69b6d; --c-mago: #3fc7eb; --c-druida: #ff7c0a; --c-paladino: #aad372; }   /* warrior, mage, druid, hunter */
[data-layout] #latD { order: -1; width: 300px; }
[data-layout] #latE { order: 2; width: 290px; }
.combat-focus #doca { display: none; }
#tgChat { display: none; }

/* moldura de janela do WoW: aro de bronze escuro, fio preto por dentro, faixa de título em degradê */
[data-layout] .win.painel, [data-layout] #doca .win, [data-layout] #console { 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,.18), 0 8px 18px rgba(0,0,0,.45) !important; }
[data-layout] .titulo { background: linear-gradient(#2b2317, #15110b) !important; border-bottom: 1px solid #5c4a2c !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: #ffd100 !important; text-shadow: 0 1px 0 #000; }

/* cartão da party: nome na cor da classe; os números voltam para dentro da barra */
[data-layout] .mb[data-spr="knight"] { --cc: var(--c-knight); } [data-layout] .mb[data-spr="mago"] { --cc: var(--c-mago); }
[data-layout] .mb[data-spr="druida"] { --cc: var(--c-druida); } [data-layout] .mb[data-spr="paladino"] { --cc: var(--c-paladino); }
[data-layout] .mb .lin1 .nomeM { color: var(--cc, var(--ink)); font-family: var(--font-display); letter-spacing: .02em; text-shadow: 0 1px 0 #000; }
[data-layout] .mb .tres .barra b { display: block !important; font: 600 10px/100% var(--font-mono); display: flex !important; align-items: center; justify-content: center; }
[data-layout] .mb .tres .barra.hp i { background: linear-gradient(#35e763, #0a9a31 55%, #057424) !important; }
[data-layout] .mb .tres .barra.mp i { background: linear-gradient(#4d95ff, #0b55cf 55%, #073f9c) !important; }
[data-layout] .mb .retM { position: relative; }
/* o sprite é de 64px com o boneco no quarto de baixo à direita (x 29–64, y 30–64): amplia e recorta no quadro */
[data-layout] .mb .retM .quadro { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
[data-layout] .mb .retM .quadro > :is(canvas, img) { position: absolute; width: var(--rw) !important; height: var(--rw) !important; left: var(--rx); top: var(--ry); max-width: none; }
[data-layout] .mb .retM :is(canvas, img) { display: block; image-rendering: pixelated; }
[data-layout] .mb .retM .nv { position: absolute; font: 700 11px/1 var(--font-mono); color: #ffd100; background: #120e08; box-shadow: 0 0 0 1px #8a6d3b; }
[data-layout] .mb .eqMini { display: flex; gap: 3px; }
[data-layout] .mb .eqMini div { width: 30px; height: 30px; background: #0a0c0e center / 26px no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #3d3322; border-radius: 3px; }
[data-layout] .mb.aberto .eqMini { display: none; }

/* medidores no estilo Details!: barra na cor da classe, nome à esquerda, número à direita */
[data-layout] #latE .linha.dps { position: relative; padding: 0 6px; height: 22px; align-items: center; margin: 2px 0; border-radius: 2px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 72%, #000) var(--pct), rgba(255,255,255,.04) var(--pct)); }
[data-layout] #latE .linha.dps::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.25)); pointer-events: none; }
[data-layout] #latE .linha.dps .sig { color: #fff !important; font-weight: 700; text-shadow: 0 1px 1px #000; z-index: 1; }
[data-layout] #latE .linha.dps .sig::after { content: ' ' attr(title); font-weight: 400; opacity: .85; }
[data-layout] #latE .linha.dps b { color: #fff !important; text-shadow: 0 1px 1px #000; font-size: 13px !important; z-index: 1; }
[data-layout] #latE .linha.dps b small { color: rgba(255,255,255,.75); }

/* a doca embaixo da hunt */
[data-layout] #doca { flex: none; display: flex; gap: 10px; min-height: 0; }
[data-layout] #docaMagias { min-width: 0; }
/* as bolsas embaixo da party, na coluna da esquerda: slots na largura que couber, duas fileiras e o resto rola */
[data-layout] #latD .bolsa { flex: none; }
[data-layout] #latD .bolsa .grade4 { grid-template-columns: repeat(auto-fill, 38px); grid-auto-rows: 38px; justify-content: start; align-content: start; gap: 3px; padding: 6px 8px; max-height: 91px; overflow-y: auto; scrollbar-width: thin; }
[data-layout] #latD .bolsa .slot { width: 38px; height: 38px; }
[data-layout] #latD .bolsa .rod { padding: 2px 8px 6px; }
/* o chat por cima do mapa, no canto de baixo à direita: translúcido; recolhido ficam só as abas */
[data-layout] #battle-workspace #console { position: absolute; right: 14px; bottom: 14px; z-index: 5; width: min(440px, 48%); height: 190px; margin: 0; display: flex; flex-direction: column;
  background: rgba(8,10,12,.58) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
[data-layout] #battle-workspace #console #log, [data-layout] #battle-workspace #console #digita { background: transparent !important; text-shadow: 0 1px 1px #000; }
[data-layout] #battle-workspace #console.recolhido { height: auto; width: auto; max-width: 48%; opacity: .85; }
[data-layout] #battle-workspace #console.recolhido :is(#log, #digita) { display: none; }
[data-layout] #battle-workspace #console.recolhido #abas { border-bottom: 0; }
[data-layout] #battle-workspace #console:hover { opacity: 1; background: rgba(8,10,12,.8) !important; }
[data-layout] #tgChat { display: block; flex: none; margin-left: auto; min-width: 28px; color: #ffd100 !important; }

/* a barra de magias vira action bar: um grupo por personagem, os 6 botões numa fileira */
[data-layout] #tgMagias { display: none !important; }
[data-layout] #acoes, [data-layout] #acoes.aberto { position: static; width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
  overflow: visible; padding: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none; }
[data-layout] #acoes .grupo { flex: 1 1 0; min-width: 0; width: auto; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 8px; background: rgba(10,12,14,.82) !important; }
[data-layout] #acoes .gnome { display: flex; flex-direction: row; justify-content: space-between; margin: 0; font-size: 11px; line-height: 14px; }
[data-layout] #acoes .gnome span:last-child { display: block; color: var(--ink-muted); font-size: 10px; }
[data-layout] #acoes .grupo[data-spr="knight"] .gnome span:first-child { color: var(--c-knight); } [data-layout] #acoes .grupo[data-spr="mago"] .gnome span:first-child { color: var(--c-mago); }
[data-layout] #acoes .grupo[data-spr="druida"] .gnome span:first-child { color: var(--c-druida); } [data-layout] #acoes .grupo[data-spr="paladino"] .gnome span:first-child { color: var(--c-paladino); }
[data-layout] #acoes .skill-label, [data-layout] #acoes .support-skills small { display: none !important; }
[data-layout] #acoes .grupo > .fila { display: inline-flex; margin: 0; padding: 0; border: 0; gap: 4px; justify-content: flex-start; }
[data-layout] #acoes .grupo { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; }
[data-layout] #acoes .gnome { grid-column: 1 / -1; }
[data-layout] #acoes .support-skills { padding-left: 8px !important; border-left: 1px solid #3d3322 !important; }
/* botão de action bar: quadrado, chanfro escuro, número do atalho no canto de cima */
[data-layout] #acoes .sk { flex: 0 0 var(--bt, 34px); width: var(--bt, 34px); height: var(--bt, 34px); background-size: calc(var(--bt, 34px) - 4px); border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #4d4230, inset 0 -6px 8px rgba(0,0,0,.45); }
[data-layout] #acoes .sk:hover { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #ffd100, 0 0 8px rgba(255,209,0,.35); }
[data-layout] #acoes .sk u { top: 1px; right: 3px; bottom: auto; left: auto; font: 700 10px/1 var(--font-mono); color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
[data-layout] #acoes .sk.off { filter: grayscale(1) brightness(.55); }

/* retrato redondo com aro de ouro e nível no canto, como o player frame do WoW */
[data-layout="a"] #doca { flex-direction: column; }
[data-layout="a"] .mb { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "ret lin" "ret sub" "ret tres" "ret eq" "corpo corpo"; column-gap: 10px; padding: 10px 2px; }
[data-layout="a"] .mb .retM { grid-area: ret; align-self: start; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #3b3326, #0c0a07 70%); box-shadow: 0 0 0 2px #b8913f, 0 0 0 3px #000, inset 0 0 8px #000; overflow: visible; }
[data-layout="a"] .mb .retM { --rw: 136px; --rx: -71px; --ry: -60px; }
[data-layout="a"] .mb .retM .nv { left: -4px; bottom: -3px; min-width: 20px; padding: 3px 3px; border-radius: 50%; text-align: center; }
[data-layout="a"] .mb .lin1 { grid-area: lin; } [data-layout="a"] .mb .sub { grid-area: sub; padding-bottom: 4px; }
[data-layout="a"] .mb .tres { grid-area: tres; grid-template-columns: minmax(0, 1fr); gap: 3px; }
[data-layout="a"] .mb .tres .ic { display: none; }
[data-layout="a"] .mb .tres .barra.hp { height: 16px; } [data-layout="a"] .mb .tres .barra.mp { height: 12px; } [data-layout="a"] .mb .tres .barra.xp { height: 5px; }
[data-layout="a"] .mb .tres .barra.xp b { display: none !important; }
[data-layout="a"] .mb .eqMini { grid-area: eq; margin-top: 7px; }
[data-layout="a"] .mb .corpo { grid-area: corpo; }
[data-layout="a"] .mb .lin1 .tag { display: none; }

@media (max-width: 1400px) {
  [data-layout] #latD { width: 260px; } [data-layout] #latE { width: 250px; }
  [data-layout] #acoes { --bt: 27px; } [data-layout] #acoes .gnome span:last-child { display: none; } [data-layout] #acoes .grupo { padding: 5px 6px 6px; column-gap: 5px; }
  [data-layout] .mb .eqMini div { width: 26px; height: 26px; background-size: 22px; }
}

/* chat: as abas numa fileira que rola, sem quebrar o rótulo */
[data-layout] #abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
[data-layout] #abas .bt { flex: none; white-space: nowrap; }

/* ---------------- topo no molde da tela do dono ----------------
   faixa de 86px com o castelo ao fundo (escurecido embaixo, para o texto ler), fio de bronze e ouro na base;
   logo grande à esquerda; as abas numa barra emoldurada, ícone em cima e rótulo em versalete, a ativa com moldura
   de ouro e um losango embaixo; à direita a caixa de ouro e coins e a Loja · VIP. */
[data-layout] #menu { min-height: 64px; padding: 0 14px !important; gap: 14px; align-items: center;
  background: linear-gradient(180deg, rgba(5,6,8,0) 0%, rgba(5,6,8,.25) 55%, rgba(5,6,8,.8) 100%),
              url(marca/topo-castelo.webp) center 30% / cover no-repeat, #0b0c0e !important;
  box-shadow: 0 1px 0 #000, 0 2px 0 #6b5733, 0 3px 0 #000, 0 8px 20px rgba(0,0,0,.65) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-layout] #menu::after { content: '\25C6'; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 2;
  color: #e4bc6c; font-size: 11px; line-height: 11px; text-shadow: 0 0 6px rgba(228,188,108,.6); pointer-events: none; }
[data-layout] #topoMarca img { height: 44px !important; width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.9)) drop-shadow(0 0 12px rgba(0,0,0,.6)); }

[data-layout] #menu .mcentro { align-self: center; gap: 0; padding: 0; border-radius: 4px;
  background: linear-gradient(#17140f, #0a0908); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c, 0 0 0 3px #000, 0 6px 14px rgba(0,0,0,.6); }
[data-layout] #menu .mcentro > * + * { border-left: 1px solid rgba(92,74,44,.55); }
[data-layout] #menu .mcentro .mi { position: relative; min-width: 70px; height: 50px; margin: 0; padding: 5px 8px 4px; gap: 4px; border: 0 !important; border-radius: 0;
  background: transparent !important; color: #b9ad93; font: 700 9.5px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
[data-layout] #menu .mcentro .mi img { width: 24px; height: 24px; filter: grayscale(.35) sepia(.45) brightness(.9) drop-shadow(0 1px 1px #000); transition: filter .15s; }
[data-layout] #menu .mcentro .mi:hover { color: #f2d48c; background: linear-gradient(rgba(228,188,108,.10), rgba(228,188,108,.02)) !important; }
[data-layout] #menu .mcentro .mi:hover img { filter: brightness(1.1) drop-shadow(0 0 4px rgba(242,196,90,.5)); }
[data-layout] #menu .mcentro .mi.ativo { color: #ffd98a; z-index: 1;
  background: linear-gradient(#3b2f17, #1a1409 80%) !important; box-shadow: inset 0 0 0 1px #e4bc6c, inset 0 0 0 2px #000, inset 0 0 16px rgba(228,188,108,.3), 0 0 10px rgba(228,188,108,.25); }
[data-layout] #menu .mcentro .mi.ativo img { filter: brightness(1.15) drop-shadow(0 0 5px rgba(242,196,90,.6)); }
[data-layout] #menu .mcentro .mi.ativo::after { content: '\25C6'; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  color: #e4bc6c; font-size: 10px; line-height: 10px; text-shadow: 0 0 4px #000; }

[data-layout] #recursos { display: flex; align-items: center; height: 42px; padding: 0 6px; border-radius: 4px;
  background: linear-gradient(#15130f, #090807); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5c4a2c, 0 0 0 3px #000, 0 6px 14px rgba(0,0,0,.6); }
[data-layout] #recursos > div { padding: 0 14px; }
[data-layout] #recursos > div + div { border-left: 1px solid rgba(92,74,44,.7); }
[data-layout] #recursos #ouroTopo b { color: #f2d48c; font: 600 16px/1 var(--font-mono); }
[data-layout] #recursos #coinsTopo b { color: #9fd0ff; font: 600 15px/1 var(--font-mono); }
[data-layout] #recursos img { width: 22px !important; height: 22px !important; }
[data-layout] #menu .mlado.dir { align-items: center; gap: 12px; }
[data-layout] #menu .mi.ouro { height: 42px; min-width: 64px; padding: 4px 10px; border-radius: 4px; gap: 3px; color: #f2d48c; font: 700 10px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(#2a2213, #100c06) !important; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6d3b, 0 0 0 3px #000 !important; border: 0 !important; }
[data-layout] #menu .mi.ouro:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e4bc6c, 0 0 0 3px #000, 0 0 10px rgba(228,188,108,.4) !important; }
[data-layout] #menu .mi.ouro img { width: 22px; height: 22px; }
/* menos largura: as abas encolhem; abaixo de 1250 ficam só com o ícone (o nome está no title) e a Loja · VIP também, mas nunca some */
@media (max-width: 1500px) {
  [data-layout] #menu { gap: 10px; padding: 0 10px !important; }
  [data-layout] #menu .mcentro .mi { min-width: 60px; padding: 5px 5px 4px; font-size: 9px; letter-spacing: .04em; }
  [data-layout] #topoMarca img { height: 38px !important; }
  [data-layout] #recursos > div { padding: 0 9px; }
}
@media (max-width: 1250px) {
  [data-layout] #menu { min-height: 54px; gap: 8px; padding: 0 8px !important; }
  [data-layout] #menu .mcentro .mi { min-width: 44px; height: 42px; padding: 4px 6px; gap: 0; font-size: 0; letter-spacing: 0; }
  [data-layout] #menu .mcentro .mi img { width: 26px; height: 26px; }
  [data-layout] #menu .mcentro .mi.ativo::after { bottom: -6px; }
  [data-layout] #menu .mi.ouro { min-width: 42px; height: 38px; padding: 4px; font-size: 0; gap: 0; }
  [data-layout] #topoMarca img { height: 32px !important; }
  [data-layout] #recursos { height: 38px; } [data-layout] #recursos > div { padding: 0 7px; } [data-layout] #recursos #ouroTopo b { font-size: 14px; } [data-layout] #recursos #coinsTopo b { font-size: 13px; }
}
@media (max-width: 1200px) {
  [data-layout] #acoes { --bt: 26px; } [data-layout] #acoes .grupo { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  [data-layout] #acoes .gnome { flex: 1 0 100%; } [data-layout] #acoes .support-skills { padding-left: 0 !important; border-left: 0 !important; }
}
@media (max-width: 1060px) { [data-layout] #topoMarca { display: none; } }

/* o botão único do cartão (Ficha do personagem): largo, ícone e rótulo em versalete; ouro vivo no hover */
.mb .bots .bt.ficha { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.mb .bots .bt.ficha img { width: 24px; height: 24px; image-rendering: pixelated; }