/* Token Tender. Materials first: walnut, ivory paper, chalk slate, brass, clay.
   Text never sits on a still. Stills never wobble. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-soft.woff') format('woff');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --teal: #1e3b3b;
  --teal-deep: #102221;
  --gold: #f7c766;
  --gold-deep: #c98e2c;
  --walnut: #5a2f1e;
  --walnut-deep: #3a1d12;
  --ivory: #efe3c8;
  --ivory-deep: #e2d2ae;
  --red: #c2412d;
  --ink: #2a1e17;
  --chalk: #ecebe2;
  --slate: #2c3231;
  --brass-ink: #3b2808;
  --serif: 'Fraunces', 'Iowan Old Style', 'Charter', Georgia, serif;
  --sans: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --woodgrain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .04 0 0 0 0 .02 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --paperfiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .35' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --chalkdust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--teal-deep); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.45 var(--sans);
  color: var(--ivory);
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(247, 168, 80, .16), transparent 60%),
    radial-gradient(900px 900px at 90% 30%, rgba(30, 59, 59, .9), transparent 70%),
    var(--grain), linear-gradient(#173030, #0f1f1f 70%);
  min-height: 100svh;
  overflow-x: hidden;
}
img { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #ffe2a1; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ivory); color: var(--ink); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 8px; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- materials ---------- */

.walnut, .panel, .sign, .far-end, .foot {
  background:
    var(--woodgrain),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(20, 8, 4, .5) 118px 120px, rgba(255, 190, 140, .05) 120px 121px, transparent 121px 240px),
    linear-gradient(180deg, #6a3822, #4d2717 55%, #3d1e12);
  background-size: 600px 300px, auto, auto;
}

.paper {
  color: var(--ink);
  background: var(--paperfiber), radial-gradient(120% 90% at 30% 20%, #f5ead1, var(--ivory) 55%, var(--ivory-deep));
  border-radius: 3px 5px 4px 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(120, 90, 50, .15) inset, 0 10px 22px rgba(0, 0, 0, .38), 0 2px 4px rgba(0, 0, 0, .3);
}

.chalk, .chalk-board {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--chalk);
  text-shadow: 0 0 1px rgba(255, 255, 255, .35), 0 0 6px rgba(255, 255, 255, .06);
  letter-spacing: .01em;
}

.slate, .chalk-board {
  background: var(--chalkdust), radial-gradient(140% 120% at 30% 20%, #3a4241, var(--slate) 60%, #222827);
  border: 6px solid #5b3220;
  border-image: none;
  box-shadow: 0 0 0 1px #2b150c, inset 0 0 18px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .35);
  border-radius: 4px;
}

.clay-btn {
  --c: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: 10px 20px;
  font: 700 17px/1 var(--serif);
  color: var(--ink);
  background: radial-gradient(120% 140% at 35% 25%, #ffe3a0, var(--c) 45%, var(--gold-deep));
  border: 0;
  border-radius: 18px 16px 20px 15px / 16px 19px 15px 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(120, 70, 10, .35), 0 4px 0 #7d4f17, 0 9px 16px rgba(0, 0, 0, .4);
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 60ms linear, box-shadow 60ms linear;
  -webkit-tap-highlight-color: transparent;
}
.clay-btn:active, .clay-btn.pressed { transform: translateY(3px) scaleY(.92); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(120, 70, 10, .35), 0 1px 0 #7d4f17, 0 3px 6px rgba(0, 0, 0, .4); }
.clay-btn.small { min-height: 44px; font-size: 15px; padding: 8px 16px; }
.clay-btn.ghost { --c: #d9c6a0; background: radial-gradient(120% 140% at 35% 25%, #f6ecd6, #dccaa6 50%, #b9a27a); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(90,60,20,.25), 0 4px 0 #6b5434, 0 9px 16px rgba(0,0,0,.4); }
.clay-btn[disabled] { filter: grayscale(.6) brightness(.8); cursor: default; }
kbd { font: 600 12px/1 var(--sans); padding: 2px 5px; border-radius: 4px; background: rgba(42, 30, 23, .14); }

.walnut-h { font: 700 22px/1.15 var(--serif); color: var(--gold); margin: 0 0 6px; text-shadow: 0 1px 0 #2a1209, 0 -1px 0 rgba(255, 220, 160, .15); }
.walnut-h.center { text-align: center; }
.walnut-p { margin: 0 0 14px; color: #ead9bb; font-size: 15px; }

/* ---------- layout ---------- */

.bar {
  display: grid;
  grid-template-areas: "sign" "slate" "stage" "slips" "rail" "panel";
  grid-template-columns: 100%;
}
.sign { grid-area: sign; }
.bar > .slate { grid-area: slate; }
.stage-wrap { grid-area: stage; }
.panel { grid-area: panel; }
.slips { grid-area: slips; }

.sign {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px 6px 14px;
  min-height: 56px;
  border-bottom: 2px solid #2a1209;
  position: sticky; top: 0; z-index: 20;
}
.sign-plate {
  margin: 0;
  font: 800 23px/1 var(--serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 0 #7a4512, 0 3px 0 #3d1d0a, 0 0 14px rgba(255, 190, 90, .35);
  white-space: nowrap;
}
.sign-plate span:last-child { color: #ffdc8a; }

.switch {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 6px 6px;
  border: 0; border-radius: 22px;
  background: rgba(20, 8, 4, .45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 210, 160, .12);
  color: #ead9bb; font: 600 14px/1.1 var(--sans);
  cursor: pointer;
}
.switch-knob {
  width: 34px; height: 22px; border-radius: 12px; flex: none; position: relative;
  background: #2a1209; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6);
}
.switch-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #d9b46a 60%, #9a6b25);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
  transition: transform 120ms steps(3);
}
.switch[aria-pressed="true"] .switch-knob { background: #5b6b2a; }
.switch[aria-pressed="true"] .switch-knob::after { transform: translateX(12px); }
.switch-aside { display: none; font-weight: 400; color: #cdb999; }

/* ---------- the stage ---------- */

.stage-wrap { position: relative; display: flex; flex-direction: column; align-items: center; scroll-margin-top: 58px; }
.bleed { display: none; }
/* subtitles and sound captions: an overlay inside the plate, 3% off the bottom edge, like a film's lower third.
   No strip under the plate, so nothing dead is left when nobody is talking. */
.letterbox {
  position: absolute; left: 0; right: 0; bottom: 3%;
  display: flex; justify-content: center; padding: 0 4%;
  pointer-events: none; z-index: 7;
}
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1b2a28;
  container-type: inline-size;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.poster, #stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster { object-fit: cover; }
#stage { opacity: 0; }
#stage.live { opacity: 1; }
.stage:not([data-shot="c1"]) .prop, .stage:not([data-shot="c1"]) .phone-open { visibility: hidden; }
.stage.dragging { cursor: grabbing; touch-action: none; }

.hit {
  position: absolute; border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hit:focus-visible { outline: 3px dashed var(--gold); outline-offset: -3px; border-radius: 50%; }
/* robot head ellipse: cx 630, cy 452, rx 178, ry 158 in an 864x1152 plate */
.hit-head { left: 52.3%; top: 25.5%; width: 41.2%; height: 27.4%; border-radius: 50%; cursor: grab; touch-action: none; }

.prop { position: absolute; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* phone face down on the bar, by his elbow: a small clay slab in perspective, in the room's light */
.phone {
  left: 4%; top: 60.5%; width: 13%; height: 6.5%;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  perspective: 300px;
}
.phone img {
  width: 56%; height: auto;
  transform: rotateX(64deg) rotateZ(-74deg);
  filter: brightness(.62) sepia(.35) saturate(.8) drop-shadow(-2px 6px 3px rgba(20, 6, 2, .7));
}
.phone.buzz img { animation: buzz 250ms steps(1) 1; }
@keyframes buzz {
  0% { translate: 1.5px 0; } 33% { translate: -1.5px .5px; } 66% { translate: 1px -.5px; } 100% { translate: 0 0; }
}
/* opened: compact, bottom left of the plate, never over the walrus. The clay bezel is a 9 slice frame,
   so the phone is as tall as its texts (at most a third of the plate) and nothing in it gets clipped. */
.phone-open {
  position: absolute; left: 1.5%; bottom: 1.5%;
  width: clamp(136px, 30%, 210px);
  max-height: 34%;
  display: flex; flex-direction: column;
  border: 9px solid transparent;
  border-image: url(/img/phone_front.webp) 22 fill / 9px / 0 stretch;
  z-index: 6;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)) brightness(.95) sepia(.08);
}
.phone-open > img { display: none; }
/* the open phone covers the near stool for a moment; the tag steps aside rather than peek out under it */
.stage:has(.phone-open:not([hidden])) .stool-tag { visibility: hidden; }
.sms {
  flex: 0 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  padding: 4px 10px 2px;
  font: 500 clamp(11px, 2.6cqw, 14px)/1.2 var(--sans);
  color: var(--ink);
  overflow: hidden;
}
.sms .from { margin: 0; font: 700 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6b5a44; }
.sms .bubble { margin: 0; background: #d9cbab; border-radius: 9px 9px 9px 3px; padding: 4px 6px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); }
.sms .note { flex: none; margin: 2px 0 0; font-size: 10px; line-height: 1.15; color: #6b5a44; }
.sms .bubble { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.sms .call { margin: 0; font: 700 12px/1.2 var(--serif); text-align: center; }
.sms button { min-height: 32px; border-radius: 16px; border: 0; background: #6a8f4a; color: #fff; font-weight: 700; cursor: pointer; }

/* chalk tag hanging from the near stool */
.stool-tag {
  left: 26%; top: 80.5%;
  width: clamp(72px, 15.5cqw, 128px);
  aspect-ratio: 146 / 300;
  transform-origin: 50% 4%;
  animation: sway 3.6s steps(9) infinite alternate;
  filter: drop-shadow(2px 5px 3px rgba(10, 4, 2, .5));
  z-index: 3;
}
.stool-tag img { width: 100%; height: 100%; display: block; }
/* only the rope loop of the tag photo; the paper label is the tag. No slate under it, just the soft shadow. */
.stool-tag img, .fe-tag img { clip-path: inset(0 0 59% 0); }
.stool-tag .chalk-text, .fe-tag .chalk-text {
  position: absolute; left: 6%; right: 6%; top: 36%; bottom: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .15em;
  padding: 4px 3px 5px;
  font: 700 clamp(12px, 2.4cqw, 15px)/1.1 var(--serif);
  color: var(--ink); text-align: center; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  background: var(--paperfiber), #efe3c8; border-radius: 3px 3px 5px 4px;
}
.stool-tag .chalk-text small, .fe-tag .chalk-text small { font: 600 12px/1.1 var(--sans); color: #5a4630; }
@container (max-width: 520px) { .stool-tag .chalk-text small { display: none; } }
@keyframes sway { from { rotate: -4deg; } to { rotate: 3deg; } }
.stool-tag.swing { animation: swing 900ms steps(8) 1; }
@keyframes swing { 0% { rotate: 0deg; } 20% { rotate: 16deg; } 45% { rotate: -11deg; } 70% { rotate: 6deg; } 100% { rotate: 0deg; } }

/* subtitles: a paper strip in the letterbox */
.subtitle {
  margin: 0; padding: 6px 14px 7px;
  max-width: 100%;
  font: 600 clamp(15px, 4vw, 19px)/1.2 var(--serif);
  text-align: center; color: var(--ink);
  background: var(--paperfiber), radial-gradient(120% 90% at 30% 20%, #f5ead1, var(--ivory) 55%, var(--ivory-deep));
  border-radius: 3px 5px 4px 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  rotate: -.5deg;
}
.subtitle.on { opacity: 1; animation: slipIn 240ms steps(3) 1; }
.subtitle .sub-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.subtitle .sub-line + .sub-line { margin-top: 2px; }
.subtitle .who { flex: none; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8a6a44; }
.subtitle.cap { font: italic 500 14px/1.2 var(--sans); background: rgba(12, 18, 18, .72); color: #efe3c8; box-shadow: none; rotate: 0deg; }
@keyframes slipIn { from { translate: 0 40%; } to { translate: 0 0; } }
.loading { position: absolute; left: 50%; top: 46%; translate: -50% 0; margin: 0; padding: 10px 16px; font: 600 15px/1.3 var(--serif); z-index: 8; }

/* ---------- the panel ---------- */

/* Phones: while you type, a strip of the set rides along under the header (walrus and robot heads),
   so his glance, the antenna dimming and the mood stamps happen where you can see them.
   It takes no room in the flow: the negative margin cancels its height. */
.mini-plate { display: none; }
.panel > .mini-plate + * { margin-top: 0; }
@media (max-width: 899px) {
  .mini-plate:not([hidden]) {
    display: block; position: sticky; top: 58px; z-index: 12;
    --mini: max(22vh, 150px);
    height: var(--mini); margin: -18px -14px calc(18px - var(--mini));
    background: #16211f; border-bottom: 3px solid #2a1209;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .5);
    animation: chalkIn .2s steps(2) both;
  }
  .mini-plate canvas { width: 100%; height: 100%; display: block; }
  .mini-plate .mini-stamps { top: auto; bottom: 6px; right: 8px; width: 70%; }
  html.typing { scroll-padding-top: calc(58px + max(22vh, 150px) + 12px); }
}

.panel { padding: 18px 14px 28px; position: relative; }
.panel > * + * { margin-top: 18px; }

.slate { padding: 10px 14px; }
@media (max-width: 899px) {
  /* one chalk line at a time, rotated by main.js; the strip keeps its height in every state */
  .bar > .slate { display: block; height: 30px; padding: 0 12px; border-width: 0 0 3px; border-radius: 0; white-space: nowrap; overflow: hidden; position: relative; z-index: 4; }
  .bar > .slate .chalk { display: none; font-size: 14px; line-height: 27px; overflow: hidden; }
  .bar > .slate .chalk.on { display: block; animation: chalkIn .35s steps(3) both; }
  .bar > .slate .chalk.tight { font-size: 12px; letter-spacing: -.01em; }
  .bar > .slate .chalk + .chalk { margin-top: 0; }
}
@keyframes chalkIn { from { opacity: 0; } to { opacity: 1; } }
.slate .chalk:empty { display: none; }
.slate .chalk { margin: 0; font-size: 15px; line-height: 1.35; }
.slate .chalk + .chalk { margin-top: 3px; }
.slate .chalk.dim { opacity: .75; }

.slip {
  position: relative;
  padding: 20px 18px 18px;
  rotate: -.4deg;
  transform-origin: 50% 0;
}
.slip.folding { animation: fold 250ms steps(3) forwards; }
@keyframes fold { 0% { transform: none; } 50% { transform: translateY(-6px) scaleY(.6); } 100% { transform: translate(-30%, -40px) scale(.2) rotate(-14deg); opacity: 0; } }
.slip.rising { animation: rise 250ms steps(3) 1; }
@keyframes rise { 0% { transform: translateY(40px); } 33% { transform: translateY(0) scaleY(.88); } 66% { transform: scaleY(1.04); } 100% { transform: none; } }
.slip-q { margin: 0 0 12px; font: 700 30px/1.05 var(--serif); letter-spacing: -.01em; }
.slip label { display: block; margin: 12px 0 5px; font: 700 13px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #6b5034; }
.slip input, .slip textarea {
  width: 100%;
  font: 500 17px/1.4 var(--serif);
  color: var(--ink);
  background: rgba(255, 252, 240, .55);
  border: 0; border-bottom: 2px solid #b79c70;
  border-radius: 4px 4px 0 0;
  padding: 10px 10px;
  box-shadow: inset 0 2px 3px rgba(90, 60, 20, .12);
}
.slip textarea { resize: vertical; min-height: 104px; }
.slip input::placeholder, .slip textarea::placeholder { color: #8c7658; opacity: 1; }
.slip input:focus, .slip textarea:focus { outline: none; border-bottom-color: var(--red); background: rgba(255, 252, 240, .85); }
.hint { margin: 4px 0 0; font: italic 400 13px/1.3 var(--serif); color: #7a6448; }
a.clay-btn { text-decoration: none; }
.slip-folded { padding: 14px 18px 16px; rotate: -.6deg; animation: rise 250ms steps(3) 1; }
.slip-folded p { margin: 0; }
.sf-top { display: flex; justify-content: space-between; font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6b5034; }
.sf-odo { margin-top: 6px !important; display: flex; align-items: baseline; gap: 10px; font: 600 16px/1.2 var(--serif); }
.sf-odo b { font: 800 44px/1 var(--serif); font-variant-numeric: tabular-nums; min-width: 2ch; }
.sf-note { margin-top: 4px !important; font: italic 400 15px/1.3 var(--serif); color: #5a4630; }
.sf-words { display: none; }
.sf-words span { display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px; border-radius: 10px; font: 500 14px/1.3 var(--serif); color: #8c7658; border: 1px dashed #c9b48c; }
.sf-words span.in { color: #3a2208; border: 1px solid #a8741e; background: radial-gradient(circle at 35% 30%, #e7bf72, #c08a3e); }
@media (min-width: 900px) { .sf-words { display: block; margin-top: 14px !important; padding-top: 12px; border-top: 1.5px dashed #b79c70; max-height: 50svh; overflow: hidden; } }
.panel.pouring .ticket-zone { visibility: hidden; }
.meter { margin: 6px 0 0; font: 500 14px/1.3 var(--sans); color: #6b5034; min-height: 1.3em; }
.meter b { color: var(--ink); }
.meter.over b { color: var(--red); }

.stamps { position: absolute; right: 8px; top: -13px; width: 46%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; pointer-events: none; }
.stamp {
  display: inline-block; padding: 3px 7px 2px;
  font: 800 13px/1.1 var(--serif); letter-spacing: .1em;
  color: var(--red); border: 2.5px solid var(--red); border-radius: 4px;
  opacity: .92; background: rgba(239, 227, 200, .85);
  -webkit-mask-image: linear-gradient(#000, #000), var(--grain); mask-image: linear-gradient(#000, #000), var(--grain);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: thunk 250ms steps(3) 1;
}
@keyframes thunk { 0% { transform: scale(1.7) rotate(var(--r, -4deg)); opacity: 0; } 34% { transform: scale(.9) rotate(var(--r, -4deg)); opacity: .9; } 100% { transform: scale(1) rotate(var(--r, -4deg)); } }

.chips { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 7px; font: 700 13px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #6b5034; }
.chips button {
  min-height: 44px; padding: 8px 13px;
  font: 600 14px/1.1 var(--sans); color: var(--ink);
  background: linear-gradient(#f7eedb, #e4d3b0);
  border: 1.5px solid #b79c70; border-radius: 22px;
  box-shadow: 0 2px 0 #a68a5d; cursor: pointer;
}
.chips button:active { transform: translateY(2px); box-shadow: none; }
.chips button.used { background: linear-gradient(#efdcc0, #dbc39a); border-color: var(--red); }

.order-chip { display: flex; align-items: stretch; gap: 10px; margin-top: 14px; padding: 0 10px 0 0; border-radius: 8px; background: rgba(120, 80, 30, .09); }
.order-chip .price-tag { align-self: center; }
.order-chip-label { flex: 1; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font: 500 15px/1.35 var(--sans); color: var(--ink); min-height: 44px; }
.order-chip-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.order-chip-box { flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.order-chip-box::before { content: ""; position: absolute; inset: 3px; border-radius: 8px; background: #fbf4e2; border: 2px solid #9b7f53; box-shadow: inset 0 2px 2px rgba(0,0,0,.12); }
.order-chip-label input:checked + .order-chip-box::before { background: var(--gold); border-color: #8a5a17; }
.order-chip-label input:checked + .order-chip-box::after { content: ""; position: relative; width: 13px; height: 7px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: -45deg; translate: 0 -2px; }
.order-chip-label input:focus-visible + .order-chip-box::before { outline: 3px solid var(--red); outline-offset: 2px; }
/* the whole row is the label: one 44 px+ target, box and words side by side */
.slip .order-chip-label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 0 8px 10px; min-height: 60px; text-transform: none; letter-spacing: 0; font: 500 15px/1.35 var(--sans); color: var(--ink); }
.order-chip small { display: block; margin-top: 2px; font-size: 13px; color: #6b5034; }

.price-tag {
  flex: none; position: relative; width: 52px; height: 98px;
  border: 0; padding: 0; background: none; cursor: pointer;
  transform-origin: 52% 6%;
  animation: sway 4.2s steps(7) infinite alternate;
  filter: drop-shadow(1px 4px 2px rgba(60, 30, 10, .35));
}
.price-tag img { width: 100%; height: 100%; display: block; }
.price-tag span { position: absolute; left: 6%; right: 6%; top: 52%; text-align: center; font: 700 11px/1.05 var(--serif); color: var(--ink); }
.price-tag .price-back { opacity: 0; }
.price-tag.flipped .price-front { opacity: 0; }
.price-tag.flipped .price-back { opacity: 1; }
.price-tag.swing { animation: swing 900ms steps(8) 1; }

.pour-btn {
  display: block; width: 100%; margin-top: 16px;
  min-height: 64px;
  border: 0; cursor: pointer;
  font: 800 28px/1 var(--serif); letter-spacing: .14em; color: #3a1a08;
  background: radial-gradient(110% 150% at 35% 20%, #ffe7a6, var(--gold) 40%, #d79a36 80%, #b97a22);
  border-radius: 26px 22px 28px 20px / 22px 28px 20px 26px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(130, 70, 10, .35), 0 6px 0 #7a4513, 0 14px 22px rgba(0, 0, 0, .4);
  transform-origin: 50% 100%;
  transition: transform 60ms linear, box-shadow 60ms linear;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  -webkit-tap-highlight-color: transparent;
}
.pour-btn:active, .pour-btn.pressed { transform: translateY(4px) scaleY(.92); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(130, 70, 10, .35), 0 2px 0 #7a4513, 0 4px 8px rgba(0, 0, 0, .4); }
.pour-btn[disabled] { filter: saturate(.5) brightness(.85); cursor: progress; }
.fine { margin: 12px 0 0; font: 400 13px/1.4 var(--sans); color: #6b5034; }
.slip-error { margin: 10px 0 0; font: 600 15px/1.35 var(--serif); color: var(--red); }

/* ---------- the card (a coaster on the bar) ---------- */

.card-zone { position: relative; }
.card {
  position: relative;
  padding: 22px 20px 18px;
  rotate: var(--tilt, -1.5deg);
  text-align: center;
}
.card.slam { animation: slam 340ms steps(4) 1; }
@keyframes slam { 0% { transform: translateY(-70px) scale(1.06); } 25% { transform: translateY(0) scaleY(.88) scaleX(1.06); } 50% { transform: scaleY(1.04) scaleX(.98); } 100% { transform: none; } }
.card .tier { display: inline-block; padding: 4px 10px 3px; font: 800 13px/1 var(--serif); letter-spacing: .16em; color: var(--red); border: 2.5px solid var(--red); border-radius: 4px; rotate: -3deg; mix-blend-mode: multiply; }
.card.top::before { content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; border-radius: 0 5px 0 0; background: linear-gradient(225deg, #e7b955 0 32%, #a8741e 33% 36%, transparent 37%); }
.card .pname { margin: 12px 0 4px; font: 800 clamp(28px, 8vw, 40px)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.card .pname span { display: inline-block; }
.card .flavor { margin: 0 auto; max-width: 30ch; font: italic 400 15px/1.35 var(--serif); color: #5a4630; }
.card .count { margin: 16px 0 0; font: 800 clamp(40px, 12vw, 58px)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); letter-spacing: -.01em; }
.card .count.sideways { display: inline-block; rotate: 90deg; margin: 40px 0 34px; }
.card .redacted { display: inline-block; margin: 16px 0 0; padding: 12px 16px; background: radial-gradient(120% 140% at 30% 20%, #3b3330, #191311); color: #efe3c8; font: 700 16px/1.3 var(--serif); border-radius: 8px 6px 9px 5px; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 3px 0 #000; }
.card .unit { margin: 6px 0 0; font: 800 12px/1.2 var(--sans); letter-spacing: .14em; color: #5a4630; }
.card .modifier { margin: 6px 0 0; font: 600 14px/1.3 var(--serif); color: #7a5634; }
.card .pieces { margin: 10px 0 0; font: 400 13px/1.35 var(--sans); color: #6b5034; }
.card .line { margin: 14px auto 0; max-width: 32ch; font: 600 18px/1.3 var(--serif); color: var(--ink); }
.card .meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 10px; border-top: 1.5px dashed #b79c70; font: 500 13px/1.3 var(--sans); color: #6b5034; text-align: left; }
.card .meta b { color: var(--ink); }
.card .seal { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; text-align: left; font: 500 13px/1.3 var(--sans); color: #5a4630; }
.card .seal i { flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0604a, #a52a1c 60%, #6e160d); box-shadow: inset 0 0 0 4px rgba(0,0,0,.15), 0 2px 2px rgba(0,0,0,.3); }
.card .arrived { margin: 8px 0 0; font: 700 14px/1.3 var(--serif); color: #3b6b5b; }
.card .print { position: absolute; width: 58px; height: 74px; opacity: .55; pointer-events: none; mix-blend-mode: multiply; }
.card .foot-line { margin: 12px 0 0; font: 500 12px/1.2 var(--sans); color: #8a7050; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.card-actions .clay-btn { flex: 1 1 140px; }
.card-note { margin: 8px 0 0; font: 500 13px/1.3 var(--sans); color: #ead9bb; min-height: 1.3em; }

/* ---------- ticket ---------- */

.ticket-zone { padding: 16px 14px; border-radius: 6px; background: rgba(20, 8, 4, .28); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); }
.ticket { margin-top: 14px; padding: 16px; rotate: .5deg; }
.ticket .code { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 800 30px/1 var(--serif); letter-spacing: .06em; }
.ticket .code small { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6b5034; }
.ticket pre { white-space: pre-wrap; margin: 10px 0; padding: 10px; font: 500 13px/1.45 ui-monospace, Menlo, Consolas, monospace; background: rgba(255, 252, 240, .6); border-radius: 4px; border: 1px dashed #b79c70; color: var(--ink); max-height: 210px; overflow: auto; }
.ticket .status { margin: 8px 0 0; font: 600 15px/1.35 var(--serif); }
.ticket .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- far end ---------- */

.far-end { padding: 28px 0 22px; border-top: 3px solid #2a1209; }
.fe-set { position: relative; max-width: 1280px; margin: 10px auto 0; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: #2a1810; }
.fe-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fe-rain { position: absolute; left: 86.1%; top: 13.1%; width: 13.9%; height: 43.1%; pointer-events: none; }
.fe-props { position: absolute; inset: 0; pointer-events: none; }
.fe-props > * { pointer-events: auto; }
.fe-jar { left: 13.4%; top: 32.2%; width: 16.3%; height: 37.8%; border-radius: 30% 30% 12% 12%; }
.fe-jar-tag { position: absolute; left: 70%; top: 30%; padding: 6px 10px; font: 700 clamp(12px, 1.5cqw, 17px)/1.1 var(--serif); white-space: nowrap; rotate: 6deg; }
.fe-robot { position: absolute; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(10, 4, 2, .45)); }
.fe-robot canvas { width: 100%; height: auto; display: block; }
.fe-tag { position: absolute; width: clamp(64px, 9.5cqw, 128px); aspect-ratio: 146 / 300; transform-origin: 50% 4%; animation: sway 4s steps(9) infinite alternate; filter: drop-shadow(2px 5px 3px rgba(10, 4, 2, .5)); border: 0; padding: 0; background: none; }
.fe-tag img { width: 100%; height: 100%; display: block; }
.fe-tag { min-width: 84px; z-index: 2; translate: 0 -30%; } /* the label, not the rope, sits by the seat */
.fe-plaques { position: absolute; left: 1.5%; top: 79%; width: 46%; display: flex; flex-wrap: wrap; gap: .6cqw; }
.plaque { position: relative; width: max(96px, 8.5cqw); aspect-ratio: 260 / 168; display: grid; place-items: center; }
.plaque img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plaque span { position: relative; padding: 0 12%; font: 700 12px/1.05 var(--serif); color: var(--brass-ink); text-shadow: 0 1px 0 rgba(255, 236, 170, .55); text-align: center; overflow: hidden; max-height: 2.2em; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.fe-under { max-width: 1280px; margin: 14px auto 0; padding: 0 14px; display: grid; gap: 12px; }
.fe-under .chalk-board { margin: 0; padding: 12px 16px; font-size: 16px; }
.fe-note { margin: 0; font: 400 14px/1.45 var(--sans); color: #e3d1b2; }
.fe-waiting { position: absolute; }

/* leave one glass tag on c1 (DOM chalk) */
.leave-tag { left: 30%; top: 47%; width: clamp(46px, 11cqw, 100px); }

/* ---------- footer ---------- */

.foot { padding: 26px 16px 40px; border-top: 3px solid #2a1209; color: #ead9bb; font-size: 14px; }
.foot p { margin: 0 0 10px; }
/* 44 px tap targets for the footer links */
.foot a { display: inline-block; min-height: 44px; padding: 12px 6px; box-sizing: border-box; line-height: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 16px; margin: 0 auto 20px; max-width: 1100px; border-radius: 6px; background: rgba(20, 8, 4, .35); font: 700 17px/1.3 var(--serif); color: var(--ivory); }
.legend p { margin: 0; display: flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 22px; height: 22px; border-radius: 4px; vertical-align: middle; }
.sw-chalk { background: var(--chalkdust), var(--slate); border: 1px solid #8a8f8c; }
.sw-brass { background: radial-gradient(circle at 35% 30%, #f3d27a, #b8862c 70%); border-radius: 3px; }
.sw-paper { background: var(--ivory); }
.sw-phone { background: linear-gradient(#e9dcc0, #d6c39c); border: 3px solid #d1a43c; border-radius: 6px; width: 16px; }
.foot-cols { display: grid; gap: 18px; max-width: 1100px; margin: 0 auto; }
.foot-h { margin: 0 0 8px; font: 700 18px/1.2 var(--serif); color: var(--gold); }
.foot-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.forgot { min-height: 1.4em; font: 600 15px/1.4 var(--serif); }
.foot .small { max-width: 1100px; margin: 18px auto 0; font-size: 13px; color: #cdb999; }

/* ---------- how it's made ---------- */

.howmade { position: fixed; inset: auto 0 0 0; z-index: 40; pointer-events: none; }
.hm-card { pointer-events: auto; position: fixed; left: 12px; right: 12px; bottom: 86px; padding: 12px 14px; max-height: 34svh; overflow: auto; }
.hm-card h2 { margin: 0 0 8px; font: 800 18px/1.2 var(--serif); }
.hm-card p { margin: 0 0 8px; font: 400 13px/1.45 var(--sans); }
.hm-clock { font-weight: 700 !important; }
.xsheet { pointer-events: none; height: 74px; overflow: hidden; background: var(--paperfiber), #f1e6cc; color: var(--ink); border-top: 2px solid #b79c70; box-shadow: 0 -6px 16px rgba(0, 0, 0, .35); display: flex; justify-content: flex-end; align-items: stretch; font: 500 10px/1.15 ui-monospace, Menlo, Consolas, monospace; }
.xsheet .col { flex: none; width: 34px; border-right: 1px solid rgba(90, 60, 30, .25); padding: 3px 2px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.xsheet .col.hold { color: rgba(42, 30, 23, .35); }
.xsheet .col.k { background: rgba(194, 65, 45, .12); }

/* ---------- wide screens ---------- */

@media (min-width: 900px) {
  /* The plate is as tall as the window and exactly as wide as itself: no side gutters, no strip under it.
     The order column takes the rest of the width (at least 420 px). */
  .bar {
    --plate-h: min(100svh, calc((100vw - 420px) * 1339 / 1000));
    grid-template-areas: "stage sign" "stage slate" "stage slips" "stage rail" "stage panel";
    grid-template-columns: auto minmax(420px, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    min-height: 100svh;
    background: #55301f;
  }
  .stage-wrap { position: sticky; top: 0; height: 100svh; justify-content: center; align-self: start; overflow: hidden; background: #0c1312; }
  /* only seen if the window is too narrow for a full height plate: the frame, blurred and mirrored, under it */
  .bleed { display: block; position: absolute; inset: -8%; width: 116%; height: 116%; filter: blur(40px) brightness(.42) saturate(.9); transform: scaleY(-1); }
  .stage { width: auto; height: var(--plate-h); aspect-ratio: 1000 / 1339; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 20px 60px rgba(0, 0, 0, .55); }
  .sign, .panel { box-shadow: inset 14px 0 18px -10px rgba(0, 0, 0, .65); border-left: 2px solid #2a1209; }
  .sign { position: relative; padding: 22px clamp(24px, 4vw, 56px) 12px; min-height: 0; border-bottom: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
  .sign-plate { font-size: 40px; }
  .switch-aside { display: inline; }
  .bar > .slate { margin: 0 clamp(24px, 4vw, 56px) 16px; max-width: 620px; }
  /* the order column: one readable column of paper, centred, that fills the height */
  .panel { padding: 6px clamp(24px, 4vw, 56px) 40px; display: flex; flex-direction: column; }
  .panel > * { width: 100%; max-width: 620px; }
  .panel > * + * { margin-top: 18px; }
  /* during the pour the folded slip fills the column: order number, the odometer, your pieces landing */
  .slip-folded { position: relative; padding: 22px 28px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
  .slip-folded[hidden] { display: none; }
  .slip-folded .sf-top { position: absolute; left: 28px; right: 28px; top: 22px; }
  .sf-odo b { font-size: 120px; }
  .sf-odo { font-size: 20px; }
  .slip-folded .sf-words { max-height: 55svh; overflow: hidden; }
  .sf-words span { font-size: 19px; padding: 4px 11px; margin: 0 7px 8px 0; border-radius: 14px; }
  .panel.pouring .ticket-zone { display: none; }
  .foot-cols { grid-template-columns: 1.4fr 1fr; }
  .fe-under { grid-template-columns: 1fr 1.3fr; align-items: start; }
  .subtitle { font-size: 19px; }
  .letterbox { padding: 0 6%; }
  .hm-card { left: auto; right: 12px; bottom: 86px; width: 436px; max-height: calc(100svh - 300px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .stool-tag, .price-tag, .fe-tag { animation: none !important; }
}

/* ---------- round 3: your hand ---------- */

.pour-row { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; }
.pour-row .pour-btn { margin-top: 0; flex: 1 1 auto; font-size: clamp(20px, 5.6vw, 25px); letter-spacing: .02em; }
.pour-row .pour-for-me { flex: 0 0 auto; min-height: 64px; font-size: 16px; padding: 8px 14px; }
.stage:not([data-shot="c1"]) .hit { display: none; }
.stage.hand { touch-action: none; cursor: grab; }
.stage.hand.gripping { cursor: grabbing; }
.jar-pad { position: absolute; inset: 0; z-index: 5; touch-action: none; outline: none; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.jar-pad:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.jar-hint {
  position: absolute; left: 50%; top: 52%; translate: -50% 0; z-index: 6; margin: 0;
  padding: 8px 14px; font: 500 15px/1.25 var(--serif); text-align: center; pointer-events: none; rotate: -1deg;
  animation: hintNudge 1.6s steps(8) infinite;
}
.jar-hint b { display: block; font-weight: 800; font-size: 17px; }
.jar-hint.gone { opacity: 0; transition: opacity .3s steps(3); }
@keyframes hintNudge { 0%, 60%, 100% { translate: -50% 0; } 75% { translate: -50% 5px; } 85% { translate: -50% 1px; } }
.pour-hud {
  position: absolute; left: 3%; top: 2.5%; z-index: 6; margin: 0; pointer-events: none;
  display: flex; align-items: baseline; gap: 6px; padding: 6px 12px 7px;
  font: 600 14px/1 var(--sans); color: var(--chalk);
  background: var(--chalkdust), radial-gradient(140% 120% at 30% 20%, #3a4241, var(--slate) 60%, #222827);
  border: 4px solid #5b3220; border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .45);
}
.pour-hud b { font: 800 28px/1 var(--serif); font-variant-numeric: tabular-nums; min-width: 1.2ch; text-align: right; }
.pour-hud.over b { color: #ffcf8a; }
.pour-for-me.on-plate { position: absolute; right: 3%; bottom: 3%; z-index: 8; min-height: 48px; min-width: 48px; font-size: 16px; }
.pour-for-me.pulse { animation: pfmPulse 1.2s steps(6) infinite; }
/* That is it: you stop with coins still in the jar. Bottom centre, between the count and Pour for me. */
.pour-done { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 8; min-height: 48px; min-width: 48px; padding: 6px 14px; font-size: 16px; white-space: nowrap; }
@container (max-width: 420px) { .pour-done { font-size: 15px; padding: 6px 10px; } }
/* coins over the rim land in the bar's lower band: the subtitle moves up out of their way */
.stage.hand.overrim .letterbox { bottom: auto; top: 2%; }
@keyframes pfmPulse { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.06); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 4px rgba(247, 199, 102, .55), 0 9px 16px rgba(0,0,0,.4); } }
.card .hand-line { margin: 10px auto 0; display: inline-block; padding: 3px 10px 4px; font: 700 15px/1.25 var(--serif); color: #6b3a14; border: 2px dashed #b7894a; border-radius: 14px; rotate: -1.2deg; }
.for-whom { margin: 12px 0 0; padding: 6px 10px; font: 700 16px/1.2 var(--serif); color: #6b3a14; background: rgba(247, 199, 102, .25); border-radius: 6px; }
.stage.hand .letterbox { bottom: 15%; }
.stage .pour-hud { top: auto; bottom: 3%; }
/* the jukebox: a keyed clay still on the floor at the bar's front left corner, cropped by the frame */
.jukebox {
  left: -9.3%; top: 75.3%; width: 24.8%; aspect-ratio: 520 / 712; z-index: 2;
  filter: brightness(.74) saturate(.88) sepia(.14) drop-shadow(6px 10px 8px rgba(10, 4, 2, .6));
  transform-origin: 50% 100%;
}
.jukebox img { width: 100%; height: 100%; display: block; }
.jukebox .juke-glow { position: absolute; left: 26%; top: 16%; width: 40%; height: 18%; border-radius: 50% 50% 30% 30%; background: radial-gradient(closest-side, rgba(255, 190, 90, .55), transparent); mix-blend-mode: screen; opacity: .35; pointer-events: none; }
.jukebox.beat .juke-glow { opacity: .85; }
.jukebox:hover, .jukebox:focus-visible { filter: brightness(.86) saturate(.95) sepia(.1) drop-shadow(6px 10px 8px rgba(10, 4, 2, .6)); }
.jukebox:active { transform: scaleY(.97); }
.jukebox:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; border-radius: 30% 30% 6px 6px; }

/* ---------- round 3: the room ---------- */
.other-glass { width: 9%; height: 8%; translate: -50% -100%; z-index: 3; }
.other-glass .og-tag, .share-glass .share-tag {
  position: absolute; left: 50%; top: 104%; translate: -50% 0; width: max-content; max-width: 19cqw;
  padding: 2px 6px 3px; font: 700 clamp(9px, 2.3cqw, 13px)/1.1 var(--serif); color: var(--ink); text-align: center;
  rotate: -2deg; box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
}
.other-glass .og-tag small, .share-glass .share-tag small { display: block; font: 600 clamp(8px, 1.9cqw, 11px)/1.15 var(--sans); color: #5a4630; }
.other-glass .og-tag { max-width: 15cqw; }
/* one tag on the bar (the newest glass, with '+N'); the others show theirs on hover or focus, in the same place,
   so a tag never lands on the phone or the jukebox */
.other-glass:nth-child(n+2):not(:hover):not(:focus-visible) .og-tag { display: none; }
.other-glass .og-tag .og-more { margin-left: 5px; padding: 0 4px; border-radius: 6px; background: rgba(90, 70, 48, .16); font: 700 .85em/1.2 var(--sans); }
.other-glass:hover .og-more, .other-glass:focus-visible .og-more { display: none; }
@container (max-width: 520px) {
  .other-glass .og-tag small { display: none; }
  .other-glass:nth-child(3) { display: none; }
}
.other-glass.ring, .share-glass.ring { animation: ring 420ms steps(5) 1; }
@keyframes ring { 0% { rotate: 0deg; } 25% { rotate: 6deg; } 50% { rotate: -5deg; } 75% { rotate: 2deg; } 100% { rotate: 0deg; } }
/* the share glass: over the robot's glass (397,566 86x106 in the plate) */
.share-glass { left: 44.5%; top: 48%; width: 12.5%; height: 11%; z-index: 4; }
.share-glass .share-tag { top: 102%; max-width: 32cqw; rotate: -2.5deg; }

.rail {
  grid-area: rail; position: relative; z-index: 3;
  display: flex; align-items: stretch; gap: 8px; height: 72px; padding: 8px 10px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  background: var(--woodgrain), linear-gradient(180deg, #3d1e12, #2c150c);
  border-top: 2px solid #2a1209; border-bottom: 3px solid #1c0c06;
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, .5);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.np {
  flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 72vw; height: 56px; padding: 4px 12px 4px 6px;
  border: 0; border-radius: 8px 10px 9px 7px; cursor: pointer; text-align: left; scroll-snap-align: start;
  color: var(--brass-ink);
  background: radial-gradient(130% 160% at 30% 20%, #f8de94, #d9a94a 55%, #a87726);
  box-shadow: inset 0 2px 0 rgba(255, 245, 210, .6), inset 0 -3px 0 rgba(90, 50, 10, .35), 0 3px 0 #5e3a10, 0 6px 10px rgba(0, 0, 0, .45);
}
.np-disc { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #f5e6c4 0 17%, #1b1210 18% 22%, #3a2a24 23%, #1d1513 60%, #120c0b 70%); box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,220,180,.08); animation: spin 1.8s steps(22) infinite; }
.np-disc::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 2px, rgba(255, 220, 180, .06) 2px 3px); }
@keyframes spin { to { rotate: 360deg; } }
.np-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
@media (max-width: 899px) {
  .np { max-width: 82vw; min-width: 250px; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-content: center; }
  .np-disc { grid-row: 1 / 3; }
  .np-text { display: contents; }
  .np-title { grid-column: 2; grid-row: 1; }
  .np-time { grid-column: 3; grid-row: 1; padding: 2px 4px; font-size: 11px; }
  .np-by { grid-column: 2 / 4; grid-row: 2; }
}
.np-title { font: 800 14px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-by { font: 600 11px/1.2 var(--sans); color: #4a3209; white-space: nowrap; overflow: hidden; }
.np-time { flex: none; font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; color: #3b2808; padding: 4px 6px; border-radius: 4px; background: rgba(59, 40, 8, .12); font-variant-numeric: tabular-nums; }
.stools { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stool { flex: none; scroll-snap-align: start; display: flex; }
.stool-btn {
  display: flex; align-items: center; gap: 7px; height: 56px; padding: 4px 10px 4px 4px; min-width: 132px; max-width: 200px;
  border: 0; border-radius: 28px 10px 10px 28px; text-align: left; cursor: pointer;
  color: var(--ink); background: var(--paperfiber), radial-gradient(120% 90% at 30% 20%, #f5ead1, var(--ivory) 55%, var(--ivory-deep));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 8px rgba(0, 0, 0, .4);
}
.stool-btn[disabled] { cursor: default; }
.stool .seat { flex: none; position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #8a4a2a, #5a2f1e 60%, #3a1d12); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 200, 150, .2); }
.stool .seat canvas { width: 46px; height: 46px; }
.stool.human .seat, .stool.you .seat { background: radial-gradient(circle at 40% 30%, #e9c9a0, #c99a6a 60%, #9a6a40); }
.stool .seat img { width: 34px; height: 42px; opacity: .75; mix-blend-mode: multiply; }
.stool .who { display: flex; flex-direction: column; min-width: 0; }
.stool .who b { font: 800 14px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.stool .who small { font: 600 11px/1.2 var(--sans); color: #6b5034; white-space: nowrap; }
.stool .who .door { display: inline; }
.stool .gl { flex: none; position: relative; width: 16px; height: 22px; margin-left: auto; border: 2px solid rgba(90, 70, 50, .55); border-top-width: 1px; border-radius: 2px 2px 4px 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.stool .gl i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: radial-gradient(circle at 30% 30%, #f3c96e, #c08a3e); }
.stool .gl.full i { height: calc(var(--fill, .6) * 100%); }
.stool .gl.pouring i { animation: chipFill 250ms steps(3) 1; }
@keyframes chipFill { from { height: 0; } }
.stool.you .stool-btn { background: var(--paperfiber), radial-gradient(120% 90% at 30% 20%, #fff4d6, #f2dfb3 55%, #e3c88f); }
.stool.ring .stool-btn { animation: ring 420ms steps(5) 1; }
.stool.ghost .stool-btn { background: transparent; color: var(--chalk); border: 2px dashed rgba(236, 235, 226, .5); box-shadow: none; cursor: default; }
.stool.ghost .seat { background: transparent; border: 2px dashed rgba(236, 235, 226, .4); box-shadow: none; }
.stool.ghost .who small { color: #cfc6b4; }
.stool.ghost .who b { font-family: var(--serif); }
.stool.window .stool-btn { cursor: default; }
.stool .window-seat { background: radial-gradient(circle at 40% 30%, #4a6466, #22393a); }
.stool.standing, .stool.quiet-line { align-items: center; padding: 0 10px; font: 600 italic 14px/1.2 var(--serif); color: var(--chalk); white-space: nowrap; }
.stool .dry { opacity: .92; }

/* ---------- round 3: the jukebox sheet ---------- */
.juke { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: min(560px, 96vw); width: 100%; max-height: 94svh; }
.juke::backdrop { background: rgba(8, 12, 12, .72); }
.juke-box {
  position: relative; padding: 14px 14px 18px; border-radius: 160px 160px 22px 22px / 120px 120px 22px 22px; overflow: hidden;
  background: var(--woodgrain), radial-gradient(120% 80% at 50% 0%, #8a4a2a, #5a2f1e 50%, #3a1d12);
  border: 10px solid #2f8a85;
  box-shadow: inset 0 0 0 6px #d9a46a, inset 0 0 0 12px #c2412d, 0 20px 50px rgba(0, 0, 0, .6);
}
.juke-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 4px 34px; }
@media (min-width: 900px) { .juke-head { padding: 26px 40px 4px 64px; } }
.juke-head h2 { margin: 0; font: 800 24px/1 var(--serif); color: var(--gold); text-shadow: 0 2px 0 #3d1d0a; }
.juke-x { min-height: 44px; padding: 6px 12px; border: 0; border-radius: 22px; background: rgba(20, 8, 4, .5); color: #ead9bb; font: 600 14px/1 var(--sans); cursor: pointer; }
.juke-x kbd { background: rgba(255, 255, 255, .12); color: #ead9bb; }
.deck { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 6px 10px 10px; }
.platter {
  position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 6px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2b766, #c27a2c 55%, #7d4416); padding: 7%;
  box-shadow: inset 0 0 0 6px rgba(60, 30, 10, .4), 0 10px 18px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 170, 70, .25);
}
#record { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 6px 10px rgba(0, 0, 0, .55); }
.tonearm { position: absolute; right: -6%; top: -4%; width: 34%; height: 80%; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.tonearm.held { cursor: grabbing; }
.tonearm .arm-base { position: absolute; right: 12%; top: 4%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c9, #d9b46a 50%, #8a5e1e); box-shadow: 0 4px 6px rgba(0, 0, 0, .5), inset 0 -3px 0 rgba(90, 50, 10, .4); }
.tonearm .arm { position: absolute; right: 30%; top: 14%; width: 11%; height: 92%; transform-origin: 50% 4%; transform: rotate(-7deg); pointer-events: none; }
.tonearm .arm::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; bottom: 14%; border-radius: 8px; background: linear-gradient(90deg, #8f6a2a, #f0d595 45%, #b48a3a); box-shadow: 2px 3px 4px rgba(0, 0, 0, .45); }
.tonearm .arm-head { position: absolute; left: -40%; right: -40%; bottom: 0; height: 18%; border-radius: 6px 6px 10px 10px; background: radial-gradient(circle at 35% 30%, #3a4a48, #1f2a29); box-shadow: 0 3px 4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15); transform: rotate(18deg); }
.tonearm:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; border-radius: 12px; }
.deck-side { text-align: center; }
.label-says { margin: 4px 0 2px; font: 700 16px/1.25 var(--serif); color: #ffe2a1; }
.arm-hint { margin: 0; font: 500 13px/1.3 var(--sans); color: #e3d1b2; }
.tracks { list-style: none; margin: 8px 0 0; padding: 0 6px; display: grid; gap: 8px; }
.track {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "key strip state" "key strip meta"; align-items: center; column-gap: 10px;
  padding: 6px 10px 6px 6px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  color: var(--ink); background: var(--paperfiber), linear-gradient(#f7eedb, #e4d3b0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #7d5a2e, 0 6px 10px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%;
}
.track .key { grid-area: key; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--serif); color: #fff3dc;
  background: radial-gradient(circle at 35% 30%, #4fb0aa, #2f8a85 55%, #1d5a57); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3), 0 2px 3px rgba(0, 0, 0, .4); }
.track:nth-child(even) .key { background: radial-gradient(circle at 35% 30%, #e7735c, #c2412d 55%, #84261a); }
.track .strip { grid-area: strip; display: flex; flex-direction: column; min-width: 0; }
.track .strip b { font: 800 15px/1.15 var(--serif); }
.track .strip small { font: 500 12px/1.25 var(--sans); color: #6b5034; }
.track .state { grid-area: state; font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #8a6a44; white-space: nowrap; }
.track .meta { grid-area: meta; font: 500 10px/1 var(--sans); color: #8a7050; white-space: nowrap; justify-self: end; }
.track[data-state="playing"] { background: var(--paperfiber), linear-gradient(#ffe7a6, #f0c869); }
.track[data-state="playing"] .state { color: #7a3a0c; }
.track[data-state="playing"] .key { animation: keyGlow 1.2s steps(4) infinite; }
@keyframes keyGlow { 50% { box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), 0 0 0 4px rgba(247, 199, 102, .6); } }
.track[data-state="cool"] { filter: saturate(.6); }
.track.pressed, .track:active { transform: translateY(3px) scaleY(.94); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 #7d5a2e; }
.queue { margin: 12px 8px 0; color: #ead9bb; font: 500 13px/1.35 var(--sans); }
.queue h3 { margin: 0 0 4px; font: 700 14px/1 var(--serif); color: var(--gold); }
.queue ol { margin: 0; padding-left: 20px; }
.queue p { margin: 0; }
.juke-note { min-height: 1.3em; margin: 8px 10px 0; font: 700 15px/1.3 var(--serif); color: #ffe2a1; text-align: center; }
@media (min-width: 900px) {
  .juke { max-width: 860px; }
  .juke-box { border-radius: 260px 260px 26px 26px / 160px 160px 26px 26px; padding: 18px 24px 24px; }
  .deck { grid-template-columns: 1fr 1fr; align-items: center; }
  .deck-side { text-align: left; }
  .tracks { grid-template-columns: 1fr 1fr; }
}

/* ---------- round 3: the share page ---------- */
.guest { padding: 16px 18px; rotate: .4deg; }
.guest-h { margin: 0 0 4px; font: 800 22px/1.15 var(--serif); }
.guest-tag { margin: 0 0 12px; font: 500 15px/1.35 var(--serif); color: #5a4630; }
.guest-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.guest-btns .clay-btn { flex: 1 1 140px; }
.guest-note { min-height: 1.3em; margin: 8px 0 0; font: 700 15px/1.3 var(--serif); }

@media (min-width: 900px) {
  /* the room in the order column: the plaque across, the stools two by two */
  .rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; overflow: visible; margin: 0 clamp(24px, 4vw, 56px) 4px; max-width: 620px; padding: 10px; border-radius: 6px; border: 0; box-shadow: inset 0 4px 10px rgba(0, 0, 0, .5); }
  .rail .np { grid-column: 1 / -1; max-width: none; }
  .rail .np-title { font-size: 16px; }
  .rail .np-by { font-size: 12px; }
  .stools { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; gap: 8px; max-height: 196px; overflow-y: auto; }
  .stool-btn { width: 100%; max-width: none; }
  .stool .who b { max-width: 150px; }
  .stool.standing, .stool.quiet-line { grid-column: 1 / -1; justify-content: center; padding: 6px; }
}
.pour-hud b.bump { animation: bump 160ms steps(2) 1; }
@keyframes bump { 0% { transform: translateY(-3px) scale(1.18); } 100% { transform: none; } }

/* glass tags: names only until you point at one; an agent on the near stool keeps its face clear */
.other-glass .og-tag small { display: none; }
.other-glass:hover .og-tag small, .other-glass:focus-visible .og-tag small { display: block; }
.other-glass:hover, .other-glass:focus-visible { z-index: 6; }
.stage.seated .other-glass:not(:hover):not(:focus-visible) .og-tag { display: none; }

/* ---------- round 3, review 1 ---------- */

/* the jukebox stands on the floor in front of the bar's left end, all of it in frame, warm and asking to be pressed */
.jukebox {
  left: 1.5%; top: 67.6%; width: 23%; min-width: 48px; min-height: 48px;
  filter: brightness(.9) saturate(.96) sepia(.06) drop-shadow(6px 10px 8px rgba(10, 4, 2, .6));
}
.jukebox:hover, .jukebox:focus-visible { filter: brightness(1.02) saturate(1) drop-shadow(6px 10px 8px rgba(10, 4, 2, .6)); }
.jukebox .juke-glow { left: 23%; top: 18%; width: 44%; height: 18%; opacity: .5; animation: jukeIdle 2.6s steps(6) infinite alternate; }
.jukebox .juke-arch { left: 28%; top: -3%; width: 44%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 120, 80, .5), transparent); animation-delay: -1.3s; }
.jukebox.beat .juke-glow { opacity: .95; }
@keyframes jukeIdle { from { opacity: .3; } to { opacity: .75; } }
.juke-plaque {
  position: absolute; left: 50%; top: -9%; translate: -50% 0; rotate: -3deg; white-space: nowrap;
  padding: 2px 8px 3px; font: 800 clamp(12px, 2.6cqw, 15px)/1.1 var(--serif); color: var(--brass-ink, #3b2808);
  background: radial-gradient(130% 160% at 30% 20%, #f8de94, #d9a94a 55%, #a87726); border-radius: 4px 6px 5px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, .6), 0 2px 0 #5e3a10, 0 4px 6px rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: reduce) { .jukebox .juke-glow { animation: none; } }

/* the near stool's tag: a shorter rope, so the label clears his subtitles */
.stool-tag .chalk-text { top: 27%; }
@container (min-width: 521px) { .stool-tag { top: 78.5%; } }

/* the regular: the robot in the still. His own tag, on his own stool. */
.regular-tag {
  margin: 0; left: 70%; top: 72.5%; width: clamp(64px, 14cqw, 116px); aspect-ratio: 146 / 300; cursor: default;
  transform-origin: 50% 4%; rotate: 3deg; filter: drop-shadow(2px 5px 3px rgba(10, 4, 2, .5)); z-index: 3; pointer-events: none;
}
.regular-tag img { width: 100%; height: 100%; display: block; clip-path: inset(0 0 59% 0); }
.regular-tag .chalk-text {
  position: absolute; left: 2%; right: 2%; top: 27%;
  display: flex; flex-direction: column; align-items: center; gap: .1em; padding: 3px 3px 4px;
  font: 700 clamp(12px, 2.4cqw, 15px)/1.1 var(--serif); color: var(--ink); text-align: center;
  background: var(--paperfiber), #efe3c8; border-radius: 3px 3px 5px 4px;
}
.regular-tag .chalk-text small { font: 600 11px/1.15 var(--sans); color: #5a4630; }
@container (max-width: 520px) { .regular-tag .chalk-text small { display: none; } .regular-tag { top: 74%; } }

/* the share glass: a tag you can read on a phone, 12 px and up */
.share-glass { min-width: 48px; min-height: 48px; }
/* one tag on the shared glass: From Mika. A steady pour. The tag is part of the 48 px button. */
.share-glass .share-tag { font-size: clamp(13px, 3.2cqw, 15px); max-width: 46cqw; min-height: 28px; padding: 4px 9px 5px; line-height: 1.2; }
.share-glass .share-tag span { font: 600 clamp(12px, 2.9cqw, 14px)/1.2 var(--sans); color: #5a4630; display: block; }
.share-glass .share-tag b { display: block; }
/* a shared glass on the bar is the only tag there: the other glasses keep theirs for hover and focus */
.stage.guest .other-glass:not(:hover):not(:focus-visible) .og-tag { display: none; }
.other-glass { min-width: 44px; min-height: 44px; }
.other-glass .og-tag { font-size: clamp(12px, 2.6cqw, 14px); }
.other-glass .og-tag small { font-size: 12px; }

/* while you type on a phone: his line rides on the mini plate, not under the header */
.mini-plate .mini-sub { position: absolute; left: 4%; right: 4%; bottom: 8px; margin: 0 auto; width: fit-content; max-width: 92%; font-size: 15px; z-index: 2; }
.mini-plate .mini-stamps { bottom: auto; top: 6px; }
html.typing .stage .letterbox { visibility: hidden; }

/* the rail glass: a small clay outline glass, filled with coins when there is a glass */
.stool .gl { width: 20px; height: 26px; border: 0; border-radius: 0; background: none; overflow: visible; }
.stool .gl svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stool .gl .gl-out { fill: rgba(255, 250, 235, .25); stroke: #8a6a44; stroke-width: 1.8; stroke-linejoin: round; }
.stool .gl .gl-in { fill: none; }
.stool .gl i { left: 4px; right: 4px; bottom: 3px; border-radius: 0 0 3px 3px; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); z-index: -0; }
.stool .gl { isolation: isolate; }
.stool .gl i { position: absolute; z-index: 1; }
.stool .gl svg { z-index: 2; }
.stool .gl.full .gl-out { fill: rgba(255, 250, 235, .12); }
.stool.ghost .gl .gl-out { stroke: rgba(236, 235, 226, .6); fill: none; }
.rail-next { display: none; }

/* phones: the rail is two rows, the now playing plaque across the top, the stools sliding under it */
@media (max-width: 899px) {
  .rail { display: flex; flex-direction: column; gap: 8px; height: auto; overflow: visible; padding: 8px 10px 10px; }
  .rail .np { width: 100%; max-width: none; min-width: 0; height: auto; min-height: 56px; padding: 6px 12px 6px 6px; }
  .rail .np-title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.15; }
  .rail .np-by { white-space: normal; font-size: 12px; }
  .stools {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -10px; padding: 0 10px; scroll-padding: 0 10px;
  }
  .stools::-webkit-scrollbar { display: none; }
  .rail.more .stools { mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 6px)); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 6px)); }
  .rail-next {
    position: absolute; right: 2px; bottom: 16px; width: 40px; height: 40px; display: grid; border: 0; border-radius: 50%; padding: 0;
    display: grid; place-items: center; font: 800 24px/1 var(--serif); color: var(--ink); cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #fff4d6, #e3c88f); box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transition: opacity .2s steps(2);
  }
  .rail.more .rail-next { opacity: 1; visibility: visible; animation: nudge 1.6s steps(4) infinite; }
  .rail-next:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .stool-btn { max-width: 230px; min-width: 150px; min-height: 48px; }
  .stool .who b { max-width: 104px; }
  .stool .who small { overflow: visible; }
}
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 80% { translate: 3px 0; } }

/* desktop rail: chips two by two, an odd last one runs across, nothing under 13 px */
@media (min-width: 900px) {
  .stools { display: flex; flex-wrap: wrap; }
  .stools > .stool { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .stools > .stool .stool-btn { width: 100%; }
  .rail .np-by, .stool .who small, .rail .np-time { font-size: 13px; }
  .stool .who b { font-size: 15px; max-width: 220px; }
  .stool.standing, .stool.quiet-line { font-size: 15px; flex-basis: 100%; }
}

/* the jukebox sheet: on phones it is the whole screen, the tracks scroll inside it, nothing shows through */
.juke::backdrop { background: rgba(8, 12, 12, .86); }
.juke[open] { display: flex; }
.juke-box { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.juke-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; }
@media (max-width: 899px) {
  .juke { margin: 0 auto; inset: 0; height: 100svh; max-height: 100svh; max-width: 100vw; padding: env(safe-area-inset-top) 6px calc(6px + env(safe-area-inset-bottom)); }
  .juke-box { height: 100%; border-radius: 140px 140px 18px 18px / 100px 100px 18px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .platter { width: min(212px, 56vw); }
  .tracks { padding-bottom: 12px; }
  /* the list scrolls inside the sheet: its last line fades out instead of being cut */
  .juke-scroll { padding-bottom: 18px; mask-image: linear-gradient(#000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
}
@media (min-width: 900px) {
  .juke { max-height: 92svh; }
  .juke-box { max-height: 92svh; }
  .tracks > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* the tonearm: the platter lights up while you aim at the record; the needle lands with a thunk and the label spins up */
.platter.aim { box-shadow: inset 0 0 0 6px rgba(60, 30, 10, .4), 0 10px 18px rgba(0, 0, 0, .55), 0 0 0 5px rgba(247, 199, 102, .55), 0 0 50px rgba(255, 190, 90, .55); }
.platter.thunk { animation: thunk 260ms steps(4) 1; }
@keyframes thunk { 0% { translate: 0 0; } 30% { translate: 0 3px; scale: .99 1.01; } 60% { translate: 0 -1px; } 100% { translate: 0 0; } }
.platter.spinning::after { content: ""; position: absolute; inset: -4%; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px rgba(247, 199, 102, .6), 0 0 36px rgba(255, 190, 90, .55); animation: spinGlow 1.4s steps(6) 1 forwards; }
@keyframes spinGlow { from { opacity: 1; } to { opacity: .25; } }
@container (max-width: 520px) { .jukebox { top: 65.6%; width: 21%; } }
@container (min-width: 521px) { .juke-plaque { top: auto; bottom: 2%; rotate: -2deg; } }

/* ---------- round 3, review 2: rail glass, your chip, jukebox sheet, desktop fold ---------- */

/* the rail glass: a clay tumbler in outline, warm stroke, thick base; gold coins up to the level when there is a glass */
.stool .gl { width: 22px; height: 28px; }
.stool .gl i { display: none; }
.stool .gl .gl-out { fill: rgba(255, 238, 205, .22); stroke: #9a5a2e; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.stool .gl .gl-base { fill: rgba(154, 90, 46, .4); }
.stool .gl .gl-shine { fill: none; stroke: rgba(255, 250, 235, .85); stroke-width: 1.1; stroke-linecap: round; }
.stool .gl .gl-fill { fill: #e0a548; stroke: #a8691f; stroke-width: .7; stroke-linejoin: round; }
.stool .gl .gl-coin { fill: none; stroke: rgba(122, 70, 18, .55); stroke-width: .8; stroke-linecap: round; }
.stool .gl:not(.full) .gl-fill, .stool .gl:not(.full) .gl-coin { display: none; }
.stool .gl.full .gl-out { fill: rgba(255, 238, 205, .12); }
.stool .gl .gl-fill, .stool .gl .gl-coin { transform-box: view-box; transform-origin: 50% 90%; }
.stool .gl.pouring .gl-fill, .stool .gl.pouring .gl-coin { animation: glFill 250ms steps(3) 1; }
@keyframes glFill { from { transform: scaleY(0); } }
.stool.ghost .gl .gl-out { stroke: rgba(236, 235, 226, .6); fill: none; }
.stool.ghost .gl .gl-base { fill: rgba(236, 235, 226, .25); }

/* names: shrink, then whole words; the (you) never gets cut */
.stool .who b { display: flex; align-items: baseline; min-width: 0; overflow: visible; text-overflow: clip; }
.stool .who .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.stool .who .nm.cut { text-overflow: ellipsis; }
.stool .who .you-tag { flex: none; margin-left: .28em; font: 700 12px/1 var(--sans); color: #8a4a1a; }
.stool .who .times { flex: none; margin-left: .3em; padding: 0 .3em; border-radius: 5px; background: rgba(90, 70, 48, .14); font: 700 13px/1.2 var(--sans); color: #5a4630; }

/* your own chip: a clay ring round the print, a small "You" stamp, a warmer paper */
.stool.you .stool-btn { position: relative; box-shadow: inset 0 0 0 2px #c98e2c, 0 1px 0 rgba(255, 255, 255, .5) inset, 0 4px 8px rgba(0, 0, 0, .4); }
.stool.you .seat { box-shadow: 0 0 0 2.5px #b5652f, 0 0 0 4px rgba(255, 228, 170, .8), inset 0 -3px 0 rgba(0, 0, 0, .35); }
.stool.you.window .seat { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }
.you-badge {
  position: absolute; left: 10px; bottom: 1px; padding: 1px 5px 2px; pointer-events: none;
  font: 800 12px/1 var(--serif); color: #fff3dc; letter-spacing: .02em;
  background: radial-gradient(circle at 35% 30%, #d9824a, #b5652f 60%, #8a4520); border-radius: 7px 8px 6px 7px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .45), 0 1px 2px rgba(0, 0, 0, .45);
}

@media (max-width: 899px) {
  .stool-btn { max-width: 250px; }
  .stool .who b { max-width: 128px; }
}
@media (min-width: 900px) {
  .stools > .stool.wide { flex-basis: 100%; }
  .stool .who .you-tag, .you-badge { font-size: 13px; }
  .stool .who b { max-width: none; }
}

/* the jukebox sheet: one line for your wait, not a badge on every record */
.juke-cool { margin: 6px 10px 2px; text-align: center; font: 700 15px/1.3 var(--serif); color: #ffe2a1; font-variant-numeric: tabular-nums; }
.juke-cool[hidden] { display: none; }
.tracks.cool .track:not([data-state="playing"]):not([data-state="queued"]) { filter: saturate(.75); }
.track[data-state="cool"] { filter: none; }
.track .strip b { text-wrap: balance; line-height: 1.12; }
.track .strip small { text-wrap: pretty; }
@media (max-width: 899px) {
  /* the title gets the full width; tempo and key go under the note */
  .track { grid-template-columns: 46px 1fr auto; grid-template-areas: "key strip state" "key meta meta"; column-gap: 8px; row-gap: 2px; }
  .track .strip b { font-size: 14px; }
  .track .meta { justify-self: start; font-size: 11px; }
  .track .state { align-self: start; margin-top: 3px; }
}

/* the focus ring on the jukebox follows its arch: a gold line drawn from the sprite's own outline */
.jukebox:focus-visible {
  outline: 3px solid transparent; /* forced colours still get a ring */
  filter: brightness(1.02)
    drop-shadow(2.5px 0 0 var(--gold)) drop-shadow(-2.5px 0 0 var(--gold)) drop-shadow(0 2.5px 0 var(--gold)) drop-shadow(0 -2.5px 0 var(--gold))
    drop-shadow(0 0 1px #2a1209) drop-shadow(6px 10px 8px rgba(10, 4, 2, .6));
}

/* desktop: the sign and the slate are one line each, the rail is tight, so "What'll it be?" and the button sit above the fold */
@media (min-width: 900px) {
  .sign { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px clamp(24px, 4vw, 56px) 10px; }
  /* the sign stays in view while the order column scrolls (the card scrolls in under it, never over it) */
  .sign { position: sticky; top: 0; z-index: 20; }
  .panel .card { scroll-margin-top: 84px; }
  .sign-plate { font-size: 34px; }
  .sign .switch { min-height: 40px; }
  .bar > .slate { display: flex; align-items: center; gap: 0 1em; height: 36px; padding: 0 14px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; }
  .bar > .slate .chalk { flex: none; margin: 0; font-size: 14px; line-height: 1; }
  .bar > .slate .chalk + .chalk { margin-top: 0; }
  /* one line: last call and today's count. If the slate rotates here too, only the line that is on. */
  .bar > .slate #chalk-agent, .bar > .slate #chalk-worn { display: none; }
  .bar > .slate:has(.chalk.on) .chalk { display: none; }
  .bar > .slate:has(.chalk.on) .chalk.on { display: block; flex: 1 1 auto; overflow: hidden; }
  .rail { padding: 8px; gap: 6px; margin-bottom: 0; }
  .rail .np { height: 46px; padding: 3px 12px 3px 5px; }
  .rail .np-disc { width: 36px; height: 36px; }
  .stools { gap: 6px; max-height: 158px; }
  .stool-btn { height: 48px; padding: 3px 10px 3px 4px; }
  .stool .seat { width: 40px; height: 40px; }
  .stool .seat canvas { width: 38px; height: 38px; }
  .stool .seat img { width: 28px; height: 35px; }
  .stool .who { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .2em; }
  .stool .who b { flex: 1 0 100%; }
  .you-badge { left: 7px; bottom: 0; }
  .panel { padding-top: 0; }
  .panel > * + * { margin-top: 14px; }
  .slip { padding: 14px 18px 16px; }
  .slip-q { margin-bottom: 4px; font-size: 28px; }
  .slip label { margin: 8px 0 4px; }
  .slip input, .slip textarea { padding: 8px 10px; }
  .slip textarea { min-height: 76px; height: 76px; }
  .hint { margin-top: 2px; }
  .meter { margin-top: 4px; }
  .chips { margin-top: 8px; gap: 6px; }
  .chips legend { margin-bottom: 5px; }
  .chips button { min-height: 38px; padding: 6px 11px; font-size: 14px; }
  .order-chip { margin-top: 10px; }
  .slip .order-chip-label { min-height: 48px; padding: 4px 0 4px 8px; }
  .order-chip .price-tag { width: 36px; height: 68px; }
  .pour-row { margin-top: 12px; }
  .pour-row .pour-btn, .pour-row .pour-for-me { min-height: 56px; }
}

/* ---------- the receipt printer (R5) ---------- */
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plexmono-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: pre; border: 0; }
.rcpt { scroll-margin-top: 84px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; }
.rcpt-printer {
  position: relative; z-index: 3; width: min(100%, 420px); height: 42px; border-radius: 12px 12px 8px 8px;
  background: linear-gradient(#e9c068, #c98e2c 55%, #8e5f17); box-shadow: 0 2px 0 #fff4 inset, 0 -3px 0 #0004 inset, 0 8px 14px #0006;
}
.rcpt-slot { position: absolute; left: 7%; right: 7%; bottom: 7px; height: 11px; border-radius: 6px; background: #170b05; box-shadow: 0 2px 0 #fff3, 0 -2px 3px #000a inset; }
.rcpt-led { position: absolute; right: 12px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #62d26f; box-shadow: 0 0 6px #62d26f; }
.rcpt.torn .rcpt-led { background: #c98e2c; box-shadow: none; }
.rcpt-paper { position: relative; z-index: 1; margin-top: -22px; overflow: hidden; width: max-content; max-width: 100%; transform-origin: 50% 0; transition: transform 240ms steps(5); }
.rcpt-canvas { display: block; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.rcpt.pulling .rcpt-paper { transition: none; }
.rcpt-grab { position: absolute; left: 0; right: 0; top: 0; height: 150px; cursor: grab; touch-action: none; z-index: 2; }
.rcpt-stub { position: absolute; z-index: 2; top: 30px; left: 50%; translate: -50% 0; width: min(100%, 330px); height: 16px; background: var(--ivory); filter: drop-shadow(0 2px 2px #0006); clip-path: polygon(0 0, 100% 0, 100% 40%, 96% 100%, 92% 40%, 88% 100%, 84% 40%, 80% 100%, 76% 40%, 72% 100%, 68% 40%, 64% 100%, 60% 40%, 56% 100%, 52% 40%, 48% 100%, 44% 40%, 40% 100%, 36% 40%, 32% 100%, 28% 40%, 24% 100%, 20% 40%, 16% 100%, 12% 40%, 8% 100%, 4% 40%, 0 100%); }
.rcpt.torn .rcpt-paper { overflow: visible; transform: translateY(26px) rotate(var(--tilt, -1.4deg)); margin-bottom: 30px; }
.rcpt.torn .rcpt-grab { display: none; }
.rcpt-hint { margin: 0 0 8px; font: 600 14px/1.3 var(--sans); color: #ead9bb; text-align: center; }
.rcpt-hint.nudge { animation: nudge 520ms steps(6) 1; }
@keyframes nudge { 0% { translate: 0 0; } 25% { translate: 0 6px; } 50% { translate: 0 0; } 75% { translate: 0 6px; } 100% { translate: 0 0; } }
.rcpt-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.rcpt-actions > .clay-btn { width: 100%; }
.rcpt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rcpt-row .clay-btn { min-height: 44px; text-align: center; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.rcpt-share.wiggle { animation: wiggle 900ms steps(9) 2 400ms; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -1.6deg; } 40% { rotate: 1.6deg; } 60% { rotate: -1deg; } 80% { rotate: 1deg; } }
.card-notes { margin: 0 0 8px; text-align: center; }
.card-notes .foot-line { margin: 4px 0 0; }
.rcpt-actions + .card-note { text-align: center; }
@media (prefers-reduced-motion: reduce) { .rcpt-paper, .rcpt-hint.nudge, .rcpt-share.wiggle { transition: none; animation: none; } }

.rcpt-grab::after { content: "\2193  pull"; position: absolute; right: 12px; top: 46px; padding: 5px 11px 4px; border-radius: 999px; font: 800 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-ink); background: linear-gradient(#f9d27d, #e3a73f); box-shadow: 0 2px 0 #8e5f17, 0 4px 8px #0005; animation: pullbob 1.1s steps(4) infinite; }
@keyframes pullbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
@media (prefers-reduced-motion: reduce) { .rcpt-grab::after { animation: none; } }
.rcpt:not(.printed) .rcpt-grab::after { display: none; }
.rcpt:not(.printed) .rcpt-grab { pointer-events: none; }

.rcpt-more { width: 100%; }
.rcpt-more > summary { list-style: none; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.rcpt-more > summary::-webkit-details-marker { display: none; }
.rcpt-more[open] > summary { margin-bottom: 8px; }

/* ---------- the house slips (R5, the ten-second entrance) ---------- */
.slips { padding: 12px 14px 6px; }
.slips[hidden] { display: none; }
.slips-h { margin: 0 0 8px; font: 700 15px/1.2 var(--serif); color: var(--chalk); letter-spacing: .02em; text-shadow: 0 0 1px rgba(255, 255, 255, .35); }
.slips-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hslip {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer; border: 0; min-height: 50px; padding: 17px 14px 9px;
  font: 600 16.5px/1.2 var(--serif); color: var(--ink);
  background: var(--paperfiber), radial-gradient(120% 90% at 30% 20%, #f5ead1, var(--ivory) 55%, var(--ivory-deep));
  border-radius: 3px 5px 4px 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 12px rgba(0, 0, 0, .4), 0 2px 3px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 97% 100%, 94% calc(100% - 5px), 91% 100%, 88% calc(100% - 5px), 85% 100%, 82% calc(100% - 5px), 79% 100%, 76% calc(100% - 5px), 73% 100%, 70% calc(100% - 5px), 67% 100%, 64% calc(100% - 5px), 61% 100%, 58% calc(100% - 5px), 55% 100%, 52% calc(100% - 5px), 49% 100%, 46% calc(100% - 5px), 43% 100%, 40% calc(100% - 5px), 37% 100%, 34% calc(100% - 5px), 31% 100%, 28% calc(100% - 5px), 25% 100%, 22% calc(100% - 5px), 19% 100%, 16% calc(100% - 5px), 13% 100%, 10% calc(100% - 5px), 7% 100%, 4% calc(100% - 5px), 1% 100%, 0 calc(100% - 5px));
}
.hslip::before { content: attr(data-tag); position: absolute; top: 5px; left: 14px; font: 800 10.5px/1 var(--sans); letter-spacing: .16em; color: var(--red); }
.slips-row li:focus-within { outline: 3px solid #f7c766; outline-offset: 3px; border-radius: 6px; }
.hslip:hover, .hslip:focus-visible { translate: 0 -2px; filter: brightness(1.04); }
.hslip:active { translate: 0 1px; }
.slips-row li:nth-child(1) .hslip { rotate: -.7deg; }
.slips-row li:nth-child(2) .hslip { rotate: .5deg; }
.slips-row li:nth-child(3) .hslip { rotate: -.3deg; }
.slips.in .slips-row li { animation: slipsIn .42s steps(5) both; }
.slips.in .slips-row li:nth-child(2) { animation-delay: .16s; }
.slips.in .slips-row li:nth-child(3) { animation-delay: .32s; }
@keyframes slipsIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.slips.chosen .hslip { opacity: .25; transition: opacity .2s steps(3); pointer-events: none; }
.slips.chosen .hslip.taken { opacity: 1; animation: slipTake .4s steps(4) both; }
@keyframes slipTake { 0% { translate: 0 0; scale: 1; } 40% { translate: 0 -6px; scale: 1.02; } 100% { translate: 0 28px; scale: .96; opacity: 0; } }
.slips-or { display: none; margin: 9px 2px 0; font: 500 12.5px/1.2 var(--sans); color: #ead9bb; opacity: .8; }
@media (min-width: 900px) {
  .slips-or { display: block; }
  .slips { padding: 4px clamp(24px, 4vw, 56px) 8px; max-width: calc(620px + 2 * clamp(24px, 4vw, 56px)); }
  .hslip { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .slips.in .slips-row li, .slips.chosen .hslip.taken { animation: none; } }

.agentline { margin: 12px 0 0; padding: 11px 12px 12px; border: 2px dashed rgba(236, 235, 226, .35); border-radius: 8px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.agentline-h { margin: 0; font: 700 15px/1.2 var(--serif); color: var(--chalk); }
.agentline .clay-btn { min-height: 44px; }
.agentline-note { grid-column: 1 / -1; margin: 0; font: 500 12.5px/1.35 'IBM Plex Mono', ui-monospace, monospace; color: #ead9bb; overflow-wrap: anywhere; }
@media (min-width: 900px) { .agentline { max-width: 620px; } }