/* Renigt: character-select hero */
.stage-hero{position:relative;min-height:calc(100svh - 64px);padding:clamp(28px,5vh,64px) 0 30px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center}
.stage-hero .stars{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.stage-hero .swirl{z-index:-1;inset:-20% -10% 30%}
.stage-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 70%,var(--bg))}
.hero-head{text-align:center;position:relative;z-index:3;animation:fadeUp 1s .1s both}
.hero-head h1{font-size:clamp(44px,min(6.4vw,9vh),92px)}
.hero-head .badge{margin-bottom:18px}
.hero-head h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-head h1 .ln>span{display:inline-block;animation:lineUp 1.1s cubic-bezier(.2,.9,.2,1) both}
.hero-head h1 .ln:nth-child(2)>span{animation-delay:.15s}
.grad{background:linear-gradient(90deg,#fff,#ffb3e0 40%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-head .lead{max-width:540px;margin:14px auto 22px;color:var(--mute);font-size:17px}
.hero-head .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@keyframes lineUp{from{transform:translateY(110%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}
@keyframes ringIn{from{opacity:0;transform:scale(.7) translateY(60px)}}
.ring-wrap{--R:520px;--cw:210px;--ch:290px;position:relative;width:100%;height:calc(var(--ch) + 120px);margin-top:4px;perspective:1700px;perspective-origin:50% 30%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;animation:ringIn 1.6s .2s cubic-bezier(.2,.8,.2,1) backwards}
.ring-wrap.dragging{cursor:grabbing}
.ring{position:absolute;left:50%;top:30px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);transform-style:preserve-3d;will-change:transform}
.rc{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#1a1636;border:1px solid rgba(255,255,255,.12);transform:rotateY(calc(var(--i) * 36deg)) translateZ(var(--R));backface-visibility:hidden;-webkit-box-reflect:below 8px linear-gradient(transparent 72%,rgba(0,0,0,.28));transition:border-color .3s,box-shadow .3s}
.rc img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;pointer-events:none}
.rc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,11,30,.75),transparent 45%)}
.rc span{position:absolute;left:12px;bottom:10px;z-index:1;font-weight:800;font-size:15px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.rc.front{border-color:rgba(0,229,255,.85);box-shadow:0 0 0 1px rgba(255,60,172,.6),0 30px 80px -10px rgba(139,92,246,.75)}
.floor{position:absolute;left:50%;top:calc(var(--ch) + 40px);width:min(1200px,140%);height:220px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 40% at 50% 30%,rgba(139,92,246,.45),transparent 70%);pointer-events:none}
.floor::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,229,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.22) 1px,transparent 1px);background-size:60px 30px;transform:perspective(300px) rotateX(60deg);transform-origin:50% 0;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 0,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 70% at 50% 0,#000,transparent 75%)}
.ring-name{position:relative;z-index:3;margin-top:-70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;animation:fadeUp 1s 1s both}
.ring-name strong{font-size:clamp(30px,4vw,46px);letter-spacing:-.04em;line-height:1.05}
.drag-hint{margin-top:8px;font-size:12.5px;color:var(--dim)}
.mini-search{flex:1;max-width:340px;margin-left:auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:11px;background:#1d1940;border:1px solid var(--line-2)}
.mini-search:focus-within{border-color:var(--blue-2)}
.mini-search svg{width:15px;height:15px;color:var(--mute)}
.mini-search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px}
@media (max-height:820px) and (min-width:641px){.ring-wrap{--R:440px;--cw:180px;--ch:248px}}
@media (max-width:980px){.ring-wrap{--R:380px;--cw:170px;--ch:235px}}
@media (max-width:640px){.stage-hero{padding-top:76px;min-height:auto}.ring-wrap{--R:240px;--cw:130px;--ch:180px;margin-top:6px}.ring-name{margin-top:-46px}.main-head{flex-wrap:wrap}.mini-search{order:3;max-width:none;flex-basis:100%}.mini-search kbd{display:none}}
@media (prefers-reduced-motion:reduce){.ring-wrap,.hero-head,.ring-name{animation:none}}

/* neon ring with any number of cards */
.rc{transform:rotateY(calc(var(--i) * 360deg / var(--n,6))) translateZ(var(--R));background:linear-gradient(180deg,#2c1a55,#131126)}
.rc[data-style=pastel]{background:linear-gradient(180deg,#5a3d7a,#2a2350)}
.rc img{object-fit:contain;object-position:50% 100%;padding-top:8px}
.rc.front{border-color:rgba(255,60,172,.9);box-shadow:0 0 0 1px rgba(0,229,255,.6),0 0 40px rgba(255,60,172,.55),0 30px 80px -10px rgba(139,92,246,.8)}
.ring-wrap{--R:620px;--cw:200px;--ch:300px}
.floor::before{background-image:linear-gradient(rgba(0,229,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,60,172,.3) 1px,transparent 1px)}
.floor{background:radial-gradient(ellipse 50% 40% at 50% 30%,rgba(255,60,172,.4),rgba(139,92,246,.25) 40%,transparent 70%)}
.scan{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);mix-blend-mode:overlay}
.stage-hero .swirl{background:radial-gradient(40% 35% at 30% 30%,rgba(255,60,172,.45),transparent 70%),radial-gradient(35% 30% at 70% 25%,rgba(0,229,255,.25),transparent 70%),radial-gradient(45% 40% at 55% 55%,rgba(91,33,182,.7),transparent 70%)}
.ring-name strong{text-shadow:0 0 30px rgba(255,60,172,.6)}
@media (max-height:820px) and (min-width:641px){.ring-wrap{--R:540px;--cw:170px;--ch:255px}}
@media (max-width:980px){.ring-wrap{--R:480px;--cw:160px;--ch:240px}}
@media (max-width:640px){.ring-wrap{--R:330px;--cw:120px;--ch:180px}}