* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: grid;
  place-items: center;
}

.tv-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 2.10648));
  aspect-ratio: 1820 / 864;
  background-image: url("neon_gold_lined_lounge_social_interface.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.hotspot {
  position: absolute;
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.center-entry{position:absolute;left:31%;top:54%;width:38%;height:20%;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;pointer-events:none}
.center-entry .bar-name{color:#71dcff;font-size:clamp(13px,2vw,30px);font-weight:900;text-shadow:0 0 12px #00bfff}
.center-entry p{margin:.35em 0;font-weight:800;font-size:clamp(9px,1.25vw,18px)}
.enter-live{pointer-events:auto;text-decoration:none;color:#160008;background:linear-gradient(#ffbad8,#db4e8c);border:2px solid #ffcf5b;border-radius:999px;padding:.55em 1.5em;font-weight:900;box-shadow:inset 0 2px 3px #fff,0 0 14px #ff2f95}

/* TITLE */
.hs-title {
  left: 26.0%;
  top: 3.3%;
  width: 48.5%;
  height: 14.5%;
}

/* TAGS */
.hs-mt5613 { left: 20.0%; top: 30.0%; width: 5.4%; height: 5.0%; }
.hs-jm8347 { left: 35.9%; top: 21.1%; width: 5.3%; height: 5.0%; }
.hs-ls7194 { left: 46.7%; top: 24.7%; width: 5.3%; height: 5.0%; }
.hs-cq3938 { left: 59.2%; top: 30.0%; width: 5.5%; height: 5.0%; }
.hs-em2876 { left: 69.2%; top: 35.3%; width: 5.7%; height: 5.0%; }
.hs-og4871 { left: 27.8%; top: 45.0%; width: 5.7%; height: 5.0%; }

.hs-contact {
  left: 50.0%;
  top: 44.9%;
  width: 6.9%;
  height: 5.6%;
}

/* RIGHT SIDE */
.hs-scan {
  left: 86.0%;
  top: 29.0%;
  width: 7.5%;
  height: 5.5%;
}

.hs-qr {
  left: 84.8%;
  top: 34.8%;
  width: 9.7%;
  height: 18.7%;
}

.hs-enjoy {
  left: 86.0%;
  top: 53.5%;
  width: 7.5%;
  height: 5.5%;
}

/* BAR PROMO */
.hs-promo {
  left: 20.0%;
  top: 80.0%;
  width: 59.5%;
  height: 10.5%;
}

.hs-wine {
  left: 5.7%;
  top: 78.7%;
  width: 12.0%;
  height: 13.0%;
}

.hs-drink {
  left: 81.8%;
  top: 78.7%;
  width: 12.0%;
  height: 13.0%;
}

.hs-author {
  left: 34.0%;
  top: 92.5%;
  width: 32.0%;
  height: 5.5%;
}

/* Add ?debug=1 to the URL to see all click zones */
body.debug .hotspot {
  outline: 2px dashed #00ffff;
  background: rgba(0,255,255,.12);
}

@media(max-aspect-ratio:1/1){html,body{overflow:auto}.stage{width:100vw;min-height:100vh;aspect-ratio:1820/864;background-size:cover;background-position:center}.center-entry{left:12%;width:76%;top:43%;height:28%}.hotspot{display:none}}