/* The lobby is a big 1991 CRT sitting in the den (Mike: "the main interface is a tv"). Decor only, loaded after
   ui-art.css: a walnut cabinet that grows out of the TV's wood frame into the gutters (speaker grille, channel and
   volume knobs, rabbit ears taped to the side), a BBTV badge, a crate stand with a VCR, the screen's light spilling
   onto the den, and curved CRT glass. Nothing here moves or resizes the UI; the cabinet thins to nothing as the
   gutters close (about 1500px wide). Elements are added by broadcast-lobby.js (.bc-cab, .bc-spill, .bc-badge,
   .bc-stand). */
html.broadcast body #menu#menu :is(.bc-cab,.bc-spill,.bc-badge,.bc-stand){display:none}
@media (min-width:701px) and (min-height:521px){
  html.broadcast body #menu#menu :is(.bc-cab,.bc-spill,.bc-badge,.bc-stand){display:block}
  html.broadcast body #menu#menu{--g:max(0px,min(46px,(100vw - 1480px) / 2 - 16px))}
  html.broadcast body #menu#menu .bc-cab,html.broadcast body #menu#menu .bc-spill,html.broadcast body #menu#menu .bc-stand{position:absolute;pointer-events:none}

  /* Cabinet: faux walnut with horizontal grain, rounded corners, a dark outline and a heavy shadow on the wall. */
  html.broadcast body #menu#menu .bc-cab{z-index:-1;top:-24px;bottom:-24px;left:calc(-18px - var(--g));right:calc(-18px - var(--g));border-radius:30px 30px 22px 22px;
    background:linear-gradient(90deg,#0000 0,#ffffff12 1.5%,#0000 4%,#0000 96%,#00000040 100%),
      repeating-linear-gradient(180deg,#4a2c17 0 4px,#57351d 4px 7px,#3e2413 7px 9px,#5c3a20 9px 15px,#432815 15px 17px),#4a2c17;
    box-shadow:inset 0 3px 0 #8a5a33,inset 0 -5px 0 #1d1108,0 0 0 4px #0b0806,0 34px 70px #000d,0 10px 0 4px #0b0806}
  html.broadcast body #menu#menu .bc-cab i{position:absolute;display:block}
  /* Speaker grilles down both sides, knobs above the right one. */
  html.broadcast body #menu#menu .bc-cab .bc-grille-l,html.broadcast body #menu#menu .bc-cab .bc-grille-r{top:22%;bottom:12%;width:calc(var(--g) - 16px);border-radius:6px;
    background:radial-gradient(circle,#0b0806 0 2px,#0000 2.5px) 0 0/7px 7px,#2b1a0e;box-shadow:inset 0 2px 3px #000,0 1px 0 #8a5a3366}
  html.broadcast body #menu#menu .bc-cab .bc-grille-l{left:8px}
  html.broadcast body #menu#menu .bc-cab .bc-grille-r{right:8px;top:34%}
  html.broadcast body #menu#menu .bc-cab .bc-dial{right:calc((var(--g) - 30px) / 2);width:30px;height:30px;border-radius:50%;
    background:conic-gradient(from 20deg,#d9d3c4 0 6%,#4d4a44 6% 12%,#bdb6a5 12% 50%,#6d685f 50% 56%,#a8a192 56% 100%);
    box-shadow:0 0 0 3px #0b0806,0 4px 0 3px #0b0806,inset 0 0 0 6px #2e2b27}
  html.broadcast body #menu#menu .bc-cab .bc-dial:after{content:'';position:absolute;left:13px;top:2px;width:4px;height:10px;background:#e8122b;box-shadow:0 0 0 1px #000}
  html.broadcast body #menu#menu .bc-cab .bc-dial.ch{top:12%}
  html.broadcast body #menu#menu .bc-cab .bc-dial.vol{top:22%;transform:rotate(130deg)}
  /* Rabbit ears with foil, duct-taped to the right side of the cabinet (no headroom above the set). */
  html.broadcast body #menu#menu .bc-cab .bc-ears{right:-128px;top:64px;width:172px;height:178px;
    background:url(assets/ui/tv-rabbit-ears.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 #000a);transform:rotate(10deg);transform-origin:20% 90%}
  html.broadcast body #menu#menu .bc-cab .bc-tape{right:-46px;top:206px;width:60px;height:16px;background:linear-gradient(#bfc2c4,#8e9294);transform:rotate(-9deg);box-shadow:0 0 0 2px #0b0806;opacity:.95}

  /* Brand badge on the bottom rim. */
  html.broadcast body #menu#menu .bc-badge{position:absolute;z-index:7;left:50%;bottom:-17px;transform:translateX(-50%);padding:0 10px;height:15px;pointer-events:none;
    background:linear-gradient(#f4f1e6,#a9a497 55%,#d8d3c4);border-radius:3px;box-shadow:0 0 0 2px #0b0806,inset 0 -2px 0 #6d685f;
    font:var(--bb-display-s);font-size:13px;line-height:15px;letter-spacing:.12em;color:#1a1410}
  html.broadcast body #menu#menu .bc-badge b{color:#e8122b}

  /* Crate stand behind the hero strip, a VCR on the floor beside it, cables up to the set, a shadow on the floor. */
  html.broadcast body #menu#menu .bc-card-row{position:relative}
  html.broadcast body #menu#menu .bc-stand{z-index:-1;top:-6px;bottom:-30px;left:calc(-10px - var(--g) * .6);right:calc(-10px - var(--g) * .6);
    background:repeating-linear-gradient(90deg,#0000 0 118px,#0b0806 118px 121px),repeating-linear-gradient(180deg,#5b4128 0 22px,#0b0806 22px 25px,#4a3420 25px 47px,#0b0806 47px 50px);
    box-shadow:inset 0 3px 0 #8a6a42,0 0 0 4px #0b0806;filter:brightness(.7)}
  html.broadcast body #menu#menu .bc-stand:before{content:'';position:absolute;left:-6%;right:-6%;bottom:-26px;height:46px;background:radial-gradient(closest-side,#000d,#0000)}
  html.broadcast body #menu#menu .bc-stand .bc-vcr{position:absolute;right:calc(100% + 6px);bottom:30px;width:152px;height:43px;background:url(assets/ui/vhs-vcr.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(4px 6px 0 #000b) brightness(1.2)}
  html.broadcast body #menu#menu .bc-stand .bc-cables{position:absolute;right:100%;bottom:60px;width:150px;height:120px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 118C30 70 90 96 104 60S140 20 150 8' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M20 118C30 70 90 96 104 60S140 20 150 8' stroke='%23756a5e' stroke-width='3'/%3E%3Cpath d='M44 118C60 92 40 70 92 70S130 40 150 30' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M44 118C60 92 40 70 92 70S130 40 150 30' stroke='%23d8b23a' stroke-width='3'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

  /* The screen's light on the den: two washes crossfading (toxic green, CRT blue-magenta) with a faint flicker. */
  html.broadcast body #menu#menu .bc-spill{z-index:-2;inset:-8% -45% -30%;mix-blend-mode:screen}
  html.broadcast body #menu#menu .bc-spill:before,html.broadcast body #menu#menu .bc-spill:after{content:'';position:absolute;inset:0}
  html.broadcast body #menu#menu .bc-spill:before{background:radial-gradient(ellipse 50% 46% at 50% 50%,#7dff3a2e,#7dff3a10 60%,#0000)}
  html.broadcast body #menu#menu .bc-spill:after{background:radial-gradient(ellipse 50% 46% at 50% 50%,#6a5cff30,#ff3dd612 60%,#0000);animation:bc-spill 7s ease-in-out infinite alternate,bc-spill-flicker 2.3s steps(1) infinite}
  @keyframes bc-spill{from{opacity:.15}to{opacity:1}}
  @keyframes bc-spill-flicker{0%,100%{filter:none}47%{filter:brightness(.8)}49%{filter:none}}

  /* CRT glass: a thick plastic bezel ring, curved-glass vignette with darker corners, a faint glare; lighter scanlines. */
  html.broadcast body #menu#menu .bc-screen{box-shadow:inset 0 0 0 6px #0a0a09,inset 0 0 40px #000,0 0 0 3px #000,0 0 0 8px #2b2723,0 0 0 10px #0b0a08}
  html.broadcast body #menu#menu .bc-screen::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
    background:linear-gradient(158deg,#ffffff16 0,#ffffff08 18%,#0000 30%),radial-gradient(ellipse 120% 115% at 50% 50%,#0000 62%,#0000002e 82%,#0000008c 100%)}
  html.broadcast body #menu#menu .bc-crt{background:repeating-linear-gradient(#0000 0 2px,#0000001a 2px 3px),radial-gradient(ellipse 80% 75% at 50% 50%,transparent 66%,#0007 100%)}
}
@media (prefers-reduced-motion:reduce){html.broadcast body #menu#menu .bc-spill:after{animation:none;opacity:.6}}
/* No gutter for the ears below about 1560px wide. */
@media (max-width:1560px){html.broadcast body #menu#menu .bc-cab :is(.bc-ears,.bc-tape){display:none}}