:root {
  color-scheme: dark;
  --ink: #25101f;
  --wine: #541b2f;
  --red: #b63d3f;
  --coral: #ef6b55;
  --apricot: #ffba72;
  --butter: #ffe2a1;
  --mint: #95ead0;
  --blue: #7399ee;
  --paper: #fff5df;
  --smoke: #c9afbc;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, #6f263f 0, transparent 36rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--sans);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 3vw, 44px) 12px;
  background: linear-gradient(#1a0a18e8, #1a0a1800);
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.brand-mark {
  min-width: 46px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #ffe2a166;
  border-radius: 50%;
  color: var(--butter);
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .12em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.quiet-button,
.text-button,
.skip-button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--smoke);
  cursor: pointer;
}

.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border: 1px solid #fff2;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
}

.quiet-button:hover,
.quiet-button[aria-pressed="true"] {
  border-color: #ffe2a166;
  color: var(--paper);
}

.sound-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

.quiet-button[aria-pressed="true"] .sound-dot {
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}

main {
  min-height: 100svh;
}

.intro {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: clamp(100px, 14vh, 150px) clamp(20px, 6vw, 84px) clamp(32px, 7vh, 72px);
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #170812f5 0%, #1d0b18c2 38%, #210d1d33 68%, #210d1d99 100%),
    linear-gradient(0deg, #210d1dfa 0%, transparent 55%);
  z-index: 1;
}

.intro-art {
  position: absolute;
  inset: 0;
  background: url("og-image.png") 58% center / cover no-repeat;
  transform: scale(1.04);
  filter: saturate(.92) contrast(1.05);
}

.intro-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 96%);
}

.eyebrow {
  margin: 0 0 .9rem;
  color: var(--apricot);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.intro h1 {
  max-width: 720px;
  margin: 0;
  color: #fff6df;
  font: 500 clamp(2.15rem, 5.1vw, 5.5rem)/.96 var(--serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.intro-lede {
  width: min(590px, 100%);
  margin: 1.45rem 0 1.65rem;
  color: #f9dacc;
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  line-height: 1.55;
}

.primary-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding: .85rem 1.15rem .85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 850;
  box-shadow: 0 10px 38px #13061199;
  transition: transform .2s ease, background .2s ease;
}

.primary-button:hover {
  background: #fff0c1;
  transform: translateY(-2px);
}

.intro-foot {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(32px, 7vh, 72px);
  z-index: 2;
  margin: 0;
  color: #ead0cf99;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.game {
  min-height: 100svh;
  padding-top: 62px;
}

.room {
  position: relative;
  min-height: calc(100svh - 62px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 25%, #a7463e55, transparent 34%),
    linear-gradient(155deg, #3f142d, #170812 62%);
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #11070ebd, transparent 30% 70%, #11070ebd),
    linear-gradient(0deg, #160911f5, transparent 35%);
}

.room-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  filter: blur(1px) saturate(.75);
  mix-blend-mode: screen;
}

.lamp {
  position: absolute;
  z-index: 8;
  top: -34px;
  left: 50%;
  width: 210px;
  height: 148px;
  transform: translateX(-50%);
  pointer-events: none;
}

.lamp::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  width: 4px;
  height: 58px;
  background: #12090e;
}

.lamp-shade {
  position: absolute;
  top: 48px;
  left: 20px;
  width: 170px;
  height: 50px;
  border-radius: 50% 50% 18% 18%;
  background: linear-gradient(#4c171a, #a3492d 72%, #1d0b10 74%);
  box-shadow: inset 0 -8px 10px #ffb75f66, 0 8px 20px #0008;
}

.lamp-glow {
  position: absolute;
  top: 84px;
  left: -90px;
  width: 390px;
  height: 280px;
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  background: linear-gradient(#ffc26030, #ffc26000 78%);
  filter: blur(8px);
}

.course-badge {
  position: absolute;
  z-index: 20;
  top: 26px;
  left: clamp(16px, 3vw, 44px);
  display: grid;
  gap: .18rem;
  color: #f8d9ca;
}

.course-badge span {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.course-badge strong {
  font: 500 clamp(1.2rem, 2vw, 1.7rem) var(--serif);
}

.table-stage {
  position: absolute;
  z-index: 5;
  top: 80px;
  left: 50%;
  width: min(74vw, 980px);
  height: min(62vh, 650px);
  min-height: 470px;
  transform: translateX(-50%);
  perspective: 1100px;
}

.table-shadow,
.table {
  position: absolute;
  inset: 13% 15%;
  border-radius: 46%;
  transform: rotateX(19deg) rotateZ(-1.5deg);
}

.table-shadow {
  transform: translate(0, 28px) rotateX(19deg) rotateZ(-1.5deg) scale(1.03);
  background: #050204;
  filter: blur(24px);
  opacity: .76;
}

.table {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 33%, #d96149, #9f3135 52%, #682033 84%);
  border: clamp(8px, 1vw, 13px) solid #481426;
  box-shadow:
    inset 0 0 0 2px #ffad7355,
    inset 0 -30px 70px #2e0c26aa,
    0 28px 60px #080205aa;
}

.table-inlay {
  position: absolute;
  inset: 12%;
  border: 1px solid #ffd28c44;
  border-radius: 48%;
}

.table-light {
  position: absolute;
  inset: 9% 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffd37840, transparent 68%);
  filter: blur(10px);
}

.crumbs {
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(circle at 35% 48%, #ffd8a0 0 2px, transparent 3px),
    radial-gradient(circle at 67% 38%, #ffd8a0 0 1px, transparent 2px),
    radial-gradient(circle at 53% 69%, #ffd8a0 0 1.5px, transparent 2.5px);
}

.seats {
  position: absolute;
  inset: 0;
}

.guest {
  --guest: #ffc27d;
  --x: 50%;
  --y: 50%;
  position: absolute;
  z-index: 7;
  left: var(--x);
  top: var(--y);
  width: clamp(84px, 8.6vw, 112px);
  min-height: 108px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .28rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .34s cubic-bezier(.2,.85,.25,1), filter .2s ease;
}

.guest:hover {
  transform: translate(-50%, -50%) translateY(-4px);
}

.guest[aria-pressed="true"] {
  z-index: 12;
  transform: translate(-50%, -50%) translateY(-6px) scale(1.07);
}

.guest[aria-pressed="true"] .portrait {
  box-shadow: 0 0 0 4px var(--mint), 0 14px 32px #0008;
}

.guest.moving {
  filter: brightness(1.25);
}

.guest.celebrate .glass {
  animation: raise-glass .8s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--seat) * .2s);
}

.guest.celebrate .portrait {
  animation: guest-bob .7s ease-in-out both;
  animation-delay: calc(var(--seat) * .2s);
}

.guest.unlinked .portrait {
  filter: saturate(.5) brightness(.76);
}

.portrait {
  position: relative;
  width: clamp(58px, 5.8vw, 74px);
  height: clamp(58px, 5.8vw, 74px);
  display: block;
  border-radius: 46% 54% 48% 52%;
  background:
    radial-gradient(circle at 38% 40%, #28101c 0 2px, transparent 3px),
    radial-gradient(circle at 64% 39%, #28101c 0 2px, transparent 3px),
    linear-gradient(145deg, color-mix(in srgb, var(--guest) 75%, white), var(--guest));
  border: 2px solid #fff2;
  box-shadow: 0 12px 26px #0007;
  transition: box-shadow .2s ease, filter .2s ease;
}

.portrait::before {
  content: "";
  position: absolute;
  left: 36%;
  bottom: 20%;
  width: 28%;
  height: 8%;
  border-bottom: 2px solid #401424;
  border-radius: 0 0 50% 50%;
  transform: rotate(var(--mouth, 0deg));
}

.portrait::after {
  content: "";
  position: absolute;
  inset: -7px 8px auto;
  height: 20px;
  border-radius: 70% 30% 40% 20%;
  background: var(--hair, #351426);
  transform: rotate(-5deg);
}

.guest[data-mood="tense"] .portrait::before {
  border-top: 2px solid #401424;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.glass {
  position: absolute;
  top: 40px;
  right: 4px;
  width: 16px;
  height: 28px;
  border: 2px solid #d8fff5aa;
  border-radius: 4px 4px 8px 8px;
  transform-origin: 50% 100%;
  box-shadow: inset 0 -9px 0 #f6bd6188;
}

.glass::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 24px;
  width: 2px;
  height: 11px;
  background: #d8fff5aa;
  box-shadow: -4px 10px 0 1px #d8fff5aa;
}

.guest-name {
  display: block;
  padding: .18rem .48rem;
  border-radius: 999px;
  background: #190a14cc;
  font: 700 .78rem var(--sans);
  white-space: nowrap;
}

.topic {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #e4c5ce;
  font-size: .62rem;
  white-space: nowrap;
}

.topic-icon {
  font-size: .8rem;
}

.guest-note {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 5px);
  width: 170px;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: #fff5df;
  color: #32101f;
  box-shadow: 0 12px 34px #000a;
  font-size: .72rem;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -5px);
  transition: opacity .18s ease, transform .18s ease;
}

.guest:hover .guest-note,
.guest:focus-visible .guest-note,
.guest[aria-pressed="true"] .guest-note {
  opacity: 1;
  transform: translate(-50%, 0);
}

.guest-note strong {
  display: block;
  margin-top: .24rem;
  color: #8f2941;
}

.table-center {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: min(34%, 300px);
  display: grid;
  justify-items: center;
  gap: .65rem;
  text-align: center;
  transform: translate(-50%, -50%);
}

.host-note {
  display: grid;
  gap: .2rem;
  color: #54192b;
  text-wrap: balance;
}

.host-kicker {
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.host-note strong {
  font: 500 clamp(.82rem, 1.4vw, 1.15rem)/1.15 var(--serif);
}

.serve-button,
.swap-button {
  min-height: 46px;
  max-width: 240px;
  padding: .65rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 850;
}

.serve-button {
  border: 0;
  background: #461529;
  color: var(--paper);
  box-shadow: 0 8px 20px #270b1d66;
}

.serve-button:hover {
  background: #661d31;
}

.swap-button {
  border: 1px solid #4c172b55;
  background: #ffe3a6;
  color: #3a1022;
}

.swap-button:disabled {
  cursor: default;
  opacity: .48;
}

.toast-line {
  position: absolute;
  z-index: 6;
  inset: 2%;
  width: 96%;
  height: 96%;
  overflow: visible;
  pointer-events: none;
}

.toast-line path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.toast-line-dim {
  stroke: #ffd67920;
  stroke-width: 3;
  stroke-dasharray: .7 .3;
}

.toast-line-live {
  stroke: var(--butter);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: var(--links, 0) calc(8 - var(--links, 0));
  filter: drop-shadow(0 0 8px #ffd56f);
  opacity: .85;
  transition: stroke-dasharray .8s ease;
}

.toast-head {
  fill: #fff4bd;
  opacity: 0;
  filter: drop-shadow(0 0 12px #fff0a8) drop-shadow(0 0 24px #ffba66);
}

.room.final-toast .toast-line-live {
  animation: toast-ring 2.2s cubic-bezier(.4,0,.1,1) forwards;
}

.room.final-toast .toast-head {
  opacity: 1;
}

.clue-panel {
  position: absolute;
  z-index: 22;
  left: clamp(16px, 3vw, 44px);
  bottom: 24px;
  width: min(300px, calc(100vw - 32px));
  padding: .9rem 1rem;
  border: 1px solid #fff2;
  border-radius: 16px;
  background: #180a14cc;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px #0004;
}

.clue-heading {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.clue-heading strong {
  color: var(--apricot);
}

.clue-track {
  height: 5px;
  margin: .65rem 0;
  overflow: hidden;
  border-radius: 999px;
  background: #fff2;
}

.clue-track::after {
  content: "";
  display: block;
  width: calc(var(--links, 0) / 8 * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--butter));
  transition: width .7s ease;
}

.clue-panel p {
  margin: 0;
  color: #ddc5ce;
  font-size: .72rem;
  line-height: 1.4;
}

.dialogue {
  position: absolute;
  z-index: 25;
  right: clamp(16px, 3vw, 44px);
  bottom: 24px;
  width: min(390px, calc(100vw - 32px));
  min-height: 82px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .75rem .85rem;
  border-radius: 20px;
  background: var(--paper);
  color: #341020;
  box-shadow: 0 18px 50px #0008;
}

.speaker-portrait {
  width: 48px;
  height: 48px;
  border-radius: 46% 54%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--speaker, #ffb878) 75%, white), var(--speaker, #ffb878));
  box-shadow: inset 0 0 0 2px #fff7;
}

.dialogue p {
  margin: 0;
  font: 500 .86rem/1.35 var(--serif);
}

.dialogue strong {
  display: block;
  margin-bottom: .18rem;
  color: #9b2940;
  font: 850 .65rem var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skip-button {
  color: #7f3146;
  font-size: .68rem;
  font-weight: 800;
}

.selection-bar {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 48px;
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem .5rem .9rem;
  border: 1px solid #fff3;
  border-radius: 999px;
  background: #1a0a17ee;
  color: #ead1d8;
  box-shadow: 0 12px 28px #0008;
  transform: translateX(-50%);
  font-size: .76rem;
}

.selection-bar.active {
  display: flex;
}

.text-button {
  padding: .5rem .65rem;
  color: var(--mint);
  font-size: .7rem;
  font-weight: 800;
}

.help {
  width: min(520px, calc(100vw - 30px));
  padding: clamp(24px, 5vw, 46px);
  border: 1px solid #ffe5ad66;
  border-radius: 28px;
  background: #fff4de;
  color: #371120;
  box-shadow: 0 30px 90px #000b;
}

.help::backdrop {
  background: #12070edb;
  backdrop-filter: blur(7px);
}

.help .eyebrow {
  color: #a22d44;
}

.help h2 {
  max-width: 390px;
  margin: 0;
  font: 500 clamp(2rem, 7vw, 3.4rem)/.95 var(--serif);
  letter-spacing: -.04em;
}

.help ol {
  margin: 1.6rem 0;
  padding-left: 1.25rem;
}

.help li,
.help > p:last-child {
  margin: .75rem 0;
  font-size: .9rem;
  line-height: 1.5;
}

.help-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #3a1221;
  color: var(--paper);
  cursor: pointer;
  font-size: 1.4rem;
}

.finale {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 120px clamp(20px, 6vw, 84px) clamp(38px, 8vh, 78px);
  background: #160912;
}

.finale-art,
.finale-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.finale-art {
  object-fit: cover;
  animation: finale-arrive 2s cubic-bezier(.2,.75,.2,1) both;
}

.finale-vignette {
  background:
    radial-gradient(circle at 66% 35%, transparent 20%, #1b091444 62%),
    linear-gradient(90deg, #160912f2 0 28%, transparent 68%),
    linear-gradient(0deg, #160912e8, transparent 55%);
}

.finale-copy {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
}

.finale-guests {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(52px, 10vh, 96px);
  width: min(46vw, 650px);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: clamp(4px, .7vw, 12px);
  padding: .8rem 1rem 1rem;
  border-bottom: 3px solid #ffe2a1cc;
  filter: drop-shadow(0 12px 24px #10050dbb);
}

.final-guest {
  --guest: #ffc27d;
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  color: #fff1dd;
  font-size: clamp(.5rem, .7vw, .68rem);
  font-weight: 800;
}

.final-guest::before {
  content: "";
  width: clamp(30px, 3.4vw, 52px);
  aspect-ratio: 1;
  border-radius: 48% 52%;
  background:
    radial-gradient(circle at 37% 39%, #28101c 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 64% 39%, #28101c 0 1.5px, transparent 2.5px),
    linear-gradient(145deg, color-mix(in srgb, var(--guest) 74%, white), var(--guest));
  border: 2px solid #fff5;
  box-shadow: 0 0 20px color-mix(in srgb, var(--guest) 55%, transparent);
}

.final-guest::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10%;
  width: 9px;
  height: 26px;
  border: 2px solid #e4fff8cc;
  border-radius: 3px 3px 7px 7px;
  box-shadow: inset 0 -8px 0 #f7bf6388;
  transform: rotate(-10deg);
}

.finale h2 {
  margin: 0;
  font: 500 clamp(3rem, 7vw, 7rem)/.86 var(--serif);
  letter-spacing: -.06em;
  text-wrap: balance;
}

.finale-copy > p:not(.eyebrow) {
  max-width: 500px;
  margin: 1.25rem 0 1.6rem;
  color: #f3d7d1;
  line-height: 1.55;
}

.finale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.quiet-button.light {
  color: #fff0de;
  border-color: #fff5;
}

.epilogue {
  position: absolute;
  z-index: 5;
  right: clamp(20px, 5vw, 70px);
  bottom: clamp(32px, 8vh, 80px);
  width: min(390px, calc(100vw - 40px));
  padding: 1.25rem 1.4rem;
  border-radius: 20px;
  background: #fff4dfed;
  color: #351120;
  box-shadow: 0 20px 60px #0009;
  font: 500 .9rem/1.5 var(--serif);
}

.epilogue strong {
  color: #a22f43;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes raise-glass {
  0% { transform: translate(0, 0) rotate(0); }
  55% { transform: translate(-10px, -42px) rotate(-12deg); }
  100% { transform: translate(-7px, -30px) rotate(-7deg); }
}

@keyframes guest-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-9px) rotate(-3deg); }
}

@keyframes toast-ring {
  from { stroke-dasharray: 0 8; }
  to { stroke-dasharray: 8 0; }
}

@keyframes finale-arrive {
  from { transform: scale(1.12); filter: brightness(.35) saturate(.6); }
  to { transform: scale(1); filter: brightness(1) saturate(1); }
}

@media (max-width: 880px) {
  .top-actions .quiet-button:last-child {
    padding-inline: .65rem;
  }

  .table-stage {
    width: 94vw;
    height: min(59vh, 590px);
  }

  .clue-panel {
    bottom: 106px;
    width: min(330px, calc(50vw - 24px));
  }

  .dialogue {
    bottom: 106px;
    width: min(360px, calc(50vw - 24px));
  }

  .selection-bar {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 620px) {
  .topbar {
    min-height: 58px;
    padding-inline: 12px;
  }

  .brand span:last-child,
  #soundLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }

  .quiet-button {
    min-width: 44px;
    padding-inline: .65rem;
  }

  .intro {
    align-items: end;
    padding: 96px 20px 36px;
  }

  .intro::before {
    background:
      linear-gradient(0deg, #210d1dfa 0 36%, #210d1d44 78%),
      linear-gradient(90deg, #170812aa, #210d1d11);
  }

  .intro-art {
    background-position: 61% 20%;
  }

  .intro h1 {
    font-size: clamp(2.1rem, 10vw, 3.5rem);
  }

  .intro-lede {
    margin-block: 1rem 1.3rem;
    font-size: .9rem;
  }

  .intro-foot {
    display: none;
  }

  .game {
    padding-top: 58px;
  }

  .room {
    min-height: calc(100svh - 58px);
  }

  .lamp {
    top: -55px;
    scale: .78;
  }

  .course-badge {
    top: 14px;
  }

  .table-stage {
    top: 60px;
    width: 100vw;
    height: min(60vh, 535px);
    min-height: 430px;
  }

  .table-shadow,
  .table {
    inset: 15% 12%;
    transform: rotateX(8deg);
  }

  .table-shadow {
    transform: translateY(18px) rotateX(8deg) scale(1.02);
  }

  .guest {
    width: 75px;
    min-height: 92px;
  }

  .portrait {
    width: 52px;
    height: 52px;
  }

  .glass {
    top: 32px;
    right: 2px;
    scale: .85;
  }

  .guest-name {
    font-size: .7rem;
  }

  .topic {
    font-size: .55rem;
  }

  .guest-note {
    width: 145px;
    font-size: .65rem;
  }

  .table-center {
    width: 35%;
    gap: .4rem;
  }

  .host-note strong {
    font-size: .72rem;
  }

  .serve-button,
  .swap-button {
    min-height: 44px;
    padding: .52rem .7rem;
    font-size: .65rem;
  }

  .clue-panel {
    left: 12px;
    bottom: 92px;
    width: calc(100vw - 24px);
    padding: .7rem .8rem;
  }

  .clue-panel p {
    display: none;
  }

  .clue-heading {
    font-size: .58rem;
  }

  .clue-heading strong {
    white-space: nowrap;
  }

  .dialogue {
    right: 12px;
    bottom: 14px;
    width: calc(100vw - 24px);
    min-height: 70px;
    grid-template-columns: 42px 1fr auto;
    padding: .55rem .7rem;
  }

  .speaker-portrait {
    width: 40px;
    height: 40px;
  }

  .dialogue p {
    font-size: .78rem;
  }

  .selection-bar {
    bottom: 84px;
    max-width: calc(100vw - 24px);
    font-size: .68rem;
  }

  .finale {
    padding: 100px 20px 38px;
  }

  .finale-art {
    object-position: 60% center;
  }

  .finale-vignette {
    background:
      linear-gradient(0deg, #160912f7 0 34%, transparent 72%),
      linear-gradient(90deg, #16091288, transparent);
  }

  .finale h2 {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .finale-guests {
    inset: 88px 12px auto;
    width: auto;
    padding-inline: .35rem;
  }

  .final-guest span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }

  .epilogue {
    inset: auto 20px 120px;
    width: auto;
  }
}

@media (max-height: 720px) and (min-width: 621px) {
  .table-stage {
    top: 52px;
    height: 500px;
    min-height: 0;
  }

  .clue-panel,
  .dialogue {
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}