.ability-button{--cooldown-progress:0;position:absolute;z-index:12;left:50%;bottom:max(5.1rem,env(safe-area-inset-bottom));width:clamp(76px,10vw,96px);height:clamp(76px,10vw,96px);transform:translateX(-50%);display:grid;place-items:center;border:3px solid #17203c;border-radius:50%;background:radial-gradient(circle at 38% 28%,#fff 0 7%,#d7ff5a 9%,#48e0cb 48%,#176c84 100%);box-shadow:0 7px 0 #17203c,0 12px 26px #09152c88,0 0 0 4px #ffffff70;color:#17203c;overflow:hidden;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:filter .16s,transform .12s,box-shadow .16s}
.ability-button b{position:relative;z-index:2;font:900 clamp(1.55rem,4vw,2.15rem)/1 system-ui}.ability-button em{position:absolute;z-index:2;bottom:19px;max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 .58rem/1 system-ui;font-style:normal;text-transform:uppercase}.ability-button small{position:absolute;z-index:2;bottom:7px;font:900 .52rem/1 system-ui;letter-spacing:.08em}
.ability-radial{position:absolute;inset:0;background:conic-gradient(#14233dcc calc(var(--cooldown-progress)*360deg),transparent 0);transition:background .08s linear}.ability-button.cooling{filter:saturate(.35) brightness(.75);box-shadow:0 5px 0 #17203c,0 8px 18px #09152c88}.ability-button.cooling b,.ability-button.cooling em,.ability-button.cooling small{color:#fff;text-shadow:0 2px 2px #0009}.ability-button.ready{animation:abilityBreath 1.8s ease-in-out infinite}.ability-button:active,.ability-button.activated{transform:translateX(-50%) translateY(5px) scale(.9);box-shadow:0 2px 0 #17203c,0 0 34px #d7ff5a}.ability-button.denied{animation:abilityDenied .18s linear}.ability-button.just-ready{animation:abilityReady .5s ease-out}.ability-button:focus-visible{outline:4px solid #fff;outline-offset:4px}
.ability-pop{pointer-events:none}.ability-pop b{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ability-shield.activated{filter:drop-shadow(0 0 18px #6ff)}.ability-heal.activated{filter:drop-shadow(0 0 18px #7cff8a)}.ability-rage.activated{filter:drop-shadow(0 0 18px #ff597d)}.ability-phase.activated{filter:drop-shadow(0 0 18px #d7c8ff)}
@keyframes abilityBreath{50%{box-shadow:0 7px 0 #17203c,0 12px 26px #09152c88,0 0 20px 7px #d7ff5a88}}@keyframes abilityReady{0%{filter:brightness(2);transform:translateX(-50%) scale(.82)}60%{transform:translateX(-50%) scale(1.09)}100%{transform:translateX(-50%) scale(1)}}@keyframes abilityDenied{25%{transform:translateX(calc(-50% - 5px))}75%{transform:translateX(calc(-50% + 5px))}}@media(max-width:700px){.ability-button{left:auto;right:max(5rem,env(safe-area-inset-right));transform:none;bottom:max(4.2rem,env(safe-area-inset-bottom));width:74px;height:74px}.ability-button:active,.ability-button.activated{transform:translateY(4px) scale(.9)}.ability-button.just-ready{animation:abilityReadyMobile .5s ease-out}.ability-button em{bottom:16px}.ability-button small{bottom:5px}}@media(orientation:landscape) and (max-height:560px){.ability-button{width:66px;height:66px;right:calc(max(1rem,env(safe-area-inset-right)) + 23vw);bottom:max(.7rem,env(safe-area-inset-bottom))}.ability-button b{font-size:1.45rem}.ability-button em{bottom:14px;font-size:.48rem}.ability-button small{bottom:4px;font-size:.46rem}}@media(prefers-reduced-motion:reduce){.ability-button{animation:none!important;transition:none!important}}@keyframes abilityReadyMobile{0%{filter:brightness(2);transform:scale(.82)}60%{transform:scale(1.09)}100%{transform:scale(1)}}

.ability-discovery{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.85rem 0}.ability-detail{position:relative;padding:.8rem;border:2px solid #17203c;border-radius:18px;background:#f8fbff;box-shadow:0 4px 0 #17203c}.ability-detail>span{display:block;font-size:.63rem;font-weight:900;letter-spacing:.12em;color:#667085}.ability-detail b{display:block;margin:.28rem 0;font-size:1rem}.ability-detail p{margin:0;font-size:.78rem;line-height:1.35}.ability-detail small{display:block;margin-top:.35rem;font-weight:800;color:#526071}.ability-detail.none{opacity:.72}@media(max-width:520px){.ability-discovery{grid-template-columns:1fr}}