/* sub-abas Lista / Seleção (usadas nas duas visualizações) */
.hero-views{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:24px}
.hero-views a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;color:#a99fc9;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.hero-views a:hover{color:#fff}
.hero-views a.active{background:linear-gradient(135deg,#7c4dff,#5b2fd6);color:#fff;box-shadow:0 0 16px rgba(124,77,255,.45)}

/* palco */
.hs{position:relative;overflow:hidden;padding:30px 0 50px;min-height:calc(100vh - 80px);
  background:radial-gradient(ellipse 60% 55% at 50% 55%,rgba(124,77,255,.35),transparent 70%),radial-gradient(ellipse at 15% 20%,rgba(58,176,255,.12),transparent 50%),linear-gradient(180deg,#0b0818,#140c2c 50%,#0b0818)}
.hs-stars{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#cfc4ff,transparent),radial-gradient(1.5px 1.5px at 55% 15%,#fff,transparent),radial-gradient(1px 1px at 75% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 30%,#b9a8ff,transparent),radial-gradient(1px 1px at 45% 85%,#fff,transparent),radial-gradient(1.5px 1.5px at 20% 50%,#d9d0ff,transparent),radial-gradient(1px 1px at 65% 40%,#fff,transparent);
  background-size:420px 420px;animation:hsStars 120s linear infinite}
@keyframes hsStars{to{background-position:420px 840px}}
.hs-top{position:relative;z-index:1}
.hs-top .section-title{margin-bottom:12px}

.hs-bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;max-width:1500px;margin:0 auto 26px;padding:0 24px}
.hs-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hs-label{font-family:'Chakra Petch',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8f86b8;margin-right:6px}
.hs-role,.hs-sort{width:42px;height:42px;border-radius:50%;border:1px solid rgba(167,139,250,.35);background:radial-gradient(circle at 50% 35%,#2a1f52,#120c26);color:#cfc4ff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;transition:all .2s}
.hs-role img{width:26px;height:26px;object-fit:contain;filter:grayscale(.5) brightness(.9)}
.hs-role:hover,.hs-sort:hover{border-color:#a78bfa;color:#fff}
.hs-role.active,.hs-sort.active{border-color:#c4b5fd;box-shadow:0 0 14px rgba(167,139,250,.7),inset 0 0 10px rgba(124,77,255,.5);color:#fff}
.hs-role.active img{filter:none}
.hs-search{position:relative;display:inline-flex;align-items:center;margin-left:6px}
.hs-search input{width:220px;height:42px;padding:0 38px 0 14px;border-radius:6px;border:1px solid rgba(167,139,250,.4);background:rgba(10,6,24,.75);color:#fff;font-size:14px}
.hs-search input:focus{outline:none;border-color:#c4b5fd;box-shadow:0 0 12px rgba(124,77,255,.5)}
.hs-search svg{position:absolute;right:12px;color:#a78bfa;pointer-events:none}

.hs-stage{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(300px,380px) 1fr;gap:10px;align-items:start;max-width:1500px;margin:0 auto;padding:0 16px}
.hs-cluster{display:flex;flex-direction:column;gap:2px}
.hs-left{align-items:flex-end}
.hs-right{align-items:flex-start}
.hs-row{display:flex;gap:6px;transform:translateX(calc(var(--shift,0) * 70px))}

.hs-slot{--s:64px;position:relative;width:var(--s);height:var(--s);padding:0;border:0;border-radius:50%;cursor:pointer;background:none;transition:transform .15s}
.hs-slot::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 200deg,#8a5a12,#f5c451,#fff1b8,#f5c451,#8a5a12,#c58b22,#8a5a12);box-shadow:0 3px 10px rgba(0,0,0,.6)}
.hs-slot img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #1a1030;background:#1a1030}
.hs-slot:hover{transform:scale(1.12);z-index:2}
.hs-slot:hover::before{box-shadow:0 0 14px rgba(245,196,81,.8)}
.hs-slot.sel{z-index:3;transform:scale(1.12)}
.hs-slot.sel::before{background:conic-gradient(from 0deg,#3ab0ff,#c4f1ff,#3ab0ff,#1f6fff,#3ab0ff);box-shadow:0 0 18px #3ab0ff,0 0 36px rgba(58,176,255,.6);animation:hsSpin 3s linear infinite}
@keyframes hsSpin{to{filter:hue-rotate(40deg)}}
.hs-badge{position:absolute;left:-2px;top:-2px;width:16px;height:16px;border-radius:50%;border:2px solid #120c26;z-index:1}
.hs-r1{background:#3ab0ff}.hs-r2{background:#f59e0b}.hs-r3{background:#ef4444}.hs-r4{background:#f43f5e}.hs-r5{background:#22c55e}.hs-r6{background:#a855f7}
.hs-empty{color:#a99fc9;padding:20px}

/* centro */
.hs-center{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:10px}
.hs-plinth{position:absolute;left:50%;top:250px;width:340px;height:90px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(124,77,255,.55),rgba(124,77,255,.1) 55%,transparent 70%);box-shadow:0 0 0 2px rgba(167,139,250,.25),0 0 0 22px rgba(124,77,255,.06)}
.hs-hero{position:relative;width:240px;height:240px;margin-bottom:28px}
.hs-hero.pop{animation:hsPop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes hsPop{from{opacity:.2;transform:scale(.85)}to{opacity:1;transform:none}}
.hs-hero-ring{position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 0deg,#7c4dff,#3ab0ff,#c4b5fd,#7c4dff);animation:hsRot 6s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);mask:radial-gradient(circle,transparent 63%,#000 64%);filter:drop-shadow(0 0 14px rgba(124,77,255,.9))}
@keyframes hsRot{to{transform:rotate(360deg)}}
.hs-hero img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #1a1030;box-shadow:0 0 50px rgba(124,77,255,.6)}
.hs-role-tag{display:inline-block;padding:4px 14px;border-radius:20px;font-family:'Chakra Petch',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.hs-name{font-family:'Chakra Petch',sans-serif;font-size:38px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px;color:#fff;text-shadow:0 0 20px rgba(124,77,255,.8)}
.hs-abil{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;min-height:48px}
.hs-ab{position:relative;width:46px;height:46px}
.hs-ab img{width:100%;height:100%;border-radius:8px;border:2px solid rgba(167,139,250,.55);object-fit:cover;background:#120c26}
.hs-ab b{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:5px;background:#120c26;border:1px solid #a78bfa;font-size:11px;line-height:16px;color:#fff}
.hs-actions{display:flex;align-items:center;gap:14px}
.hs-random{width:54px;height:54px;border-radius:50%;border:2px solid #3ab0ff;background:radial-gradient(circle at 50% 35%,#1f6fff,#0b1d4a);color:#fff;font-family:'Chakra Petch',sans-serif;font-size:26px;font-weight:700;cursor:pointer;box-shadow:0 0 18px rgba(58,176,255,.7);transition:transform .2s}
.hs-random:hover{transform:rotate(-12deg) scale(1.08)}
.hs-ready{position:relative;display:inline-block;padding:14px 54px;font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.04em;
  background:linear-gradient(180deg,#5b3bd1,#33208a);border:2px solid #9b86ff;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);box-shadow:inset 0 0 18px rgba(196,181,253,.5);transition:filter .2s}
.hs-ready:hover{filter:brightness(1.25)}
.hs-count{margin-top:16px;color:#8f86b8;font-family:'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.hs-count span{color:#fff;font-size:18px}

@media (max-width:1280px){.hs-slot{--s:54px}.hs-row{transform:translateX(calc(var(--shift,0) * 58px))}}
@media (max-width:1060px){.hs-slot{--s:46px}.hs-row{gap:4px;transform:translateX(calc(var(--shift,0) * 48px))}.hs-stage{grid-template-columns:1fr 280px 1fr}.hs-hero{width:180px;height:180px}.hs-plinth{top:190px;width:260px}.hs-name{font-size:28px}}
@media (max-width:900px){
  .hs-stage{grid-template-columns:1fr;gap:20px}
  .hs-center{order:-1}
  .hs-cluster{align-items:center}
  .hs-row{transform:none;flex-wrap:wrap;justify-content:center}
  .hs-left,.hs-right{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .hs-left .hs-row,.hs-right .hs-row{display:contents}
  .hs-slot{--s:52px}
  .hs-bar{justify-content:center}
  .hs-search input{width:100%}
}

/* rodízio gratuito: espiral azul no canto do retrato */
.hs-free{position:absolute;left:-4px;top:-4px;z-index:2;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 35%,#6fd0ff,#1a6fe0 70%);border:2px solid #0d1a3a;color:#fff;box-shadow:0 0 8px rgba(58,176,255,.9)}
.hs-free svg{width:12px;height:12px}
.hs-slot .hs-badge{left:auto;right:-2px}
.hs-freebtn .hs-free{position:static;width:24px;height:24px}
.hs-freebtn{position:relative}
.hs-free-tag{display:inline-block;padding:4px 12px;border-radius:20px;font-family:'Chakra Petch',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cdeeff;background:rgba(58,176,255,.2);border:1px solid #3ab0ff;margin-bottom:6px}
.hs-free-tag[hidden]{display:none}