.champion-skills{display:grid;gap:10px;text-align:left;min-width:0;width:100%}
.champion-skill{padding:16px;background:#1e1920;border:1px solid #a9abb545;border-left:3px solid var(--world,#a9abb5);color:#f4ede3}
.champion-skill .skill-kind{display:block;color:#c4b9bd;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.champion-skill h3{margin:5px 0 8px;font:800 17px/1.3 Manrope,sans-serif}
.champion-skill p{margin:0 0 8px;font:500 13px/1.6 Manrope,sans-serif}
.champion-skill .skill-mechanics{color:#f4ede3}
.champion-skill .skill-timing{display:block;color:#c4b9bd;font:600 11px/1.6 Manrope,sans-serif}
.public-skill-detail{margin-top:48px;max-width:760px}
.public-skill-detail>h3{font-size:18px;margin-bottom:12px}
.roster-strip button.roster-card{cursor:pointer;font:inherit;color:inherit}
.roster-strip button.roster-card[aria-pressed=true]{outline:2px solid #f4ede3;outline-offset:4px}
.roster-strip .roster-skill-name{display:block;padding:8px 5px;color:#f4ede3;font:600 11px/1.4 Manrope,sans-serif}
.currency-icon{width:26px;height:26px;object-fit:contain;vertical-align:middle;flex:none}
.currency-choice{padding:12px;border:1px solid #a9abb545;background:#1e1920}
.currency-choice p{font-size:12px;color:#c4b9bd;margin:0 0 10px}
.currency-choice .button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.currency-choice .currency-icon{background:transparent;border:0;border-radius:0;padding:0;width:30px;height:30px}
.hud-stats .currency-icon{width:20px;height:20px}
#home details{border-top:1px solid #a9abb530;margin-top:8px}#home summary{cursor:pointer;padding:12px 0;font-size:12px;font-weight:700}
#reveal{overflow-y:auto}#reveal>.champion-skills{position:relative;max-width:520px;margin:10px 0}#reveal>img{flex:1;min-height:80px;max-height:42vh}#reveal>.button{flex:none}
.skill-cast-banner{position:absolute;z-index:8;left:5%;right:5%;top:22%;padding:12px 18px;border-left:4px solid #d42b6b;background:#0e0c10ed;pointer-events:none}
.skill-cast-banner small{display:block;color:#c4b9bd}.skill-cast-banner strong{font-size:clamp(18px,3vw,30px)}
.skill-wave{position:absolute;z-index:4;left:70%;top:58%;width:40px;height:40px;border:4px solid #d42b6b;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 35px #d42b6b}
.replay.open .skill-wave{animation:skill-wave 2.8s ease-out infinite}
.replay.open .skill-cast-banner{animation:skill-banner 2.8s ease-out infinite}
.replay.open .impact{animation:skill-number 2.8s ease-out infinite}
.replay.open .enemy{animation:skill-hit 2.8s ease-out infinite}
.replay.paused *{animation-play-state:paused!important}
@keyframes skill-wave{0%,25%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1}65%,100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}
@keyframes skill-banner{0%{opacity:0;transform:translateX(-20%)}10%,65%{opacity:1;transform:translateX(0)}85%,100%{opacity:0;transform:translateX(10%)}}
@keyframes skill-number{0%,28%{opacity:0;scale:.6}35%{opacity:1;scale:1.35}45%,75%{opacity:1;scale:1}100%{opacity:0;translate:0 -35px}}
@keyframes skill-hit{0%,28%,45%,100%{translate:0}32%{translate:12px -4px}38%{translate:-6px 2px}}
@media(prefers-reduced-motion:reduce){.replay.open .skill-wave,.replay.open .skill-cast-banner,.replay.open .impact,.replay.open .enemy{animation:none}.skill-wave{display:none}}