/* The walk's HUD as one system (6 Oct, Anand: radii, text and icon sizes differed from piece to piece, outlines everywhere; one
   quiet surface that reads over anything without asking for attention). Loaded last, so it has the final word on the HUD only.

   Surface   a dark frosted glass: no outline, no inset rule; the blur keeps it legible over a lit stage or the night sky.
             Pure text (the caption, the key bar, the compass's labels) sits on nothing but a soft text shadow.
   Radius    12 px for every panel, chip and button; 6 px for a keycap. The minimap and the music disc stay circles.
   Type      Figtree. 12 px secondary (labels, a chip's second line), 14 px primary (controls, chips, bubbles), 20 px the caption.
   Icon      18 px.
   Colour    white and greys (the walk's HUD went silver, 6 Oct); red only for the chase. */
:root{
  --hud-font:'Figtree',system-ui,'Segoe UI',sans-serif;
  --hud-glass:rgba(12,10,20,.46); --hud-glass-hi:rgba(255,255,255,.14); --hud-blur:blur(14px) saturate(135%);
  --hud-shadow:0 8px 28px rgba(0,0,0,.3);
  --hud-r:12px; --hud-r-key:6px;
  --hud-fs-2:12px; --hud-fs-1:14px; --hud-fs-cap:20px;
  --hud-text:#F4F4F7; --hud-dim:rgba(244,244,247,.7);
  --hud-icon:18px; --hud-h:36px;
  --hud-tshadow:0 1px 2px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.45);
}

/* ---- the glass pieces: Esc, Drone, the person prompt, chat bubbles, notices, the tally, the map's score */
#hud #escCorner,#hud #droneBtn,#personHint,.conversation-bubble,#toast,#ruckus .rk-count,#tackleScore{
  background:var(--hud-glass)!important;-webkit-backdrop-filter:var(--hud-blur);backdrop-filter:var(--hud-blur);
  box-shadow:var(--hud-shadow)!important;border:0!important;border-radius:var(--hud-r)!important;
  color:var(--hud-text);font-family:var(--hud-font);text-shadow:none}
#hud #escCorner,#hud #droneBtn{height:var(--hud-h);padding:0 12px 0 8px;gap:8px;display:flex;align-items:center;font:600 var(--hud-fs-1)/1 var(--hud-font)}
#hud #escCorner{left:20px;top:20px}
#hud #droneBtn{right:20px;top:20px}
#hud #droneBtn .dr-ico{width:var(--hud-icon);height:var(--hud-icon);stroke:var(--hud-text)}
#hud #droneBtn:hover{background:var(--hud-glass-hi)!important}
#hud #droneBtn[aria-pressed="true"]{background:rgba(255,255,255,.2)!important;color:var(--hud-text)}
#hud #droneBtn[aria-pressed="true"] .dr-ico{transform:none}
#hud #droneBtn:focus-visible,#tackleScore:focus-visible,#personHint:focus-visible{outline:2px solid var(--hud-text);outline-offset:2px}

/* ---- keycaps, everywhere in the walk */
#hud kbd,#personHint kbd{font:700 var(--hud-fs-2)/1 var(--hud-font)!important;min-width:22px;height:22px;padding:0 6px!important;margin:0!important;
  display:inline-flex;align-items:center;justify-content:center;border:0!important;border-radius:var(--hud-r-key)!important;
  background:rgba(255,255,255,.16)!important;color:var(--hud-text)!important;box-shadow:none!important;text-shadow:none}
#hud kbd.on,#personHint kbd.on{background:#FFFFFF!important;color:#14111C!important}

/* ---- the key bar and the labels under the map and the disc: text on the shade, no dividers */
#keys{font:600 var(--hud-fs-1)/1 var(--hud-font)!important;color:var(--hud-dim)!important;text-shadow:var(--hud-tshadow);column-gap:18px!important}
#keys span{gap:4px!important}
#keys span + span::before{display:none}
#hud #miniKey,#hud #discKey{font:600 var(--hud-fs-2)/1 var(--hud-font);color:var(--hud-dim);text-shadow:var(--hud-tshadow);gap:6px}

/* ---- the caption: one size, the announcer and the ruckus alike */
#hud #where #zname{font:700 var(--hud-fs-cap)/1.25 var(--hud-font)!important;color:var(--hud-text);text-shadow:var(--hud-tshadow)!important}
#ruckus .rk-cap:not(.big) span{font:700 var(--hud-fs-cap)/1.25 var(--hud-font);text-shadow:var(--hud-tshadow)}

/* ---- the person prompt (a STAN team member, a stall): the glass chip, a white action */
#personHint{gap:10px;padding:6px 8px 6px 6px!important}
#personHint .ph-avatar{width:24px;height:24px;box-shadow:none}
#personName{font:600 var(--hud-fs-1)/1.15 var(--hud-font)!important;color:var(--hud-text)}
#personRole{font:500 var(--hud-fs-2)/1.25 var(--hud-font)!important;color:var(--hud-dim)}
#personHint .meet-key{font:700 var(--hud-fs-2)/1 var(--hud-font)!important;background:#FFFFFF!important;color:#14111C!important;border-radius:var(--hud-r-key)!important;padding:5px 9px 5px 5px!important}
#personHint .meet-key kbd{background:#14111C!important;color:#FFFFFF!important}
#personHint.stall{box-shadow:var(--hud-shadow)!important}
#personHint.stall .ph-avatar{background:#FFFFFF}

/* ---- chat bubbles over the crowd */
.conversation-bubble{padding:8px 12px!important;font:500 var(--hud-fs-1)/1.4 var(--hud-font)!important;max-width:240px}

/* ---- notices */
#toast{font:600 var(--hud-fs-1)/1.4 var(--hud-font)!important;min-height:var(--hud-h)!important;padding:9px 14px!important}

/* ---- the tally chip and the map's score */
#ruckus .rk-count{font:700 var(--hud-fs-2)/1 var(--hud-font)!important;letter-spacing:.06em;padding:0 12px!important;height:28px;display:flex;align-items:center}
#ruckus .rk-count.hot{color:#FF8A7A}
#tackleScore{min-height:44px;padding:6px 14px 6px 12px!important}
#tackleScore:hover{background:var(--hud-glass-hi)!important}
#tackleScore .ts-main{font:600 var(--hud-fs-1)/1.2 var(--hud-font)}
#tackleScore .ts-main b{font-size:var(--hud-fs-1)}
#tackleScore .ts-top{font:500 var(--hud-fs-2)/1.2 var(--hud-font);color:var(--hud-dim)}

/* ---- the objective marker in the world: the same two sizes */
#objective b{font:700 var(--hud-fs-2)/1 var(--hud-font)!important;letter-spacing:.06em}
#objective span{font:600 var(--hud-fs-2)/1 var(--hud-font)!important;color:var(--hud-dim)}

@media (prefers-reduced-transparency: reduce){
  #hud #escCorner,#hud #droneBtn,#personHint,.conversation-bubble,#toast,#ruckus .rk-count,#tackleScore{background:rgba(12,10,20,.9)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* notices sit above the caption line, never on it */
#toast{bottom:128px!important}

/* ---- the HUD builds itself in after the portal pass (world.js hudBuild): each piece slides and fades into place, 120 ms after the
   last. translate and scale compose with each piece's own positioning transform, so nothing jumps. */
@keyframes hudIn{from{opacity:0;translate:var(--hf,0 10px);scale:var(--hs,1)}to{opacity:1;translate:0 0;scale:1}}
body.hud-build #compass{--hf:0 -14px;animation:hudIn .6s cubic-bezier(.2,0,0,1) both}
body.hud-build #hud #escCorner,body.hud-build #hud #droneBtn{--hf:0 -10px;animation:hudIn .55s cubic-bezier(.2,0,0,1) .12s both}
body.hud-build #mini,body.hud-build #miniFrame,body.hud-build #hud #miniKey{--hf:-16px 0;--hs:.92;animation:hudIn .6s cubic-bezier(.2,0,0,1) .24s both}
body.hud-build #ytSet{--hf:16px 0;--hs:.92;animation:hudIn .6s cubic-bezier(.2,0,0,1) .36s both}
body.hud-build #hud #discKey{--hf:16px 0;animation:hudIn .6s cubic-bezier(.2,0,0,1) .36s both}
body.hud-build #sheet,body.hud-build #keys{--hf:0 14px;animation:hudIn .6s cubic-bezier(.2,0,0,1) .48s both}
body.hud-build #hud #where{--hf:0 10px;animation:hudIn .6s cubic-bezier(.2,0,0,1) .62s both}
body.hud-build #objective{animation:hudIn .5s ease .7s both}
@media (prefers-reduced-motion: reduce){body.hud-build #compass,body.hud-build #hud #escCorner,body.hud-build #hud #droneBtn,body.hud-build #mini,body.hud-build #miniFrame,body.hud-build #hud #miniKey,body.hud-build #ytSet,body.hud-build #hud #discKey,body.hud-build #sheet,body.hud-build #keys,body.hud-build #hud #where,body.hud-build #objective{--hf:0 0;--hs:1;animation-duration:.3s;animation-delay:0s}}

/* the map is the music disc's size (6 Oct, Anand: "match the size of the map with the sound"): 200 px, the compact player's
   label, in place of the old 248 px dock; the map's labels, the key bar's room and the caption's width follow --dock */
@media (min-width:701px){body:not(.touch) #hud{--dock:200px}}