/* =====================================================================
   PAINEL DA RELÍQUIA NOVO (03/10). Desenho: src/ui/reliquia-nova.js.
   Mesma linguagem do Painel do Personagem B / Contratos: carvão, ouro para
   ação, títulos em Cinzel, abas sublinhadas. As abas Crystal Sanctum e
   Crystal Guardian (Dungeon B) mantêm o miolo; só ganham a moldura nova.
   Carregado depois de relic.css e dungeon-b.css.
   ===================================================================== */
#relicModal{--rq-ouro:#d8a34a;--rq-ouro2:#f3d58b;--rq-tinta:#efe3c8;--rq-tinta2:#a99c80;--rq-linha:rgba(216,163,74,.28);--rq-caixa:#13151d;--rq-caixa2:#0e1016;--rq-verde:#6fcf7f;--rq-tit:"Cinzel",Georgia,serif;--rq-roxo:#b58cff}
#relicModal .relic-modal-card.rq-on{width:min(900px,96vw);padding:0;border:1px solid var(--rq-linha);border-radius:16px;background:linear-gradient(180deg,#171a24,#0d0f15);box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);overflow-x:hidden}
#relicModal .rq-on .modal-title-row{padding:18px 22px 12px;margin:0;align-items:flex-start;background:radial-gradient(70% 160% at 0% 0%,rgba(140,80,220,.18),transparent 60%)}
#relicModal .rq-on .modal-title-row .dev-overline{color:var(--rq-ouro);letter-spacing:.2em;font-size:calc(10px * var(--text-scale,1))}
#relicModal .rq-on .modal-title-row h2 img.rq-tit-ic{width:1.1em;height:1.1em;object-fit:contain;vertical-align:-.18em;margin-right:6px;filter:drop-shadow(0 0 6px rgba(181,140,255,.6))}
#relicModal .rq-on .modal-title-row h2{font-family:var(--rq-tit);font-size:calc(26px * var(--text-scale,1));color:#fff;margin:2px 0 2px;letter-spacing:.02em}
#relicModal .rq-on .modal-title-row p{color:var(--rq-tinta2);font-size:calc(12px * var(--text-scale,1));margin:0}
#relicModal .rq-on .modal-close-button{width:38px;height:38px;flex:0 0 38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff}
#relicModal .rq-on .relic-tabs{display:flex;gap:4px;margin:0;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.07);background:#0f1116;overflow-x:auto;scrollbar-width:none}
#relicModal .rq-on .relic-tabs::-webkit-scrollbar{display:none}
#relicModal .rq-on .relic-tabs button,#relicModal .rq-on .relic-tabs button:hover{flex:0 0 auto;min-height:0;padding:13px 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:var(--rq-tinta2);font-family:var(--rq-tit);font-size:calc(12px * var(--text-scale,1));letter-spacing:.1em;white-space:nowrap}
#relicModal .rq-on .relic-tabs button:hover{color:var(--rq-tinta)}
#relicModal .rq-on .relic-tabs button.active{color:#fff;border-bottom-color:var(--rq-ouro);background:linear-gradient(0deg,rgba(216,163,74,.12),transparent)}
#relicModal .rq-on #relicOverviewPanel,#relicModal .rq-on #relicUpgradePanel{display:none!important}
#relicModal .rq-on .dungeon-b-panel{margin:16px 22px 22px}
#relicModal .rq-on[data-aba="sanctum"] .modal-title-row>div,#relicModal .rq-on[data-aba="guardian"] .modal-title-row>div{visibility:visible;height:auto;overflow:visible}
#relicModal .rq-on[data-aba="sanctum"],#relicModal .rq-on[data-aba="guardian"]{width:min(900px,96vw)}
#rqNovo[hidden]{display:none}
.rq{padding:18px 22px 22px;color:var(--rq-tinta);font-size:calc(13px * var(--text-scale,1))}
.rq *{box-sizing:border-box;min-width:0}
.rq small,.rq span,.rq b,.rq p{overflow-wrap:anywhere}

/* peças comuns */
.rq-pips{display:flex;gap:4px;justify-content:center;margin-top:8px}
.rq-pips i{width:14px;height:6px;border-radius:3px;background:#2a2d38;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.rq-pips i.on{background:linear-gradient(90deg,var(--rq-ouro),var(--rq-ouro2));box-shadow:0 0 6px rgba(216,163,74,.5)}
.rq-pips i.alto:not(.on){background:#2d2238}
.rq-pips i.alto.on{background:linear-gradient(90deg,#c58bff,#f0d9ff);box-shadow:0 0 6px rgba(181,140,255,.6)}
.rq-cartao{padding:16px;border:1px solid var(--rq-linha);border-radius:14px;background:var(--rq-caixa)}
.rq-cartao-topo{display:grid;gap:2px;margin-bottom:12px}
.rq-cartao-topo span,.rq-sub{color:var(--rq-ouro);font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.18em}
.rq-cartao-topo strong{font-family:var(--rq-tit);font-size:calc(20px * var(--text-scale,1));color:#fff}
.rq-cartao-topo .verde{color:var(--rq-verde);font-size:calc(12px * var(--text-scale,1))}
.rq-chance{margin:4px 0 12px}
.rq-chance-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rq-chance-top span{color:var(--rq-tinta2);font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.18em}
.rq-chance-top strong{color:var(--rq-ouro2);font-size:calc(18px * var(--text-scale,1))}
.rq-barra{display:flex;height:8px;margin:5px 0 4px;border-radius:4px;background:#24262f;overflow:hidden}
.rq-barra i{height:100%;background:linear-gradient(90deg,#b07c2c,var(--rq-ouro2))}.rq-barra i.pity{background:linear-gradient(90deg,#8c5bd6,#d3b4ff)}
.rq-chance small{color:var(--rq-tinta2);font-size:calc(11px * var(--text-scale,1))}
.rq-nota{margin:0 0 12px;color:var(--rq-tinta2);font-size:calc(11.5px * var(--text-scale,1));line-height:1.45}.rq-nota b{color:#ff9d8c}.rq-nota.ok{color:var(--rq-verde)}
.rq-botao{display:block;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--botao-ouro-borda);border-radius:12px;background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);font-family:var(--rq-tit);font-size:calc(15px * var(--text-scale,1));font-weight:700;letter-spacing:.1em;cursor:var(--cur-mao,pointer);box-shadow:0 6px 18px rgba(216,163,74,.25)}
.rq-botao:hover:not(:disabled){filter:brightness(1.08)}
.rq-botao:disabled{border-color:rgba(216,163,74,.25);background:rgba(216,163,74,.08);color:rgba(239,227,200,.4);box-shadow:none;cursor:not-allowed}

/* ---------- OPÇÃO B: estandarte + duas colunas ---------- */
.rq{padding-top:0}
.rq .rq-estandarte{display:flex;align-items:center;gap:16px;margin:0 -22px 18px;padding:16px 22px;border-bottom:2px solid var(--rq-ouro);background:linear-gradient(90deg,rgba(90,40,150,.35),transparent 60%),radial-gradient(90% 140% at 8% 100%,rgba(216,163,74,.22),transparent 60%),#12110f}
.rq .rq-estandarte-arte{flex:0 0 96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(216,163,74,.3),transparent 70%)}
.rq .rq-estandarte-arte img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.8))}
.rq .rq-estandarte-txt{flex:1 1 auto}
.rq .rq-estandarte-txt small{color:var(--rq-ouro);font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.18em}
.rq .rq-estandarte-txt h3{margin:2px 0 4px;font-family:var(--rq-tit);font-size:calc(28px * var(--text-scale,1));color:#fff}
.rq .rq-estandarte-txt h3 em{font-style:normal;color:var(--rq-ouro2)}
.rq .rq-estandarte-txt p{margin:0;color:var(--rq-tinta);font-size:calc(12px * var(--text-scale,1));line-height:1.45}
.rq .rq-fichas{display:flex;gap:8px;flex:0 0 auto}
.rq .rq-fichas>div{min-width:84px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.35);text-align:right}
.rq .rq-fichas span{display:block;color:var(--rq-tinta2);font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.15em}
.rq .rq-fichas strong{display:block;margin-top:2px;color:#fff;font-size:calc(18px * var(--text-scale,1))}
.rq .rq-fichas .ouro{border-color:var(--rq-linha)}.rq .rq-fichas .ouro strong{color:var(--rq-ouro2)}
.rq .rq-colunas{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.rq .rq-sub{margin-bottom:8px}
.rq .rq-cartas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rq-carta{position:relative;display:grid;justify-items:center;gap:3px;padding:26px 4px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:var(--rq-caixa2);text-align:center}
.rq-carta img{width:54px;height:54px;object-fit:contain}
.rq-carta b{font-family:var(--rq-tit);font-size:calc(12px * var(--text-scale,1));color:var(--rq-tinta)}
.rq-carta small{font-size:calc(10px * var(--text-scale,1));color:var(--rq-tinta2)}
.rq-num{position:absolute;left:8px;top:6px;font-family:var(--rq-tit);font-weight:700;color:var(--rq-ouro);font-size:calc(12px * var(--text-scale,1))}
.rq-selo{position:absolute;right:6px;top:6px;padding:1px 6px;border-radius:6px;background:var(--rq-ouro);color:#1a1206;font-size:calc(8.5px * var(--text-scale,1));font-weight:900;letter-spacing:.06em}
.rq-selo.feita{background:var(--rq-verde)}.rq-selo.bloq{background:transparent;padding:0}
.rq-carta.atual{border-color:var(--rq-ouro);background:linear-gradient(180deg,rgba(216,163,74,.16),rgba(216,163,74,.02));box-shadow:0 0 18px rgba(216,163,74,.18)}
.rq-carta.atual b{color:#fff}.rq-carta.atual small{color:var(--rq-ouro2);font-weight:800}
.rq-carta.feita{border-color:rgba(111,207,127,.35)}.rq-carta.feita small{color:var(--rq-verde)}
.rq-carta.futura img{filter:grayscale(1) brightness(.45)}.rq-carta.futura b{color:var(--rq-tinta2)}
.rq .rq-pips{margin:12px 0 10px}
.rq-linhas{display:grid;gap:8px;margin-bottom:12px}
.rq-linha{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:var(--rq-caixa2)}
.rq-linha img{width:36px;height:36px;object-fit:contain}
.rq-linha-txt{display:grid;gap:2px}
.rq-linha-txt b{color:#fff;font-size:calc(12.5px * var(--text-scale,1))}
.rq-linha-txt small{color:var(--rq-tinta2);font-size:calc(10.5px * var(--text-scale,1));line-height:1.3}
.rq-linha-txt i{display:block;height:4px;margin-top:3px;border-radius:2px;background:linear-gradient(90deg,#b07c2c,var(--rq-ouro2)) 0/var(--p) 100% no-repeat,#24262f}
.rq-linha em{font-style:normal;font-weight:900;color:#ff8f7e;font-size:calc(12.5px * var(--text-scale,1));white-space:nowrap}
.rq-linha.ok{border-color:rgba(111,207,127,.3);background:linear-gradient(90deg,rgba(111,207,127,.07),transparent)}
.rq-linha.ok em{color:var(--rq-verde)}.rq-linha.ok .rq-linha-txt i{background:linear-gradient(90deg,#3f9a52,var(--rq-verde))}

/* ressonância (o painel antigo falava dela junto da passiva) */
.rq-ressonancia{display:grid;gap:3px;padding:10px 12px;border:1px solid rgba(255,80,100,.28);border-radius:10px;background:linear-gradient(90deg,rgba(255,55,80,.08),transparent)}
.rq-ressonancia b{color:#ff9aa8;font-size:calc(11px * var(--text-scale,1));letter-spacing:.08em}
.rq-ressonancia span{color:var(--rq-tinta2);font-size:calc(11.5px * var(--text-scale,1));line-height:1.4}

/* o que melhora no próximo passo (pedido do autor ao escolher a B) */
.rq-melhora{display:grid;gap:5px;margin-bottom:12px}
.rq-melhora-cab,.rq-melhora-l{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) calc(16px * var(--text-scale,1)) minmax(0,1fr);align-items:center;gap:8px}
.rq-melhora-cab{padding:0 10px}
.rq-melhora-cab span{color:var(--rq-tinta2);font-size:calc(9px * var(--text-scale,1));font-weight:900;letter-spacing:.14em}
.rq-melhora-l{padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:var(--rq-caixa2)}
.rq-melhora-l span{color:var(--rq-tinta2);font-size:calc(11.5px * var(--text-scale,1));line-height:1.25}
.rq-melhora-l b{color:#fff;font-size:calc(13px * var(--text-scale,1));line-height:1.25}.rq-melhora-l b.sobe{color:var(--rq-verde)}
.rq-melhora-l i{font-style:normal;color:var(--rq-ouro);text-align:center}
.rq-melhora-desc{margin:2px 0 0;padding:0 10px;color:var(--rq-tinta2);font-size:calc(11px * var(--text-scale,1));line-height:1.4}
.rq-carta em{font-style:normal;font-size:calc(9.5px * var(--text-scale,1));color:var(--rq-roxo);line-height:1.2}
.rq-carta.futura em{color:var(--rq-tinta2);opacity:.7}

/* ---------- celular ---------- */
@media(max-width:700px){
  .rq-melhora-cab{gap:6px}.rq-melhora-cab span{letter-spacing:.05em;overflow-wrap:normal;word-break:normal}
  #relicModal .relic-modal-card.rq-on{width:100%;max-height:92vh}
  #relicModal .rq-on .modal-title-row{padding:14px 14px 10px}
  #relicModal .rq-on .modal-title-row h2{font-size:calc(20px * var(--text-scale,1))}
  #relicModal .rq-on .modal-title-row p{display:none}
  #relicModal .rq-on .modal-title-row h2{font-size:min(calc(20px * var(--text-scale,1)),22px)}
  #relicModal .rq-on .modal-title-row .dev-overline{font-size:min(calc(9px * var(--text-scale,1)),10px);letter-spacing:.14em}
  .rq-num{display:none}
  #relicModal .rq-on .relic-tabs{padding:0 6px;gap:2px}
  #relicModal .rq-on .relic-tabs button,#relicModal .rq-on .relic-tabs button:hover{flex:1 1 0;padding:10px 4px;font-size:calc(10px * var(--text-scale,1));letter-spacing:.04em;white-space:normal;line-height:1.2;text-align:center}
  #relicModal .rq-on .dungeon-b-panel{margin:12px}
  .rq{padding:0 14px 14px}
  .rq .rq-estandarte{flex-wrap:wrap;gap:10px 12px;margin:0 -14px 14px;padding:14px}
  .rq .rq-estandarte-arte{flex-basis:72px;height:72px}
  .rq .rq-estandarte-txt{flex:1 1 180px}
  .rq .rq-estandarte-txt h3{font-size:calc(22px * var(--text-scale,1))}
  .rq .rq-fichas{flex:1 1 100%}.rq .rq-fichas>div{flex:1 1 0;min-width:0;text-align:center;padding:6px}
  .rq .rq-colunas{grid-template-columns:1fr}
  .rq .rq-cartas{gap:5px}.rq-carta{padding:22px 2px 8px}.rq-carta img{width:38px;height:38px}.rq-carta b{font-size:calc(10px * var(--text-scale,1))}
}
/* X sempre no cabeçalho: no celular o cabeçalho gruda no topo e o conteúdo rola
   por baixo dele (o X flutuante de responsivo.css §17 ficava em cima das cartas). */
@media (max-width:760px), (max-height:600px){
  #relicModal .relic-modal-card.rq-on .modal-title-row{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#1b1d27,#15171f)!important;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  #relicModal .modal-card.rq-on.fechar-flutuante .modal-close-button{position:relative!important;top:auto!important;right:auto!important;box-shadow:none!important}
  #relicModal .rq-on .modal-title-row p{display:none}
}
@media (max-height:600px){
  #relicModal .rq-on .modal-title-row{padding:8px 14px}
  #relicModal .rq-on .modal-title-row .dev-overline{display:none}
  #relicModal .rq-on .modal-title-row h2{font-size:calc(18px * var(--text-scale,1))}
}

/* 1961: nível da skill da Relíquia (30 níveis) */
.rq-cartao.rq-skill{margin-top:14px}
.rq-skill .rq-skill-nota{display:block;margin-top:8px;color:#9fb0c8;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
/* 1962: linhas da skill (Veneno, Fogo, Corrosão) */
#relicModal .rq-linha-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
#relicModal .rq-linha-op,#relicModal .rq-linha-op:hover{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:0;margin:0;padding:10px;border:1px solid var(--rq-linha);border-radius:10px;background:var(--rq-caixa2);box-shadow:none;color:var(--rq-tinta);text-align:left;font:inherit;cursor:var(--cur-mao,pointer)}
#relicModal .rq-linha-op:not([disabled]):hover{border-color:var(--rq-ouro)}
#relicModal .rq-linha-op[disabled]{cursor:var(--cur-seta,default);opacity:1}
#relicModal .rq-linha-op.atual{border-color:var(--rq-verde);background:linear-gradient(180deg,rgba(111,207,127,.12),var(--rq-caixa2))}
#relicModal .rq-linha-op.confirma{border-color:var(--rq-ouro2);box-shadow:0 0 0 1px var(--rq-ouro2) inset}
#relicModal .rq-linha-op>i{font-style:normal;font-size:calc(22px * var(--text-scale,1));line-height:1}
#relicModal .rq-linha-op>span{display:flex;flex-direction:column;gap:3px;min-width:0}
#relicModal .rq-linha-op>span b{font-family:var(--rq-tit);font-size:calc(13px * var(--text-scale,1));color:#fff}
#relicModal .rq-linha-op>span small{color:var(--rq-tinta2);font-size:calc(11.5px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
#relicModal .rq-linha-preco,#relicModal .rq-linha-conf{margin-top:auto;font-size:calc(10.5px * var(--text-scale,1));font-weight:800;letter-spacing:.06em;color:var(--rq-ouro2);overflow-wrap:anywhere}
#relicModal .rq-linha-conf{color:#fff}
#relicModal .rq-linha-op .rq-selo{background:var(--rq-verde)}
@media (max-width:640px){#relicModal .rq-linha-ops{grid-template-columns:minmax(0,1fr)}#relicModal .rq-linha-op{padding-right:64px}}

/* =====================================================================
   22/10 — TUDO O QUE IMPORTA SEM ROLAR (autor: "preciso rolar e rolar pra ter as informações"; "deixar mais
   minimalista"). Cabeçalho da janela numa linha só, estandarte baixo, PRÓXIMO PASSO à esquerda e, à direita,
   a skill (quando abre) e o resumo PRÓXIMAS ETAPAS. Botões no padrão do jogo (escuro com borda), sem o
   amarelo chapado.
   ===================================================================== */
#relicModal .rq-on .modal-title-row{padding:14px 22px 10px}
#relicModal .rq-on .modal-title-row .dev-overline,#relicModal .rq-on .modal-title-row p{display:none}
#relicModal .rq-on .modal-title-row h2{margin:0;font-size:calc(22px * var(--text-scale,1))}
@media(min-width:701px){#relicModal .rq-on .relic-tabs button,#relicModal .rq-on .relic-tabs button:hover{padding:10px 14px}}
.rq .rq-estandarte{gap:14px;margin-bottom:14px;padding:10px 22px;border-bottom-width:1px}
.rq .rq-estandarte-arte{flex-basis:64px;height:64px}
.rq .rq-estandarte-txt h3{margin:0;font-size:calc(22px * var(--text-scale,1));line-height:1.15}
.rq .rq-estandarte-txt .rq-pips{justify-content:flex-start;margin:4px 0 5px}
.rq .rq-estandarte-txt .rq-pips i{width:12px;height:5px}
.rq .rq-estandarte-txt p{font-size:calc(11.5px * var(--text-scale,1));line-height:1.35}
.rq .rq-fichas>div{min-width:76px;padding:6px 10px}
.rq .rq-fichas strong{font-size:calc(16px * var(--text-scale,1))}
.rq .rq-colunas{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.rq .rq-cartao{padding:12px 14px;border-radius:12px}
.rq .rq-cartao-topo{grid-template-columns:auto 1fr;align-items:baseline;gap:10px;margin-bottom:8px}
.rq .rq-cartao-topo strong{font-size:calc(17px * var(--text-scale,1));text-align:right}
.rq .rq-melhora{gap:4px;margin-bottom:8px}
.rq .rq-melhora-l{padding:6px 10px;border-radius:8px}
.rq .rq-melhora-l b{font-size:calc(12px * var(--text-scale,1))}
.rq .rq-linhas{gap:6px;margin-bottom:8px}
.rq .rq-linha{grid-template-columns:28px 1fr auto;gap:8px;padding:6px 10px;border-radius:8px}
.rq .rq-linha img{width:28px;height:28px}
.rq .rq-linha-txt b{font-size:calc(12px * var(--text-scale,1))}
.rq .rq-linha-txt small{font-size:calc(10px * var(--text-scale,1))}
.rq .rq-chance{margin:2px 0 10px}
.rq .rq-chance-top strong{font-size:calc(16px * var(--text-scale,1))}
.rq .rq-rodape{margin:8px 0 0;color:var(--rq-tinta2);font-size:calc(10.5px * var(--text-scale,1));text-align:center}
/* 01/11: com o botão apagado, o que falta e onde conseguir, logo embaixo dele */
.rq-falta{margin:7px 0 0;display:grid;gap:2px;text-align:center;line-height:1.3}.rq-falta b{color:#ff9d8c;font-size:calc(12px * var(--text-scale,1))}.rq-falta small{color:var(--rq-tinta2);font-size:calc(10.5px * var(--text-scale,1));overflow-wrap:anywhere}
.rq .rq-col-dir{display:grid;gap:10px;align-content:start}
.rq .rq-col-dir .rq-cartao.rq-skill{margin-top:0}
.rq .rq-skill .rq-skill-nota{margin-top:6px;font-size:calc(10.5px * var(--text-scale,1))}
#relicModal .rq .rq-linha-ops{gap:6px;margin-top:4px}
#relicModal .rq .rq-linha-op,#relicModal .rq .rq-linha-op:hover{gap:4px;padding:8px}
#relicModal .rq .rq-linha-op>i{font-size:calc(18px * var(--text-scale,1))}
#relicModal .rq .rq-linha-op>span small{font-size:calc(10.5px * var(--text-scale,1));line-height:1.3}
.rq .rq-linha-cartao .rq-nota{margin:6px 0 0}
.rq .rq-linha-cartao .rq-skill-nota{display:none}
/* o resumo do que ainda vai abrir */
.rq-prox{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:var(--rq-caixa2)}
.rq-prox .rq-sub{margin-bottom:6px}
.rq-prox ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rq-prox li{display:grid;grid-template-columns:30px minmax(0,auto) minmax(0,1fr);align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.025)}
.rq-prox li img{width:30px;height:30px;object-fit:contain;filter:grayscale(1) brightness(.6)}
.rq-prox li div{display:grid;gap:1px}
.rq-prox li b{font-family:var(--rq-tit);font-size:calc(12.5px * var(--text-scale,1));color:var(--rq-tinta)}
.rq-prox li small{color:var(--rq-tinta2);font-size:calc(10px * var(--text-scale,1));white-space:nowrap}
.rq-prox li span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.rq-prox li em{padding:2px 7px;border:1px solid rgba(181,140,255,.28);border-radius:999px;background:rgba(181,140,255,.08);color:#cdb6ff;font-style:normal;font-size:calc(10px * var(--text-scale,1));white-space:nowrap}
.rq .rq-ressonancia{padding:8px 12px}
.rq .rq-ressonancia span{font-size:calc(10.5px * var(--text-scale,1))}
/* botões no padrão do jogo: escuro, borda dourada fina, texto claro */
.rq .rq-botao{min-height:42px;padding:9px 14px;border:1px solid rgba(216,163,74,.7);border-radius:10px;background:linear-gradient(180deg,#2b2618,#1c1912);color:var(--rq-ouro2);font-size:calc(13.5px * var(--text-scale,1));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rq .rq-botao:hover:not(:disabled){filter:none;border-color:var(--rq-ouro2);background:linear-gradient(180deg,#352e1c,#221e15);color:#fff}
.rq .rq-botao:disabled{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:rgba(239,227,200,.38)}
@media(max-width:700px){
  #relicModal .rq-on .modal-title-row{padding:10px 14px 8px}
  .rq .rq-estandarte{padding:10px 14px}
  .rq .rq-estandarte-arte{flex-basis:52px;height:52px}
  .rq .rq-estandarte-txt h3{font-size:calc(19px * var(--text-scale,1))}
  .rq .rq-fichas{flex:1 1 100%}
  .rq-prox li{grid-template-columns:26px minmax(0,1fr)}
  .rq-prox li img{width:26px;height:26px}
  .rq-prox li span{grid-column:2;justify-content:flex-start}
}
.rq .rq-col-esq .rq-cartao.rq-skill{margin-top:0}

/* ---------- 22/10: Crystal Sanctum e Crystal Guardian sem rolar ----------
   Faixa do topo baixa, a AÇÃO (entrar / enfrentar) logo abaixo dela, a torre deitada, e o que ainda não abre
   resumido em PRÓXIMAS ETAPAS. Botões escuros com borda dourada, como no resto do jogo. */
#relicModal .rq-on .dungeon-b-panel{margin:12px 22px 18px;border-color:rgba(216,163,74,.32);border-radius:14px}
#relicModal .rq-on .dungeon-b-hero{min-height:0;gap:3px;padding:14px 120px 12px 18px;border-bottom-color:rgba(216,163,74,.32)}
#relicModal .rq-on .dungeon-b-hero h3{font-size:calc(22px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-hero p{max-width:58ch;font-size:calc(12px * var(--text-scale,1));line-height:1.4}
#relicModal .rq-on .dungeon-b-eyebrow{font-size:calc(9.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-hero .dungeon-b-rank{position:absolute;top:12px;right:14px;margin:0}
#relicModal .rq-on .dungeon-b-hero-guardian{padding-right:34%}
#relicModal .rq-on .dungeon-b-hero-guardian .dungeon-b-rank{right:auto;left:auto;top:auto;bottom:12px;position:relative;justify-self:start;margin-top:4px}
#relicModal .rq-on .dungeon-b-hero-art{height:132%;bottom:-18%}
#relicModal .rq-on .dungeon-b-body{display:block}
#relicModal .rq-on .dungeon-b-main{gap:10px;padding:12px 16px 14px}
/* a ação primeiro */
#relicModal .rq-on .dungeon-b-cta{gap:8px 14px;padding:10px 12px;border:1px solid rgba(216,163,74,.28);border-radius:12px;background:linear-gradient(90deg,rgba(216,163,74,.08),rgba(255,255,255,.01))}
#relicModal .rq-on .dungeon-b-cta small{flex:1 1 220px;font-size:calc(12px * var(--text-scale,1))}
#relicModal .rq-on #relicSanctumAction,#relicModal .rq-on #relicGuardianFight{min-height:40px;padding:9px 22px;border:1px solid rgba(216,163,74,.7);border-radius:10px;background:linear-gradient(180deg,#2b2618,#1c1912);color:var(--rq-ouro2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font-family:var(--rq-tit);font-size:calc(13.5px * var(--text-scale,1));font-weight:700;letter-spacing:.08em}
#relicModal .rq-on #relicSanctumAction:hover:not(:disabled),#relicModal .rq-on #relicGuardianFight:hover:not(:disabled){border-color:var(--rq-ouro2);background:linear-gradient(180deg,#352e1c,#221e15);color:#fff}
#relicModal .rq-on #relicSanctumAction:disabled,#relicModal .rq-on #relicGuardianFight:disabled{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:rgba(239,227,200,.4)}
/* a torre deitada: os 10 andares até o chefe numa linha */
#relicModal .rq-on .dungeon-b-tower{flex-direction:row;gap:4px;padding:0;border:0;background:transparent}
#relicModal .rq-on .dungeon-b-tower li{position:relative;flex:1 1 0;flex-direction:column;justify-content:center;gap:1px;min-height:44px;padding:4px 2px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#0c121c;text-align:center;font-size:calc(12px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-tower li em{font-size:calc(9px * var(--text-scale,1));line-height:1.1;white-space:normal}
#relicModal .rq-on .dungeon-b-tower li.boss{flex:1.4 1 0}
/* recompensas em fichas baixas */
#relicModal .rq-on .dungeon-b-rewards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
#relicModal .rq-on .dungeon-b-rewards>div{grid-template-columns:38px minmax(0,1fr);justify-items:start;align-items:center;gap:0 10px;padding:8px 10px;text-align:left;border-radius:10px}
#relicModal .rq-on .dungeon-b-rewards>div img{grid-row:span 3;width:36px;height:36px}
#relicModal .rq-on .dungeon-b-rewards>div b{font-size:calc(12px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-rewards>div span,#relicModal .rq-on .dungeon-b-rewards>div small{font-size:calc(10.5px * var(--text-scale,1))}
.dungeon-b-prox{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:8px 10px;border:1px dashed rgba(255,255,255,.1);border-radius:10px;color:var(--dg-suave);font-size:calc(11px * var(--text-scale,1))}
.dungeon-b-prox b{color:var(--dg-ouro);font-size:calc(9.5px * var(--text-scale,1));letter-spacing:.16em}
.dungeon-b-prox span{display:inline-flex;align-items:center;gap:5px}
.dungeon-b-prox img{width:20px;height:20px;object-fit:contain;filter:grayscale(1) brightness(.7)}
#relicModal .rq-on .dungeon-b-guardian{grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:6px 10px 6px 6px;border-color:rgba(216,163,74,.28)}
#relicModal .rq-on .dungeon-b-portrait{width:64px;height:48px}
#relicModal .rq-on .dungeon-b-guardian strong{font-size:calc(13.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-guardian small{font-size:calc(11.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-details{padding-top:4px}
/* Guardian: Tier + ENFRENTAR na mesma faixa */
#relicModal .rq-on .dungeon-b-cta-guardian .dungeon-b-tierpick{flex:1 1 320px;padding:0;border:0;background:transparent}
#relicModal .rq-on .dungeon-b-cta-guardian .dungeon-b-tierpick small{flex-basis:100%;font-size:calc(11px * var(--text-scale,1))}
#relicModal .rq-on .relic-guardian-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#relicModal .rq-on .relic-guardian-grid>div{padding:7px 10px;border-radius:10px}
#relicModal .rq-on .relic-guardian-grid strong{font-size:calc(12.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-main.col-com-tier .relic-guardian-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#relicModal .rq-on .dungeon-b-main.col-com-tier .relic-guardian-grid>div:first-child{display:none}
/* lutas de hoje: o que cada luta paga */
.dungeon-b-hoje{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--dg-linha);border-radius:12px;background:#0c121c}
.dungeon-b-hoje.hidden{display:none}
.dungeon-b-hoje-topo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dungeon-b-hoje-topo span{color:var(--dg-ouro);font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.16em}
.dungeon-b-hoje-pips{display:inline-flex;gap:4px}
.dungeon-b-hoje-pips i{width:22px;height:8px;border-radius:4px;background:linear-gradient(90deg,#3fb4ff,#9fe6ff);box-shadow:0 0 6px rgba(111,220,255,.35)}
.dungeon-b-hoje-pips i.usada{background:#222c3b;box-shadow:none}
.dungeon-b-hoje-topo b{color:var(--dg-texto);font-size:calc(12.5px * var(--text-scale,1))}
.dungeon-b-hoje-topo em{margin-left:auto;font-style:normal;color:var(--dg-ouro2);font-size:calc(11px * var(--text-scale,1));font-weight:800}
.dungeon-b-hoje ul{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.dungeon-b-hoje li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;color:var(--dg-suave);font-size:calc(11.5px * var(--text-scale,1));line-height:1.35}
.dungeon-b-hoje li b{color:var(--dg-ciano2);font-size:calc(10px * var(--text-scale,1));letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
#relicModal .rq-on .dungeon-b-creation{gap:8px}
#relicModal .rq-on .dungeon-b-garantia,#relicModal .rq-on .dungeon-b-extra{gap:5px;padding:8px 12px;border-color:var(--dg-linha);background:#0c121c}
#relicModal .rq-on .dungeon-b-garantia small,#relicModal .rq-on .dungeon-b-extra small{font-size:calc(11px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-extra{flex-direction:row;flex-wrap:wrap;align-items:center}
#relicModal .rq-on .dungeon-b-extra .dungeon-b-creation-titulo{flex:1 1 100%}
#relicModal .rq-on .dungeon-b-extra small{flex:1 1 160px}
#relicModal .rq-on .dungeon-b-extra button{align-self:center;padding:6px 12px;border-color:rgba(216,163,74,.6);background:linear-gradient(180deg,#2b2618,#1c1912);color:var(--rq-ouro2);font-size:calc(12px * var(--text-scale,1))}
#relicModal .rq-on #relicGuardianDrops{margin:0;padding:0;border:0;background:none;color:var(--dg-apagado);font-size:calc(10.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-lock{color:var(--dg-apagado);font-size:calc(10.5px * var(--text-scale,1))}
#relicModal .rq-on .dungeon-b-lock:empty{display:none}
@media(max-width:700px){
  #relicModal .rq-on .dungeon-b-panel{margin:10px}
  #relicModal .rq-on .dungeon-b-hero{padding:12px 84px 10px 12px}
  #relicModal .rq-on .dungeon-b-hero-guardian{padding-right:36%}
  #relicModal .rq-on .dungeon-b-hero p{font-size:calc(11px * var(--text-scale,1))}
  #relicModal .rq-on .dungeon-b-main{padding:10px}
  #relicModal .rq-on .dungeon-b-cta .relic-action-row{flex:1 1 100%}
  #relicModal .rq-on #relicSanctumAction,#relicModal .rq-on #relicGuardianFight{flex:1 1 auto;width:100%}
  #relicModal .rq-on .dungeon-b-tower{gap:2px}
  #relicModal .rq-on .dungeon-b-tower li{min-height:40px;font-size:calc(11px * var(--text-scale,1))}
  #relicModal .rq-on .dungeon-b-tower li em{font-size:calc(7.5px * var(--text-scale,1))}
  #relicModal .rq-on .relic-guardian-grid{grid-template-columns:1fr 1fr}
}
/* resultado da run/luta: botões no padrão */
#dungeonResultModal .relic-action-row button:not(.secondary-button){border:1px solid rgba(216,163,74,.7);background:linear-gradient(180deg,#2b2618,#1c1912);color:#f3d58b;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#dungeonResultModal .relic-action-row button:not(.secondary-button):hover{border-color:#f3d58b;color:#fff}
#relicModal .rq-on .dungeon-b-hero-guardian .dungeon-b-rank{position:absolute;top:12px;right:14px;bottom:auto;margin:0;z-index:2}
#relicModal .rq-on .dungeon-b-cta small#dungeonCtaNote{flex:1 1 300px;max-width:none}
#relicModal .rq-on .dungeon-b-lock.hidden{display:none}
/* 3 materiais ou mais: duas colunas, para o botão continuar à vista sem rolar */
@media(min-width:701px){
  .rq .rq-linhas:has(>.rq-linha:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .rq .rq-linhas:has(>.rq-linha:nth-child(3)) .rq-linha{grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;row-gap:0;padding:6px 8px}
  .rq .rq-linhas:has(>.rq-linha:nth-child(3)) .rq-linha img{grid-row:span 2;width:26px;height:26px}
  .rq .rq-linhas:has(>.rq-linha:nth-child(3)) .rq-linha em{grid-column:2;font-size:calc(11.5px * var(--text-scale,1))}
}
@media(min-width:701px){.rq .rq-linhas:has(>.rq-linha:nth-child(3)) .rq-linha-txt small{display:none}}
.rq .rq-chance-certa{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rq .rq-chance-certa .rq-chance-top{gap:10px;justify-content:flex-start}
@media(min-width:701px){.rq .rq-linhas:has(>.rq-linha:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:701px){.rq .rq-passo .rq-melhora-cab{display:none}}
@media(max-width:700px){
  .rq .rq-colunas,.rq .rq-colunas.rq-vista-skill{grid-template-columns:minmax(0,1fr)}
  .rq .rq-cartao-topo{grid-template-columns:minmax(0,1fr) auto}
  .rq .rq-melhora-cab,.rq .rq-melhora-l{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) calc(14px * var(--text-scale,1)) minmax(0,1fr);gap:6px} /* 26/10: a seta → crescia com o texto e saía da coluna a 130% */
  #relicModal .rq-on .dungeon-b-cta{flex-direction:column;align-items:stretch}
  #relicModal .rq-on .dungeon-b-cta-guardian .dungeon-b-tierpick{flex:0 0 auto}
  #relicModal .rq-on .dungeon-b-cta small#dungeonCtaNote{flex:0 0 auto}
  #relicModal .rq-on .dungeon-b-hoje li{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  #relicModal .rq-on .dungeon-b-cta .relic-action-row{flex:0 0 auto;width:100%;display:flex}
  #relicModal .rq-on .dungeon-b-cta-guardian .dungeon-b-tierpick{align-content:flex-start}
  #relicModal .rq-on .dungeon-b-cta-guardian .dungeon-b-tierpick select{flex:1 1 120px}
}
@media(max-width:700px){#relicModal .rq-on .modal-title-row h2{font-size:min(calc(17px * var(--text-scale,1)),18px)!important}#relicModal .rq-on .relic-tabs button,#relicModal .rq-on .relic-tabs button:hover{font-size:min(calc(9.5px * var(--text-scale,1)),11px)}}
/* 2043 (29/10): a Relíquia além do +15, opção A — 2ª fileira de barrinhas (+16..+30), catalisador em 3 cartões e a aba SELOS */
.rq .rq-pips.rq-pips-alem{display:grid;grid-template-columns:repeat(15,14px);gap:4px 4px;justify-content:start}
.rq-pips i.alem{background:#2a1f33}.rq-pips i.alem.on{background:linear-gradient(90deg,#ff6a3d,#ffd36a);box-shadow:0 0 6px rgba(255,120,60,.6)}
.rq-barra i.cat{background:linear-gradient(90deg,#3fd46a,#7dff9a)}
.rq-cat{margin:10px 0 6px}.rq-cat .rq-sub{display:block;margin-bottom:6px}
.rq-cat-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rq-cat-op{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:var(--rq-caixa2);color:var(--rq-tinta);text-align:left;cursor:var(--cur-mao,pointer);font:inherit}
.rq-cat-op img{width:26px;height:26px;flex:0 0 26px}.rq-cat-op span{display:grid;min-width:0}
.rq-cat-op b{font-size:calc(12px * var(--text-scale,1));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-cat-op em{font-style:normal;font-weight:800;color:var(--rq-verde)}.rq-cat-op small{color:var(--rq-tinta2);font-size:calc(10.5px * var(--text-scale,1))}
.rq-cat-op.on{border-color:var(--rq-ouro2);background:#2a2416;box-shadow:inset 0 0 0 1px var(--rq-ouro2),0 0 12px rgba(243,213,139,.35)}
.rq-cat-op:disabled{opacity:.45;cursor:var(--cur-seta,default)}
.rq-selos{margin-top:14px}.rq-sl-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rq-sl{padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--rq-caixa2)}
.rq-sl h4{margin:0 0 4px;display:flex;justify-content:space-between;gap:8px;font-size:calc(14px * var(--text-scale,1));color:var(--rq-ouro2)}
.rq-sl h4 em{font-style:normal;color:#fff}.rq-sl p{margin:0 0 8px;color:var(--rq-tinta2);font-size:calc(12px * var(--text-scale,1))}.rq-sl p b{color:var(--rq-verde)}
.rq-sl-custo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;font-size:calc(11px * var(--text-scale,1))}
.rq-sl-custo span{display:flex;align-items:center;gap:3px}.rq-sl-custo img{width:18px;height:18px}.rq-sl-custo .falta{color:#ff9d8c}
.rq-sl .rq-botao{min-height:38px;font-size:calc(12px * var(--text-scale,1));padding:6px}
@media (max-width:600px){.rq-sl-grade{grid-template-columns:1fr}.rq .rq-pips.rq-pips-alem{grid-template-columns:repeat(15,minmax(0,1fr))}.rq-cat-op{flex-direction:column;text-align:center}.rq-cat-op span{justify-items:center}}
/* 29/10 (autor: "aumentar a largura desse menu pra não ter que rolar a página"): no PC a janela da Relíquia fica larga
   em TODAS as abas (Relíquia, Selos, Skill, Crystal Sanctum e Crystal Guardian) e as peças ficam lado a lado.
   Celular e janela estreita continuam como antes. */
@media (min-width:1100px){
  #relicModal .relic-modal-card.rq-on,#relicModal .rq-on[data-aba="sanctum"],#relicModal .rq-on[data-aba="guardian"]{width:min(1240px,94vw)}
  .rq .rq-colunas{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
  .rq .rq-colunas.rq-vista-skill{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rq-passo-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .rq-passo-b .rq-cat{margin-top:0}
  .rq .rq-sl-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  #relicSanctumPanel .dungeon-b-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
  #relicSanctumPanel .dungeon-b-main>*{grid-column:1/-1;margin-top:0;margin-bottom:0}
  #relicSanctumPanel .dungeon-b-main>.dungeon-b-rewards{grid-column:1}
  #relicSanctumPanel .dungeon-b-main>.dungeon-b-guardian{grid-column:2}
}
/* 2050: a parte da Life na barra da chance e o lugar da escada */
.rq-barra i.life{background:linear-gradient(90deg,#d9a520,#ffd24a)}
.rq-escada{margin:6px 0}
.rq-chance small.rq-life-nota{display:block;color:#ffd24a}