/* Signature kit in the match HUD (Mike: "ultimates and movement abilities and class unique abilities ... front and
   center obvious"). Colours match the lobby's signature row: ultimate magenta, movement cyan, signature yellow.
   The trinket (lime) joins them: all three are keys you press. The cluster lives outside the ability bar (app.js), so the bar's resting fade never reaches it. */
html[data-art-style] body #hud{--sig-ult:#ff3ea5;--sig-move:#36e0ff;--sig-sign:#ffe46b;--sig-trinket:#b6ff3b}
#hud .signature-cluster{position:fixed;z-index:6;bottom:max(12px,env(safe-area-inset-bottom));right:calc(100vw - var(--hud-left,40vw) + 12px);display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;align-items:end;gap:8px 10px;pointer-events:none}
#hud .signature-cluster>*{pointer-events:auto}
#hud[hidden] .signature-cluster{display:none}

/* Signature readout: one line, always on, glowing while the passive is doing something. */
#hud .signature-readout{grid-column:1 / -1;justify-self:end;max-width:min(360px,40vw);padding:4px 9px;font:600 11px/1.3 var(--font-body);color:#f3f1dc;background:#0b0d12ee;border:2px solid var(--sig-sign);box-shadow:2px 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .signature-readout .sig-passive{width:20px;height:20px;margin:-3px 5px -6px -3px;vertical-align:-1px;border-radius:3px;box-shadow:0 0 0 1px #000}
#hud .signature-readout b{font-weight:800;color:var(--sig-sign);margin-right:3px}
#hud .signature-readout i{font-style:normal;color:#ff72b1;font-weight:700}
#hud .signature-readout.active{box-shadow:0 0 0 2px #000,0 0 12px var(--sig-sign)}
#hud .signature-readout:empty{display:none}
/* The readout replaces the passive chip that sat over the ability bar. */
#hud .player-hud .passive-status{display:none}

/* Desktop: the ultimate is the biggest button, a circle in magenta with a charge sweep and a pulse when ready;
   the class move is a cyan rounded square beside it. */
@media (pointer:fine){
  html[data-art-style] body #hud .signature-cluster #ultimate{width:84px;height:84px;border-radius:50%;border:3px solid var(--sig-ult);box-shadow:0 0 0 3px #090c10,3px 4px 0 3px #000}
  html[data-art-style] body #hud .signature-cluster #dash{width:62px;height:62px;border-radius:16px;border:3px solid var(--sig-move);box-shadow:0 0 0 3px #090c10,3px 4px 0 3px #000}
  html[data-art-style] body #hud .signature-cluster #trinket{width:62px;height:62px;border-radius:16px;border:3px solid var(--sig-trinket);box-shadow:0 0 0 3px #090c10,3px 4px 0 3px #000}
  html[data-art-style] body #hud .signature-cluster #ultimate .slot-glyph{transform:scale(1.35)}
  html[data-art-style] body #hud .signature-cluster #dash .slot-glyph{transform:scale(1.15)}
  html[data-art-style] body #hud .signature-cluster :is(#ultimate,#dash,#trinket) .slot-key{top:3px;left:50%;transform:translateX(-50%);font-size:10px}
  html[data-art-style] body #hud .signature-cluster #ultimate-state{font-size:11px}
}
/* Phones: the thumb arc already makes them big (touch-hud.css); give them the same colours and shapes. The
   readout sits at the right edge above the trinket. */
@media (pointer:coarse){
  html[data-art-style] body #hud #ultimate{border:3px solid var(--sig-ult)}
  html[data-art-style] body #hud #dash{border:3px solid var(--sig-move);border-radius:16px}
  html[data-art-style] body #hud #trinket{border:3px solid var(--sig-trinket)}
  #hud .signature-cluster{right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 46px + 68px + 58px + 30px);display:block}
  #hud .signature-readout{max-width:min(190px,48vw);font-size:10px;white-space:normal}
  /* First-match hints sit above the readout. */
  #hud .first-hint{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 262px)}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #hud .signature-cluster{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px + 54px + 28px)}
  #hud .first-hint{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 200px)}
}
/* Ready: a magenta glow pulse on the ultimate. The glow is a static shadow on its own layer (.ult-glow, index.html)
   and only its opacity animates, so the pulse runs on the compositor (an animated box-shadow restyled every frame). */
html[data-art-style] body #hud #ultimate .ult-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 22px 6px var(--sig-ult);will-change:opacity}
html[data-art-style] body #hud #ultimate:not(:disabled):not(.active) .ult-glow{animation:sig-ult-ready 1.4s ease-in-out infinite}
@keyframes sig-ult-ready{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html[data-art-style] body #hud #ultimate:not(:disabled) .ult-glow{animation:none;opacity:.65}}
/* Trinket off cooldown: one lime flash (app.js adds .ready-flash). */
html[data-art-style] body #hud #trinket.ready-flash{animation:sig-trinket-ready .7s ease-out 2}
@keyframes sig-trinket-ready{40%{box-shadow:0 0 0 3px #090c10,0 0 22px 7px var(--sig-trinket);transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){html[data-art-style] body #hud #trinket.ready-flash{animation:none}}