/* =====================================================================
   JOIAS À VISTA (30/09) — Bless, Soul, Chaos e Jewel of Dark sempre à vista.
   Pedido do autor (print do Android de um amigo): ninguém desce até o
   Inventário raro. Escolhas dele:
     - celular (até 900 px): opção B, uma linha dentro da barra de HP/MP,
       ABAIXO dos números de combate (#joiasVitais);
     - PC: opção C, uma pílula no topo, à direita, acima da arena (#joiasTopo).
   Os números vêm de src/ui/joias-a-vista.js. Tocar abre o Inventário raro.
   ===================================================================== */
.joias-vista:empty{display:none!important}
.joia-vista{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  color:#fff1c8;font:800 14px/1 var(--font-ui,Arial),Arial,sans-serif;font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
}
.joia-vista img{width:24px;height:24px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.joia-vista b{font-weight:800;text-shadow:0 1px 2px #000}
.joia-vista:focus-visible{outline:2px solid #f3cf7a;outline-offset:2px;border-radius:8px}

/* ---------- PC: pílula acima da arena, à direita ---------- */
@media (min-width:901px){
  #joiasVitais{display:none!important}
  #gameShell #joiasTopo{
    position:relative;z-index:4;box-sizing:border-box;
    display:flex;align-items:center;gap:4px;width:fit-content;height:32px;
    margin:6px 0 0 auto;padding:0 10px 0 6px;
    border:1px solid #6b5423;border-radius:999px;
    background:linear-gradient(180deg,#1d160b,#0f0c08);
    box-shadow:inset 0 1px 0 rgba(255,230,160,.08),0 4px 12px rgba(0,0,0,.35);
  }
  /* Divide a linha com o "Próxima liberação" (que vem logo depois, centrado).
     Sem ele, a pílula fica numa linha só dela e nada sobe por cima.
     (Sem :not dentro do :has: o android-telas-browser reprova, custa recalcular a página.) */
  #gameShell #joiasTopo{margin-bottom:-32px;top:3px}
  #gameShell #joiasTopo:has(+ #proximaLiberacao[hidden]){margin-top:6px;margin-bottom:14px;top:0}
  #gameShell #joiasTopo .joia-vista{padding:0 5px;font-size:13px}
  #gameShell #joiasTopo .joia-vista img{width:22px;height:22px}
  #gameShell #joiasTopo .joia-vista+.joia-vista{border-left:1px solid #2e2413;padding-left:8px}
  #gameShell #joiasTopo .joia-vista:hover b{color:#fff}
}
/* Tela de PC estreita: o "Próxima liberação" centrado encostaria na pílula; cada um na sua linha. */
@media (min-width:901px) and (max-width:1399px){
  #gameShell #joiasTopo{margin-top:6px;margin-bottom:0;top:0}
  #gameShell #joiasTopo:has(+ #proximaLiberacao[hidden]){margin-bottom:14px}
}

/* ---------- celular: linha dentro da barra de HP/MP, abaixo dos números ---------- */
@media (max-width:900px){
  #joiasTopo{display:none!important}
  #gameShell #battleVitalsStrip>#joiasVitais{
    grid-column:1/30;grid-row:5;
    display:flex;justify-content:space-around;align-items:center;gap:6px;
    padding:6px 6px 2px;margin-top:2px;border-top:1px solid #2a2112;
  }
  #gameShell #battleVitalsStrip>#joiasVitais .joia-vista{font-size:calc(15px * var(--text-scale,1));padding:2px 4px}
  #gameShell #battleVitalsStrip>#joiasVitais .joia-vista img{width:24px;height:24px}
}