/* Destruitor Idle — janela da Loja em moedas (public/loja.js), no formato da loja do Huntera.
   Usa as cores e as janelas do app.css. */

/* moeda da loja: a Tibia Coin do proprio Tibia (item 37317, nenhum monstro dropa); gold: pilha de gold coins */
.mo { display: inline-block; width: 22px; height: 22px; margin-right: 4px; vertical-align: -6px;
  background: url(itens/moeda_loja.png) center / contain no-repeat; image-rendering: pixelated; }
.mo.big { width: 30px; height: 30px; margin: 0; vertical-align: middle; }
.mo.huge { width: 48px; height: 48px; margin: 0; vertical-align: middle; }
.gp-ic { display: inline-block; width: 24px; height: 24px; vertical-align: -6px;
  background: url(itens/moeda_gold.png) center / contain no-repeat; image-rendering: pixelated; }
.g .g-coins { cursor: pointer; color: inherit; }
.g .g-coins:hover { border-color: #5fe0d2; }
.g .g-coins .mo { margin-right: 0; }

/* moldura dos icones (slot do Tibia): fundo escuro, borda dourada apagada e sombra por dentro */
.lj-fr { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 6px;
  background: radial-gradient(circle at 50% 38%, #2c3452 0%, #161b2c 62%, #0d1019 100%);
  border: 1px solid #5a4a26; box-shadow: inset 0 0 0 1px #0009, inset 0 3px 8px #000a, 0 1px 0 #ffffff0d; }
.lj-fr img, .lj-fr canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.lj-fr.xs { width: 22px; height: 22px; border-radius: 4px; }
.lj-fr.xs img { width: 20px; height: 20px; }
.lj-fr.sm { width: 34px; height: 34px; border-radius: 5px; }
.lj-fr.sm img, .lj-fr.sm canvas { width: 30px; height: 30px; }
.lj-fr.big { width: 60px; height: 60px; border-radius: 8px; }
.lj-fr.big img, .lj-fr.big canvas { width: 56px; height: 56px; }
.lj-fr.huge { width: 110px; height: 110px; border-radius: 10px; border-color: #7a6230; }
.lj-fr.huge img, .lj-fr.huge canvas { width: 96px; height: 96px; }

.modal.lj { width: min(1120px, calc(100vw - 16px)); height: min(800px, calc(100vh - 60px)); }
.modal.lj .modal-b { position: relative; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; padding: 12px; }
.modal.lj .modal-h { gap: 10px; }
.lj-sub { color: var(--dim); font-weight: 400; font-size: 13px; }
.lj-hbal { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lj-saldo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 6px; background: #0f1d22; border: 1px solid #1f4b4a; font-weight: 700; font-variant-numeric: tabular-nums; }
.lj-saldo .mo { margin-right: 2px; }
.g .lj-saldo button { width: 22px; height: 22px; border-radius: 4px; background: var(--gold); color: #1d1606; font-weight: 900; line-height: 1; }
.lj-prem { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 6px; background: #121624; border: 1px solid #2a3044; color: var(--dim); font-size: 12.5px; }
.lj-prem.on { color: var(--gold-2); border-color: #6b5626; background: #1d1a10; }

/* oferta em destaque */
.g .lj-hero { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; border-radius: 8px; text-align: left;
  background: linear-gradient(90deg, #2a2210 0%, #171b2a 55%, #121624 100%); border: 1px solid #6b5626; }
.g .lj-hero:hover { border-color: var(--gold); }
.lj-hcopy { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lj-hcopy small { color: var(--gold-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lj-hcopy b { font-size: 18px; color: #f3ead2; }
.lj-hcopy span { color: #c9c2ad; font-size: 13px; }
.lj-hgo { color: var(--gold-2); font-weight: 700; white-space: nowrap; }

/* categorias | lista | detalhe */
.lj-main { display: grid; grid-template-columns: 210px minmax(0, 1fr) 310px; gap: 10px; flex: 1; min-height: 0; }
.lj-cats { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.g .lj-cat { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border-radius: 6px; border: 1px solid #2c3346; background: #121624; color: #c9cfdd; font-weight: 600; font-size: 13px; text-align: left; }
.g .lj-cat:hover { border-color: #6b5626; }
.g .lj-cat.on { border-color: var(--gold); color: var(--gold-2); background: #1d1a10; }
.g .lj-cat.topup { background: #0f1d22; border-color: #1f4b4a; color: #a8efe6; }
.lj-cat > span:not(.lj-fr) { flex: 1; min-width: 0; }
.lj-cat em { font-style: normal; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

.lj-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.lj-lhead { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.lj-lhead b { font-size: 16px; color: #e6ecff; }
.lj-lhead span { grid-column: 1; color: var(--dim); font-size: 12.5px; }
.lj-lhead input { grid-column: 2; grid-row: 1 / span 2; width: 170px; padding: 6px 9px; font-size: 13px; }
.lj-ofs { display: grid; align-content: start; gap: 4px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.g .lj-of { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px;
  border-radius: 7px; background: #121624; border: 1px solid #2c3346; text-align: left; }
.g .lj-of:hover { border-color: #6b5626; }
.g .lj-of.on { border-color: var(--gold); background: #1d1a10; box-shadow: inset 0 0 0 1px #6b5626; }
.g .lj-of.dest:not(.on) { border-color: #5a4a26; }
.g .lj-of.tem { opacity: .7; }
.lj-oi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lj-oi b { font-size: 13.5px; color: #e9e2cf; }
.lj-oi small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lj-badge { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: #3d2b12; color: var(--gold-2); vertical-align: 1px; }
.lj-pr { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px; color: #f3ead2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lj-pr .mo { margin: 0; }
.lj-tem { font-size: 12px; color: var(--ok); font-weight: 700; white-space: nowrap; }
.lj-sop { font-size: 12px; color: var(--gold-2); font-weight: 700; white-space: nowrap; }

.lj-det { display: flex; flex-direction: column; min-height: 0; border: 1px solid #3a4258; border-radius: 8px; background: #121624; }
.lj-dbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.lj-eyebrow { color: var(--gold-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.lj-dname { font-size: 18px; color: #f3ead2; }
.lj-prev { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.lj-ddesc { margin: 0; color: #c9cfdd; font-size: 13.5px; }
.lj-cont { margin: 4px 0 0; padding-left: 18px; color: var(--dim); font-size: 12.5px; }
.lj-notice { margin: 6px 0 0; color: var(--gold-2); font-size: 13px; }
.lj-notice.ok { color: var(--ok); font-weight: 700; }
.lj-vars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.g .lj-var { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 6px; border: 1px solid #2c3346; background: #0d1019; font-size: 11px; color: #c9cfdd; }
.g .lj-var:hover { border-color: #6b5626; }
.g .lj-var.on { border-color: var(--gold); color: var(--gold-2); background: #1d1a10; }
/* arma de treino de outra vocacao (vinculada: nao treina com este personagem) */
.g .lj-var.off { opacity: .45; }
.g .lj-var.off.on { opacity: .8; border-color: #8a3a32; color: #ffb4aa; background: #2a1414; }
.lj-dact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #2c3346; }
.lj-dact > .lj-pr { margin-right: auto; font-size: 20px; }
.lj-dact > .lj-pr .mo { width: 28px; height: 28px; }
.lj-dact .lj-notice { width: 100%; margin: 0; text-align: right; }
.g .lj-comprar { min-width: 120px; }
.g .lj-dclose { display: none; }

/* rodape (como o do Huntera): saldo, comprar moedas, fechar */
.lj-foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #2c3346; background: #151a29; border-radius: 0 0 8px 8px; }
.lj-fsaldo { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); }
.lj-fsaldo b { color: #f3ead2; font-variant-numeric: tabular-nums; }
.lj-foot .grow { flex: 1; }
.lj-voltar { margin-bottom: 2px; }

/* Comprar moedas: termos e pacotes */
.lj-termos { max-width: 680px; margin: 0 auto; padding: 16px 18px; border: 1px solid #5a4a26; border-radius: 10px; background: #121624; overflow-y: auto; }
.lj-th { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lj-th b { font-size: 20px; color: #f3ead2; }
.lj-termos p { color: #c9cfdd; }
.lj-termos ul { padding-left: 20px; color: #c9cfdd; font-size: 13.5px; line-height: 1.5; }
.lj-termos li { margin: 4px 0; }
.lj-tbtns { justify-content: flex-end; }
.lj-moedas { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.lj-mhead { display: flex; flex-direction: column; gap: 2px; }
.lj-mhead b { font-size: 18px; color: #f3ead2; }
.lj-mhead span { color: var(--dim); font-size: 13px; }
.lj-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g .lj-mpack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 10px; border: 1px solid #2c3346;
  background: radial-gradient(circle at 50% 30%, #1e2540, #121624 70%); }
.g .lj-mpack:hover { border-color: #6b5626; }
.g .lj-mpack.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px #6b5626; background: radial-gradient(circle at 50% 30%, #3a2f15, #1d1a10 70%); }
.lj-pilha { width: 160px; max-width: 100%; height: auto; image-rendering: pixelated; }
.lj-mpack b { font-size: 16px; color: #f3ead2; font-variant-numeric: tabular-nums; }
.lj-mpack b small { font-size: 12px; color: var(--dim); font-weight: 400; }
.lj-mpack span { color: var(--gold-2); font-weight: 700; }
.lj-mpay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 8px; border: 1px solid #2c3346; background: #121624; }
.lj-mtot { flex: 1; color: #c9cfdd; }
.lj-aviso { align-self: flex-start; margin: 0; padding: 6px 10px; border-radius: 6px; background: #2a2210; border: 1px solid #6b5626; color: var(--gold-2); font-size: 13px; }

/* Suas compras */
.lj-hist { display: grid; align-content: start; gap: 4px; overflow-y: auto; min-height: 0; }
.lj-hrow { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px 100px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px; background: #121624; border: 1px solid #2c3346; font-size: 13px; }
.lj-hrow b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-st { font-size: 12px; color: var(--dim); }
.lj-st.devolvido { color: #ffb4aa; }
.lj-st.pendente { color: var(--gold-2); }
.lj-st.entregue, .lj-st.ok { color: var(--ok); }
.lj-v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-variant-numeric: tabular-nums; font-weight: 700; }
.lj-v .mo { margin: 0 0 0 2px; width: 18px; height: 18px; }
.lj-v.pos { color: var(--ok); }

/* confirmar a compra (por cima da loja e da janela do personagem) */
.lj-cbg { position: fixed; inset: 0; z-index: 40; background: #0008; }
.lj-confirm { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px));
  padding: 16px; border-radius: 10px; background: #151a29; border: 1px solid var(--gold); box-shadow: 0 20px 60px #000c; font-size: 14px; }
.lj-confirm b { display: block; font-size: 15.5px; color: #e6ecff; line-height: 1.35; }
.lj-confirm p { margin: 10px 0 0; }
.lj-err { color: #ffb4aa; }
.lj-cbtns { justify-content: flex-end; margin-top: 14px; }

@media (max-width: 1000px) and (min-width: 760px) {
  .lj-main { grid-template-columns: 170px minmax(0, 1fr) 260px; }
}
@media (max-width: 759px) {
  .modal.lj .modal-h .lj-sub, .lj-prem { display: none; }
  .lj-hero { padding: 8px; }
  .lj-hcopy b { font-size: 15px; }
  .lj-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lj-cats { flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .g .lj-cat { flex: none; }
  .lj-cat em { display: none; }
  .lj-det { display: none; }
  .lj-main.det .lj-det { display: flex; position: absolute; inset: 0; z-index: 5; }
  .g .lj-dclose { display: block; position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 6px; background: #262b3c; z-index: 1; }
  .lj-lhead input { width: 120px; }
  .lj-mgrid { grid-template-columns: repeat(2, 1fr); }
  .lj-hrow { grid-template-columns: 1fr auto; }
  .lj-hrow > .muted { grid-column: 1 / -1; }
  .lj-foot .lj-fsaldo { display: none; }
}
@media (max-width: 759px) { .g .g-pill.g-coins { display: flex; padding: 4px 8px; } }

/* aba Treino (treino.js): arma de exercicio no boneco da cidade */
.tr { display: flex; flex-direction: column; gap: 10px; }
.tr-head { display: flex; gap: 12px; align-items: flex-start; }
.tr-head b { font-size: 17px; color: #f3ead2; }
.tr-head p { margin: 4px 0 0; color: #c9cfdd; font-size: 13.5px; }
.tr-now { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gold); background: #1d1a10; }
.tr-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tr-info b { color: #f3ead2; }
.tr-info span { color: var(--dim); font-size: 12.5px; }
.tr-sk { display: flex; align-items: center; gap: 8px; }
.tr-bar { display: inline-block; width: 120px; height: 7px; border-radius: 4px; background: #0b0e16; border: 1px solid #2c3346; overflow: hidden; }
.tr-bar i { display: block; height: 100%; background: #6cc04a; }
.tr-list { display: grid; gap: 4px; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 7px; border: 1px solid #2c3346; background: #121624; }
.tr-row.tr-off-voc { opacity: .7; }
.tr-nao { color: #ffb4aa !important; font-size: 12px; }
.tr-vazio { padding: 16px; text-align: center; border: 1px dashed #3a4258; border-radius: 8px; }
.tr-vazio p { margin: 0 0 10px; color: #c9cfdd; }
.tr-off { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid #2c3346; background: #10131d; font-size: 12.5px; color: var(--dim); }
.tr-off b { color: #c9cfdd; font-size: 13px; }
.lj-confirm.tr-volta { width: min(440px, calc(100vw - 24px)); }
.tr-volta .tr-head p { font-size: 13px; }
.tr-ganhos { margin: 10px 0 0; padding-left: 20px; color: #c9cfdd; font-size: 13.5px; }