/* =====================================================================
   BAÚ DO HERÓI (01/11, pedido do autor, opção A "no chão"): fica no chão da batalha,
   com sombra, só quando tem algo para pegar (ganhos offline, Avançar grátis ou com JoD).
   Montado por bauRender() no game.js dentro do #monsterCard. Não cobre barra de skills,
   barra de EXP, orbes, painel do inimigo nem o MENU (tests/bau-heroi-browser.mjs).
   ===================================================================== */
/* 03/11 (autor, print: "mal posicionado, a sombra é diferente do personagem e fica flutuando"):
   - o FUNDO do baú encosta no chão: a margem transparente de cada arte é medida (BAU_ARTE_MEDIDA no game.js,
     --bau-pe / --bau-topo) e a arte desce até a linha do pé; sem pulinho;
   - a SOMBRA é a mesma dos heróis e monstros: a silhueta da própria arte deitada pela luz do mapa
     (--bau-luz-*, de COL_SWARM_RENDERER.LUZ_PADRAO + luzDoMapaAtual) e a mancha de contato debaixo do pé;
   - o rótulo fica EM CIMA do baú, e o baú saiu de perto do Gold (com Gold grande a caixa dele cobria o rótulo). */
#monsterCard>.bau-heroi{--bau-lado:70px;position:absolute;z-index:9;right:330px;bottom:58px;width:calc(var(--bau-lado) + 10px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  margin:0;padding:0;border:0;background:none;cursor:var(--cur-mao,pointer);font-family:inherit;-webkit-tap-highlight-color:transparent}
#monsterCard>.bau-heroi[hidden]{display:none!important}
#monsterCard>.bau-heroi.cheio{--bau-lado:82px}
.bau-heroi .bau-corpo{position:relative;flex:none;width:var(--bau-lado);height:calc((var(--bau-pe,1) - var(--bau-topo,0)) * var(--bau-lado));pointer-events:none}
.bau-heroi .bau-arte,.bau-heroi .bau-sombra-arte{position:absolute;left:0;bottom:calc((var(--bau-pe,1) - 1) * var(--bau-lado));
  width:var(--bau-lado);height:var(--bau-lado);max-width:none;object-fit:contain;pointer-events:none}
.bau-heroi .bau-arte{z-index:2;transition:filter .14s ease}
/* a silhueta deitada a partir do pé (a mesma receita do herói, src/visual/sombra-heroi.js): nasce um fio ACIMA do
   fundo, por baixo das moedas da frente (nunca abaixo delas), nítida no pé e mais clara longe dele */
.bau-heroi .bau-sombra-arte{z-index:1;transform-origin:50% calc((var(--bau-pe,1) - .035) * 100%);transform:var(--bau-luz-m,matrix(1,0,-.32,-.48,0,0));
  filter:brightness(0) blur(1px);opacity:var(--bau-luz-forca,.8);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.28) 0,rgba(0,0,0,.55) calc(var(--bau-pe,1) * 55%),#000 calc((var(--bau-pe,1) - .035) * 100%));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28) 0,rgba(0,0,0,.55) calc(var(--bau-pe,1) * 55%),#000 calc((var(--bau-pe,1) - .035) * 100%))}
/* a mancha de contato debaixo do pé (como .col-sombra-heroi-contato: meia largura x .24, um tico acima da linha do pé) */
.bau-heroi .bau-sombra{position:absolute;z-index:0;left:50%;bottom:0;width:96%;height:calc(var(--bau-lado) * .23);translate:-50% 37.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--bau-luz-cor,rgb(6,10,20)),rgba(0,0,0,0));opacity:var(--bau-luz-contato,.56)}
.bau-heroi .bau-rotulo{flex:none;white-space:nowrap;pointer-events:none;
  padding:2px 9px;border-radius:999px;border:1px solid #c9a04a;background:linear-gradient(#3a2a10,#1c1408);
  color:#ffe3a0;font:800 12px/1.25 system-ui,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.bau-heroi.jod .bau-rotulo{border-color:#b07be0;background:linear-gradient(#4a2370,#2a1043);color:#f0e0ff}
.bau-heroi:hover .bau-arte,.bau-heroi:focus-visible .bau-arte{filter:brightness(1.12)}
.bau-heroi:focus-visible{outline:2px solid #ffd979;outline-offset:2px;border-radius:10px}

/* Celular em pé: canto direito, acima da barra de skills e longe do corvo.
   04/11 (autor, foto: "o bau voltou a ficar em cima da mochila que tira os itens dropados na tela"): o canto de baixo
   à direita é o lugar da mochila do chão (atalhos.css, 44 px a 72 px do fim da arena); o baú fica logo acima dela,
   apareça ela ou não, para não pular de lugar. */
@media (max-width:600px){
  #monsterCard>.bau-heroi{--bau-lado:56px;right:6px;bottom:128px}
  #monsterCard>.bau-heroi.cheio{--bau-lado:64px}
  .bau-heroi .bau-rotulo{font-size:11px;padding:1px 7px}
}
/* Celular deitado (pouca altura): menor, no canto direito, ACIMA da caixa do Gold (com Gold grande ela cresce para a esquerda). */
@media (max-height:500px) and (min-width:601px) and (max-width:1024px){
  #monsterCard>.bau-heroi,#monsterCard>.bau-heroi.cheio{--bau-lado:48px;right:180px;bottom:94px}
  .bau-heroi .bau-rotulo{font-size:10.5px;padding:1px 6px}
}

/* ---------- O painel do baú ---------- */
.bau-painel-fundo{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(0,0,0,.62);padding:12px}
.bau-painel{--of-ouro:#d8a34a;--of-ouro2:#f3d58b;--of-tinta:#efe3c8;--of-tinta2:#b9a987;--of-linha:rgba(216,163,74,.3);
  position:relative;width:min(460px,calc(100vw - 24px));max-height:94dvh;overflow:auto;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#171310,#0c0a08);border:1px solid var(--of-linha);border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,220,160,.07);color:var(--of-tinta);text-align:left}
.bau-painel>h2{margin:14px 44px 2px 20px;font:700 19px/1.2 "Cinzel",Georgia,serif;color:var(--of-ouro2);letter-spacing:1px}
.com-offline .bau-painel>h2{display:none}
.bau-painel .bau-x{position:absolute;right:8px;top:6px;z-index:2;width:36px;height:36px;border:0;background:none;color:#c9a04a;font-size:20px;cursor:var(--cur-mao,pointer)}
.bau-painel .bau-resumo{font-size:14px;line-height:1.4;color:var(--of-tinta)}
.bau-painel .bau-sec{margin:10px 20px 4px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(0,0,0,.25)}
.bau-painel .bau-sec h3{margin:0 0 4px;font:600 11px/1.2 "Cinzel",Georgia,serif;letter-spacing:3px;color:var(--of-ouro)}
.bau-painel .bau-nota{margin:4px 0;font-size:12.5px;color:#b9a987}
.bau-painel>.bau-nota{margin:6px 20px}
.bau-painel .bau-depois{text-align:center;margin-top:-4px}
.bau-painel .bau-lista{list-style:none;margin:8px 0 2px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.bau-painel .bau-lista li{display:flex;align-items:center;gap:6px;font-size:14px;color:#d9ccb0}
.bau-painel .bau-lista li span{flex:1;min-width:0}
.bau-painel .bau-lista li b{color:var(--of-ouro2);font-variant-numeric:tabular-nums}
.bau-painel .bau-lista img{width:22px;height:22px;object-fit:contain}
.bau-painel .bau-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:48px;margin-top:10px;
  border:1px solid var(--botao-ouro-borda,#f0c860);border-radius:8px;background:var(--botao-ouro-fundo,linear-gradient(#e6b34a,#a8741c));
  color:var(--botao-ouro-texto,#2a1a04);font:700 16px/1 "Cinzel",Georgia,serif;letter-spacing:2px;cursor:var(--cur-mao,pointer);
  box-shadow:0 0 20px rgba(216,163,74,.25),inset 0 1px 0 rgba(255,236,180,.45)}
.bau-painel .bau-btn small{font:700 11px/1 system-ui,sans-serif;letter-spacing:0;opacity:.85}
.bau-painel .bau-btn.jod{background:linear-gradient(#5b2a8a,#341357);border-color:#b07be0;color:#f3e3ff;box-shadow:0 0 16px rgba(160,100,230,.3)}
.bau-painel .bau-btn:disabled{opacity:.55;cursor:var(--cur-seta,default);filter:grayscale(.4)}
.bau-painel .bau-coletar{width:calc(100% - 40px);margin:8px 20px 12px;flex:none}
.bau-painel .bau-falta{display:block;margin-top:4px;text-align:center}
.bau-painel .bau-precos{text-align:center;font-size:11.5px}
.bau-painel .bau-ocultar{align-self:center;margin:6px 20px 14px;padding:6px 10px;border:0;background:none;color:#a99a7c;font-size:12.5px;text-decoration:underline;cursor:var(--cur-mao,pointer)}
@media (max-width:430px){.bau-painel .bau-lista{grid-template-columns:1fr}}
/* Com o resumo offline, no PC a janela fica larga e em duas colunas, como a janela antiga (sem rolar). */
@media (min-width:900px) and (min-height:480px){
  .com-offline .bau-painel:has(.of-colunas.of-2){width:min(820px,calc(100vw - 48px))}
  .com-offline .bau-painel .bau-coletar{min-height:44px;margin:6px 20px 14px}
}