/* /upgrade/bandana-estrela.css -- a estrela das 5 pedras em volta da Bandana (bandana-estrela.js). */
.bes{--bes-cor:#e0314a;--bes-cor2:#b04dff;position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:6px auto 14px;isolation:isolate}
.bes::before{content:"";position:absolute;inset:14%;border:1px dashed var(--line-hi,var(--border));border-radius:50%;z-index:-1}
.bes::after{content:"";position:absolute;inset:26%;border-radius:50%;z-index:-2;background:radial-gradient(circle,color-mix(in srgb,var(--bes-cor) 22%,transparent),transparent 70%)}
.bes-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;text-align:center;pointer-events:none}
.bes-centro img{width:84px;height:84px;border-radius:14px;box-shadow:0 0 22px color-mix(in srgb,var(--bes-cor2) 45%,transparent)}
.bes-centro b{font:800 14px var(--display,inherit);color:var(--t-hi,var(--text))}
.bes-centro small{font-size:11px;color:var(--t-low,var(--muted))}
.bes-pedra{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:1px;width:78px;padding:6px 4px;border-radius:12px;
  border:1px solid var(--border);background:var(--s-850,var(--card));color:var(--t-mid,var(--muted));cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.bes-pedra img{width:40px;height:40px}
.bes-pedra .bes-n{font:700 11px var(--body,inherit);color:var(--t-hi,var(--text))}
.bes-pedra .bes-nv{font:600 11px var(--mono,monospace);font-variant-numeric:tabular-nums;white-space:nowrap}
.bes-pedra.sobe .bes-nv{color:#3ddc97}
.bes-pedra:hover{border-color:color-mix(in srgb,var(--bes-cor) 60%,var(--border));transform:translate(-50%,-50%) scale(1.04)}
.bes-pedra.on{border-color:var(--bes-cor);box-shadow:0 0 0 2px color-mix(in srgb,var(--bes-cor) 35%,transparent),0 0 18px color-mix(in srgb,var(--bes-cor) 35%,transparent)}
.bes-pedra:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bes-oculta{display:none!important}
@media (max-width:420px){.bes-pedra{width:68px}.bes-pedra img{width:34px;height:34px}.bes-centro img{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.bes-pedra{transition:none}.bes-pedra:hover{transform:translate(-50%,-50%)}}
/* com a estrela, embaixo só ficam a pedra escolhida e o Amuleto: 2 colunas largas, para "Nv 14" caber no − e + */
#screen-bandana .bes ~ .tc-partes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:560px){#screen-bandana .bes ~ .tc-partes{grid-template-columns:minmax(0,1fr)!important}}