/* ===== LINEUP-SEITE: Champion-Select / Loading-Screen ===== */
body{background:#05020a}
.hx{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#05020a}
.splash{position:absolute;inset:0;z-index:0;will-change:transform;transition:transform .25s linear}
.fb{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 72% 38%,rgba(207,110,195,.38),transparent 55%),radial-gradient(ellipse at 15% 90%,rgba(155,11,136,.45),transparent 50%),linear-gradient(125deg,#000 0,#1d0a1b 45%,#46103f 100%)}
.fbr{position:absolute;left:0;display:flex;width:max-content;font-family:'Russo One';font-style:italic;text-transform:uppercase;line-height:.9;font-size:clamp(7rem,21vw,17rem);color:transparent;-webkit-text-stroke:2px rgba(207,110,195,.3);animation:run 50s linear infinite;white-space:nowrap}
.fbr span{padding-right:.5em}
.fbr:nth-child(1){top:2%}.fbr:nth-child(2){top:34%;animation-direction:reverse;-webkit-text-stroke-color:rgba(255,255,255,.1)}.fbr:nth-child(3){top:66%;animation-duration:64s}
.fb .dia{position:absolute;right:6%;top:50%;width:min(52vw,560px);aspect-ratio:1;transform:translateY(-50%) rotate(45deg);border:2px solid rgba(207,110,195,.4);box-shadow:inset 0 0 90px rgba(207,110,195,.2),0 0 90px rgba(155,11,136,.4)}
.fb .dia::after{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.18)}
.spi{position:absolute;right:0;top:50%;width:min(100%,1215px);height:auto;aspect-ratio:1215/717;transform:translateY(-50%);object-fit:cover;transition:opacity .4s;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(0deg,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 28%),linear-gradient(0deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect;image-rendering:auto}
.splash::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(100%,1215px);background-image:radial-gradient(circle closest-side,rgba(5,2,10,.55) 45%,transparent 55%);background-size:5px 5px;pointer-events:none;opacity:.5}
.spi.off{opacity:0}
.hx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,2,10,.93) 0,rgba(5,2,10,.55) 40%,transparent 72%),linear-gradient(0deg,#05020a 0,transparent 32%),linear-gradient(180deg,rgba(0,0,0,.7),transparent 22%)}
.cut{position:absolute;right:0;bottom:0;z-index:2;width:min(30vw,380px);aspect-ratio:1;background:var(--pink);clip-path:polygon(100% 0,100% 100%,0 100%);transform:translate(100%,100%);animation:cut .9s 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cut{to{transform:none}}
.flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none;}
.flash.go{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.pkb{position:absolute;left:0;right:0;top:92px;z-index:4}
body.live .pkb{top:132px}
.pkb .wrap{display:flex;align-items:center;gap:18px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.pkb .l{color:var(--pink)}.pkb .r{color:var(--mute);margin-left:auto}
.tm{flex:0 1 220px;height:5px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.tm i{position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0);animation:tm 1.1s .15s linear forwards}
@keyframes tm{to{transform:none}}
.hxw{position:relative;z-index:3;width:100%;padding:170px 24px 150px}
.hxw .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:0}
.hl{min-width:0}
.hx h1{font-size:clamp(3.4rem,13vw,10.5rem);line-height:.92;text-shadow:0 8px 50px rgba(0,0,0,.6);white-space:nowrap}
.hx h1 i{display:inline-block;transform:translateY(-130%) scale(1.5);opacity:0;animation:drop .55s calc(.25s + var(--i)*.07s) cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes drop{to{transform:none;opacity:1}}
.stamp{display:inline-block;margin:10px 0 0;padding:6px 18px;border:3px solid var(--pink);color:var(--pink);font-family:'Russo One';font-style:italic;font-size:1.1rem;letter-spacing:.14em;transform:rotate(-5deg);opacity:0;visibility:hidden}
.locked .stamp{visibility:visible;animation:slam .5s .35s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes slam{from{opacity:0;transform:rotate(-14deg) scale(3)}to{opacity:1;transform:rotate(-5deg)}}
.rl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;opacity:0;animation:fade 1s 1.5s forwards}
@keyframes fade{to{opacity:1}}
.mm{width:46px;height:46px;flex:none}
.mm .f{stroke:rgba(255,255,255,.2);fill:none;stroke-width:2.4;stroke-linecap:round}
.mm .a{stroke:var(--pink);fill:none;stroke-width:3.6;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--pink))}
.mm circle.a{fill:var(--pink)}
.hr{display:flex;flex-direction:column;align-items:flex-end;gap:16px;max-width:360px;opacity:0;animation:fade 1s 1.6s forwards}
.plq{padding:18px 24px;background:rgba(18,4,15,.78);backdrop-filter:blur(8px);border-right:5px solid var(--pink);text-align:right;min-width:240px;transition:opacity .25s}
.plq small{display:block;color:var(--pink);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:600}
.plq b{display:block;font-family:'Russo One';font-style:italic;font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1.1;margin:6px 0 2px}
.plq span{color:var(--mute);font-size:.92rem}
.thumbs{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.th{width:84px;aspect-ratio:16/10;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.2);background:linear-gradient(135deg,#3a1236,#12040f);cursor:pointer;padding:0;color:var(--bone);font-family:'Russo One';font-style:italic;font-size:1.2rem;transition:border-color .2s,transform .2s;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.th:hover{transform:translateY(-3px)}.th.on{border-color:var(--pink)}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th span{position:relative}
.th{flex:none}
.thumbs{position:relative;justify-content:flex-start!important;max-width:420px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--pink) transparent;padding-bottom:6px;scroll-snap-type:x proximity;flex-wrap:nowrap!important}
.thumbs .th{scroll-snap-align:center}
.lockwrap{position:absolute;left:50%;bottom:38px;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.sndbtn{width:50px;height:50px;display:grid;place-items:center;border:2px solid var(--pur);background:rgba(18,4,15,.75);color:var(--bone);cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .2s,color .2s}
.sndbtn svg{width:22px;height:22px;fill:currentColor}.sndbtn:hover{background:var(--pink);color:var(--ink)}.sndbtn.off .w{display:none}.sndbtn.off{opacity:.6}
.lockbtn{padding:18px 64px;font-family:'Russo One';font-style:italic;text-transform:uppercase;font-size:1.5rem;letter-spacing:.08em;color:var(--ink);background:var(--pink);border:0;cursor:pointer;clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%);box-shadow:0 0 0 0 rgba(207,110,195,.6);animation:lkp 2s infinite,fade 1s 1.4s both;transition:transform .15s,background .2s}
.lockbtn:hover{background:#fff;transform:scale(1.06)}
.lockbtn:active{transform:scale(.95)}
.locked .lockbtn{background:transparent;color:var(--pink);box-shadow:inset 0 0 0 3px var(--pink);animation:none;font-size:1.05rem;padding:14px 46px}
.locked .lockbtn:hover{background:var(--pink);color:var(--ink)}
@keyframes lkp{0%{filter:drop-shadow(0 0 0 rgba(207,110,195,.8))}70%{filter:drop-shadow(0 0 26px rgba(207,110,195,0))}100%{filter:drop-shadow(0 0 0 rgba(207,110,195,0))}}
.hx.locked{box-shadow:inset 0 0 0 4px var(--pink),inset 0 0 160px rgba(207,110,195,.45)}
.locked .thumbs{opacity:.35;pointer-events:none}
.locked h1{text-shadow:0 0 40px rgba(207,110,195,.7),0 8px 50px rgba(0,0,0,.6)}
.locked .pkb .l::after{content:" \2713 gelockt"}
.hx.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-3px,1px)}20%,80%{transform:translate(5px,-2px)}30%,50%,70%{transform:translate(-8px,3px)}40%,60%{transform:translate(8px,-3px)}}
.locked .splash{filter:saturate(1.25) contrast(1.08)}
.fxl{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.fxl .ring{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border:6px solid var(--pink);border-radius:50%;opacity:0;animation:ring 1s ease-out forwards}
.fxl .ring.r2{border-color:#fff;animation-delay:.15s}
@keyframes ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(34);opacity:0;border-width:1px}}
.fxl .bz{position:absolute;left:50%;top:50%;width:26px;height:36px;margin:-18px -13px;fill:var(--pink);opacity:0;animation:bz 1.1s var(--dl) cubic-bezier(.1,.8,.3,1) forwards}
@keyframes bz{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(var(--r));opacity:0}}
.fxl .banner{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) skewY(-4deg);background:var(--pink);color:var(--ink);padding:18px 0;text-align:center;animation:bn 2.4s cubic-bezier(.2,.9,.2,1) forwards;box-shadow:0 0 80px rgba(207,110,195,.7)}
.fxl .banner b{display:block;font-family:'Russo One';font-style:italic;font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,9vw,6.5rem);line-height:1;letter-spacing:.04em}
.fxl .banner span{display:block;margin-top:6px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.95rem}
@keyframes bn{0%{transform:translateY(-50%) skewY(-4deg) scaleX(0)}14%{transform:translateY(-50%) skewY(-4deg) scaleX(1)}78%{transform:translateY(-50%) skewY(-4deg) scaleX(1);opacity:1}100%{transform:translateY(-50%) skewY(-4deg) scaleX(1) translateX(60%);opacity:0}}
.ti.heart::before{background:#ff6fb7}
.ti.heart{padding:16px 20px;margin-left:-4px;background:linear-gradient(90deg,rgba(207,110,195,.12),transparent);border-left:3px solid #ff6fb7}
.sc{position:relative;padding:96px 0;overflow:hidden;background:#05020a}
.sc.alt{background:linear-gradient(#05020a,var(--plum) 160%)}
.sh{margin-bottom:34px}
.sh small{display:block;color:var(--pink);letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;font-weight:600;margin-bottom:8px}
.sh h2{font-size:clamp(2rem,5vw,3.6rem);margin:0;padding-left:18px;border-left:6px solid var(--pink)}
.rv{opacity:0;transform:translateY(44px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.pg{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.card{position:sticky;top:96px}
.frame{position:relative;padding:3px;background:linear-gradient(135deg,var(--pur),var(--pink));-webkit-mask-image:linear-gradient(to top left,transparent 24.5px,#000 26.5px);mask-image:linear-gradient(to top left,transparent 24.5px,#000 26.5px);transition:transform .2s ease-out}
.frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.32),transparent 55%);opacity:0;transition:opacity .25s;pointer-events:none}
.frame:hover::after{opacity:1}
.pcin{position:relative;aspect-ratio:1;background:var(--plum);-webkit-mask-image:linear-gradient(to top left,transparent 23.0px,#000 25.0px);mask-image:linear-gradient(to top left,transparent 23.0px,#000 25.0px);display:grid;place-items:center;text-align:center;font-family:'Russo One';font-style:italic;text-transform:uppercase;font-size:1.6rem;padding:20px}
.pcin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcin::before{content:attr(data-n)}
.info{margin-top:18px;background:linear-gradient(170deg,#2a0f27,#0c0510);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);padding:6px 22px 30px}
.info h3{font-size:1.1rem;padding:16px 0 10px;color:var(--pink)}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px}
.info dt{color:var(--mute);font-size:.88rem}.info dd{font-weight:600;text-align:right}
.bio p{color:#d7cddb;line-height:1.85;margin-bottom:16px;font-size:1.08rem;max-width:62ch}
.quote{margin-top:26px;padding:24px 28px;background:var(--plum);border-left:5px solid var(--pink);font-family:'Russo One';font-style:italic;font-size:1.3rem;line-height:1.35;position:relative}
.quote::before{content:"\201C";position:absolute;right:18px;top:-6px;font-size:6rem;color:rgba(207,110,195,.25);line-height:1}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.cc{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(160deg,#3a1236,#12040f);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .3s;opacity:0;transform:translateY(30px) scale(.94)}
.in .cc{opacity:1;transform:none}
.in .cc:hover{transform:translateY(-8px);filter:brightness(1.15)}
.cc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:'Russo One';font-style:italic;font-size:8rem;color:rgba(207,110,195,.2)}
.cc.sig{box-shadow:inset 0 0 0 3px var(--pink)}
.cc .nm{position:absolute;left:0;right:0;bottom:0;padding:46px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88));font-family:'Russo One';font-style:italic;text-transform:uppercase;font-size:1.1rem}
.cc .tg{position:absolute;left:10px;top:10px;padding:4px 12px;background:var(--pink);color:var(--ink);font-weight:600;font-size:.72rem;letter-spacing:.1em;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.cc .mx{position:absolute;right:10px;top:10px;font-family:'Russo One';font-style:italic;font-size:.85rem;color:#ffd36b}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sx{padding:26px 14px 22px;text-align:center;background:linear-gradient(170deg,#2a0f27,#0c0510);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);border-bottom:4px solid var(--pink)}
.sx b{display:block;font-family:'Russo One';font-style:italic;font-size:clamp(2rem,4vw,3rem);color:#fff;font-weight:400}
.sx span{color:var(--mute);font-size:.88rem}
.sx .bar{height:5px;background:rgba(255,255,255,.1);margin:12px 14px 0}.sx .bar i{display:block;height:100%;background:var(--pink);width:0;transition:width 1.4s .3s cubic-bezier(.2,.8,.2,1)}
.in .sx .bar i{width:var(--w)}
.radar{width:100%;max-width:420px;margin:0 auto;display:block;overflow:visible}
.radar .g{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.radar .ax{stroke:rgba(255,255,255,.1)}
.radar .pl{fill:rgba(207,110,195,.32);stroke:var(--pink);stroke-width:3;stroke-linejoin:round;transform-origin:50% 50%;transform:scale(0);transition:transform 1.2s .2s cubic-bezier(.2,1.2,.3,1)}
.in .radar .pl{transform:none}
.radar text{fill:var(--bone);font:600 12px 'Familjen Grotesk',sans-serif;text-anchor:middle}
.tl{position:relative;padding-left:38px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;background:linear-gradient(var(--pink),var(--pur));transform-origin:top;transform:scaleY(0);transition:transform 1.3s ease-out}
.in .tl::before{transform:none}
.ti{position:relative;margin-bottom:30px}
.ti::before{content:"";position:absolute;left:-38px;top:3px;width:19px;height:19px;background:var(--pink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.ti small{color:var(--pink);font-weight:600;letter-spacing:.06em}
.ti h3{font-size:1.3rem;margin:4px 0 6px;font-family:'Familjen Grotesk',sans-serif;font-style:normal;text-transform:none;font-weight:600}
.ti p{color:#cfc4d3;line-height:1.7;max-width:60ch}
.runes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.rn{display:flex;gap:16px;padding:22px;background:linear-gradient(170deg,#2a0f27,#0c0510);border-top:3px solid var(--pink);line-height:1.6;color:#d7cddb;transition:transform .25s}
.rn:hover{transform:translateY(-6px)}
.rn b{flex:none;width:44px;height:50px;display:grid;place-items:center;background:var(--pink);color:var(--ink);font-family:'Russo One';font-style:italic;font-weight:400;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.build{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.bs{padding:34px 18px;text-align:center;background:radial-gradient(circle at 50% 0,#3a1236,#0c0510 75%);clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);border:0;position:relative;transition:transform .25s}
.bs:hover{transform:scale(1.05)}
.bs small{display:block;color:var(--pink);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;font-weight:600;margin-bottom:6px}
.bs b{font-weight:600}
.pn{margin-top:0}
@media(max-width:900px){
 .lockwrap{bottom:74px}.lockbtn{padding:15px 40px}.hxw{padding-bottom:170px}
 .pg{grid-template-columns:1fr;gap:34px}.card{position:static;max-width:380px}
 .sg{grid-template-columns:1fr}
 .hxw .wrap{flex-direction:column;align-items:flex-start}
 .hr{align-items:flex-start;max-width:none}.plq{text-align:left;border-right:0;border-left:5px solid var(--pink)}.thumbs{justify-content:flex-start}
 .hxw{padding-bottom:70px}.pkb .tm{display:none}
}
@media(prefers-reduced-motion:reduce){.hx h1 i,.rl,.hr,.cut,.lockbtn{opacity:1!important;transform:none!important}.rv,.cc{opacity:1!important;transform:none!important}.radar .pl{transform:none!important}.flash{display:none}.sx .bar i{width:var(--w)!important}.tl::before{transform:none!important}}

.th{width:auto!important;aspect-ratio:auto!important;background:none!important;border:0!important;clip-path:none!important;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;font-family:inherit!important;font-style:normal!important}
.th .tn{position:relative;display:block;width:92px;height:92px;overflow:hidden;border:2px solid rgba(255,255,255,.25);background:linear-gradient(135deg,#3a1236,#12040f);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);transition:border-color .2s,transform .2s,box-shadow .2s}
.th .tn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th .tn em{position:absolute;left:6px;top:4px;font:italic 1rem 'Russo One';color:#fff;text-shadow:0 1px 6px #000;font-style:italic}
.th b{font:600 .78rem 'Familjen Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.th:hover .tn{transform:translateY(-4px)}
.th.on .tn{border-color:var(--pink);box-shadow:0 0 22px rgba(207,110,195,.6)}.th.on b{color:#fff}
.thumbs{gap:14px!important}

.sc{scroll-margin-top:56px}