/* O armazém (pt-armazem.js), no estilo das telas REVIVAL PT: a janela à esquerda, a mochila
   nova (HUD novo) ao lado. Prefixo bau- (mm- é do minimapa, mw- do mapa do mundo, apr- do Aprimorar). */
#armazem.bau { --bau-ouro: #e9c27a; --bau-texto: #efe6d4; --bau-apagado: rgba(239,230,212,.55); --bau-borda: rgba(233,194,122,.3); --bau-ciano: #5fd8e6;
  position: fixed; left: 12px; top: calc(112px * var(--hn-k, 1)); z-index: 6; box-sizing: border-box; display: flex; flex-direction: column;
  width: 386px; max-height: calc((100vh - 12px) / var(--hn-k, 1) - 112px); padding: 0 18px 14px; overflow: hidden auto; transform: scale(var(--hn-k, 1)); transform-origin: 0 0;
  color: var(--bau-texto); font: 13px/1.3 "Segoe UI", system-ui, sans-serif; border-radius: 12px; border: 1px solid var(--bau-borda);
  background: radial-gradient(ellipse at 50% 0, rgba(95,216,230,.07), transparent 55%), linear-gradient(#211a14, #140f0b 60%, #110d0a);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 0 0 4px rgba(233,194,122,.06), 0 20px 50px rgba(0,0,0,.65);
  user-select: none; -webkit-user-select: none; touch-action: none; scrollbar-width: thin; scrollbar-color: rgba(233,194,122,.5) transparent; }
#armazem.bau[hidden] { display: none; }
#armazem.bau button { font: inherit; color: inherit; margin: 0; cursor: pointer; }
#armazem.bau p { margin: 0; }

.bau-cab { display: flex; align-items: center; gap: 10px; flex: none; height: 48px; }
.bau-cab h2 { margin: 0; flex: 1; font: 600 21px/1 "Cinzel", Georgia, serif; letter-spacing: .07em; font-variant: small-caps; text-shadow: 0 1px 3px #000; }
#armazem.bau .bau-redondo { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--bau-borda); background: rgba(0,0,0,.35);
  color: var(--bau-ouro); font: 700 13px/1 "Segoe UI", system-ui, sans-serif; }
#armazem.bau .bau-redondo:hover { border-color: var(--bau-ouro); }
#armazem.bau .bau-x { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(239,230,212,.7); font: 400 22px/1 system-ui, sans-serif; }
#armazem.bau .bau-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.bau-filete { position: relative; flex: none; height: 1px; margin: 0 -18px 12px; background: linear-gradient(90deg, transparent, rgba(233,194,122,.7) 18%, rgba(233,194,122,.7) 82%, transparent); }
.bau-filete::after { content: ''; position: absolute; left: 50%; top: 0; width: 15px; height: 15px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 3px;
  background: radial-gradient(circle at 35% 30%, #e6fdff, #5fd8e6 40%, #1f6fb0); box-shadow: 0 0 14px rgba(95,216,230,.8), 0 0 0 2px rgba(0,0,0,.6); }

.bau-barra { display: flex; align-items: center; justify-content: space-between; flex: none; margin-bottom: 10px; }
.bau-pilula { padding: 4px 12px; border-radius: 12px; border: 1px solid rgba(95,216,230,.55); background: rgba(10,40,50,.4); color: #bdeef4;
  font: 700 10.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bau-conta { color: var(--bau-apagado); font-size: 12px; font-variant-numeric: tabular-nums; }
.bau-conta b { color: var(--bau-texto); }

/* a grade 9 × 9 do jogo, desenhada com casas de 38 */
.bau-grade { position: relative; flex: none; width: 342px; height: 342px; margin: 0 auto; }
.bau-celulas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; }
.bau-celulas i { margin: 2px; border-radius: 5px; border: 1px solid rgba(233,194,122,.13); background: radial-gradient(circle, rgba(60,46,32,.45), rgba(15,11,8,.75)); }
.bau-itens { position: absolute; inset: 0; }
#armazem.bau .bau-item { position: absolute; box-sizing: border-box; padding: 3px; cursor: pointer; overflow: visible; border-radius: 5px; }
#armazem.bau .bau-item:hover { background: rgba(233,194,122,.12); box-shadow: inset 0 0 0 1px rgba(233,194,122,.45); }
#armazem.bau .bau-item img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
#armazem.bau .bau-item b { right: 3px; bottom: 2px; font: 700 10px/1 "Segoe UI", system-ui, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
.bau-cor { position: absolute; pointer-events: none; border-radius: 5px; }
.bau-cor[hidden] { display: none; }
.bau-cor.bau-cabe { background: rgba(95,216,230,.25); box-shadow: inset 0 0 0 1px rgba(95,216,230,.7); }
.bau-cor.bau-troca { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.bau-cor.bau-nao { background: rgba(224,112,90,.3); box-shadow: inset 0 0 0 1px rgba(224,112,90,.8); }

.bau-peso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; flex: none; margin: 8px 2px 0; font-size: 11.5px; }
.bau-peso span { color: var(--bau-apagado); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; font-size: 10.5px; }
.bau-peso i { height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.bau-peso u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #5fd8e6, #1f6fb0); }
.bau-peso u.bau-cheio { background: linear-gradient(90deg, #e6a04a, #e0705a); }
.bau-peso b { font-variant-numeric: tabular-nums; }

.bau-bts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; margin-top: 10px; }
#armazem.bau .bau-bt { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--bau-borda); background: rgba(0,0,0,.35); white-space: nowrap;
  font: 700 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
#armazem.bau .bau-bt:hover { border-color: var(--bau-ouro); }
#armazem.bau .bau-bt.bau-dourado { color: #3a2a12; border-color: transparent; background: linear-gradient(#f3d89c, #d2a65a 55%, #b88a42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.5); }
#armazem.bau .bau-bt.bau-dourado:hover { filter: brightness(1.1); }
.bau-dica { flex: none; margin: 6px 0 8px !important; color: var(--bau-apagado); font-size: 11px; text-align: center; }

.bau-ouros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; padding-top: 10px; border-top: 1px solid rgba(233,194,122,.15); }
.bau-valor { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(233,194,122,.2); background: rgba(0,0,0,.3); }
.bau-valor::before { content: ''; grid-row: 1 / 3; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c4, #e9c27a 45%, #9a6f2c); }
.bau-valor small { color: var(--bau-apagado); font: 700 10px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.bau-valor b { font-size: 15px; font-variant-numeric: tabular-nums; }
.bau-ouro-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px; flex: none; margin-top: 8px; }
.bau-ouro-linha input { min-width: 0; height: 32px; box-sizing: border-box; padding: 0 12px; border-radius: 16px; border: 1px solid var(--bau-borda); outline: 0;
  background: rgba(0,0,0,.35); color: var(--bau-texto); font: 13px/1 "Segoe UI", system-ui, sans-serif; user-select: text; }
.bau-ouro-linha input:focus { border-color: var(--bau-ouro); }
.bau-ouro-linha input::placeholder { color: var(--bau-apagado); }

.bau-ajuda { position: absolute; left: 18px; right: 18px; top: 60px; z-index: 2; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--bau-borda);
  background: linear-gradient(#251d15, #15100b); box-shadow: 0 14px 34px rgba(0,0,0,.7); }
.bau-ajuda[hidden] { display: none; }
.bau-ajuda h3 { margin: 0 0 8px; font: 600 15px/1.2 "Cinzel", Georgia, serif; color: var(--bau-ouro); }
.bau-ajuda p { margin: 0 0 8px !important; color: rgba(239,230,212,.85); font-size: 12.5px; line-height: 1.45; }

/* com o armazém aberto, a janela nova da mochila vai para a direita dele */
body:has(#armazem.bau:not([hidden])) #inv.iv-janela { left: calc(12px + 398px * var(--hn-k, 1)); transform: scale(var(--hn-k, 1)); transform-origin: 0 0; }
#armazem.bau .bau-ouro-linha .bau-bt { padding: 0 10px; }