/* Spud & Root: town/bar.html (Russet's). Loaded after site.css.
   bar.js sets data-state on .bar: outside -> room (walking about) ->
   perch (on a stool) -> game (a game over everything), and adds is-*
   classes as things happen. The pictures are drawn by bar-room.js. */

.bar-page {
  overflow: hidden;
  background: #1a1210;
  overscroll-behavior: none;
}

.bar {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bar .btn--small {
  min-height: 0;
  padding: 0.4em 1em;
  font-size: 0.98rem;
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Outside ---------- */
.street {
  position: absolute;
  inset: 0;
  background: #0c1022;
  overflow: hidden;
}
.street[hidden] {
  display: none;
}
.street__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 65% 62%;
  transition: transform 1s cubic-bezier(0.5, 0, 0.3, 1), opacity 0.9s ease;
}
.is-opening .street__art {
  transform: scale(2.4);
  opacity: 0;
}
.street__go {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  translate: -50% 0;
  padding: 0.5em 1.4em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.street__go[hidden],
.is-opening .street__go {
  display: none;
}
.street .hot {
  cursor: pointer;
  outline: none;
}
.street .hot:focus-visible > :first-child {
  stroke: var(--logo-yellow);
}
.street .door {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 0.6s ease-in;
}
.is-opening .street .door {
  transform: perspective(600px) rotateY(-70deg);
}
.bar__noscript {
  position: absolute;
  left: 50%;
  top: 16px;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.5em 1em;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  text-align: center;
}
html.js .bar__noscript {
  display: none;
}

/* Neon: a slow, uneven flicker on a couple of the tubes */
.neon--sign {
  animation: neon-buzz 7s infinite;
}
.neon--open {
  animation: neon-buzz 11s 2s infinite;
}
@keyframes neon-buzz {
  0%, 91%, 93%, 96%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.55; }
}

/* ---------- Inside: the room ---------- */
/* (the room doesn't drag or swipe: you walk with the arrows at the sides) */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1210;
  touch-action: pan-y;
}
.stage[hidden] {
  display: none;
}
/* bar.js slides the room by moving what it's in: moving the drawing
   itself made some browsers draw all of it again every step */
.room-slide {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.room {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.room .hot {
  cursor: pointer;
  outline: none;
}
@media (hover: hover) {
  .room .hot:hover > *,
  .perch__art .hot:hover > * {
    filter: brightness(1.12);
  }
}
.room .hot:focus-visible,
.perch__art .hot:focus-visible {
  outline: none;
}
.room .hot:focus-visible > *,
.perch__art .hot:focus-visible > * {
  filter: drop-shadow(0 0 6px #ffde00) drop-shadow(0 0 2px #ffde00);
}

/* The gang breathe, and the one talking bobs */
.who__bob {
  animation: bob var(--bob, 3.4s) ease-in-out var(--bob-delay, 0s) infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes bob {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 0.985); }
}
.who.is-speaking .who__bob {
  animation: talk-bob 0.32s ease-in-out infinite;
}
@keyframes talk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}
.who.is-gone {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.who[hidden] {
  display: none;
}

/* Paprika dances when there's music on */
.is-music .who--paprika .who__bob {
  animation: dance 0.7s ease-in-out infinite alternate;
}
@keyframes dance {
  from { transform: rotate(-3deg) translateY(0); }
  to { transform: rotate(3deg) translateY(-2px); }
}
.juke-glow {
  opacity: 0.4;
  transition: opacity 0.6s ease;
}
.is-music .juke-glow {
  animation: juke-pulse 1.4s ease-in-out infinite;
}
@keyframes juke-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.xmas--1 {
  animation: twinkle 3s 0.5s infinite;
}
.xmas--2 {
  animation: twinkle 4s 1.4s infinite;
}
@keyframes twinkle {
  0%, 80%, 100% { opacity: 1; }
  88% { opacity: 0.4; }
}
.russet.is-walking .who__bob {
  animation: walk-bob 0.36s ease-in-out infinite;
}
@keyframes walk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.counter-drink.is-fresh {
  animation: fresh 0.8s ease-out;
}
@keyframes fresh {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* A car going by outside the front windows, now and then */
.street-car {
  animation: street-car 26s linear infinite;
}
.street-car--1 {
  animation-duration: 33s;
  animation-delay: -9s;
}
.street-car--2 {
  animation-duration: 41s;
  animation-delay: -20s;
}
@keyframes street-car {
  0%, 82% { transform: translateX(0); }
  100% { transform: translateX(var(--road, 700px)); }
}

/* What's on the TV moves a little */
.tv-ball {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: tv-ball 3s ease-in infinite;
}
@keyframes tv-ball {
  0% { transform: translate(0, 0) scale(1); }
  80% { transform: translate(-18px, -72px) scale(0.45); }
  100% { transform: translate(-18px, -72px) scale(0.45); opacity: 0; }
}
.tv-bob {
  animation: tv-bob 2.4s ease-in-out infinite;
}
@keyframes tv-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.tv-horse {
  animation: tv-horse 0.5s ease-in-out infinite alternate;
}
@keyframes tv-horse {
  from { transform: translate(0, 0); }
  to { transform: translate(3px, -3px); }
}

/* While the room slides (bar.js puts is-moving on the stage), and under a
   game, what moves in the picture holds still: every step of it is that
   bit of the picture drawn again, which on a phone made the slide judder */
.bar .stage.is-moving :is(.who__bob, .xmas--1, .xmas--2, .street-car, .tv-ball, .tv-bob, .tv-horse, .juke-glow),
.bar[data-state="game"] :is(.room, .perch__art) :is(.who__bob, .xmas--1, .xmas--2, .street-car, .tv-ball, .tv-bob, .tv-horse, .juke-glow, .neon--sign) {
  animation-play-state: paused;
}

/* What's under the pointer */
.hover-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0.2em 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff8ea;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--ink);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}
.hover-label.is-up {
  opacity: 1;
}

/* ---------- Speech bubbles ---------- */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(260px, 64vw);
  padding: 0.45em 0.8em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.92rem, 2.2vh, 1.1rem);
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  translate: -50% -100%;
  animation: bubble-in 0.25s var(--ease-spring);
  text-align: center;
  transition: opacity 0.3s ease;
}
.bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--tail, 50%) - 8px);
  bottom: -11px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  rotate: 45deg;
}
.bubble.is-gone {
  opacity: 0;
}
/* the name shows only when the speaker is out of view */
.bubble__who {
  display: none;
  font-weight: 700;
  color: var(--russet-text);
}
.bubble--off .bubble__who {
  display: inline;
}
.bubble--off {
  translate: -50% -50%;
  background: #fff3c4;
}
.bubble--off::after {
  left: auto;
  right: -9px;
  top: calc(50% - 7px);
  bottom: auto;
  rotate: -45deg;
  background: #fff3c4;
}
.bubble--off.bubble--off-left::after {
  right: auto;
  left: -9px;
  rotate: 135deg;
}
@keyframes bubble-in {
  from { scale: 0.6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

/* The whole bar saying your name */
.shout {
  position: absolute;
  left: 50%;
  top: 22%;
  translate: -50% 0;
  margin: 0;
  padding: 0.2em 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 5rem);
  color: var(--logo-yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 5px 5px 0 var(--ink);
  pointer-events: none;
  animation: shout-in 0.5s var(--ease-spring);
  transition: opacity 0.6s ease;
  z-index: 4;
  white-space: nowrap;
}
.shout.is-gone {
  opacity: 0;
}
@keyframes shout-in {
  from { scale: 0.3; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

/* ---------- Walking about ---------- */
.bar-nav {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(30, 16, 10, 0.86);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.3s ease, translate 0.3s ease;
  z-index: 5;
}
.bar-nav::-webkit-scrollbar {
  display: none;
}
.bar-nav button {
  flex: none;
  padding: 0.3em 0.85em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #f6e3b4;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.bar-nav button:hover {
  border-color: #c99b4a;
}
.bar-nav button[aria-current="true"] {
  color: var(--ink);
  background: #e6b85c;
  border-color: var(--ink);
}
[data-state="perch"] .bar-nav,
[data-state="perch"] .walk,
[data-state="game"] .bar-nav,
[data-state="game"] .walk {
  display: none;
}
.is-talking .bar-nav,
.is-panel .bar-nav {
  opacity: 0;
  translate: -50% 140%;
  pointer-events: none;
}

.walk {
  position: absolute;
  top: 46%;
  translate: 0 -50%;
  width: 44px;
  height: 64px;
  padding: 0;
  font-size: 0;
  background: rgba(30, 16, 10, 0.62);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 5;
}
.walk::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 4px solid #f6e3b4;
  border-bottom: 4px solid #f6e3b4;
  translate: -30% -50%;
  rotate: 45deg;
}
.walk--right::before {
  translate: -70% -50%;
  rotate: -135deg;
}
.walk--left {
  left: max(8px, env(safe-area-inset-left));
}
.walk--right {
  right: max(8px, env(safe-area-inset-right));
}
.walk:disabled,
.is-talking .walk {
  opacity: 0;
  pointer-events: none;
}

/* ---------- On a stool ---------- */
.perch {
  position: absolute;
  inset: 0;
  background: #26140a;
  overflow: hidden;
  z-index: 2;
  animation: perch-in 0.45s ease-out;
}
.perch[hidden] {
  display: none;
}
/* once the view from the stool has faded in over the room, the room isn't
   drawn underneath it */
.bar:has(> .perch:not([hidden])) > .stage {
  visibility: hidden;
  transition: visibility 0s 0.5s;
}
@keyframes perch-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
/* (its own layer, so the graphics hardware does the blur next to Onion,
   rather than the picture being blurred afresh each time any of it moves) */
.perch__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: filter 2.5s ease;
  will-change: transform;
}
/* next to Onion, your eyes water */
.perch.is-teary .perch__art {
  filter: blur(1.6px) saturate(1.15);
}
.mine__tissues svg {
  width: calc(54px * var(--k, 1));
  height: calc(46px * var(--k, 1));
}
.perch__art .hot {
  cursor: pointer;
}
.neighbor .who__bob,
.russet--seat .who__bob {
  animation-duration: 4.2s;
}

/* Your things on the bar */
.mine {
  position: absolute;
  left: 50%;
  top: 70%;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(14px * var(--k, 1));
  width: min(92%, 760px);
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.mine__thing {
  position: relative;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  translate: 0 18%;
  -webkit-tap-highlight-color: transparent;
}
.mine__thing svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25));
}
.mine__drink svg {
  width: calc(64px * var(--k, 1));
  height: calc(108px * var(--k, 1));
}
.mine__water svg {
  width: calc(56px * var(--k, 1));
  height: calc(66px * var(--k, 1));
}
.mine__bowl svg {
  width: calc(110px * var(--k, 1));
  height: calc(60px * var(--k, 1));
}
.mine__plate svg {
  width: calc(130px * var(--k, 1));
  height: calc(68px * var(--k, 1));
}
.mine__thing:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: 4px;
  border-radius: 8px;
}
@media (hover: hover) {
  .mine__thing:hover svg {
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)) brightness(1.08);
  }
}
.mine__thing.is-bump {
  animation: bump 0.35s ease-out;
}
@keyframes bump {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-14%) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0); }
}
/* Order and Get up: on top of the conversation too (z-index 6), so
   nothing can cover them; only a panel goes over them, and hides them */
.perch__btns {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  gap: 10px;
  z-index: 7;
}
[data-state="perch"] .perch__btns {
  display: flex;
}
.perch__btns .btn {
  touch-action: manipulation;
}
/* on a touch screen: a full-size target, a little up from the edge */
@media (pointer: coarse) {
  .perch__btns {
    right: max(14px, calc(env(safe-area-inset-right) + 6px));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
    gap: 12px;
  }
  .bar .perch__btns .btn--small {
    min-height: 44px;
    padding: 0.5em 1.15em;
  }
}
.perch__order {
  --btn-bg: var(--logo-yellow);
}
/* no table service: you order at the bar */
.bar.is-booth .perch__order {
  display: none;
}
.perch__up {
  --btn-bg: var(--white);
}
/* (they stay while someone's talking: the talk is up top on a stool) */
.is-panel .perch__btns {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Talking ---------- */
.talk {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: min(640px, calc(100% - 24px));
  max-height: 58%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px;
  background: #fff8ea;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 6;
  animation: talk-in 0.25s var(--ease-out);
  -webkit-user-select: text;
  user-select: text;
}
.talk[hidden] {
  display: none;
}
/* On a stool the bar top is at the bottom, with your things on it: the
   talk goes up top, over the shelves */
[data-state="perch"] .talk {
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  bottom: auto;
}
@keyframes talk-in {
  from { opacity: 0; translate: -50% 20px; }
  to { opacity: 1; translate: -50% 0; }
}
/* A phone on its side, on a stool: along the top it would cover whoever's
   across the bar, so it goes down the left side */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  [data-state="perch"] .talk {
    left: max(12px, env(safe-area-inset-left));
    translate: 0 0;
    width: min(42%, 440px);
    max-height: calc(100% - 76px);
    animation-name: talk-in-side;
  }
}
@keyframes talk-in-side {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}
.talk__who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.talk__face {
  flex: none;
  width: 44px;
  height: 44px;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background-color: #f6e3b4;
  background-repeat: no-repeat;
  background-size: 150% auto;
  background-position: 50% 12%;
}
.talk__face[data-who="truffle"],
.talk__face[data-who="pepper"],
.talk__face[data-who="salt"],
.talk__face[data-who="olive"] {
  background-size: 125% auto;
  background-position: 50% 26%;
}
.talk__face[data-who="garlic"],
.talk__face[data-who="onion"] {
  background-position: 50% 52%;
}
.talk__face[data-who="carrot"],
.talk__face[data-who="paprika"] {
  background-position: 50% 32%;
}
.talk__face[data-who="rosemary"] {
  background-position: 54% 22%;
}
.talk__face[data-who="red"],
.talk__face[data-who="gold"] {
  background-position: 50% 6%;
}
.talk__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
/* the way out of any conversation */
.talk__x {
  position: relative;
  margin-left: auto;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.talk__x::before,
.talk__x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  translate: -50% -50%;
  rotate: 45deg;
}
.talk__x::after {
  rotate: -45deg;
}
.talk__x:hover,
.talk__x:focus-visible {
  background: var(--logo-yellow);
  outline: none;
}
/* already talked about, on another visit */
.talk__opt--seen {
  color: #6f6559;
  background: #f1eadb;
  border-color: #8f8576;
}
.talk__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vh, 1.25rem);
  line-height: 1.3;
  min-height: 1.3em;
  cursor: default;
}
.talk__line.is-new {
  animation: line-in 0.2s ease-out;
}
@keyframes line-in {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
.talk__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
}
.talk__opt {
  display: block;
  width: 100%;
  padding: 0.45em 0.8em 0.45em 2.2em;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.talk__opt::before {
  content: attr(data-n);
  position: absolute;
  left: 0.7em;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--russet-text);
}
.talk__opt:hover,
.talk__opt:focus-visible {
  background: var(--logo-yellow);
  outline: none;
}
.talk__opt--action {
  font-style: italic;
}
.talk__opt--more,
.talk__opt--done {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  padding: 0.35em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  background: #f6e3b4;
}
.talk__name-form {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}
.talk__name-form input {
  flex: 1;
  min-width: 0;
  padding: 0.45em 0.7em;
  font: inherit;
  font-size: 1.05rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
}
.talk__name-form .talk__opt {
  width: auto;
  padding-left: 0.9em;
}

/* ---------- Panels: the menu, the jukebox, the tab ---------- */
.panel {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(380px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 76px);
  height: max-content;
  margin-top: auto;
  background: #f6ecd2;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  animation: panel-in 0.3s var(--ease-out);
  z-index: 7;
  -webkit-user-select: text;
  user-select: text;
}
.panel[hidden] {
  display: none;
}
/* (a .btn sets its own display, which would beat the hidden attribute) */
.panel [hidden] {
  display: none !important;
}
@keyframes panel-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
.panel__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px 16px;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.panel__body {
  min-height: 0;
  overflow-y: auto;
  font-size: 0.98rem;
  line-height: 1.4;
}
.panel__done {
  align-self: flex-end;
  --btn-bg: var(--white);
}
.panel .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.panel .small {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

/* The menu: a chalkboard */
.panel--menu {
  background: #2c3a33;
  color: #f4f1e8;
}
.panel--menu .panel__title {
  font-family: var(--font-script);
  font-size: 2rem;
  font-weight: 400;
  color: #ffde00;
}
.menu__head {
  margin: 4px 0 2px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.4rem;
  color: #bfe3f7;
}
.menu {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.menu__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 6px;
  width: 100%;
  padding: 0.3em 0.4em;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.menu__item.is-off {
  opacity: 0.55;
}
.menu__item:hover,
.menu__item:focus-visible {
  border-color: #ffde00;
  outline: none;
}
.menu__name {
  font-family: var(--font-script);
  font-size: 1.35rem;
  line-height: 1.1;
}
.menu__dots {
  border-bottom: 2px dotted rgba(244, 241, 232, 0.4);
  translate: 0 -0.3em;
}
.menu__price {
  font-family: var(--font-script);
  font-size: 1.3rem;
}
.menu__happy {
  margin: 0 0 6px;
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: #ff9d2e;
}
.menu__price s {
  opacity: 0.6;
}
.menu__note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* The jukebox */
.juke {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.juke__pick {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 0 8px;
  width: 100%;
  padding: 0.45em 0.6em;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
}
.juke__pick:hover,
.juke__pick:focus-visible {
  background: var(--logo-yellow);
  outline: none;
}
.juke__pick[aria-pressed="true"] {
  background: #ffcf9a;
}
.juke__code {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #b8261c;
}
.juke__title {
  font-family: var(--font-display);
  font-weight: 600;
}
.juke__by {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* The tab: a guest check */
.slip {
  margin: 0;
  padding: 10px 12px;
  list-style: none;
  background: #fffdf5;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-script);
  font-size: 1.25rem;
  background-image: repeating-linear-gradient(#fffdf5 0 28px, #cfe3e6 28px 29px);
}
.slip li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  line-height: 29px;
}
.slip__total {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  padding: 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

/* The league plaque */
.plaque-list {
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  background: #b77b3d;
  border: var(--stroke) solid var(--ink);
  border-radius: 10px;
}
.plaque-list li {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
  padding: 0.25em 0.7em;
  font-family: var(--font-display);
  font-weight: 600;
  background: #f2cf74;
  border: 2px solid var(--ink);
  border-radius: 4px;
}

/* The notice board */
.notices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.notice {
  padding: 0.6em 0.8em;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fffdf5;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  rotate: -0.8deg;
}
.notice strong,
.notice span {
  display: block;
}
.notice strong {
  font-family: var(--font-display);
}
.notice--1 {
  background: #fff3a0;
  rotate: 0.8deg;
}
.notice--2 {
  background: #dff0fa;
  rotate: -0.4deg;
}
.notice--3 {
  font-family: var(--font-script);
  font-size: 1.15rem;
  rotate: 1deg;
}

/* ---------- A game ---------- */
.game {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(20, 11, 6, 0.86);
}
.game[hidden] {
  display: none;
}
.game__host {
  position: absolute;
  inset: 0;
}
.game__says {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0.4em 0.9em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  pointer-events: none;
  z-index: 3;
}
.game__says:empty {
  display: none;
}
.game__says.is-new {
  animation: bubble-in 0.25s var(--ease-spring);
}

/* ---------- Along the top ---------- */
.topbar {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  z-index: 9;
}
.topbar > * {
  pointer-events: auto;
}
.leave,
.tab-btn,
.sound {
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
}
.tab-btn {
  margin-left: auto;
  background: #f6ecd2;
}
.sound {
  margin-left: auto;
}
.tab-btn:not([hidden]) + .sound {
  margin-left: 0;
}
.tab-btn[hidden],
.sound[hidden] {
  display: none;
}
.sound[aria-pressed="false"] {
  background: #d9cfb8;
}
.leave:hover,
.tab-btn:hover,
.sound:hover {
  background: var(--logo-yellow);
}

.toast {
  position: absolute;
  left: 50%;
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  translate: -50% -10px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0.45em 1em;
  font-size: 0.95rem;
  color: #f6e3b4;
  background: rgba(20, 11, 6, 0.9);
  border: 2px solid #c99b4a;
  border-radius: var(--radius-pill);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, translate 0.4s ease;
  z-index: 9;
}
.toast.is-up {
  opacity: 1;
  translate: -50% 0;
}
/* out of the way of a panel, or of a conversation at the top (on a stool) */
.is-panel .toast.is-up,
[data-state="perch"].is-talking .toast.is-up {
  opacity: 0;
}


@media (max-width: 600px) {
  .talk {
    max-height: 62%;
    padding: 12px 12px 12px;
  }
  .talk__face {
    width: 38px;
    height: 38px;
  }
  .panel {
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 70%;
  }
  .walk {
    width: 36px;
    height: 52px;
  }
}
/* on a touch screen the arrows are the way about, so a full-size target */
@media (pointer: coarse) {
  .walk {
    width: 44px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon--sign,
  .neon--open,
  .who__bob,
  .xmas--1,
  .xmas--2,
  .is-music .juke-glow,
  .is-music .who--paprika .who__bob,
  .who.is-speaking .who__bob,
  .tv-ball,
  .tv-bob,
  .tv-horse,
  .street-car {
    animation: none;
  }
  .street__art,
  .street .door {
    transition: opacity 0.3s ease;
  }
  .is-opening .street__art {
    transform: none;
  }
  .perch,
  .talk,
  .panel,
  .bubble,
  .shout {
    animation: none;
  }
}