/* Aufstieg: Markierungen */
.hero.gold{background:linear-gradient(150deg,#d9a92c 0%,#a8780f 45%,#6e4c05 100%);box-shadow:0 8px 30px rgba(201,162,39,.45)}
.hero.gold .bar i{background:linear-gradient(90deg,#fff3c4,#ffffff)}
.ascbanner{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.2);border-radius:12px;padding:10px 12px;font-size:14px;flex-wrap:wrap}
.ascbanner b{display:block;font-size:15px} .ascbanner>div{flex:1;min-width:170px}
.ascbanner .btn{background:#fff;color:#5a3d00;padding:8px 12px;font-size:13px}
.upnote{display:inline-flex;align-items:center;gap:5px;background:var(--gold-soft);color:#8a5f0c;border:1px solid var(--gold);border-radius:99px;padding:4px 10px;font:700 12px var(--f-body);margin-top:4px}
:root[data-theme="dark"] .upnote{color:var(--gold)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .upnote{color:var(--gold)}}
button.lvl.ready{background:var(--gold);color:#241a00}
/* Aufstieg: Bühne */
.asc{position:fixed;inset:0;z-index:96;display:grid;place-items:center;overflow:hidden;color:#fff;padding:24px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:ascIn .35s ease both;transition:opacity .35s}
.asc.out{opacity:0} @keyframes ascIn{from{opacity:0}}
.asc>div:not(.asc-box){pointer-events:none}
.asc-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,rgba(255,230,150,.14) 0deg 7deg,transparent 7deg 18deg);opacity:0;animation:ascSpin 40s linear infinite,ascFade 1.2s ease .5s forwards}
@keyframes ascSpin{to{transform:rotate(360deg)}} @keyframes ascFade{to{opacity:1}}
.asc-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.97),rgba(255,240,200,.35) 30%,transparent 62%);opacity:0;z-index:3}
@keyframes ascFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.asc-parts{position:absolute;inset:0;z-index:4}
.asc-parts i{position:absolute;opacity:0;animation-name:pfly;animation-timing-function:cubic-bezier(.15,.6,.35,1);animation-fill-mode:forwards}
.p-spark{width:6px;height:6px;border-radius:50%;box-shadow:0 0 8px 2px rgba(255,220,140,.9)}
.p-ember{width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px 3px rgba(255,140,40,.85)}
.p-leaf{width:18px;height:7px;border-radius:50%;border:1px solid rgba(60,58,20,.6)}
.p-feather{width:30px;height:7px;border-radius:50% 50% 50% 50%/90% 90% 10% 10%;box-shadow:0 0 8px rgba(255,230,150,.7)}
.p-confetti{width:9px;height:15px;border-radius:2px}
@keyframes pfly{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}10%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(1)}}
.asc-box{position:relative;z-index:5;max-width:440px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.asc-badge,.asc-from{width:min(48vw,210px);height:min(48vw,210px);position:relative;z-index:2}
.asc-from{position:absolute;top:0;left:50%;transform:translateX(-50%);animation:ascOld .5s ease .1s forwards}
@keyframes ascOld{to{opacity:0;transform:translateX(-50%) scale(.5);filter:blur(3px)}}
.asc-badge svg,.asc-from svg{width:100%;height:100%}
.asc-new{opacity:0}
@keyframes aGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,215,90,.45))}50%{filter:drop-shadow(0 0 28px rgba(255,215,90,.95))}}
.asc-eyebrow,.asc-title,.asc-motto,.asc-de,.asc-info,.asc-ok{opacity:0;animation:aText .6s ease forwards}
.asc-eyebrow{font:700 12px var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:#ffe9a0;animation-delay:1.1s}
.asc-title{font:700 clamp(34px,10vw,54px)/1 var(--f-logo);letter-spacing:.04em;margin:0;color:#fff;text-shadow:0 2px 20px rgba(255,210,90,.6);animation-delay:1.25s}
.asc-motto{font:italic 700 22px var(--f-display);color:#ffe9a0;animation-delay:1.45s}
.asc-de{font-size:14px;opacity:.85;animation-delay:1.55s}
.asc-info{font-size:14.5px;line-height:1.5;background:rgba(0,0,0,.28);border:1px solid rgba(255,230,150,.35);border-radius:14px;padding:12px 14px;margin-top:6px;animation-delay:1.75s}
.asc-ok{margin-top:6px;min-width:200px;animation-delay:1.95s}
@keyframes aText{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-wave{position:absolute;left:50%;top:38%;width:40vmin;height:40vmin;border-radius:50%;border:4px solid rgba(255,200,120,.9);transform:translate(-50%,-50%) scale(0);opacity:0;z-index:1}
@keyframes wave{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}

/* I · Schmiede: Schild kracht auf den Amboss, Druckwelle, Glut steigt auf */
.asc-forge .asc-new{animation:aSlam .42s cubic-bezier(.7,0,.9,.4) .15s forwards,aGlow 2.4s ease-in-out 1.2s infinite}
@keyframes aSlam{0%{opacity:0;transform:scale(3.4) rotate(-8deg)}100%{opacity:1;transform:scale(1)}}
.asc-forge .asc-box{animation:aShake .45s ease .57s}
@keyframes aShake{15%{transform:translate(-10px,6px)}30%{transform:translate(9px,-6px)}45%{transform:translate(-7px,4px)}60%{transform:translate(5px,-3px)}80%{transform:translate(-2px,1px)}}
.asc-forge .asc-flash{animation:ascFlash .45s ease .55s}
.asc-forge .fx-wave.w1{animation:wave .9s ease-out .57s forwards} .asc-forge .fx-wave.w2{animation:wave 1.1s ease-out .72s forwards;border-color:rgba(255,140,40,.7)}
.fx-anvil{position:absolute;left:50%;bottom:-10vh;width:120vmin;height:40vh;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,120,30,.55),transparent 65%);animation:ascFade 1s ease .55s both;opacity:0}

/* II · Legion: Banner fahren ein, Helm fällt, Schwerthieb blitzt quer über den Schirm */
.asc-steel .asc-new{animation:aDrop .8s cubic-bezier(.3,1.6,.5,1) .35s forwards,aGlow 2.4s ease-in-out 1.6s infinite}
@keyframes aDrop{0%{opacity:1;transform:translateY(-110vh) rotate(-30deg)}100%{opacity:1;transform:none}}
.fx-banner{position:absolute;top:0;bottom:0;width:22vw;max-width:170px;background:repeating-linear-gradient(180deg,#8b1d24 0 34px,#6e141a 34px 40px);box-shadow:inset 0 0 0 6px #c9a227,0 0 30px rgba(0,0,0,.5);z-index:1}
.fx-banner::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:60px;background:linear-gradient(135deg,transparent 50%,#0b1119 50%),linear-gradient(225deg,transparent 50%,#0b1119 50%);background-size:50% 100%;background-repeat:no-repeat;background-position:left,right}
.fx-banner.l{left:4vw;transform:translateY(-105%);animation:banner .7s cubic-bezier(.2,.9,.3,1.1) .05s forwards}
.fx-banner.r{right:4vw;transform:translateY(-105%);animation:banner .7s cubic-bezier(.2,.9,.3,1.1) .18s forwards}
@keyframes banner{to{transform:none}}
.fx-slash{position:absolute;left:-20%;top:50%;width:140%;height:6px;background:linear-gradient(90deg,transparent,#fff 45%,#cfe3ff 55%,transparent);transform:rotate(-24deg) scaleX(0);transform-origin:left;box-shadow:0 0 22px 6px rgba(200,225,255,.8);z-index:3;animation:slash .35s ease-out 1s forwards}
@keyframes slash{0%{transform:rotate(-24deg) scaleX(0);opacity:1}70%{transform:rotate(-24deg) scaleX(1);opacity:1}100%{transform:rotate(-24deg) scaleX(1);opacity:0}}
.asc-steel .asc-flash{animation:ascFlash .4s ease 1.05s}

/* III · Lorbeer: Abzeichen wirbelt ein, ein großer Kranz schließt sich, Blätter spiralen */
.asc-laurel .asc-new{animation:aSpin 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards,aGlow 2.4s ease-in-out 1.6s infinite}
@keyframes aSpin{0%{opacity:0;transform:perspective(600px) rotateY(1440deg) scale(.1)}60%{opacity:1}100%{opacity:1;transform:perspective(600px) rotateY(0) scale(1)}}
.fx-wreath{position:absolute;left:50%;top:calc(24px + min(24vw,105px));width:min(78vw,340px);height:min(78vw,340px);transform:translate(-50%,-50%) rotate(-200deg) scale(.3);opacity:0;z-index:1;animation:wreath 1.2s cubic-bezier(.2,.8,.2,1) .7s forwards;filter:drop-shadow(0 0 14px rgba(215,211,154,.6))}
.fx-wreath svg{width:100%;height:100%}
@keyframes wreath{to{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}}
.asc-laurel .asc-flash{animation:ascFlash .7s ease 1.2s}
.asc-laurel .asc-rays{background:repeating-conic-gradient(from 0deg,rgba(215,211,154,.14) 0deg 5deg,transparent 5deg 12deg)}

/* IV · Adler: Wolken öffnen sich, riesige Schwingen breiten sich aus, Federn segeln */
.asc-sky .asc-new{animation:aRise 1.1s cubic-bezier(.2,.8,.2,1.1) .3s forwards,aGlow 2.4s ease-in-out 1.6s infinite}
@keyframes aRise{0%{opacity:0;transform:translateY(60vh) scale(.4)}70%{opacity:1;transform:translateY(-14px) scale(1.12)}100%{opacity:1;transform:none}}
.fx-cloud{position:absolute;top:0;bottom:0;width:60%;background:radial-gradient(ellipse at 70% 50%,rgba(255,255,255,.55),rgba(255,255,255,.15) 45%,transparent 70%);z-index:4}
.fx-cloud.c1{left:-5%;animation:cloudL 1.4s ease-in .1s forwards} .fx-cloud.c2{right:-5%;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.55),rgba(255,255,255,.15) 45%,transparent 70%);animation:cloudR 1.4s ease-in .1s forwards}
@keyframes cloudL{to{transform:translateX(-90%);opacity:0}} @keyframes cloudR{to{transform:translateX(90%);opacity:0}}
.fx-wing{position:absolute;top:calc(24px + min(24vw,105px) - 20vmin);width:min(46vw,300px);height:auto;z-index:1;fill:#e0b43c;filter:drop-shadow(0 0 18px rgba(255,215,90,.7));opacity:0}
.fx-wing svg{width:100%;height:auto;display:block}
.fx-wing.l{right:50%;transform-origin:right 60%;animation:wingL 1s cubic-bezier(.2,.9,.3,1.2) 1s forwards}
.fx-wing.r{left:50%;transform-origin:left 60%;animation:wingR 1s cubic-bezier(.2,.9,.3,1.2) 1s forwards} .fx-wing.r svg{transform:scaleX(-1)}
@keyframes wingL{0%{opacity:0;transform:scaleX(0) rotate(30deg)}100%{opacity:.9;transform:none}}
@keyframes wingR{0%{opacity:0;transform:scaleX(0) rotate(-30deg)}100%{opacity:.9;transform:none}}
.asc-sky .asc-flash{animation:ascFlash 1s ease 1.05s}

/* V · Schlacht: Zwei Gladii fliegen ein und kreuzen sich, Doppelblitz, Risse */
.asc-battle .asc-new{animation:aClash .8s ease 1.05s forwards,aGlow 2s ease-in-out 1.9s infinite}
@keyframes aClash{0%{opacity:0;transform:scale(0) rotate(-120deg)}45%{opacity:1;transform:scale(1.4) rotate(10deg)}62%{transform:scale(.9) rotate(-5deg)}80%{transform:scale(1.12)}100%{opacity:1;transform:none}}
.fx-sword{position:absolute;left:50%;top:calc(24px + min(24vw,105px));width:min(12vw,60px);height:min(60vw,300px);z-index:1;filter:drop-shadow(0 0 12px rgba(255,220,120,.8))}
.fx-sword svg{width:100%;height:100%}
.fx-sword.l{transform:translate(-50%,-50%) translateX(-120vw) rotate(-45deg);animation:swL .55s cubic-bezier(.6,0,.4,1) .3s forwards}
.fx-sword.r{transform:translate(-50%,-50%) translateX(120vw) rotate(45deg);animation:swR .55s cubic-bezier(.6,0,.4,1) .3s forwards}
@keyframes swL{to{transform:translate(-50%,-50%) rotate(-40deg)}} @keyframes swR{to{transform:translate(-50%,-50%) rotate(40deg)}}
.asc-battle .asc-flash{animation:ascFlash .22s ease .82s,ascFlash .3s ease 1.15s}
.asc-battle .asc-box{animation:aShake .4s ease .85s}
.fx-cracks{position:absolute;inset:0;z-index:2;opacity:0;background:
 linear-gradient(20deg,transparent 49.6%,rgba(255,240,180,.8) 50%,transparent 50.4%),linear-gradient(-35deg,transparent 49.7%,rgba(255,240,180,.7) 50%,transparent 50.3%),
 linear-gradient(75deg,transparent 49.7%,rgba(255,240,180,.6) 50%,transparent 50.3%),linear-gradient(-80deg,transparent 49.7%,rgba(255,240,180,.6) 50%,transparent 50.3%);animation:cracks 1.2s ease .85s forwards}
@keyframes cracks{0%{opacity:1}100%{opacity:0}}

/* VI · Konsul: Schwarz, Trommelwirbel, Vorhang auf, Explosion, Feuerwerk, Goldregen, Krone */
.asc-imperial{animation:ascIn .2s both,punch .6s cubic-bezier(.2,1.6,.4,1) 1.9s}
@keyframes punch{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
.asc-imperial .asc-rays{inset:-80%;background:repeating-conic-gradient(from 0deg,rgba(255,215,90,.32) 0deg 5deg,transparent 5deg 12deg);animation:raysFast 6s cubic-bezier(.1,.9,.3,1) 1.9s infinite,ascFade .6s ease 1.9s forwards}
@keyframes raysFast{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.fx-curtain{position:absolute;top:0;bottom:0;width:51%;z-index:6;background:repeating-linear-gradient(90deg,#4a0d63 0 26px,#5d1a7a 26px 40px,#3a0a4e 40px 52px);box-shadow:inset 0 -40px 60px rgba(0,0,0,.5)}
.fx-curtain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:repeating-linear-gradient(90deg,#f0c040 0 10px,#c9a227 10px 20px)}
.fx-curtain.l{left:0;animation:curL 1s cubic-bezier(.6,0,.2,1) 1.75s forwards} .fx-curtain.r{right:0;animation:curR 1s cubic-bezier(.6,0,.2,1) 1.75s forwards}
@keyframes curL{to{transform:translateX(-102%)}} @keyframes curR{to{transform:translateX(102%)}}
.fx-drum{position:absolute;inset:0;z-index:7;background:radial-gradient(circle at 50% 50%,rgba(255,215,90,.55),transparent 30%);opacity:0;animation:drum .22s ease-in-out 0s 8 alternate}
@keyframes drum{to{opacity:1}}
.asc-imperial .asc-flash{animation:ascFlash 1.1s ease 1.85s;z-index:8}
.asc-imperial .fx-wave{border-color:rgba(255,225,120,.95);border-width:6px;z-index:4}
.asc-imperial .fx-wave.w1{animation:wave 1s ease-out 1.9s forwards} .asc-imperial .fx-wave.w2{animation:wave 1.2s ease-out 2.1s forwards;border-color:rgba(196,163,214,.9)} .asc-imperial .fx-wave.w3{animation:wave 1.4s ease-out 2.35s forwards}
.asc-imperial .asc-new{animation:aAscend 1.3s cubic-bezier(.2,.7,.2,1) 1.95s forwards,aGlowBig 1.8s ease-in-out 3.3s infinite}
@keyframes aAscend{0%{opacity:0;transform:scale(4) rotate(25deg);filter:brightness(3)}45%{opacity:1;transform:scale(.85) rotate(-4deg);filter:brightness(1.6)}70%{transform:scale(1.12)}100%{opacity:1;transform:none;filter:none}}
@keyframes aGlowBig{0%,100%{filter:drop-shadow(0 0 20px rgba(255,215,90,.7))}50%{filter:drop-shadow(0 0 55px rgba(255,230,130,1)) brightness(1.15)}}
.fx-crown{position:absolute;left:50%;top:calc(24px - 6vmin);width:min(26vw,120px);z-index:6;transform:translate(-50%,-80vh) rotate(-20deg);animation:crown .9s cubic-bezier(.3,1.4,.5,1) 2.9s forwards;filter:drop-shadow(0 0 18px rgba(255,215,90,.9))}
.fx-crown svg{width:100%;height:auto;display:block}
@keyframes crown{to{transform:translate(-50%,0) rotate(-8deg)}}
.fx-fw{position:absolute;width:0;height:0;z-index:4}
.fx-fw.f1{left:18%;top:22%} .fx-fw.f2{left:82%;top:18%} .fx-fw.f3{left:12%;top:70%} .fx-fw.f4{left:88%;top:66%}
.fx-fw i{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;box-shadow:0 0 10px 2px currentColor;animation:fw 1.3s ease-out forwards}
.fx-fw.f1 i{animation-delay:2.4s} .fx-fw.f2 i{animation-delay:2.8s} .fx-fw.f3 i{animation-delay:3.2s} .fx-fw.f4 i{animation-delay:3.6s}
@keyframes fw{0%{opacity:1;transform:translate(0,0) scale(1.4)}80%{opacity:1}100%{opacity:0;transform:translate(var(--fx),calc(var(--fy) + 4vmin)) scale(.6)}}
.asc-imperial .asc-eyebrow{animation-delay:2.45s}
.asc-imperial .asc-title{font-size:clamp(46px,14vw,78px);animation:none;opacity:1;background:linear-gradient(180deg,#fff9e0,#f0c040 60%,#b8860b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(255,200,60,.7))}
.asc-imperial .asc-title span{display:inline-block;opacity:0;animation:letter .5s cubic-bezier(.3,1.8,.5,1) forwards}
@keyframes letter{0%{opacity:0;transform:translateY(-60px) scale(2)}100%{opacity:1;transform:none}}
.asc-imperial .asc-motto{font-size:clamp(22px,6vw,30px);animation-delay:3.3s}
.asc-imperial .asc-de{animation-delay:3.5s} .asc-imperial .asc-info{animation-delay:3.7s} .asc-imperial .asc-ok{animation-delay:3.9s}
.asc-imperial .asc-from{animation:ascOld .3s ease 0s forwards}

/* Abzeichen bauen sich aus Einzelteilen auf */
.asc-forge{--t0:.62s}.asc-steel{--t0:1.1s}.asc-laurel{--t0:1.15s}.asc-sky{--t0:1.35s}.asc-battle{--t0:1.8s}.asc-imperial{--t0:3.05s}
.asc .asc-new .bp-frame{transform-box:fill-box;transform-origin:center}
.asc .asc-new .bp-emb,.asc .asc-new .bp-rib,.asc .asc-new .bp-glow{opacity:0;transform-box:fill-box;transform-origin:center}
.asc .asc-new .bp-emb{animation:bpEmb .6s cubic-bezier(.3,1.7,.5,1) var(--t0) forwards}
@keyframes bpEmb{0%{opacity:0;transform:translateY(-30px) scale(.2) rotate(-40deg)}100%{opacity:1;transform:none}}
.asc .asc-new .bp-rib{animation:bpRib .5s cubic-bezier(.2,1.4,.4,1) calc(var(--t0) + .3s) forwards}
@keyframes bpRib{0%{opacity:0;transform:translateY(22px) scaleX(.2)}100%{opacity:1;transform:none}}
.asc .asc-new .bp-glow{animation:bpFade .8s ease calc(var(--t0) + .2s) forwards}
@keyframes bpFade{to{opacity:1}}
.asc .asc-new .bp-wreath .lf{opacity:0;transform-box:fill-box;transform-origin:center;animation:bpLeaf .35s cubic-bezier(.3,1.6,.5,1) calc(var(--t0) + .12s + var(--i)*.05s) forwards}
@keyframes bpLeaf{0%{opacity:0;transform:scale(0) rotate(-60deg)}100%{opacity:1;transform:none}}
.asc .asc-new .bp-rays path{opacity:0;transform-box:view-box;transform-origin:50px 50px;animation:bpRay .45s ease-out calc(var(--t0) + var(--i)*.025s) forwards}
@keyframes bpRay{0%{opacity:0;transform:scale(.2)}100%{opacity:var(--o,1);transform:none}}
.asc .asc-new .bp-stars .st{opacity:0;transform-box:fill-box;transform-origin:center;animation:bpStar .45s cubic-bezier(.3,1.9,.5,1) calc(var(--t0) + .55s + var(--i)*.13s) forwards}
@keyframes bpStar{0%{opacity:0;transform:scale(0) rotate(-180deg)}100%{opacity:1;transform:none}}
.asc-imperial .asc-new .bp-frame{animation:bpFrame .7s cubic-bezier(.3,1.5,.5,1) calc(var(--t0) - .9s) both}
@keyframes bpFrame{0%{transform:scale(.3) rotate(-90deg)}100%{transform:none}}