/* =====================================================================
   EQUIPAMENTOS B — o painel de equipamentos da batalha (escolha do autor, 29/09)
   ---------------------------------------------------------------------
   Pedido do autor: "a aba equipamentos na tela principal de batalha tá muito
   amadora e não combina mais com o resto do game". Das opções A/B/C ele escolheu
   a B ("a B fica maneira"): os 7 espaços numa fileira no MEIO da tela (entre
   Skills e Combate), com a arte grande, a seta verde ▲ de "melhor na mochila",
   uma faixa com o item escolhido (nome, atributos, EQUIPAR MELHOR / RETIRAR) e
   o quadro do Set embaixo. Mesmo acabamento do Combate B e do Inventário C.

   Só visual: os botões chamam as mesmas funções de antes (game.js,
   renderEquipmentSlot / renderEquipmentDetail). A arena não é tocada.
   tests/equipamentos-b-contract.mjs vigia isso.
   ===================================================================== */

#gameShell .eqb-card{
  --eqb-ouro:#f3cf7a;--eqb-ouro-2:#b8913f;--eqb-ouro-escuro:#6b5426;--eqb-linha:#3d311a;--eqb-texto:#f1e2b8;--eqb-texto-2:#b8a984;
  display:grid;gap:10px;padding:14px!important;min-width:0;color:var(--eqb-texto);
}
#gameShell .eqb-card .r-common{--rc:var(--rarity-common,#a8b0bd)}
#gameShell .eqb-card .r-uncommon{--rc:var(--rarity-uncommon,#5fd07a)}
#gameShell .eqb-card .r-rare{--rc:var(--rarity-rare,#4c9bff)}
#gameShell .eqb-card .r-epic{--rc:var(--rarity-epic,#b36bff)}
#gameShell .eqb-card .r-legendary{--rc:var(--rarity-legendary,#ffb02e)}
#gameShell .eqb-card .r-ancient{--rc:#6ff0b0}

/* cabeçalho: ícone, título com x/7 e o liga/desliga do Auto Equip */
#gameShell .eqb-cab{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
#gameShell .eqb-icone{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--eqb-linha);background:#0d0a06;font-style:normal;font-size:18px}
#gameShell .eqb-icone img{width:26px;height:26px;object-fit:contain}
#gameShell .eqb-titulo{flex:1 1 auto;min-width:0}
#gameShell .eqb-titulo .eyebrow{display:block;margin:0;font-size:calc(10px * var(--text-scale,1));letter-spacing:.18em;font-weight:800;color:var(--eqb-texto-2)}
#gameShell .eqb-titulo h2{margin:1px 0 0!important;font-size:calc(18px * var(--text-scale,1))!important;line-height:1.15;color:var(--eqb-ouro)!important;letter-spacing:.04em!important;white-space:nowrap}
#gameShell .eqb-titulo h2 small{margin-left:4px;font-family:inherit;font-size:calc(11px * var(--text-scale,1));font-weight:800;color:var(--eqb-texto-2);letter-spacing:.06em}
#gameShell #autoEquipButton.eqb-auto{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px 6px 8px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--eqb-ouro-escuro);background:#1c1710;color:var(--eqb-texto-2);box-shadow:none;
  font-size:calc(10.5px * var(--text-scale,1));font-weight:900;letter-spacing:.08em;
}
/* o interruptor desenhado (o texto AUTO EQUIP: ON/OFF continua o mesmo, traduzido) */
#gameShell #autoEquipButton.eqb-auto::before{content:"";flex:0 0 auto;width:28px;height:16px;border-radius:9px;border:1px solid var(--eqb-linha);
  background:radial-gradient(circle at 8px 50%,#7c6a48 0 5px,transparent 5.5px),#0a0806}
#gameShell #autoEquipButton.eqb-auto.active{border-color:#2f7a4a;background:#12281a;color:#bff0cc}
#gameShell #autoEquipButton.eqb-auto.active::before{border-color:#2f7a4a;background:radial-gradient(circle at 19px 50%,#5fe08a 0 5px,transparent 5.5px),#0c2415}
#gameShell #autoEquipButton.eqb-auto:hover{filter:brightness(1.12)}
#gameShell #autoEquipButton.eqb-auto:focus-visible{outline:2px solid var(--eqb-ouro);outline-offset:2px}
#gameShell #autoEquipButton.eqb-auto .col-icone{display:inline-grid;place-items:center;width:16px;height:16px;font-style:normal;font-size:13px;line-height:1}
#gameShell #autoEquipButton.eqb-auto .col-icone-img{width:16px;height:16px;object-fit:contain}

/* a fileira dos 7 espaços */
#gameShell .eqb-fileira{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:10px;border-radius:12px;min-width:0;
  background:radial-gradient(60% 80% at 50% 50%,rgba(224,173,76,.08),transparent 70%),#0d0a06;border:1px solid var(--eqb-linha)}
#gameShell .eqb-slot{position:relative;min-width:0;aspect-ratio:1;max-height:124px;border-radius:10px;overflow:hidden;cursor:pointer;padding:0;
  border:1px solid color-mix(in srgb,var(--rc,#4a3b1c) 75%,#000);
  background:radial-gradient(90% 90% at 50% 65%,color-mix(in srgb,var(--rc,#2a2112) 24%,#0f0c08) 0%,#0c0a07 78%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 -14px 18px -10px color-mix(in srgb,var(--rc,#000) 30%,transparent);
  transition:filter .15s ease,box-shadow .15s ease}
#gameShell .eqb-slot:hover{filter:brightness(1.15)}
#gameShell .eqb-slot:focus-visible{outline:2px solid var(--eqb-ouro);outline-offset:2px}
#gameShell .eqb-slot.sel{outline:2px solid var(--eqb-ouro);outline-offset:2px;box-shadow:0 0 16px rgba(243,207,122,.35)}
#gameShell .eqb-slot.vazio{border-style:dashed;border-color:#3d311a;background:#0c0a07}
#gameShell .eqb-slot.upgrade-available{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(95,224,138,.35)}
#gameShell .eqb-slot.upgrade-available.sel{box-shadow:0 0 16px rgba(95,224,138,.35)}
#gameShell .eqb-slot>.slot-visual{position:absolute;inset:0;display:grid;place-items:center;min-width:0;padding:0;margin:0;border:0;background:none}
#gameShell .eqb-slot .equipment-item-art{width:72%;height:72%;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 2px 3px #000);pointer-events:none;margin:0 0 8px}
#gameShell .eqb-slot .equipment-item-art[src*="absolut-sword-of-archangel"]{transform:scale(1.3);transform-origin:center}
#gameShell .eqb-slot .equipment-art-placeholder{color:#5b4c2c;font-size:22px;margin-bottom:8px}
#gameShell .eqb-slot .slot-title{position:absolute;left:0;right:0;bottom:4px;margin:0;padding:0 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:calc(9px * var(--text-scale,1))!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--eqb-texto-2);text-shadow:0 1px 2px #000;background:none;border:0}
#gameShell .eqb-mais{position:absolute;left:6px;top:4px;font-size:calc(11px * var(--text-scale,1));font-weight:900;color:var(--eqb-ouro);text-shadow:0 1px 2px #000;pointer-events:none}
#gameShell .eqb-seta{position:absolute;right:6px;top:3px;font-size:12px;font-weight:900;color:#5fe08a;text-shadow:0 1px 2px #000,0 0 8px #5fe08a;pointer-events:none}

/* a faixa do item escolhido */
#gameShell .eqb-detalhe{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-width:0;padding:9px 12px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--rc,#3d311a) 45%,#2a2112);background:#0f0c08}
#gameShell .eqb-detalhe:empty{display:none}
#gameShell .eqb-det-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;background:#0c0a07;border:1px solid color-mix(in srgb,var(--rc,#3d311a) 60%,#000)}
#gameShell .eqb-det-ico img{width:84%;height:84%;object-fit:contain}
#gameShell .eqb-det-ico .equipment-art-placeholder{color:#5b4c2c;font-size:20px}
#gameShell .eqb-det-txt{display:grid;gap:2px;min-width:0}
#gameShell .eqb-det-txt>b{font-size:calc(14px * var(--text-scale,1));color:var(--rc,var(--eqb-texto));overflow-wrap:anywhere;overflow:hidden;line-height:1.2}
#gameShell .eqb-detalhe.vazio .eqb-det-txt>b{color:var(--eqb-texto-2)}
#gameShell .eqb-det-txt>small{font-size:calc(11.5px * var(--text-scale,1));color:#cdbf9e;line-height:1.35}
#gameShell .eqb-rar{display:inline-block;margin-right:4px;padding:0 6px;border-radius:6px;border:1px solid color-mix(in srgb,var(--rc,#6b5426) 55%,#000);color:var(--rc,var(--eqb-texto-2));
  font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
#gameShell .eqb-melhor{font-style:normal;font-weight:800;font-size:calc(11.5px * var(--text-scale,1));color:#5fe08a;overflow-wrap:anywhere}
#gameShell .eqb-detalhe .eqb-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:0}
#gameShell .eqb-detalhe .eqb-acoes:empty{display:none}
#gameShell .eqb-detalhe .eqb-acoes button{min-height:34px;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--eqb-ouro-escuro);background:linear-gradient(180deg,#2a2113,#1a140b);color:var(--eqb-texto);box-shadow:none;
  font-size:calc(11px * var(--text-scale,1));font-weight:900;letter-spacing:.08em}
#gameShell .eqb-detalhe .eqb-acoes button.slot-best-button{border-color:#2f7a4a;background:linear-gradient(180deg,#1f5a36,#133a23);color:#d8ffe4}
#gameShell .eqb-detalhe .eqb-acoes button:hover{filter:brightness(1.15)}

/* o quadro do Set, no mesmo dourado */
#gameShell .eqb-card>.set-bonus-panel{margin:0;padding:9px 12px;border-radius:10px;border:1px solid var(--eqb-linha);background:#110e0a}
#gameShell .eqb-card>.set-bonus-panel.active{border-color:var(--eqb-ouro-escuro);background:#1c1710}
#gameShell .eqb-card>.set-bonus-panel .set-bonus-label{color:var(--eqb-texto-2)}
#gameShell .eqb-card>.set-bonus-panel.active .set-bonus-label{color:var(--eqb-ouro-2)}
#gameShell .eqb-card>.set-bonus-panel strong{color:var(--eqb-texto)}
#gameShell .eqb-card>.set-bonus-panel.active strong{color:var(--eqb-ouro)}
#gameShell .eqb-card>.set-bonus-panel small{color:#cdbf9e}

/* celular e telas estreitas: a fileira aperta; os nomes dos espaços somem (fica a arte) e os botões descem */
@media (max-width:699px){
  #gameShell .eqb-card{padding:10px!important;gap:8px}
  #gameShell .eqb-fileira{gap:4px;padding:6px}
  #gameShell .eqb-slot{border-radius:8px}
  #gameShell .eqb-slot .slot-title{display:none}
  #gameShell .eqb-slot .equipment-item-art,#gameShell .eqb-slot .equipment-art-placeholder{margin:0;width:80%;height:80%}
  #gameShell .eqb-slot .equipment-art-placeholder{display:grid;place-items:center}
  #gameShell .eqb-mais{left:3px;top:1px;font-size:calc(9.5px * var(--text-scale,1))}
  #gameShell .eqb-seta{right:3px;top:0;font-size:10px}
  #gameShell .eqb-detalhe{grid-template-columns:44px minmax(0,1fr);padding:8px 10px}
  #gameShell .eqb-det-ico{width:44px;height:44px}
  #gameShell .eqb-detalhe .eqb-acoes{grid-column:1/-1}
  #gameShell .eqb-detalhe .eqb-acoes button{flex:1}
}
@media (prefers-reduced-motion:reduce){ #gameShell .eqb-slot{transition:none} }