/* 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;
  /* how drunk you are (below): it comes on, and wears off, slowly */
  transition: --k 4s ease, --blur 4s ease;
}

/* ---------- Drunk ----------
   bar.js sets --k (0 sober, toward 1 very drunk) and --blur on .bar, and
   is-drunk once it shows: the view (the room, the stool's view, the street)
   drifts, tilts and blurs, and the edges go dark, and so does a game
   (.game__host). What you read and tap (conversations, buttons, the strip
   of places, what the opponent says in a game) stays still and sharp. The drift and tilt are the graphics hardware moving one picture,
   so they cost next to nothing; the blur is redone each frame the view
   moves. */
@property --k {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.room-view,
.perch__view {
  position: absolute;
  inset: 0;
}
.bar.is-drunk .room-view,
.bar.is-drunk .perch__view,
.bar.is-drunk .street__art,
.bar.is-drunk .game__host {
  animation: drunk-drift 7s ease-in-out infinite, drunk-tilt 5.3s ease-in-out infinite alternate;
  filter: blur(var(--blur));
  will-change: translate, rotate, filter;
}
@keyframes drunk-drift {
  0%,
  100% { translate: calc(min(24px, 4.5vw) * var(--k) * -1) 0; }
  25% { translate: 0 calc(10px * var(--k)); }
  50% { translate: calc(min(24px, 4.5vw) * var(--k)) calc(-4px * var(--k)); }
  75% { translate: calc(min(24px, 4.5vw) * var(--k) * 0.2) calc(-10px * var(--k)); }
}
@keyframes drunk-tilt {
  from { rotate: calc(-1.4deg * var(--k)); }
  to { rotate: calc(1.4deg * var(--k)); }
}
.drunk-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 6, 5, 0) 42%, rgba(10, 6, 5, 0.92) 100%);
  opacity: calc(var(--k) * 0.6);
}
/* a game covers the room's veil, so it has its own */
.bar.is-drunk .game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 6, 5, 0) 42%, rgba(10, 6, 5, 0.92) 100%);
  opacity: calc(var(--k) * 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .bar.is-drunk .room-view,
  .bar.is-drunk .perch__view,
  .bar.is-drunk .street__art,
  .bar.is-drunk .game__host {
    animation: none;
  }
}

.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 ---------- */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1210;
  /* sideways only, the same as the scroller in it, so no browser can take
     the two together to mean neither */
  touch-action: pan-x;
}
.stage[hidden] {
  display: none;
}
/* Coming in off the street, the room comes up out of the dark */
.stage.is-coming-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0a0605;
  pointer-events: none;
  animation: eyes-adjust 1.5s ease-out forwards;
}
@keyframes eyes-adjust {
  from { opacity: 1; }
  45% { opacity: 0.5; }
  to { opacity: 0; }
}
/* The room scrolls sideways under the screen: the browser's own scrolling
   (a swipe or a flick, with the phone's momentum; a trackpad; a mouse drag
   or wheel, in bar.js), the strip as wide as the room inside it. No
   scrollbar, and the scroll stays in here at the ends. */
.room-scroll {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.room-scroll::-webkit-scrollbar {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .room-scroll {
    cursor: grab;
  }
  .stage.is-dragging .room-scroll {
    cursor: grabbing;
  }
}
/* (clipped to the room, so nothing in it, the street shifted along or a
   bubble at the end, makes the scroll go further than the room does;
   clip, not hidden, so the strip isn't a scroller itself) */
.room-track {
  position: relative;
  height: 100%;
  overflow: hidden;
  overflow: clip;
}
/* (bar.js puts the room up or down for the screen; across, it scrolls) */
.room-slide {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.room {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.room [hidden] {
  display: none;
}
/* The light over the room (bar-room.js, light() and glow()): one picture
   the room is multiplied by, dark but for where the lamps throw light,
   and one added on top for the glow round the lamps and the neon. Taps go
   through them to the room. */
.room-light,
.room-glow {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}
.room-light {
  mix-blend-mode: multiply;
  transition: opacity 2.5s ease;
}
.room-glow {
  mix-blend-mode: screen;
}
.perch__art .lit,
.street__art .lit {
  mix-blend-mode: multiply;
}
.perch__art .lit-glow,
.street__art .lit-glow {
  mix-blend-mode: screen;
}
/* at last call the lights come up */
.is-lights-up .room-light {
  opacity: 0.25;
}
/* The street outside the front windows: behind the room, drifting slower
   than it scrolls. Where the browser can tie an animation to the scroll,
   it does it by itself (bar.js sets where the drift starts and ends);
   elsewhere bar.js moves it as the room scrolls. */
.street-slide {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .street-slide.is-timed {
    animation: street-drift linear both;
    animation-timeline: scroll(nearest inline);
  }
}
@keyframes street-drift {
  from { transform: translate3d(var(--sx0, 0px), var(--sy, 0px), 0); }
  to { transform: translate3d(var(--sx1, 0px), var(--sy, 0px), 0); }
}
.room-street {
  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;
}
.room .is-arriving {
  animation: arrive 0.8s ease-out;
}
@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 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; }
}

/* The dog by the door, asleep: he breathes, and his tail goes when he's
   tapped */
.dog__breathe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dog-breathe 4.2s ease-in-out infinite;
}
@keyframes dog-breathe {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.01, 1.045); }
}
.dog__tail {
  transform-box: fill-box;
  transform-origin: 0% 20%;
}
.dog.is-thump .dog__tail {
  animation: dog-thump 0.28s ease-in-out 4 alternate;
}
@keyframes dog-thump {
  from { transform: rotate(0deg); }
  to { transform: rotate(-16deg); }
}

/* The payphone, ringing: the handset rattles on its hook */
.room [data-hot="phone"].is-ringing .phone-handset {
  animation: phone-rattle 0.1s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 20%;
}
@keyframes phone-rattle {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}
/* Tomato's stool, once he's on it, isn't there to tap */
.room .tomato-stool.is-taken {
  pointer-events: none;
}
/* The pinball machine's lamps, chasing */
.pb-lamp--1 {
  animation: pb-chase 1.2s steps(1) infinite;
}
.pb-lamp--2 {
  animation: pb-chase 1.2s 0.4s steps(1) infinite;
}
@keyframes pb-chase {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* The TV's light on the wall, flickering with the pictures */
.tv-glow {
  animation: tv-glow 2.6s steps(1) infinite;
}
@keyframes tv-glow {
  0%, 100% { opacity: 0.3; }
  13% { opacity: 0.22; }
  31% { opacity: 0.36; }
  47% { opacity: 0.26; }
  68% { opacity: 0.33; }
  84% { opacity: 0.2; }
}

/* 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, .tv-glow, .pb-lamp--1, .pb-lamp--2, .phone-handset, .dog__breathe),
.bar[data-state="game"] :is(.room, .room-glow, .room-street, .perch__art) :is(.who__bob, .xmas--1, .xmas--2, .street-car, .tv-ball, .tv-bob, .tv-horse, .juke-glow, .neon--sign, .tv-glow, .pb-lamp--1, .pb-lamp--2, .phone-handset, .dog__breathe) {
  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="game"] .bar-nav {
  display: none;
}
.is-talking .bar-nav,
.is-panel .bar-nav {
  opacity: 0;
  translate: -50% 140%;
  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;
}
/* (a touch warmer and dimmer, so they sit in the lamplight with the rest) */
.mine__thing svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)) sepia(0.14) brightness(0.94);
}
.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)) sepia(0.14) brightness(1.02);
  }
}
.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 front page from 1978, framed over Chestnut's table */
.clipping {
  padding: 14px 16px 16px;
  background: #efe3c2;
  border: var(--stroke) solid var(--ink);
  border-radius: 4px;
  color: #2a2018;
  font-family: Georgia, "Times New Roman", serif;
}
.clipping p {
  margin: 0 0 0.6em;
  line-height: 1.45;
}
.clipping__mast {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 3px double #2a2018;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.clipping__date {
  margin: 4px 0 10px;
  font-size: 0.8rem;
  text-align: center;
}
.clipping h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}
.clipping__deck {
  font-style: italic;
}

/* 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);
}
.game__says.is-going {
  opacity: 0;
  transition: opacity 0.3s;
}

/* ---------- 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%;
  }
}

@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,
  .tv-glow,
  .dog__breathe,
  .dog.is-thump .dog__tail,
  .room .is-arriving,
  .pb-lamp--1,
  .pb-lamp--2,
  .room [data-hot="phone"].is-ringing .phone-handset,
  .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;
  }
  .stage.is-coming-in::after {
    display: none;
  }
}