/* The Warden Hound's arrival card and screen pulse (js/warden-arrival.js). One sticker: keyline, flat fill,
   hard drop and the die-cut rim of every sticker that floats over the game world, with the hound's own art.
   Placement and timing live here; every colour and font is a token. */
#wardenArrival{
  position:absolute;top:22%;left:50%;transform:translateX(-50%) scale(.9);
  display:flex;align-items:center;gap:var(--hud-space-3);
  max-width:min(520px,calc(100vw - 32px));padding:var(--hud-space-2) var(--hud-space-4) var(--hud-space-2) var(--hud-space-2);
  background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);
  border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-float);
  pointer-events:none;z-index:9;opacity:0; /* with the match moment callout: above the tutorial box, below dialogs */
  transition:opacity var(--hud-motion-fast),transform 200ms cubic-bezier(.2,1.4,.4,1);
}
#wardenArrival[hidden]{display:none;}
#wardenArrival.in{opacity:1;transform:translateX(-50%) scale(1);}
#wardenArrival .waArt{width:112px;height:112px;flex:none;background:none;image-rendering:auto;}
#wardenArrival .waText{display:flex;flex-direction:column;gap:var(--hud-space-1);min-width:0;}
#wardenArrival .waHead{
  font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);
  letter-spacing:.08em;color:var(--hud-danger);text-transform:uppercase;text-shadow:var(--hud-sticker-drop);text-wrap:balance;
}
#wardenArrival .waSub{
  font:var(--hud-weight-label) var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);
  letter-spacing:var(--hud-notice-tracking);color:var(--hud-sticker-cut);text-transform:uppercase;
}
/* One red beat around the edge of the screen as it lands. */
#wardenPulse{
  position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;
  background:radial-gradient(ellipse at center,transparent 45%,color-mix(in srgb,var(--hud-danger) 55%,transparent) 100%);
}
#wardenPulse[hidden]{display:none;}
#wardenPulse.in{animation:wardenPulse 900ms ease-out 1;}
@keyframes wardenPulse{0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}}
body.inlobby #wardenArrival,body.inlobby #wardenPulse{display:none;}
/* A phone gets the full width under the top HUD: the art beside a two-line headline. */
body.touch:not(.inlobby) #wardenArrival{top:calc(var(--sat) + 116px);width:min(420px,calc(100vw - 32px));gap:var(--hud-space-2);}
body.touch #wardenArrival .waArt{width:80px;height:80px;}
body.touch #wardenArrival .waHead{font-size:var(--hud-title-lg);letter-spacing:.04em;}
body.touch #wardenArrival .waSub{font-size:var(--hud-text-xs);}
@media (prefers-reduced-motion:reduce){
  #wardenArrival,#wardenArrival.in{transform:translateX(-50%);transition:opacity var(--hud-motion-fast);}
  #wardenPulse.in{animation:none;}
}