/* JANELA DA COMPRA (25/10, opção A "Relicário dourado"): src/ui/janela-compra.js.
   A janela é uma coluna: o meio (peça, título, recompensas) rola sozinho e o pé (VIP + RECEBER) fica sempre
   visível — na prévia o botão saía da tela no PC com texto em 130%. */
.modal-backdrop.col-janela-compra{z-index:1250;background:rgba(5,4,3,.72)}
.col-janela-compra .jc-jan{display:flex;flex-direction:column;width:min(480px,100%);max-height:calc(100vh - 24px);
  background:linear-gradient(180deg,#2a1d0e 0%,#140e08 45%,#0e0a06 100%);border:2px solid #c9a24a;border-radius:16px;
  box-shadow:0 0 0 1px #4a3615 inset,0 0 48px rgba(232,180,70,.35),0 24px 48px rgba(0,0,0,.7);color:#efe3c4;text-align:center;
  overflow:hidden;animation:jc-entra .35s ease-out}
@supports (height:100dvh){.col-janela-compra .jc-jan{max-height:calc(100dvh - 24px)}}
.col-janela-compra .jc-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 4px}
.col-janela-compra .jc-pe{flex:none;padding:10px 16px 14px;border-top:1px solid rgba(201,162,74,.22);background:rgba(10,7,4,.55)}
.col-janela-compra .jc-raios{position:relative;height:112px;margin:-4px auto 2px;display:grid;place-items:center}
.col-janela-compra .jc-raios:before{content:"";position:absolute;width:176px;height:176px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,214,120,.28) 0 8deg,transparent 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:jc-gira 24s linear infinite}
.col-janela-compra .jc-raios:after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,140,.55),transparent 70%)}
.col-janela-compra .jc-raios img{position:relative;z-index:1;max-height:104px;max-width:150px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,200,90,.7))}
.col-janela-compra .jc-sob{font-family:Cinzel,Georgia,serif;font-size:calc(11px * var(--text-scale, 1));letter-spacing:.22em;color:#e9c46a;font-weight:700}
.col-janela-compra h2{margin:4px 0 2px;font-family:Cinzel,Georgia,serif;font-size:calc(22px * var(--text-scale, 1));line-height:1.2;color:#ffe9b0;
  text-shadow:0 0 10px rgba(255,190,80,.5);overflow-wrap:anywhere}
.col-janela-compra .jc-prod{margin:0 0 12px;font-size:calc(12.5px * var(--text-scale, 1));line-height:1.4;color:#c4b28c;white-space:pre-line}
.col-janela-compra .jc-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;margin-bottom:6px}
.col-janela-compra .jc-t{min-width:0;background:linear-gradient(180deg,#22180c,#120d07);border:1px solid #5a4420;border-radius:10px;padding:7px 4px 8px;animation:jc-tile .4s ease-out backwards}
.col-janela-compra .jc-t:nth-child(2){animation-delay:.06s}.col-janela-compra .jc-t:nth-child(3){animation-delay:.12s}
.col-janela-compra .jc-t:nth-child(4){animation-delay:.18s}.col-janela-compra .jc-t:nth-child(n+5){animation-delay:.24s}
.col-janela-compra .jc-t.lend{border-color:#e7b84f;box-shadow:0 0 11px rgba(231,184,79,.35) inset}
.col-janela-compra .jc-t img{display:block;width:42px;height:42px;object-fit:contain;margin:0 auto 4px}
.col-janela-compra .jc-t b{display:block;font-size:calc(14px * var(--text-scale, 1));color:#ffe2a0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.col-janela-compra .jc-t span{display:block;font-size:calc(10.5px * var(--text-scale, 1));line-height:1.2;color:#bba783;overflow-wrap:anywhere}
.col-janela-compra .jc-vip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;text-align:left;background:linear-gradient(90deg,rgba(80,52,14,.55),rgba(30,20,8,.55));
  border:1px solid #6b4f1e;border-radius:11px;padding:9px 11px}
.col-janela-compra .jc-vip-arte{width:32px;height:32px;object-fit:contain;flex:none}
.col-janela-compra .jc-vip-tx{flex:1 1 140px;min-width:0}
.col-janela-compra .jc-vip-tx b{display:block;color:#ffd77a;font-size:calc(15px * var(--text-scale, 1))}
.col-janela-compra .jc-vip-tx small{display:block;color:#b9a682;font-size:calc(11px * var(--text-scale, 1));line-height:1.3}
.col-janela-compra .jc-subiu{background:linear-gradient(90deg,#f6d36b,#c48a2a);color:#2a1806;font-weight:800;font-size:calc(10.5px * var(--text-scale, 1));
  padding:3px 9px;border-radius:16px;letter-spacing:.05em;white-space:nowrap;animation:jc-pulsa 1.6s ease-in-out 2}
.col-janela-compra .jc-bar{flex:1 1 100%;height:11px;border-radius:16px;background:#0a0704;border:1px solid #4d391a;overflow:hidden;position:relative}
.col-janela-compra .jc-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#b8862c,#ffe08a);box-shadow:0 0 9px rgba(255,215,120,.8);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.col-janela-compra .jc-bl{flex:1 1 100%;display:flex;justify-content:space-between;gap:8px;font-size:calc(11px * var(--text-scale, 1));color:#bba783}
.col-janela-compra .jc-ok{display:block;width:100%;margin-top:10px;padding:11px;border-radius:10px;border:1px solid var(--botao-ouro-borda);background:var(--botao-ouro-fundo);
  color:var(--botao-ouro-texto);font-family:Cinzel,Georgia,serif;font-weight:800;font-size:calc(15px * var(--text-scale, 1));letter-spacing:.12em;cursor:var(--cur-mao,pointer)}
.col-janela-compra .jc-ok:hover{filter:brightness(1.08)}
.col-janela-compra .jc-ok:focus-visible{outline:2px solid #fff3c4;outline-offset:2px}
@media (max-width:600px){
  .col-janela-compra .jc-corpo{padding:12px 12px 4px}.col-janela-compra .jc-pe{padding:8px 12px 12px}
  .col-janela-compra .jc-raios{height:74px}.col-janela-compra .jc-raios:before{width:128px;height:128px}.col-janela-compra .jc-raios img{max-height:68px}
  .col-janela-compra h2{font-size:calc(19px * var(--text-scale, 1))}
  .col-janela-compra .jc-grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .col-janela-compra .jc-t{padding:5px 2px 6px}.col-janela-compra .jc-t img{width:32px;height:32px;margin-bottom:2px}
  .col-janela-compra .jc-t b{font-size:calc(12px * var(--text-scale, 1))}.col-janela-compra .jc-t span{font-size:calc(9px * var(--text-scale, 1))}
}
@media (max-height:640px){
  .col-janela-compra .jc-raios{height:64px}.col-janela-compra .jc-raios:before{width:110px;height:110px}.col-janela-compra .jc-raios img{max-height:58px}
}
/* Celular deitado / tela baixa e larga: recompensas à esquerda, VIP e RECEBER à direita (empilhado sobrava pouco espaço). */
@media (max-height:520px) and (min-width:620px){
  .col-janela-compra .jc-jan{flex-direction:row;width:min(780px,100%)}
  .col-janela-compra .jc-corpo{padding:10px 12px 8px}
  .col-janela-compra .jc-pe{width:min(300px,42%);display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:1px solid rgba(201,162,74,.22)}
  .col-janela-compra .jc-raios{height:52px}.col-janela-compra .jc-raios:before{width:96px;height:96px}.col-janela-compra .jc-raios img{max-height:48px}
  .col-janela-compra h2{font-size:calc(17px * var(--text-scale, 1))}.col-janela-compra .jc-prod{margin-bottom:8px}
  .col-janela-compra .jc-grade{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
}
@keyframes jc-entra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes jc-tile{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes jc-gira{to{transform:rotate(360deg)}}
@keyframes jc-pulsa{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  .col-janela-compra .jc-jan,.col-janela-compra .jc-t,.col-janela-compra .jc-subiu,.col-janela-compra .jc-raios:before{animation:none}
  .col-janela-compra .jc-bar i{transition:none}
}