/* Action buttons (Mike, Oct 29: "higher res more obvious buttons ... the ulti the movement and the trinket, especially
   for the phone"). The three buttons you press: class move (dash), PvP trinket and ultimate. Loaded last.
   - One silhouette: dark round face, thick ring in the button's own colour (ult magenta, move cyan, trinket lime),
     ink outline and hard drop. Everything but the icon art is CSS, so it stays sharp at any pixel ratio.
   - Cooldown: the icon greys out, a dark wedge covers the time left, the coloured ring refills clockwise, and the
     seconds sit in the middle in Bully Number with an ink stroke.
   - Coming off cooldown: one pop and a shockwave ring (press-juice.js adds .ready-ping, app.js adds .ready-flash). */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket){
  --ab-ring:4px;
  border-radius:50%;border:0;padding:0;overflow:visible;background:#0b0f15;
  box-shadow:0 0 0 var(--ab-ring) var(--bb-ink,#05080c),0 0 0 calc(var(--ab-ring) + 3px) var(--bb-ink,#05080c),3px 5px 0 calc(var(--ab-ring) + 3px) var(--bb-ink,#05080c);
  clip-path:none;image-rendering:auto;
}
html[data-art-style] body #hud#hud #ultimate{--ab-c:var(--sig-ult,#ff3ea5)}
html[data-art-style] body #hud#hud #dash{--ab-c:var(--sig-move,#36e0ff)}
html[data-art-style] body #hud#hud #trinket{--ab-c:var(--sig-trinket,#b6ff3b)}

/* The icon fills the face as a circle (its own square frame becomes the rim). Never scaled past the face. */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .slot-glyph{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:50%;overflow:hidden;transform:none;filter:none;opacity:1;display:grid;place-items:center;font:900 30px/1 var(--font-body);color:var(--ab-c);transition:filter .15s}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .slot-glyph :is(.spell-icon,img){width:100%;height:100%;border-radius:0;transform:scale(1.06)}
/* The 256 px icon (spell-icons.js hdActionIcon) sits over the atlas cell, which shows until it loads. */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .slot-glyph .hd-icon{position:absolute;inset:0}

/* Cooldown: grey icon, dark wedge for the time left, ring refills. --cd is the fraction left (app.js setCooldown). */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):not([data-cd="0.000"]):not(.active) .slot-glyph,
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):disabled:not(.active) .slot-glyph{filter:grayscale(.75) brightness(.6)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .cd-sweep{inset:0;border-radius:50%;z-index:1;background:conic-gradient(#05080cb0 calc(var(--cd,0)*360deg),transparent 0)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket)[data-cd="0.000"] .cd-sweep{background:none}
/* The ring: dimmed where time is left, the button colour where it has passed (hud.css's ult fill is replaced). */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket)::before{content:'';position:absolute;inset:calc(var(--ab-ring) * -1);height:auto;border-radius:50%;clip-path:none;opacity:1;z-index:2;pointer-events:none;transition:none;
  background:conic-gradient(color-mix(in srgb,var(--ab-c) 28%,#0b0f15) calc(var(--cd,0)*360deg),var(--ab-c) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ab-ring) - 1px),#000 calc(100% - var(--ab-ring)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ab-ring) - 1px),#000 calc(100% - var(--ab-ring)))}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket)[data-cd="0.000"]::before{background:var(--ab-c)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):disabled[data-cd="0.000"]:not(.active)::before{background:#5d6670}

/* Seconds left: big, centred, ink-stroked. Active seconds ("6s") sit on a chip at the bottom. */
html[data-art-style] body #hud#hud :is(#ultimate-state,#dash-state,#trinket-state){position:absolute;inset:auto 0 -6px;z-index:3;display:block;padding:0;margin:0 auto;width:max-content;font:400 13px/1 var(--font-number,'Bully Number',Impact,sans-serif);color:#fff;letter-spacing:0;text-shadow:var(--bb-stroke-2),2px 2px 0 var(--bb-ink,#05080c);background:none}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):not([data-cd="0.000"]):not(.active) :is(#ultimate-state,#dash-state,#trinket-state){inset:0;display:grid;place-items:center;width:auto;font-size:calc(var(--ab-size,62px) * .42)}
html[data-art-style] body #hud#hud #ultimate:not([data-cd="0.000"]):not(.active) #ultimate-state{font-size:calc(var(--ab-size,84px) * .36)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket).active :is(#ultimate-state,#dash-state,#trinket-state):not(:empty){padding:3px 6px 2px;border-radius:4px;background:var(--bb-ink,#05080c);color:var(--ab-c);text-shadow:none}

/* Key caps (desktop and gamepad): a dark chip on the top of the ring, never under 11px. */
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .slot-key{top:-11px;left:50%;transform:translateX(-50%);z-index:4;padding:2px 5px 1px;border-radius:4px;background:var(--bb-ink,#05080c);color:var(--ab-c);font:400 11px/1 var(--font-stencil,'Bully Label',Impact,sans-serif);text-shadow:none;box-shadow:0 0 0 2px var(--ab-c)}

/* Ready: the ultimate keeps breathing (signature-hud.css .ult-glow); every button pops once when it comes back. */
html[data-art-style] body #hud#hud #ultimate:not(.ready-ping):not(.press-slam){animation:none}
html[data-art-style] body #hud#hud #ultimate .ult-glow{inset:calc(var(--ab-ring) * -1);z-index:0}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):is(.ready-ping,.ready-flash){animation:ab-ready .6s cubic-bezier(.2,1.5,.4,1)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):is(.ready-ping,.ready-flash)::after{content:'';position:absolute;inset:calc(var(--ab-ring) * -1);border-radius:50%;border:4px solid var(--ab-c);pointer-events:none;z-index:0;animation:ab-shock .6s ease-out forwards}
@keyframes ab-ready{0%{transform:scale(1)}30%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes ab-shock{0%{transform:scale(1);opacity:1}100%{transform:scale(1.7);opacity:0}}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket).active{box-shadow:0 0 0 var(--ab-ring) #fff,0 0 0 calc(var(--ab-ring) + 3px) var(--ab-c),3px 5px 0 calc(var(--ab-ring) + 3px) var(--bb-ink,#05080c)}
html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):active:not(:disabled){transform:translate(2px,3px)}

/* Sizes. Desktop: the cluster left of the ability bar (signature-hud.css places it). */
html[data-art-style] body #hud#hud .signature-cluster #ultimate{--ab-size:84px;width:84px;height:84px}
html[data-art-style] body #hud#hud .signature-cluster :is(#dash,#trinket){--ab-size:64px;width:64px;height:64px}
/* Touch: big thumb buttons in the bottom-right arc (touch-hud.css places them from --ult and --act). */
@media (pointer:coarse){
  html[data-art-style] body #hud#hud{--ult:78px;--act:62px;--thumb-gap:14px}
  html[data-art-style] body #hud#hud #ultimate{--ab-size:var(--ult)}
  html[data-art-style] body #hud#hud :is(#dash,#trinket){--ab-size:var(--act)}
  html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket) .slot-glyph{font-size:30px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  html[data-art-style] body #hud#hud{--ult:72px;--act:58px;--thumb-gap:13px}
}
@media (prefers-reduced-motion:reduce){
  html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):is(.ready-ping,.ready-flash){animation:none}
  html[data-art-style] body #hud#hud :is(#ultimate,#dash,#trinket):is(.ready-ping,.ready-flash)::after{animation:none;opacity:0}
}

/* The Space good-moment cue (dash.js spaceCue; Nov 1): a soft breathing ring outside the button and a count badge in its
   corner, layered over the button, never in the icon image. Readable at phone size; still under reduced motion. */
html[data-art-style] body #hud#hud #dash .space-cue{position:absolute;inset:calc(var(--ab-ring,6px) * -1 - 5px);border-radius:50%;border:3px solid #9dff7a;box-shadow:0 0 10px 2px #9dff7a99;opacity:0;pointer-events:none;z-index:3}
html[data-art-style] body #hud#hud #dash.cue:not(:disabled) .space-cue{opacity:1;animation:space-cue 1.1s ease-in-out infinite}
html[data-art-style] body #hud#hud #dash .cue-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#0b1410;border:2px solid #9dff7a;color:#d8ffc8;font:400 14px/16px var(--font-number,'Bully Number',Impact,sans-serif);text-align:center;z-index:4;pointer-events:none}
html[data-art-style] body #hud#hud #dash .cue-badge[hidden]{display:none}
@keyframes space-cue{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion:reduce){html[data-art-style] body #hud#hud #dash.cue:not(:disabled) .space-cue{animation:none;opacity:1}}