/* =====================================================================
   JOIAS À VISTA (30/09) — Bless, Soul, Chaos, Life, Creation (29/10) 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:var(--cur-mao,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}
}

/* 29/10 (autor: "podemos subir de volta o menu das joias pra onde era antes acima da arena ... com isso o menu dos
   inimigos volta pro lugar de antes"). De 23/10 a 29/10 a pílula morou dentro da arena, em cima do quadro do inimigo.
   Ela volta para cima da arena, mas sem abrir linha: divide com o NOVIDADES a faixa que já existe (#novLinha,
   novidades.css), logo à esquerda dele. O quadro do inimigo volta ao alto da arena. */
@media (min-width:901px){
  #gameShell #novLinha{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;padding:0 16px}
  /* Com o "Próxima liberação" à vista, tudo numa linha só (autor 29/10: "não ficou tudo na mesma linha"): a faixa
     não ocupa altura e o "Próxima liberação" encosta à esquerda das joias, sem passar por baixo delas. A largura das
     joias + NOVIDADES vem do joias-a-vista.js (--faixa-dir); texto comprido demais termina em "…". */
  #gameShell #novLinha{height:0;margin-top:0}
  #gameShell #novLinha>*{translate:0 6px}
  #gameShell #novLinha:has(+ #proximaLiberacao[hidden]){height:40px}
  #gameShell #novLinha:has(+ #proximaLiberacao[hidden])>*{translate:none}
  #gameShell #avisoManutencao[hidden] ~ #proximaLiberacao{
    margin-left:auto;margin-right:calc(var(--faixa-dir,0px) + 26px);max-width:calc(100% - var(--faixa-dir,0px) - var(--faixa-esq,0px) - 60px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 29/10 (autor: "novidades não deve ficar no mesmo lugar das joias ali, move pro outro canto na esquerda"):
     o NOVIDADES vai para o canto esquerdo da faixa; as joias continuam no direito. */
  #gameShell #novLinha>.nov-botao{position:relative;right:auto;left:auto;top:0;flex:none;order:-1;margin-right:auto}
  #gameShell #novLinha>#joiasTopo{position:relative;top:0!important;margin:0!important;height:28px;flex:none}
  /* Com o aviso de manutenção no canto direito, as joias vão para a esquerda, logo depois do NOVIDADES. */
  #gameShell #avisoManutencao:not([hidden]) ~ #novLinha{justify-content:flex-start}
  #gameShell #avisoManutencao:not([hidden]) ~ #novLinha>.nov-botao{margin-right:0}
}

/* ---------- 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;
  }
  /* --encolhe (01/10): números inteiros, sem K; quando os 4 não cabem, a linha inteira encolhe junto (game.js, linhaQueCabe). */
  #gameShell #battleVitalsStrip>#joiasVitais .joia-vista{font-size:calc(15px * var(--text-scale,1) * var(--encolhe,1));padding:2px calc(4px * var(--encolhe,1));white-space:nowrap}
  #gameShell #battleVitalsStrip>#joiasVitais .joia-vista img{width:calc(24px * var(--encolhe,1));height:calc(24px * var(--encolhe,1))}
}