/* Custom PixelLab UI art (docs/ui-art.md, scripts/build-ui-art.py). Loaded after broadcast-lobby.css and match-end.css.
   States are art swaps, never CSS filters, so the pixels stay hard. */

/* Lobby TV set: a beat-up wood cabinet (9-slice at 1x, Mike's thin bezel) covered in punk stickers and duct tape, with a
   coat-hanger antenna duct-taped to the front of the top rim, flopping over the sky of the set (there is no headroom above
   the TV: any taken from it makes the CH 03 Loadout channel scroll). */
@media (min-width:701px){
  html.broadcast body #menu#menu .bc-tv{border:18px solid transparent;border-image:url(assets/ui/tv-cabinet.png?v=ua-2) 18 / 18px / 0 stretch;image-rendering:pixelated;border-radius:0;padding:4px 6px 4px 4px;
    background:repeating-linear-gradient(90deg,#0000 0 23px,#00000026 23px 25px),linear-gradient(#3a2416,#24160d);background-clip:padding-box;box-shadow:0 24px 50px #000c}
  html.broadcast body #menu#menu .bc-tv::before{content:"";position:absolute;z-index:6;top:-22px;left:24%;width:111px;height:120px;pointer-events:none;
    background:url(assets/ui/tv-antenna.png?v=ua-2) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #000)}
  html.broadcast body #menu#menu .bc-tv::after{content:"";display:block;position:absolute;z-index:6;inset:-18px;pointer-events:none;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #000c);
    background:
      url(assets/ui/tv-sticker-junk.png?v=ua-2) 2px 4px/30px 34px no-repeat,
      url(assets/ui/sticker-skull.png?v=ua-2) 61% 0/40px 45px no-repeat,
      url(assets/ui/sticker-smiley.png?v=ua-2) 13% 0/38px 38px no-repeat,
      url(assets/ui/sticker-mouth.png?v=ua-2) 0 100%/32px 40px no-repeat,
      url(assets/ui/sticker-shark.png?v=ua-2) 74% 100%/42px 42px no-repeat,
      url(assets/ui/sticker-duck.png?v=ua-2) 0 36%/32px 40px no-repeat,
      url(assets/ui/sticker-eightball.png?v=ua-2) 0 74%/37px 44px no-repeat,
      url(assets/ui/sticker-fist.png?v=ua-2) 30% 100%/34px 44px no-repeat,
      url(assets/ui/sticker-boombox.png?v=ua-2) 58% 100%/41px 35px no-repeat,
      url(assets/ui/tv-tape.png?v=ua-2) calc(100% - 196px) 100%/46px 42px no-repeat,
      url(assets/ui/sticker-radioactive.png?v=ua-2) 100% 8%/39px 44px no-repeat,
      url(assets/ui/sticker-king.png?v=ua-2) 100% 30%/28px 43px no-repeat}
}


/* Lobby: GO LIVE is an arcade push-button in a riveted hazard housing (118 px native, drawn 1:1 on desktop). */
html.broadcast body #menu#menu .bc-go{width:124px;height:124px;border-radius:50%;background:url(assets/ui/go-chase.webp?v=ua-2) 0 0/600% 100% no-repeat;image-rendering:pixelated;
  box-shadow:none;filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 18px #ceff2455);animation:ua-go-chase .9s steps(6) infinite,ua-go-idle 2.4s steps(6) infinite;
  padding:0 0 4px;font:var(--bb-display-m);font-size:27px;line-height:.92;color:#132000;letter-spacing:.05em;text-shadow:1px 1px 0 #f4ffc099}
html.broadcast body #menu#menu .bc-go:hover{transform:scale(1.05);background:url(assets/ui/go-hover.png?v=ua-2) center/100% 100% no-repeat;animation:ua-go-idle 1s steps(4) infinite}
html.broadcast body #menu#menu .bc-go:active{transform:translateY(4px) scale(.96);background:url(assets/ui/go-pressed.png?v=ua-2) center/100% 100% no-repeat;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 30px #fffde0aa);animation:none}
@keyframes ua-go-chase{to{background-position:120% 0}}
@keyframes ua-go-idle{0%,100%{filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 10px #ceff2433)}50%{filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 22px #ceff2499)}}
@media (max-width:700px),(max-height:520px) and (orientation:landscape){
  html.broadcast body #menu#menu .bc-go{width:88px;height:88px;padding-bottom:3px;font-size:20px;image-rendering:auto}
}
@media (prefers-reduced-motion:reduce){html.broadcast body #menu#menu .bc-go{animation:none}}
@media (max-width:700px),(max-height:520px) and (orientation:landscape){html.broadcast body #menu#menu .bc-tv::before,html.broadcast body #menu#menu .bc-tv::after{display:none}}

/* Lobby control knobs: settings, help, Discord. The glyph stays in the markup for screen readers only. */
html.broadcast body #menu#menu .bc-knob{width:44px;height:44px;border:0;border-radius:50%;background:url(assets/ui/knob-settings-normal.png?v=ua-1) center/42px 43px no-repeat;image-rendering:pixelated;
  box-shadow:none;color:transparent;font-size:0;filter:drop-shadow(0 3px 0 #000)}
html.broadcast body #menu#menu .bc-knob[data-open=bc-help]{background-image:url(assets/ui/knob-help-normal.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob.bc-discord{background:url(assets/ui/knob-discord-normal.png?v=ua-1) center/42px 43px no-repeat}
html.broadcast body #menu#menu .bc-knob:hover{background-image:url(assets/ui/knob-settings-hover.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob[data-open=bc-help]:hover{background-image:url(assets/ui/knob-help-hover.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob.bc-discord:hover{background-image:url(assets/ui/knob-discord-hover.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 #000);background-image:url(assets/ui/knob-settings-pressed.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob[data-open=bc-help]:active{background-image:url(assets/ui/knob-help-pressed.png?v=ua-1)}
html.broadcast body #menu#menu .bc-knob.bc-discord:active{background-image:url(assets/ui/knob-discord-pressed.png?v=ua-1)}

/* Lobby channel screen: dark CRT glass in a riveted bezel (9-slice), with scanlines over the glass. */
html.broadcast body #menu#menu .bc-channel{border:3px solid transparent;border-image:url(assets/ui/crt-bezel.png?v=ua-1) 24 fill / 22px / 12px stretch;image-rendering:pixelated;box-shadow:none;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#00000030 2px 3px),radial-gradient(120% 90% at 30% 20%,#14243a,#0a1420 70%);background-clip:padding-box}

/* Match end: VICTORY / DEFEAT are pixel slime lettering on a riveted hazard plate with an 8-frame drip loop (the word stays in
   the markup for screen readers; Endless's WAVE n, .result-wave, stays text). The results header sits on an outcome scene:
   a podium under fireworks, or a junk heap with a rain cloud and a laughing rat. .result-pose is the empty slot for the
   winning hero's pose (frostbite-art), and .result-quip brags or roasts (result-flavor.js). */
#modal .result-first:is(.victory,.defeat):has(.result-word:not(.result-wave)){position:relative;isolation:isolate}
#modal .result-first:is(.victory,.defeat):has(.result-word:not(.result-wave))::before{content:"";position:absolute;z-index:-1;left:-28px;right:-28px;top:-24px;height:330px;pointer-events:none;
  background:linear-gradient(#0b0d1255,#0b0d1222 40%,#13171f 96%),url(assets/ui/scene-victory.webp?v=ua-2) center 42%/960px 540px no-repeat;image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#modal .result-first.defeat:has(.result-word:not(.result-wave))::before{background-image:linear-gradient(#0b0d1255,#0b0d1222 40%,#13171f 96%),url(assets/ui/scene-defeat.webp?v=ua-2)}
#modal .result-first .result-word:not(.result-wave){width:336px;height:168px;margin:-4px auto -26px;transform:none;
  background:url(assets/ui/word-victory-drip.webp?v=ua-2) 0 0/800% 100% no-repeat;image-rendering:pixelated;color:transparent;text-shadow:none;font-size:0;
  filter:drop-shadow(4px 5px 0 #000);animation:ua-word-in .4s steps(4) both,ua-drip 1.6s steps(8) .4s infinite}
#modal .result-first.defeat .result-word:not(.result-wave){background-image:url(assets/ui/word-defeat-drip.webp?v=ua-2)}
@keyframes ua-drip{to{background-position:114.2857% 0}}
#modal .result-first .result-quip{display:block;position:relative;margin:0 0 4px;font:400 26px/1 var(--font-display);letter-spacing:.04em;color:#ffe46b;text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink);transform:rotate(-2deg)}
#modal .result-first.defeat .result-quip{color:#ff8ac0}
#modal .result-first:is(.victory,.defeat) :is(.eyebrow,.result-you,.mastery-gain,.result-mine){position:relative;text-shadow:var(--bb-stroke-2),2px 2px 0 var(--bb-ink)}
#modal .result-first .result-pose{position:absolute;left:7%;top:110px;width:120px;height:150px;pointer-events:none}
#modal .result-first .result-pose:empty{display:none}
#result-banner{border-block:0;padding:10px 16px 16px}
#result-banner b{width:504px;height:252px;margin:-20px auto -60px;background:url(assets/ui/word-victory-drip.webp?v=ua-2) 0 0/800% 100% no-repeat;image-rendering:pixelated;
  color:transparent;text-shadow:none;font-size:0;filter:drop-shadow(5px 6px 0 #000);animation:ua-drip 1.6s steps(8) infinite}
#result-banner.defeat b{background-image:url(assets/ui/word-defeat-drip.webp?v=ua-2)}
@media (max-width:700px),(max-height:500px){
  #result-banner b{width:336px;height:168px;margin:-14px auto -40px}
  #modal .result-first .result-word:not(.result-wave){width:252px;height:126px;margin:-2px auto -20px}
  #modal .result-first:is(.victory,.defeat):has(.result-word:not(.result-wave))::before{height:250px;background-size:auto,640px 360px}
}
@media (max-height:500px){
  #modal .result-first .result-word:not(.result-wave){width:168px;height:84px;margin:-6px auto -18px}
  #modal .result-first:is(.victory,.defeat):has(.result-word:not(.result-wave))::before{height:200px}
}
@keyframes ua-word-in{0%{transform:scale(1.6) rotate(-4deg);opacity:0}60%{transform:scale(.94)}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#modal .result-first .result-word,#result-banner b{animation:none}}

/* FIGHT AGAIN / RUN IT BACK: the kit's hazard-rim CTA (ui-kit.css .bb-btn--cta), not a flat lime slab. */
#modal .result-first .result-actions #again.bb-btn{width:min(560px,100%);margin-inline:auto;min-height:68px;padding:4px 44px 8px;background:none;border:0 solid transparent;border-image:var(--art) 10 12 fill / 20px 24px / 0 round;
  box-shadow:none;border-radius:0;color:var(--bb-lime);font:var(--bb-display-m);font-size:clamp(24px,3vw,30px);letter-spacing:.05em;text-shadow:var(--bb-stroke-2),3px 3px 0 var(--bb-ink);filter:drop-shadow(3px 3px 0 var(--bb-ink))}
#modal .result-first .result-actions #again.bb-btn:hover{border-image-source:var(--art-hover)}
#modal .result-first .result-actions #again.bb-btn:active{border-image-source:var(--art-down);transform:translate(2px,2px);filter:drop-shadow(1px 1px 0 var(--bb-ink))}

/* Death recap: KILLED BY is a duct-taped WANTED poster with bullet holes (drawn whole at 3x, so its lettered header never
   stretches); RETURNING is an arcade countdown sign with warning bulbs in its corners (9-slice, 2x). */
:root #death-recap .recap-showcase .recap-killer{box-sizing:border-box;width:282px;min-height:189px;margin:-30px 0 0;padding:60px 24px 22px;border:0;border-radius:0;box-shadow:none;
  background:url(assets/ui/wanted-poster.png?v=ua-2) 0 0/282px 189px no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 #05080c);transform:rotate(-2deg)}
:root #death-recap .recap-showcase .recap-killer .eyebrow{color:#ff8ac0}
html[data-art-style] #hud .respawn{padding:20px 30px 20px;border:0 solid transparent;border-image:url(assets/ui/countdown-sign.png?v=ua-2) 14 fill / 28px / 0 round;image-rendering:pixelated;
  background:none;border-radius:0;box-shadow:none;filter:drop-shadow(3px 4px 0 #05080c);color:#ffe46b;text-shadow:var(--bb-stroke-2),2px 2px 0 var(--bb-ink);font:400 28px/1 var(--font-display);letter-spacing:.04em}
@keyframes ua-count{50%{color:#ff8a29}}
html[data-art-style] #hud .respawn:not([hidden]){animation:ua-count 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){html[data-art-style] #hud .respawn{animation:none}}
/* First-match tips (first-hints.js, #first-hint[data-hint]): a dark riveted hazard plate instead of a lime slab. */
#hud .first-hint{border:10px solid transparent;border-image:url(assets/hud/plate-hazard.png) 5 fill / 10px / 0 stretch;image-rendering:pixelated;background:none;border-radius:0;box-shadow:none;
  padding:2px 8px 4px;color:#eef1dc;filter:drop-shadow(3px 4px 0 #05080c)}