/* =====================================================================
   ALMA RÁPIDA (22/10, plano aprovado "Sistema de Alma", recomendados A·A·A)
   1. A barra ✦ ALMA da arena é o atalho: clique abre a aba Alma; o selo "+N"
      aparece quando dá para subir um nó (game.js atualizarAtalhoDaAlma).
   2. A aba cabe sem rolar no PC: topo fino, roda + cartão primeiro, legenda e
      "Mais sobre a Alma" embaixo; faixa "Como usar em 3 passos" e o "?".
   3. Celular: a roda vem primeiro e o cartão logo abaixo; tocar num nó prende o cartão ao pé (gaveta).
   4. Lag: o pulso dos nós e as runas giram sem repintar a roda a cada quadro
      (só opacity/transform, que a placa de vídeo faz sozinha).
   tests/alma-atalho-browser.mjs
   ===================================================================== */

/* ---- 1. atalho na arena ---- */
.vital-alma{position:relative;cursor:var(--cur-mao,pointer);border-radius:10px;transition:box-shadow .15s ease,background-color .15s ease}
.vital-alma:hover{box-shadow:0 0 0 1px rgba(180,140,255,.65),0 0 12px rgba(150,100,240,.35);background-color:rgba(120,80,200,.08)}
.vital-alma:focus-visible{outline:2px solid #c9a5ff;outline-offset:2px}
.alma-selo-pontos{position:absolute;top:-8px;right:-6px;z-index:2;padding:1px 7px;border:1px solid #e3d2ff;border-radius:99px;
  background:linear-gradient(180deg,#b88cff,#7445d6);color:#fff;font-size:calc(10.5px * var(--text-scale,1));font-weight:900;line-height:1.35;
  pointer-events:none;animation:almaSeloPisca 2.2s ease-in-out infinite;will-change:opacity}
.alma-selo-pontos[hidden]{display:none!important}
@keyframes almaSeloPisca{50%{opacity:.55}}

/* ---- 2. topo fino e faixa dos 3 passos ---- */
#characterSoulPanel .soul-topo{padding:8px 14px;gap:14px}
#characterSoulPanel .soul-topo .soul-orb{width:40px;height:40px;font-size:calc(16px * var(--text-scale,1))}
#characterSoulPanel .soul-topo-nivel strong{font-size:calc(24px * var(--text-scale,1))}
#characterSoulPanel .soul-topo-xp .soul-tree-track{margin-top:4px;height:7px}
#characterSoulPanel .soul-topo-xp small{margin-top:3px}
#characterSoulPanel .soul-topo-pontos strong{font-size:calc(22px * var(--text-scale,1))}
#characterSoulPanel .soul-topo-pontos{position:relative}
#characterSoulPanel .soul-recursos{margin:8px 0}
#characterSoulPanel .soul-recurso{padding:2px 9px 2px 4px}
#characterSoulPanel .soul-rec-arte{width:22px;height:22px}
.soul-ajuda-button{position:absolute;top:-2px;left:-34px;width:24px;height:24px;padding:0;border:1px solid #6a54a0;border-radius:50%;background:#1b1530;color:#d8c2ff;
  font-weight:900;font-size:calc(13px * var(--text-scale,1));line-height:1;cursor:var(--cur-mao,pointer)}
.soul-ajuda-button:hover{border-color:#b48cff;color:#fff}
.soul-ajuda-button[hidden]{display:none!important}
.soul-passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:stretch;margin:0 0 10px}
.soul-passos[hidden]{display:none!important}
.soul-passo{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;padding:7px 10px;border:1px solid #3a3466;border-radius:9px;background:#151526;
  color:#cfc4df;font-size:calc(12px * var(--text-scale,1));line-height:1.4;min-width:0}
.soul-passo i{font-style:normal;font-weight:900;color:#e2b85c;font-size:calc(15px * var(--text-scale,1));line-height:1.2;text-align:center}
.soul-passo b{color:#fff}
.soul-passos-ok{align-self:center;padding:8px 14px;border:1px solid #8a6ad0;border-radius:8px;background:#2a1f4a;color:#efe4ff;font-weight:900;
  letter-spacing:.06em;font-size:calc(11.5px * var(--text-scale,1));cursor:var(--cur-mao,pointer);white-space:nowrap}
.soul-passos-ok:hover{background:#3a2a66}
#characterSoulPanel .soul-como{margin:10px 0 0}
#characterSoulPanel .soul-legend{margin-top:10px}

/* PC: tudo o que importa cabe sem rolar (1366×768). A lista e o embrulho da roda viram "transparentes" (display:contents)
   e o painel vira uma grade: topo e recursos em cima; roda à esquerda; à direita os 3 passos e o cartão com o
   DESENVOLVER logo depois da frase "dá / falta"; legenda, Ressonância e "Mais sobre a Alma" embaixo. */
@media (min-width:761px){
  #characterSoulPanel.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,320px);column-gap:16px;align-items:start;
    grid-template-areas:"topo topo" "recursos recursos" "roda passos" "roda card" "legenda legenda" "reson reson" "como como";grid-template-rows:auto auto auto 1fr}
  #characterSoulPanel #soulTreeList,#characterSoulPanel .soul-wheel-wrap{display:contents}
  #characterSoulPanel .soul-topo{grid-area:topo}
  #characterSoulPanel .soul-recursos{grid-area:recursos;margin:6px 0 8px}
  #characterSoulPanel .soul-passos{grid-area:passos;grid-template-columns:minmax(0,1fr);gap:5px;margin:0 0 8px}
  #characterSoulPanel .soul-passo{padding:5px 9px;font-size:calc(11.5px * var(--text-scale,1))}
  #characterSoulPanel .soul-passos-ok{justify-self:end;padding:5px 12px}
  #characterSoulPanel .soul-wheel-wrap>.soul-wheel{grid-area:roda;width:100%;max-width:min(560px,100%)!important;margin:6px auto 0}
  /* o cartão fica parado na sua coluna: preso (sticky) ele rolava junto e cobria a legenda */
  #characterSoulPanel .soul-detail{grid-area:card;position:relative!important;top:auto!important;bottom:auto!important;max-height:none!important;box-shadow:none}
  #characterSoulPanel .soul-legend{grid-area:legenda}
  #characterSoulPanel .soul-resonance{grid-area:reson}
  #characterSoulPanel .soul-como{grid-area:como}
  #characterSoulPanel .soul-detail>header{order:0}
  #characterSoulPanel .soul-detail>.soul-veredito{order:1}
  #characterSoulPanel .soul-detail>.soul-detail-buy{order:2}
  #characterSoulPanel .soul-detail>.soul-aviso{order:3}
  #characterSoulPanel .soul-detail>.soul-detail-effect{order:4}
  #characterSoulPanel .soul-detail>.soul-detail-next{order:5}
  #characterSoulPanel .soul-detail>.soul-precisa{order:6}
  #characterSoulPanel .soul-topo{padding:6px 14px}
  #characterSoulPanel .soul-topo .soul-orb{width:34px;height:34px}
  #characterSoulPanel .soul-topo-nivel strong{font-size:calc(22px * var(--text-scale,1))}
}

/* "Comece aqui": enquanto nenhum grau foi desenvolvido */
.soul-comece{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 22px));padding:2px 8px;border-radius:99px;background:#e2b85c;color:#1a1408;
  font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.soul-comece::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:#e2b85c;transform:translateX(-50%) rotate(45deg);z-index:-1}
.soul-wheel-node.comece-aqui{outline:2px dashed #e2b85c;outline-offset:3px}

/* ---- 3. celular: roda primeiro; o cartão vira gaveta ao tocar num nó ---- */
.soul-gaveta-fechar{display:none}
@media (max-width:760px){
  /* a roda logo depois do topo; os 3 passos, os recursos e o resto vêm depois */
  #characterSoulPanel.active{display:flex;flex-direction:column}
  #characterSoulPanel #soulTreeList,#characterSoulPanel .soul-wheel-wrap{display:contents}
  #characterSoulPanel .soul-topo{order:1}
  #characterSoulPanel .soul-wheel-wrap>.soul-wheel{order:2;width:100%;margin:8px auto 4px}
  #characterSoulPanel .soul-detail{order:3}
  #characterSoulPanel .soul-passos{order:4;margin:8px 0 0}
  #characterSoulPanel .soul-recursos{order:5}
  #characterSoulPanel .soul-legend{order:6}
  #characterSoulPanel .soul-resonance{order:7}
  #characterSoulPanel .soul-como{order:8}
  /* topo fino: nível e pontos na mesma linha, a barra embaixo */
  #characterSoulPanel .soul-topo{grid-template-columns:auto minmax(0,1fr);gap:6px 10px;padding:8px 10px}
  #characterSoulPanel .soul-topo .soul-orb{width:30px;height:30px;font-size:calc(13px * var(--text-scale,1))}
  #characterSoulPanel .soul-topo-nivel{gap:8px}
  #characterSoulPanel .soul-topo-nivel strong{font-size:calc(20px * var(--text-scale,1))}
  #characterSoulPanel .soul-topo-pontos{grid-row:1;grid-column:2;border-top:0;padding:0;justify-content:flex-end;gap:4px 10px}
  #characterSoulPanel .soul-topo-pontos>small{flex:0 1 auto}
  #characterSoulPanel .soul-topo-pontos strong{font-size:calc(20px * var(--text-scale,1))}
  #characterSoulPanel .soul-topo-xp{grid-column:1/-1}
  #characterSoulPanel .soul-passos{grid-template-columns:minmax(0,1fr)}
  #characterSoulPanel .soul-passos-ok{justify-self:end}
  #characterSoulPanel .soul-ajuda-button{position:static;order:9;margin-left:auto}
  #characterSoulPanel .soul-wheel-wrap{grid-template-columns:minmax(0,1fr)!important}
  /* o cartão fica logo abaixo da roda; ao tocar num nó ele vira gaveta presa ao pé da janela (o × devolve ao lugar) */
  #characterSoulPanel .soul-detail{position:relative;max-height:none;box-shadow:none}
  #characterSoulPanel.gaveta-aberta .soul-detail{position:sticky;bottom:0;z-index:5;
    max-height:36vh;overflow:auto!important;border-radius:14px 14px 8px 8px!important;box-shadow:0 -10px 24px rgba(0,0,0,.6)}
  #characterSoulPanel.gaveta-aberta .soul-gaveta-fechar{display:grid;place-items:center;position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;padding:0;
    border:1px solid #4a4f72;border-radius:50%;background:#1b1d31;color:#e8e2f5;font-size:18px;line-height:1;cursor:var(--cur-mao,pointer)}
}

/* ---- 4. menos pintura: pulso e runas só com opacity/transform ---- */
.soul-wheel-node.is-available{animation:none!important}
.soul-wheel-node.is-available::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 18px var(--soul-cor,#9270b1);opacity:0;animation:almaPulsaLeve 1.8s ease-in-out infinite;will-change:opacity}
@keyframes almaPulsaLeve{50%{opacity:1}}
.soul-wheel-node.is-available.acabou-de-subir{animation:almaSobe .9s ease-out!important}
.soul-fundo-runas .gira,.soul-fundo-runas .gira-contra{animation:none!important}
.soul-fundo-runas{animation:almaGira 120s linear infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){.alma-selo-pontos,.soul-wheel-node.is-available::after,.soul-fundo-runas{animation:none!important}}

/* HUD da arena no PC (hud-arena.css, ≥901px): a barra de Alma é fina, então o selo fica dentro dela, na ponta direita. */
@media (min-width:901px){
  html:not(#_) #gameShell #battleVitalsStrip>.vital-alma .alma-selo-pontos{top:50%;right:3px;transform:translateY(-50%);padding:0 6px;font-size:calc(9.5px * var(--text-scale,1));line-height:1.3}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-alma:hover{box-shadow:0 0 0 1px rgba(180,140,255,.7),0 0 10px rgba(150,100,240,.45)}
}