/* =====================================================================
   ULTIMATE (18/10) — botão no 5º espaço da barra e janela de evolução
   ---------------------------------------------------------------------
   O botão tem o MESMO tamanho e formato de uma skill (--rel-base, relic.css,
   é o lado de uma skill em cada tela), entre a skill 4 e a Relíquia. Pedido
   do autor (18/10): "do mesmo tamanho das outras skills, apenas com o
   contorno de acordo com a classe". O contorno é a cor da classe; o Ímpeto
   enche o fundo de baixo para cima; a sombra escura é a espera mínima, igual
   à recarga das skills. Cheia e sem espera: o contorno pulsa. É um
   <div role=button> (não .battle-skill-slot) para não mexer nas regras
   nth-of-type das 4 skills.
   ===================================================================== */
.ult-slot{--ult-c:#ffcf6b;--ult-c2:#fff3c4;position:relative;flex:0 0 auto;cursor:var(--cur-mao,pointer);box-sizing:border-box;
  width:calc(38px * var(--ui-scale, 1));height:calc(38px * var(--ui-scale, 1));border-radius:11px;overflow:hidden;
  border:2px solid var(--ult-c);
  background:linear-gradient(180deg,rgba(24,33,50,.94),rgba(15,21,33,.96));
  box-shadow:0 0 6px color-mix(in srgb,var(--ult-c) 45%,transparent);transition:transform .12s ease,filter .12s ease}
.battle-skill-bar .ult-slot{width:var(--rel-base);height:var(--rel-base)}
@media(max-width:640px){.battle-skill-bar .ult-slot{border-radius:9px}#gameShell .battle-skill-bar .ult-slot{border-radius:10px}}
.ult-slot.hidden{display:none}
.ult-slot[data-classe="mage"]{--ult-c:#ff7a2e;--ult-c2:#ffd9a0}
.ult-slot[data-classe="archer"]{--ult-c:#5fe3ff;--ult-c2:#e6fdff}
.ult-slot[data-classe="magic_gladiator"]{--ult-c:#a55cff;--ult-c2:#f0dcff}
.ult-slot[data-classe="dark_lord"]{--ult-c:#ffd84a;--ult-c2:#fff6c0}
.ult-slot:hover{transform:translateY(-2px);filter:brightness(1.15)}
.ult-slot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ult-slot-anel{position:absolute;left:0;right:0;bottom:0;height:var(--ult-pct,0%);pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--ult-c) 45%,transparent),color-mix(in srgb,var(--ult-c) 18%,transparent))}
.ult-slot-miolo{position:absolute;inset:12%;display:grid;place-items:center;pointer-events:none}
.ult-slot-miolo .ult-ic{width:100%;height:100%;filter:drop-shadow(0 0 3px var(--ult-c))}
.ult-slot-cd{position:absolute;inset:0;pointer-events:none;background:conic-gradient(rgba(6,10,18,.78) var(--ult-cd,0deg),transparent 0)}
.ult-slot-lv{position:absolute;left:-1px;bottom:-1px;padding:0 3px;border-radius:999px;font:900 calc(8px * var(--text-scale, 1))/1.5 system-ui,sans-serif;
  color:#140a04;background:var(--ult-c2);text-align:center;pointer-events:none}
.ult-slot-lv:empty{display:none}
.ult-slot.trancada .ult-slot-miolo{filter:grayscale(1) brightness(.55)}
.ult-slot.pronta{animation:ult-pronta 1.2s ease-in-out infinite}
.ult-slot.guardando.pronta{animation-duration:2.4s}
@keyframes ult-pronta{50%{border-color:var(--ult-c2);box-shadow:0 0 14px var(--ult-c)}}
body.combat-fx-off .ult-slot.pronta,body.graphics-lite .ult-slot.pronta{animation:none;border-color:var(--ult-c2);box-shadow:0 0 10px var(--ult-c)}

/* ---------------- janela ----------------
   Refeita em 22/10 (pedido do autor: "tá feio... o aprimorar é só texto e o botão mostra outra prévia só em
   texto") e compactada no mesmo dia ("mais minimalista sem precisar rolar o modal"): palco baixo com o fundo
   da área atual, o herói e monstros de verdade; antes → depois numa linha; preço em fichas com a arte real das
   joias; Marcas e chance lado a lado; botão e "guardar" no rodapé. As letras seguem o Tamanho do texto. */
.ult-janela{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(3,2,6,.82);padding:16px}
.ult-janela.hidden{display:none}
.ult-caixa,.ult-conf{--ult-c:#ffcf6b;--ts:var(--text-scale,1)}
.ult-caixa[data-classe="mage"],.ult-conf[data-classe="mage"]{--ult-c:#ff7a2e}
.ult-caixa[data-classe="archer"],.ult-conf[data-classe="archer"]{--ult-c:#5fe3ff}
.ult-caixa[data-classe="magic_gladiator"],.ult-conf[data-classe="magic_gladiator"]{--ult-c:#a55cff}
.ult-caixa[data-classe="dark_lord"],.ult-conf[data-classe="dark_lord"]{--ult-c:#ffd84a}
.ult-caixa{position:relative;box-sizing:border-box;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  padding:14px 16px 16px;border-radius:16px;color:#f3ead8;font:calc(14px * var(--ts))/1.4 system-ui,sans-serif;
  background:radial-gradient(120% 50% at 50% -10%,color-mix(in srgb,var(--ult-c) 15%,transparent),transparent 60%),linear-gradient(180deg,#1b1121,#0c0710);
  border:1px solid color-mix(in srgb,var(--ult-c) 30%,#4a3420);box-shadow:0 0 0 1px #0d0810,0 0 40px color-mix(in srgb,var(--ult-c) 12%,transparent),0 18px 60px rgba(0,0,0,.65)}
.ult-x{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:21px;line-height:1;cursor:var(--cur-mao,pointer)}
.ult-x:hover{background:rgba(255,255,255,.16)}
/* topo: emblema, nome e o nível (Lv.atual → Lv.próximo) */
.ult-topo{display:flex;align-items:center;gap:10px;margin-right:42px;min-width:0}
.ult-emblema{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ult-c) 30%,#1a1020),#0d0810 75%);
  border:1px solid color-mix(in srgb,var(--ult-c) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--ult-c) 35%,transparent),inset 0 0 10px rgba(0,0,0,.6)}
.ult-emblema .ult-ic{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ult-c) 70%,transparent))}
.ult-nome{min-width:0;flex:1 1 auto}
.ult-nome span{display:block;font:800 calc(10px * var(--ts))/1 system-ui,sans-serif;letter-spacing:.2em;color:color-mix(in srgb,var(--ult-c) 70%,#e2b25a)}
.ult-nome h3{margin:4px 0 0;font:800 calc(18px * var(--ts))/1.15 Georgia,"Times New Roman",serif;color:#fff3d6;overflow-wrap:break-word;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.ult-nivel{flex:0 0 auto;padding:5px 11px;border-radius:999px;font:900 calc(15px * var(--ts))/1 system-ui,sans-serif;color:#2a1604;white-space:nowrap;
  background:linear-gradient(180deg,#ffe8a8,#e0a032);box-shadow:0 2px 0 #8a5a14}
.ult-lvs{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.ult-lvb{display:inline-block;padding:3px 9px;border-radius:999px;font:800 calc(12.5px * var(--ts))/1.2 system-ui,sans-serif;color:#e9dcc3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.ult-lvb.prox{color:#2a1604;background:linear-gradient(180deg,#ffe8a8,#e0a032);border-color:#f5c45a}
.ult-seta{display:inline-block;flex:0 0 auto;width:14px;height:9px;background:#8ff0a4;clip-path:polygon(0 36%,58% 36%,58% 0,100% 50%,58% 100%,58% 64%,0 64%)}
/* palco baixo: o fundo da área atual, escurecido; a legenda por cima, embaixo */
.ult-palco{position:relative;margin:10px 0 8px;border-radius:12px;overflow:hidden;aspect-ratio:3/1;
  background:linear-gradient(180deg,rgba(8,5,12,.3),rgba(8,5,12,.08) 45%,rgba(8,5,12,.8)),var(--ult-fundo,none) center 60%/cover,radial-gradient(circle at 50% 30%,#2a1a30,#07040a 75%);
  border:1px solid rgba(255,220,160,.14);box-shadow:inset 0 0 40px rgba(0,0,0,.65)}
.ult-palco canvas{display:block;width:100%;height:100%}
.ult-faz{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 10px 5px;font-size:calc(11.5px * var(--ts));font-weight:600;color:#f3e6cc;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,3,8,.82));text-shadow:0 1px 3px #000;pointer-events:none}
.ult-aviso{margin:8px 0;padding:8px 10px;border-radius:8px;background:rgba(255,200,90,.1);color:#ffd88a}
/* antes → depois numa linha */
.ult-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px}
.ult-stats>div{min-width:0;padding:6px 4px 7px;border-radius:10px;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.ult-stats span{display:block;font:800 calc(10px * var(--ts))/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#b9a27a}
.ult-stats p{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 5px;margin:2px 0 0}
.ult-stats b{font-size:calc(15px * var(--ts));color:#fff3d6;white-space:nowrap}
.ult-stats b.agora{font-size:calc(12px * var(--ts));font-weight:700;color:#a8977a}
.ult-stats em{font-style:normal;font-weight:900;font-size:calc(15px * var(--ts));color:#8ff0a4;white-space:nowrap}
.ult-marco{margin:0 0 8px;padding:6px 10px;border-radius:9px;border-left:3px solid #ffcf6b;background:linear-gradient(90deg,rgba(255,200,90,.18),rgba(255,200,90,.03));color:#ffe3a3;font-weight:700;font-size:calc(12.5px * var(--ts))}
.ult-desperta{text-align:center;border-left:none;border:1px solid rgba(255,207,107,.4)}
/* preço: fichas com a arte */
.ult-custo{margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.ult-recs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.ult-rec{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,210,140,.16)}
.ult-rec img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ult-rec b{font-size:calc(13.5px * var(--ts));color:#fff3d6;white-space:nowrap}
.ult-rec-nome{font-size:calc(11px * var(--ts));color:#b9a98c}
.ult-rec.r-bless .ult-rec-nome,.ult-rec.r-soul .ult-rec-nome,.ult-rec.r-gold .ult-rec-nome{display:none}
.ult-rec.falta{border-color:rgba(255,110,90,.6);background:rgba(255,90,70,.1)}
.ult-rec.falta b{color:#ff9a86}
.ult-medidores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin-top:8px}
.ult-medidor{min-width:0}
.ult-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;margin:0 0 4px;font-size:calc(12.5px * var(--ts))}
.ult-linha .ok{color:#8ff0a4;font-weight:800}
.ult-linha em{font-style:normal;color:#a9d9b2}
.ult-marcas-rot{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.ult-marcas-rot .ult-ic.m{width:18px;height:18px;object-fit:contain}
.ult-ch{color:#ffe08a}
.ult-tent{color:#9d8d70;font-size:calc(11px * var(--ts))}
.ult-hoje{color:#9fb6d6;font-size:calc(11px * var(--ts))}
.ult-hoje.cheio{padding:1px 7px;border-radius:8px;background:rgba(255,170,60,.14);color:#ffcf8a;font-weight:700}
.ult-barra{display:block;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.ult-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--ult-c) 60%,#7a4a10),var(--ult-c))}
.ult-barra.ok i{background:linear-gradient(90deg,#3fa860,#8ff0a4)}
.ult-barra.ch i{background:linear-gradient(90deg,#e0a032,#ffe08a)}
/* botões */
.ult-bts{display:flex;flex-wrap:wrap;gap:8px}
.ult-bt{min-height:44px;padding:10px 16px;border:none;border-radius:10px;cursor:var(--cur-mao,pointer);font:800 calc(14px * var(--ts))/1.2 system-ui,sans-serif;color:var(--botao-ouro-texto);
  background:var(--botao-ouro-fundo);box-shadow:0 2px 0 #8a5a14}
.ult-bt:hover:not(:disabled){filter:brightness(1.08)}
.ult-bt:disabled{cursor:var(--cur-seta,default);filter:grayscale(1) brightness(.6)}
.ult-rodape{display:flex;align-items:center;gap:12px}
.ult-bt-subir{flex:1 1 auto;min-height:48px;font-size:calc(15px * var(--ts));box-shadow:0 3px 0 #8a5a14,0 0 20px rgba(255,200,90,.25)}
.ult-selo-txt{margin:0 0 8px;color:#d9ccb2;font-size:calc(12.5px * var(--ts))}
.ult-selo-txt b{color:#ffe3a3}
.ult-selo-ops{align-items:stretch}
.ult-op{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:6px 10px;color:#f3ead8;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,210,140,.3);box-shadow:none}
.ult-op:hover{border-color:#ffcf6b;filter:none;background:linear-gradient(180deg,rgba(255,207,107,.16),rgba(255,207,107,.04))}
.ult-op-rec{display:inline-flex;align-items:center;gap:5px}
.ult-op-rec img{width:26px;height:26px;object-fit:contain}
.ult-op-rec b{font-size:calc(14px * var(--ts));color:#fff3d6}
.ult-op-rec span{font-size:calc(11px * var(--ts));font-weight:600;color:#cdbb98}
.ult-op-mais{font-size:calc(16px * var(--ts));color:#b9a27a}
.ult-ou{align-self:center;font-size:calc(11px * var(--ts));color:#9d8d70;text-transform:uppercase;letter-spacing:.1em}
/* guardar para o chefe: chave liga/desliga (a explicação fica na dica) */
.ult-guardar{flex:0 0 auto;display:flex;gap:8px;align-items:center;color:#d9ccb2;cursor:var(--cur-mao,pointer);font-size:calc(12.5px * var(--ts))}
.ult-rodape .ult-guardar:only-child{margin-left:auto}
.ult-guardar input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ult-chave{position:relative;flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .15s}
.ult-chave::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#e9dcc3;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:transform .15s}
.ult-guardar input:checked+.ult-chave{background:color-mix(in srgb,var(--ult-c) 75%,#5a3a10)}
.ult-guardar input:checked+.ult-chave::after{transform:translateX(16px);background:#fff}
.ult-guardar input:focus-visible+.ult-chave{outline:2px solid #fff;outline-offset:2px}
.ult-guardar-txt{max-width:11em;line-height:1.2}
/* confirmação e resultado (COL_DIALOG com corpo em HTML) */
.col-dialog-card.ult-conf-card{width:min(440px,100%)}
.ult-conf{font-size:calc(14px * var(--ts));color:#f3ead8}
.ult-conf-topo{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ult-conf-topo>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.ult-conf-topo b{font:800 calc(16px * var(--ts))/1.15 Georgia,"Times New Roman",serif;color:#fff3d6}
.ult-conf .ult-emblema{width:44px;height:44px}
.ult-conf .ult-emblema .ult-ic{width:36px;height:36px}
.ult-conf-rot{margin:10px 0 5px;font:800 calc(10.5px * var(--ts))/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d9ad5c}
.ult-conf-stats{display:grid;gap:3px}
.ult-conf-stats p{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:7px;margin:0;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.ult-conf-stats span{font-size:calc(12.5px * var(--ts));color:#cdbb98}
.ult-conf-stats b{font-weight:700;color:#a8977a;text-align:right}
.ult-conf-stats em{font-style:normal;font-weight:900;color:#8ff0a4;text-align:right}
.ult-recs.mini{justify-content:flex-start}
.ult-conf .ult-medidor{margin-top:10px}
.ult-conf-nota{margin:8px 0 0;padding:6px 10px;border-radius:8px;background:rgba(120,240,150,.07);color:#bfe8c8;font-size:calc(12px * var(--ts))}
.ult-resultado{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ult-resultado .ult-emblema{width:68px;height:68px}
.ult-resultado .ult-emblema .ult-ic{width:54px;height:54px}
.ult-resultado.ok .ult-emblema{box-shadow:0 0 28px color-mix(in srgb,var(--ult-c) 60%,transparent)}
.ult-resultado p{margin:0;color:#d9ccb2}
@media(max-width:640px){
  .ult-janela{padding:8px}
  .ult-caixa{padding:12px 10px 12px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .ult-palco{aspect-ratio:2.4/1;margin:8px 0 6px}
  .ult-nome h3{font-size:calc(16px * var(--ts))}
  .ult-lvb{padding:2px 7px;font-size:calc(11.5px * var(--ts))}
  .ult-stats p{flex-direction:column;gap:0}
  .ult-stats p .ult-seta{display:none}
  .ult-medidores{grid-template-columns:1fr;gap:6px}
  .ult-custo{padding:8px}
  .ult-op{flex:1 1 100%}.ult-ou{flex:1 1 100%;text-align:center}
  .ult-rodape{flex-wrap:wrap;gap:8px;justify-content:flex-end}
  .ult-bt-subir{flex:1 1 100%}
  .ult-guardar-txt{max-width:none}
}
/* celular deitado: o palco encolhe para o preço e o botão aparecerem */
@media(max-height:520px){
  .ult-janela{padding:6px}
  .ult-caixa{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding-top:10px}
  .ult-palco{aspect-ratio:auto;height:96px;margin:6px 0}
}
/* celular deitado de verdade (até ~430 px de altura): sem palco, para tudo caber sem rolar */
@media(max-height:430px){
  .ult-palco{display:none}
  .ult-topo{margin-bottom:8px}
}
/* arte do autor (19/10): ocupa a vaga como o ícone de uma skill */
.ult-slot-miolo:has(.ult-ic-arte){inset:5%}
.ult-slot-miolo .ult-ic-arte{object-fit:contain;filter:drop-shadow(0 0 2px var(--ult-c))}
.ult-topo img.ult-ic.g{object-fit:contain}