html, body { margin: 0; background: #030705; }
html { overflow: hidden; }
body { overflow-x: hidden; }
.blr { min-height: 0; border: 0; }
.blr__top, .blr__footer, .blr__scribble { display: none; }
.blr__intro { margin: 0; padding: 26px 12px 0; }
.blr__headline { font-size: clamp(30px, 7cqw, 74px); letter-spacing: -1.5px; }
.blr__intro > p { font-size: 12px; letter-spacing: 3px; }
.blr__stage { height: 345px; }
.blr__item { width: 288px; height: 320px; }
.blr__bottom { display: flex; flex-direction: column; gap: 15px; padding: 8px 5% 22px; }
.blr__selection { order: 0; width: 100%; }
.blr__result { padding: 14px 20px; }
.blr__result-name { font-size: 30px; }
.blr__price { font-size: 34px; }
.blr__description { font-size: 16px; }
.blr__dots { max-width: none; margin: 12px auto 0; }
.blr__dot { width: 25px; height: 28px; }
.blr__hint { margin: 2px 0 21px; }
.blr__hint small { top: 35px; }
.blr__random-area { order: 1; margin: 0; display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 0 12px; max-width: 380px; width: 100%; align-self: center; }
.blr__splash { width: 100px; height: 65px; font-size: 19px; }
.blr__random { min-height: 57px; font-size: 17px; }
.blr__random-note { grid-column: 1 / -1; min-height: 0; margin: 5px 0 0; }
.blr__motto { display: none; }
.blr__stats { order: 2; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.blr__stat { min-height: 52px; padding: 7px; gap: 5px; }
.blr__stat svg { width: 20px; height: 30px; }
.blr__stat strong { font-size: 14px; }
.blr__stat small { font-size: 10px; letter-spacing: 0; }
@media (min-width: 900px) {
  .blr__stage { height: 400px; }
  .blr__item { width: 337px; height: 375px; }
  .blr__bottom { max-width: 820px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .blr__intro { padding-top: 24px; }
  .blr__headline { font-size: 8cqw; }
  .blr__intro > p { font-size: 11px; letter-spacing: 2px; }
  .blr__stage { height: 315px; }
  .blr__item { width: 270px; height: 300px; }
  .blr__result-name { font-size: 28px; }
  .blr__result { padding: 14px 17px; }
  .blr__result-meta { font-size: 15px; }
  .blr__price { font-size: 30px; }
  .blr__dots { max-width: 270px; }
  .blr__dot { width: 25px; height: 30px; }
  .blr__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blr__stat { padding: 9px 12px; gap: 8px; }
  .blr__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Extend only the scenery into the space reserved for the playlist. */
@media (max-width: 720px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .blr { overflow: visible; }
  .blr::before, .blr::after { bottom: calc(-88px - env(safe-area-inset-bottom, 0px)); }
}

/* Match the scale of the site's section headings. */
.blr .blr__headline{font-size:clamp(36px,4.4vw,66px);line-height:1.05;letter-spacing:.015em}

/* Main-category filters for the BackLine drinks roulette. */
.blr__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 14px auto 16px; padding: 0 16px; }
.blr__filter { appearance: none; border: 1px solid rgba(105, 200, 85, .38); border-radius: 999px; background: rgba(7, 18, 10, .8); color: #dce6d8; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 8px 11px; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.blr__filter:hover, .blr__filter:focus-visible { border-color: #69c855; color: #fff; outline: none; transform: translateY(-1px); }
.blr__filter.is-active { background: #69c855; border-color: #69c855; color: #081008; }
.blr__filter small { display: inline-block; margin-left: 6px; opacity: .72; font-size: .9em; }
.blr__filter.is-active small { opacity: .85; }
@media (max-width: 560px) { .blr__filters { gap: 6px; margin-bottom: 10px; padding: 0 10px; } .blr__filter { font-size: 10px; padding: 7px 9px; } }
@media (prefers-reduced-motion: reduce) { .blr__filter { transition: none; } }

/* Neutral illustrations are used only where no matching product artwork exists. */
.blr__art--generic { display: grid; place-items: end center; color: #d9f2d0; filter: drop-shadow(0 12px 16px rgba(0,0,0,.48)); }
.blr__art--generic svg { display: block; width: 72%; height: 90%; fill: rgba(38, 146, 62, .58); stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.blr__art--whiskey svg { fill: rgba(195, 122, 38, .7); color: #ffe0a2; }
.blr__art--longdrink svg { fill: rgba(62, 172, 91, .58); color: #d9ffd8; }
.blr__art--softdrink svg { fill: rgba(111, 184, 221, .55); color: #e5faff; }
.blr__art--shot svg { width: 52%; fill: rgba(99, 209, 159, .62); color: #dcfff1; }