/* The ability button under the arena in online fights (ability-button.js). The footer becomes three columns: the
   ability's name and the match clock, the button, and how long until it's ready (or a Soul Tether's range note). */
.arena-mode .arena-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:4px 12px max(6px,env(safe-area-inset-bottom))}
/* The footer only grows to fit the button while the button is showing (not during picks or offline fights). */
.arena-mode .arena-footer:has(#ability-button:not([hidden])){min-height:86px}
/* Older WebViews without :has() keep the room for the button all the time, so it never overlaps the court. */
@supports not selector(:has(*)){.arena-mode .arena-footer{min-height:86px}}
.ability-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
/* The ability's name no longer shows in the footer's left corner (the emote button took it, owner 2026-11-01); the
   button's spoken label still says it. */
.ability-name{display:none!important}
.ability-auto{justify-self:end;width:min(112px,100%);text-align:center;padding:5px 4px 6px;border-radius:12px;background:#151d36;border:2px solid #2f3c66;color:#c9d3ef;font-weight:800;font-size:10.5px;line-height:1.2}
.ability-auto b{display:block;font:400 22px/1.05 'Lilita One',sans-serif;color:#ffe267}
/* After a PERFECT: the power surge counting down (owner's pick B, "lightning bar"): a slanted gold bar that glows and
   pulses, with a bolt, POWER UP! and the seconds left over a hot striped fill draining to the left. */
.ability-auto.surge{position:relative;display:flex;align-items:center;gap:6px;width:min(128px,100%);height:64px;padding:0 8px 0 6px;overflow:hidden;border-radius:14px;background:#2a1406;border:3px solid #ffd21f;color:#fff;text-align:left;transform:skewX(-8deg);animation:surge-glow .5s ease-in-out infinite alternate}
@keyframes surge-glow{from{filter:drop-shadow(0 0 4px rgba(255,190,40,.55))}to{filter:drop-shadow(0 0 14px rgba(255,210,31,.95))}}
.surge-fill{position:absolute;inset:0;width:calc(var(--s,1)*100%);background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 8px,transparent 8px 18px),linear-gradient(90deg,#ff7a1a,#ffc21f 70%,#fff27a);background-size:40px 100%,100% 100%;animation:surge-run .5s linear infinite}
@keyframes surge-run{to{background-position:40px 0,0 0}}
.surge-icon{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:#4a2206;border:2px solid #fff27a}
.ability-auto .surge-bolt{display:block;width:34px;height:34px;fill:#fff27a;stroke:#4a2206;stroke-width:1.2;stroke-linejoin:round}
.surge-text{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;transform:skewX(8deg)}
.surge-text small{white-space:nowrap;font:400 11px/1 'Lilita One',sans-serif;letter-spacing:.4px;-webkit-text-stroke:3px #4a2206;paint-order:stroke fill}
.ability-auto.surge b{font:400 30px/1 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:5px #4a2206;paint-order:stroke fill}
.ability-auto.surge em{font-style:normal;font-size:.55em}
/* Narrow phones: a smaller bolt so POWER UP! fits. */
@media(max-width:380px){.ability-auto.surge{gap:4px;padding:0 6px 0 4px}.surge-icon{width:32px;height:32px}.ability-auto .surge-bolt{width:27px;height:27px}.surge-text small{font-size:10px;letter-spacing:0}.ability-auto.surge b{font-size:26px}}
.reduce-motion .ability-auto.surge,.reduce-motion .surge-fill{animation:none}
/* The button: a gold rim with four gems, a ring that fills as it charges, and the fighter's own icon on a face in
   its colour. --p is the charge (0 to 1), --c / --d the fighter's colours. */
.ability-button{--s:104px;--k:calc(var(--s)/120);position:relative;width:var(--s);height:var(--s);margin-top:-22px;padding:0;border:0;border-radius:50%;background:none;font-family:'Lilita One',sans-serif;touch-action:manipulation;-webkit-user-select:none;user-select:none;z-index:5;cursor:pointer}
.ability-button:active:not(:disabled){transform:none}
.ability-button>span,.ability-button i,.ability-body>span{position:absolute;pointer-events:none}
.ability-body{inset:0;transition:transform .12s}
.ability-bezel{inset:0;border-radius:50%;background:conic-gradient(from 200deg,#fff2b8,#d9a12c,#7a4a0e,#e7b443,#fff2b8,#b8801c,#7a4a0e,#fff2b8);box-shadow:0 calc(var(--k)*8) calc(var(--k)*14) #000b,inset 0 0 0 calc(var(--k)*2.5) #3a2205}
.ability-stud{width:calc(var(--k)*11);height:calc(var(--k)*11);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,var(--d));border:calc(var(--k)*2) solid #3a2205;transform:translate(-50%,-50%)}
.ability-track{inset:calc(var(--k)*10);border-radius:50%;background:#140f22;box-shadow:inset 0 calc(var(--k)*2) calc(var(--k)*4) #000}
.ability-progress{inset:calc(var(--k)*11);border-radius:50%;background:conic-gradient(#fff,#ffe66a calc(var(--p)*100%),transparent 0);-webkit-mask:radial-gradient(circle,transparent calc(var(--k)*39),#000 calc(var(--k)*40));mask:radial-gradient(circle,transparent calc(var(--k)*39),#000 calc(var(--k)*40))}
.ability-face{inset:calc(var(--k)*19);border-radius:50%;overflow:hidden;background:radial-gradient(circle at 40% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,var(--d) 100%);border:calc(var(--k)*3) solid #1b1426;box-shadow:inset 0 calc(var(--k)*-8) calc(var(--k)*12) #0006}
.ability-face>*{position:absolute}
.ability-liquid{display:none;left:-10%;right:-10%;bottom:0;height:calc(var(--p)*100%);background:linear-gradient(#ffffff40,transparent 30%),color-mix(in srgb,var(--c) 85%,#fff)}
.ability-liquid:before{content:'';position:absolute;left:0;right:0;top:calc(var(--k)*-5);height:calc(var(--k)*10);background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--c) 85%,#fff) 60%,transparent 62%) 0 0/calc(var(--k)*20) 100% repeat-x;animation:ability-wave 1.1s linear infinite}
@keyframes ability-wave{to{background-position-x:calc(var(--k)*20)}}
.ability-button .ability-icon{inset:4%;width:92%;height:92%;pointer-events:none;filter:drop-shadow(0 calc(var(--k)*3) 0 #0008)}
.ability-gloss{left:12%;right:12%;top:6%;height:38%;border-radius:50%;background:linear-gradient(#ffffffa0,#ffffff10)}
.ability-count{display:none;inset:0;place-items:center;font-size:calc(var(--k)*46);color:#fff;-webkit-text-stroke:calc(var(--k)*3) #1b1426;paint-order:stroke;text-shadow:0 calc(var(--k)*3) 0 #1b1426}
.ability-tip{width:calc(var(--k)*16);height:calc(var(--k)*16);transform:translate(-50%,-50%);background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ability-spark{display:none;width:calc(var(--k)*14);height:calc(var(--k)*14);transform:translate(-50%,-50%) scale(var(--sc));background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:ability-twinkle 1s ease-in-out infinite alternate}
.ability-spark:nth-of-type(2n){animation-delay:-.5s}
@keyframes ability-twinkle{from{opacity:.25;transform:translate(-50%,-50%) scale(calc(var(--sc)*.6))}to{opacity:1}}
.ability-halo,.ability-rays,.ability-wave,.ability-flash,.ability-tap,.ability-always{display:none}
.ability-halo{inset:calc(var(--k)*-14);border-radius:50%;background:radial-gradient(circle,var(--c) 0,color-mix(in srgb,var(--c) 60%,#ffd34a) 45%,transparent 70%);opacity:.9;animation:ability-pulse .9s ease-in-out infinite alternate}
@keyframes ability-pulse{from{transform:scale(.92);opacity:.7}to{transform:scale(1.06);opacity:1}}
.ability-rays{inset:calc(var(--k)*-34);border-radius:50%;background:repeating-conic-gradient(from 8deg,#fff5 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:ability-spin 6s linear infinite}
@keyframes ability-spin{to{rotate:1turn}}
.ability-tap{left:50%;top:calc(var(--k)*-26);transform:translateX(-50%) rotate(-4deg);padding:calc(var(--k)*3) calc(var(--k)*14) calc(var(--k)*5);border-radius:calc(var(--k)*10);background:linear-gradient(#fff07a,#ffb21a);border:calc(var(--k)*3) solid #1b1426;color:#4a1d00;font-size:calc(var(--k)*21);line-height:1.1;box-shadow:0 calc(var(--k)*4) 0 #1b1426;white-space:nowrap;animation:ability-bob .7s ease-in-out infinite alternate}
@keyframes ability-bob{to{transform:translateX(-50%) translateY(calc(var(--k)*-4)) rotate(-4deg)}}
.ability-always{left:50%;bottom:calc(var(--k)*-12);transform:translateX(-50%);padding:calc(var(--k)*2) calc(var(--k)*10);border-radius:calc(var(--k)*8);background:#1b2440;border:calc(var(--k)*2) solid #3a4a78;color:#bfe9ff;font-size:calc(var(--k)*13);white-space:nowrap}
.ability-wave{inset:calc(var(--k)*-18);border-radius:50%;border:calc(var(--k)*6) solid #fff;box-shadow:0 0 calc(var(--k)*20) var(--c);animation:ability-ring .38s ease-out both}
@keyframes ability-ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.15);opacity:0}}
.ability-flash{inset:calc(var(--k)*19);border-radius:50%;background:radial-gradient(circle,#fff,#fff8 60%,transparent);animation:ability-fade .38s ease-out both}
@keyframes ability-fade{to{opacity:0}}
/* Charging: the face goes dark and fills up with the fighter's colour like a liquid, with the seconds left. */
.ability-button[data-state=charging] .ability-face{background:#2a2238}
.ability-button[data-state=charging] .ability-liquid{display:block}
.ability-button[data-state=charging] .ability-count{display:grid}
.ability-button[data-state=charging] .ability-face .ability-icon{filter:grayscale(.6) brightness(.55) drop-shadow(0 calc(var(--k)*3) 0 #0008)}
/* Ready: light rays, a pulsing glow, sparkles and TAP! */
.ability-button[data-state=ready] :is(.ability-halo,.ability-rays,.ability-spark,.ability-tap,.ability-ring){display:block}
/* The PERFECT timing ring (owner's pick, "timing ring + hit"): gold, closing in on the button; white with NOW! while it
   touches the edge. The TAP! label sits above the ring's widest lap. */
.ability-ring{display:none;left:0;top:0;width:100%;height:100%;border-radius:50%;z-index:2;transform:scale(var(--ring,1.55));border:calc(var(--k)*7) solid #ffd21f;box-shadow:0 0 0 calc(var(--k)*3) #4a2206,inset 0 0 0 calc(var(--k)*3) #4a2206,0 0 calc(var(--k)*18) #ffd21f}
.ability-button.is-now .ability-ring{border-color:#fff;box-shadow:0 0 0 calc(var(--k)*3) #4a2206,inset 0 0 0 calc(var(--k)*3) #4a2206,0 0 calc(var(--k)*30) #fff6a8,0 0 calc(var(--k)*50) #ffd21f}
.ability-button.ring-gone .ability-ring{display:none}
.ability-button[data-state=ready] .ability-tap{top:calc(var(--k)*-64);z-index:3}
.ability-button:is([data-state=ready],[data-state=pressed],[data-state=passive]) .ability-tip{display:none}
/* Tapped: it squashes, flashes and sends out a ring. */
.ability-button[data-state=pressed] .ability-body{transform:scale(.88)}
.ability-button[data-state=pressed] :is(.ability-wave,.ability-flash){display:block}
/* Always on (Lancer's double spear): nothing to tap. */
.ability-button[data-state=passive]{cursor:default}
.ability-button[data-state=passive] .ability-always{display:block}
.ability-button.nope .ability-body{animation:ability-nope .28s}
@keyframes ability-nope{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.reduce-motion .ability-button *{animation:none!important}
.reduce-motion .ability-button[data-state] :is(.ability-wave,.ability-flash){display:none}
@media(max-height:700px){.ability-button{--s:88px;margin-top:-16px}.arena-mode .arena-footer:has(#ability-button:not([hidden])){min-height:74px}}
/* Landscape on a short phone hides the footer, so the button sits in the corner of the court. */
@media(orientation:landscape) and (max-height:560px){.arena-mode .arena-footer{display:block;min-height:0;padding:0}.arena-mode .ability-side,.arena-mode .ability-auto{display:none}.ability-button{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:14px;margin:0;--s:84px}}

/* Inky's Ink shot: ink splats over the button and hides the PERFECT ring and its NOW! until it wears off. */
.ability-button.is-inked::after{content:'';position:absolute;inset:-14%;z-index:5;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 30% 35%,#2b2140 0 22%,transparent 23%),radial-gradient(circle at 70% 30%,#2b2140 0 16%,transparent 17%),radial-gradient(circle at 62% 70%,#2b2140 0 26%,transparent 27%),radial-gradient(circle at 28% 72%,#2b2140 0 15%,transparent 16%),radial-gradient(circle at 50% 50%,#2b2140 0 38%,transparent 39%);}
.ability-button.is-inked :is(.ability-ring,.ability-tap){visibility:hidden}