/* Spud & Root: town/study.html (the club's library). Loaded after site.css.
   study.js sets data-state on .study (outside -> talking -> opening ->
   inside, with focus while you've stepped up to something) and adds is-*
   classes as things happen. The room itself is drawn by study-room.js. */

.study-page {
  overflow: hidden;
  background: #1a1009;
  overscroll-behavior: none;
}

.study {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Outside: the front door ---------- */
.front {
  position: absolute;
  inset: 0;
  background: #1c0f0b;
  overflow: hidden;
  transition: opacity 0.9s ease;
}
.front__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 46%;
  transition: transform 1.6s cubic-bezier(0.5, 0, 0.3, 1);
}
.front__plate {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.front__mat-note {
  font-family: var(--font-script);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.front__mat {
  transform-box: fill-box;
  transform-origin: 0 100%;
  transition: transform 0.5s var(--ease-spring);
}
.is-mat-up .front__mat {
  transform: rotate(-16deg) translateY(-4px);
}
.front__hatch {
  transition: transform 0.25s ease-in;
}
.is-hatch-open .front__hatch {
  transform: translateX(-96px);
  transition-timing-function: ease-out;
}
.front__salt {
  transform-box: fill-box;
}
.is-glaring .front__salt {
  animation: salt-glare 2.4s ease-in-out infinite;
}
@keyframes salt-glare {
  0%, 40%, 100% { transform: translateX(0); }
  50%, 70% { transform: translateX(-8px); }
  80%, 90% { transform: translateX(8px); }
}
.front__ring {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.is-knocking .front__ring {
  animation: knock 0.42s ease-in-out 3;
}
/* The ring swings out from its pivot in the lion's mouth and falls back:
   seen face on, that's the ring foreshortened from the top, then a bounce
   as it strikes. Flat, as 3D transforms on SVG come out skewed in Safari */
@keyframes knock {
  0%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(0.45); }
  72% { transform: scaleY(1); }
  84% { transform: scaleY(0.88); }
}
.front__rain {
  animation: rain 0.5s linear infinite;
}
/* Smoke curling up behind the blinds */
.front__puff {
  stroke-dasharray: 90 200;
  animation: front-puff 3.4s ease-in-out infinite;
}
@keyframes front-puff {
  from { stroke-dashoffset: 90; opacity: 0; }
  30% { opacity: 0.7; }
  to { stroke-dashoffset: -200; opacity: 0; }
}
@keyframes rain {
  from { transform: translate(0, -60px); }
  to { transform: translate(-12px, 0); }
}
.front__lamp path:nth-child(2) {
  animation: lamp 3.2s ease-in-out infinite;
}
@keyframes lamp {
  0%, 100% { fill: #ffd77a; }
  47% { fill: #ffd77a; }
  50% { fill: #f5c25c; }
  53% { fill: #ffd77a; }
}

/* The invisible buttons over the knocker and the mat (placed by study.js) */
.front__hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.front__hit--mat {
  border-radius: 8px;
}
html:not(.js) .front__hit {
  display: none;
}

.front__talk {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(340px, calc(100% - 32px));
  translate: -50% 0;
  padding: 14px 16px 16px;
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.front__talk::before {
  content: "";
  position: absolute;
  left: calc(50% - 11px);
  top: -14px;
  width: 22px;
  height: 22px;
  background: var(--white);
  border-left: var(--stroke) solid var(--ink);
  border-top: var(--stroke) solid var(--ink);
  rotate: 45deg;
}
.front__talk[hidden] {
  display: none;
}
.front__says {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  min-height: 1.2em;
}
.front__form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.front__form[hidden] {
  display: none;
}
.front__form input {
  flex: 1;
  min-width: 0;
  padding: 0.45em 0.7em;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  -webkit-user-select: text;
  user-select: text;
}
.front__form button,
.panel__done,
.panel .btn {
  padding: 0.4em 1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.front__form button:active,
.panel__done:active,
.panel .btn:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--ink);
}

.front__hint {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  translate: -50% 0;
  padding: 0.35em 1em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html:not(.js) .front__hint,
.study:not([data-state="outside"]) .front__hint {
  opacity: 0;
}

/* Through the door */
[data-state="opening"] .front__art {
  transform: scale(3.2);
}
[data-state="opening"] .front,
[data-state="inside"] .front,
[data-state="focus"] .front {
  opacity: 0;
  pointer-events: none;
}
[data-state="inside"] .front,
[data-state="focus"] .front {
  visibility: hidden;
}

/* ---------- Inside ---------- */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1009;
  touch-action: none;
}
.stage[hidden] {
  display: none;
}
.room {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* study.js slides it about with a transform (applyCamera()) */
  transform-origin: 0 0;
  will-change: transform;
}
.is-dragging .room {
  cursor: grabbing;
}
/* The firelight over the hearth: a layer of its own, so its flicker never
   has the room drawn again. study.js keeps it over the fireplace (it's the
   glow's size in the room's units, scaled to the screen) */
.fire-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 1400px;
  height: 840px;
  transform-origin: 0 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 138, 42, 0.6), rgba(255, 138, 42, 0.21) 45%, rgba(255, 138, 42, 0));
  opacity: 0.78;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: fire-light 1.7s ease-in-out infinite;
}
.fire-light.is-up {
  background: radial-gradient(closest-side, rgba(255, 150, 60, 0.85), rgba(255, 138, 42, 0.32) 45%, rgba(255, 138, 42, 0));
}
.is-cellar .fire-light {
  display: none;
}
@keyframes fire-light {
  0%, 100% { opacity: 0.76; }
  14% { opacity: 0.86; }
  27% { opacity: 0.7; }
  41% { opacity: 0.83; }
  55% { opacity: 0.68; }
  68% { opacity: 0.88; }
  83% { opacity: 0.72; }
}
/* Things in the foreground, nearer than the room; never in the way */
.fg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  filter: brightness(0.55) saturate(0.85);
  transition: opacity 0.5s ease;
}
[data-state="focus"] .fg {
  opacity: 0;
}
.room__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 85% at 50% 55%, transparent 55%, rgba(12, 6, 2, 0.55) 100%);
}

/* Anything you can tap glows a little under the pointer or keyboard */
.room .hot {
  cursor: pointer;
  outline: none;
}
.room .hot:focus-visible {
  filter: drop-shadow(0 0 3px #ffe08a) drop-shadow(0 0 8px rgba(255, 196, 80, 0.7));
}
/* Only where there's a pointer that hovers: a phone keeps the last thing
   tapped "hovered", and a filter on something that moves (the fire, a
   member breathing) is costly to draw again every frame */
@media (hover: hover) {
  .room .hot:hover {
    filter: drop-shadow(0 0 3px #ffe08a) drop-shadow(0 0 8px rgba(255, 196, 80, 0.7));
  }
  .room .hot--quiet:hover {
    filter: brightness(1.12);
  }
  .is-dragging .room .hot:hover {
    filter: none;
  }
}

/* Books: any of them can be taken down. The one you're reading sticks out */
.room .book {
  cursor: pointer;
  transition: translate 0.25s ease;
}
@media (hover: hover) {
  .room .book:hover {
    filter: brightness(1.25);
  }
}
.room .book:focus-visible {
  outline: none;
  filter: brightness(1.3) drop-shadow(0 0 4px #ffe08a);
}
.room .book.is-out {
  translate: 0 -10px;
  filter: drop-shadow(0 0 6px #ffe08a);
}

/* The members breathe, each at his own pace */
.room .member__bob {
  animation: bob var(--bob, 3.6s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes bob {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 0.985); }
}
.room .member.is-talking .member__bob {
  animation: talk 0.36s ease-in-out infinite;
}
@keyframes talk {
  0%, 100% { transform: scale(1, 1) rotate(0); }
  50% { transform: scale(1.02, 0.97) rotate(-1deg); }
}
.room .member.is-hopping .member__bob {
  animation: hop 0.5s ease-in-out infinite;
}
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.06, 0.92); }
  50% { transform: translateY(-14%) scale(0.96, 1.05); }
  85% { transform: translateY(0) scale(1.04, 0.95); }
}
.room .member.is-swaying .member__bob {
  animation: sway 1.4s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.room .member.is-shaking .member__bob {
  animation: shake 0.12s linear 6;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2%); }
  75% { transform: translateX(2%); }
}
.room .member.is-sobbing .member__bob {
  animation: sob 0.5s ease-in-out infinite;
}
@keyframes sob {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.02, 0.96) translateY(1%); }
}

/* Cigar embers glow as they're puffed */
.room .ember {
  animation: ember 3s ease-in-out infinite;
  animation-delay: var(--ember-delay, 0s);
}
@keyframes ember {
  0%, 100% { fill: #e2401b; }
  45% { fill: #ff7a2a; }
  55% { fill: #ffc04a; }
}

/* The fire */
.room .flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flame var(--fl, 0.9s) ease-in-out infinite alternate;
  animation-delay: var(--fd, 0s);
}
@keyframes flame {
  0% { transform: scale(1, 1) skewX(0); }
  33% { transform: scale(0.94, 1.1) skewX(-4deg); }
  66% { transform: scale(1.05, 0.92) skewX(3deg); }
  100% { transform: scale(0.97, 1.06) skewX(-2deg); }
}
.room .fire.is-roaring .flames {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: roar 2.4s ease-out;
}
@keyframes roar {
  0% { transform: scale(1); }
  12% { transform: scale(1.35, 1.6); }
  100% { transform: scale(1); }
}

/* Lids that open: the humidor's from its back edge, the globe's from its
   right-hand end */
.room .humidor__open {
  display: none;
}
.room .humidor.is-open .humidor__open {
  display: inline;
}
.room .humidor.is-open .humidor__lid {
  display: none;
}
.room .globe__lid {
  transform-box: fill-box;
  transform-origin: 100% 100%;
}

/* The fire burns down: study.js sets the flames' size; a log goes on */
.room .flames-size {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.2s ease;
}
.room .new-log {
  opacity: 0;
  transform: translateY(-60px);
}
.room .new-log.is-on {
  opacity: 1;
  transform: none;
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.8, 1.4), opacity 0.2s;
}

/* The pendulum and the chandeliers */
.room .pendulum {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: pendulum 1s ease-in-out infinite alternate;
}
@keyframes pendulum {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

/* Rain on the window, and the lightning */
.room .rain {
  animation: room-rain 0.6s linear infinite;
}
@keyframes room-rain {
  from { transform: translate(0, -80px); }
  to { transform: translate(-14px, 0); }
}
.room .lightning {
  opacity: 0;
}
.is-lightning .room .lightning {
  animation: flash 0.9s ease-out;
}
@keyframes flash {
  0% { opacity: 0; }
  5% { opacity: 1; }
  15% { opacity: 0.2; }
  22% { opacity: 0.9; }
  100% { opacity: 0; }
}
.is-lightning .room__shade {
  animation: room-flash 0.9s ease-out;
}
@keyframes room-flash {
  0% { background-color: transparent; }
  6% { background-color: rgba(200, 220, 255, 0.28); }
  20% { background-color: transparent; }
  24% { background-color: rgba(200, 220, 255, 0.18); }
  100% { background-color: transparent; }
}

/* The gramophone's record goes round while it plays */
.room .gramo__disc {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(0.28);
}
.is-playing .room .gramo__disc {
  animation: disc 1.8s linear infinite;
}
@keyframes disc {
  from { transform: scaleY(0.28) rotate(0); }
  to { transform: scaleY(0.28) rotate(360deg); }
}

/* Music notes and tears float up and away */
.room .note {
  animation: note 2.6s ease-out forwards;
}
@keyframes note {
  from { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--nx, 20px), -90px); }
}
.room .tear {
  animation: tear 1.1s ease-in forwards;
}
@keyframes tear {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(var(--tx, 0), 40px); }
}

/* ---------- Speech bubbles ---------- */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(240px, 60vw);
  padding: 0.45em 0.8em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.2vh, 1.1rem);
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  translate: -50% -100%;
  animation: bubble-in 0.25s var(--ease-spring);
  text-align: center;
}
.bubble::after {
  content: "";
  position: absolute;
  left: calc(50% - 8px);
  bottom: -11px;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  rotate: 45deg;
}
.bubble--shout {
  font-size: clamp(1.1rem, 3vh, 1.5rem);
  background: var(--logo-yellow);
}
.bubble--shout::after {
  background: var(--logo-yellow);
}
.bubble.is-gone {
  opacity: 0;
  transition: opacity 0.3s ease;
}
@keyframes bubble-in {
  from { scale: 0.6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

/* ---------- Walking about: the strip of places along the bottom ---------- */
.study-nav {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(35, 20, 10, 0.82);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.4s ease, translate 0.4s ease;
}
.study-nav::-webkit-scrollbar {
  display: none;
}
.study-nav[hidden] {
  display: none;
}
.study-nav button {
  flex: none;
  padding: 0.3em 0.85em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #f6e3b4;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}
.study-nav button:hover {
  border-color: #c99b4a;
}
.study-nav button[aria-current="true"] {
  color: var(--ink);
  background: #e6b85c;
  border-color: var(--ink);
}
[data-state="focus"] .study-nav {
  opacity: 0;
  translate: -50% 120%;
  pointer-events: none;
}

/* Arrows at the edges, to walk along the room */
.walk {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 64px;
  padding: 0;
  font-size: 0;
  background: rgba(35, 20, 10, 0.6);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.walk::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 4px solid #f6e3b4;
  border-bottom: 4px solid #f6e3b4;
  translate: -30% -50%;
  rotate: 45deg;
}
.walk--right::before {
  translate: -70% -50%;
  rotate: -135deg;
}
.walk--left {
  left: max(8px, env(safe-area-inset-left));
}
.walk--right {
  right: max(8px, env(safe-area-inset-right));
}
.walk:disabled,
[data-state="focus"] .walk {
  opacity: 0;
  pointer-events: none;
}

/* ---------- The panel for whatever you've stepped up to ---------- */
.panel {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(380px, calc(100% - 24px));
  max-height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  background: #f6ecd2;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  animation: panel-in 0.35s var(--ease-out);
}
.panel[hidden] {
  display: none;
}
@keyframes panel-in {
  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: 0 0; }
}
.panel__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px 16px;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.panel__body {
  min-height: 0;
  overflow-y: auto;
  font-size: 0.98rem;
  line-height: 1.4;
}
.panel__body p + p {
  margin-top: 0.5em;
}
.panel__done {
  align-self: flex-end;
  background: var(--white);
}
.panel .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.panel .btn {
  font-size: 0.95rem;
  padding: 0.35em 0.85em;
}
.panel .btn[aria-pressed="true"] {
  background: #e6b85c;
}
.panel .small {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.panel .book-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-style: italic;
}
@media (max-width: 600px) {
  .panel {
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 46%;
  }
  .panel--tall {
    max-height: 66%;
  }
  .panel--tall .chessboard {
    width: min(100%, 260px);
  }
}

/* ---------- Way out, and sound ---------- */
.leave,
.sound {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
}
.leave {
  left: max(12px, env(safe-area-inset-left));
}
.sound {
  right: max(12px, env(safe-area-inset-right));
}
.sound[hidden] {
  display: none;
}
.sound[aria-pressed="false"] {
  background: #d9cfb8;
}
.leave:hover,
.sound:hover {
  background: var(--logo-yellow);
}

.study__noscript {
  position: absolute;
  left: 50%;
  top: max(64px, 8%);
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.5em 1em;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  text-align: center;
}
html.js .study__noscript {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .front__rain,
  .front__puff,
  .front__lamp path,
  .room .rain,
  .room .member__bob,
  .room .flame,
  .room .pendulum,
  .room .gramo__disc,
  .room .candle-glow,
  .room .ember,
  .fire-light {
    animation: none !important;
  }
  .front__art {
    transition: none;
  }
}

/* ---------- Your own cigar, once you've lit one ---------- */
.your-cigar {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px));
  width: 150px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  rotate: -18deg;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.35));
  transition: opacity 0.3s ease;
}
.your-cigar[hidden],
[data-state="focus"] .your-cigar {
  display: none;
}
.your-cigar svg {
  display: block;
  width: 100%;
  height: auto;
}
.your-cigar__ember {
  animation: ember 3s ease-in-out infinite;
}
.your-cigar.is-puffing {
  animation: puff-cigar 0.7s ease;
}
.your-cigar.is-puffing .your-cigar__ember {
  animation: none;
  fill: #ffc04a;
}
@keyframes puff-cigar {
  40% { translate: -24px -14px; scale: 1.08; }
}

/* ---------- The members' book ---------- */
.signed {
  margin: 0 0 12px;
  padding-left: 1.4em;
  font-family: Georgia, "Times New Roman", serif;
}
.signed li + li {
  margin-top: 2px;
}
.sign label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 6px;
}
.sign__row {
  display: flex;
  gap: 8px;
}
.sign input {
  flex: 1;
  min-width: 0;
  padding: 0.4em 0.7em;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  -webkit-user-select: text;
  user-select: text;
}
.panel ol {
  margin: 0;
  padding-left: 1.4em;
}
.panel a.btn {
  line-height: 1.3;
  display: inline-block;
  text-decoration: none;
}

/* ---------- The window, open ---------- */
.room .window__gap {
  display: none;
}
.is-window-open .room .window__gap {
  display: inline;
}
.room .curtain {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.is-window-open .room .curtain--left {
  animation: billow 2.6s ease-in-out infinite;
}
.is-window-open .room .curtain--right {
  animation: billow 2.9s ease-in-out infinite reverse;
}
@keyframes billow {
  0%, 100% { transform: skewX(0) scaleX(1); }
  50% { transform: skewX(-3deg) scaleX(1.06); }
}

/* ---------- The secret door ---------- */
.room .secret-door {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 1.6s cubic-bezier(0.5, 0, 0.3, 1);
}
.is-secret-open .room .secret-door {
  transform: scaleX(0.16) skewY(-12deg);
  pointer-events: none;
}
.room .lever {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.3s ease;
}
.room .lever.is-pulled {
  transform: rotate(-16deg);
}
.room .vault {
  visibility: hidden;
  transition: visibility 0s 1.6s;
}
.is-secret-open .room .vault {
  visibility: visible;
  transition: none;
}
.room .safe__door {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 1s cubic-bezier(0.5, 0, 0.3, 1);
}
.room .safe.is-open .safe__door {
  transform: scaleX(0.12) skewY(10deg);
}
.room .safe__dial {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.08s linear;
}

/* The safe's dial, in the panel */
.dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.dial__svg {
  width: min(180px, 46vw);
  height: auto;
  touch-action: none;
  cursor: grab;
}
.dial__face {
  transition: transform 0.08s linear;
}
.dial__read {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: pre;
}

/* The secret recipe */
.recipe-scroll {
  padding: 12px 16px;
  font-family: Georgia, "Times New Roman", serif;
  background: #efe1bc;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: inset 0 0 18px rgba(122, 84, 30, 0.35);
}
.recipe-scroll__title {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 700;
}
.recipe-scroll ul {
  columns: 2;
  margin: 8px 0;
  padding-left: 1.2em;
}

/* ---------- Chess ---------- */
.chess-name {
  font-family: var(--font-display);
  font-weight: 600;
}
.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 6px auto;
  border: var(--stroke) solid var(--ink);
}
.chessboard .sq {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  font-size: clamp(18px, 6.2vw, 30px);
  line-height: 1;
  border: 0;
  cursor: pointer;
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif;
}
.sq--light {
  background: #ead6ac;
}
.sq--dark {
  background: #a7703a;
}
.sq.is-white {
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 2px #fff;
}
.sq.is-black {
  color: var(--ink);
}
.sq.is-picked {
  box-shadow: inset 0 0 0 3px var(--logo-yellow), inset 0 0 0 5px var(--ink);
}
.sq.is-mate {
  background: var(--logo-yellow);
}
.chess-say {
  min-height: 1.4em;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
}

/* Glows and light never catch a tap meant for what's under them */
.room .candle-glow,
.room .lamp-glow,
.room .fire-floor,
.room .fire-back,
.room .lightning {
  pointer-events: none;
}

/* ---------- The dumbwaiter ---------- */
.room .dumbwaiter__car {
  transform: translateY(110px);
  transition: transform 1.8s cubic-bezier(0.5, 0, 0.3, 1);
}
.room .dumbwaiter__door {
  transition: transform 0.6s ease;
}
.room .dumbwaiter.is-up .dumbwaiter__car {
  transform: none;
}
.room .dumbwaiter.is-up .dumbwaiter__door {
  transform: translateY(-104px);
  transition-delay: 1.6s;
}
.room .supper {
  visibility: hidden;
}
.room .dumbwaiter.is-uncovered .supper {
  visibility: visible;
}
.room .dumbwaiter.is-uncovered .cloche {
  visibility: hidden;
}

/* ---------- The membership card ---------- */
.card-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(12px, env(safe-area-inset-right)) + 118px);
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  color: #f6e3b4;
  background: #1f3a2c;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.card-btn:hover {
  background: #2c5240;
}
@media (max-width: 600px) {
  .card-btn {
    top: calc(max(12px, env(safe-area-inset-top)) + 46px);
    right: max(12px, env(safe-area-inset-right));
  }
}
.card {
  padding: 14px 14px 12px;
  color: #f6e3b4;
  background: #1f3a2c;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px #d9a93a, inset 0 0 0 5px #1f3a2c, inset 0 0 0 6px #d9a93a;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}
.card--life {
  background: #6e4a12;
}
.card__club {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.25em;
}
.card__kind {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e9cf8a;
}
.card__name {
  margin-top: 6px;
  font-style: italic;
}
.card__stamps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.card__stamps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  line-height: 1.15;
  color: #a9b8a8;
}
.card__stamps li.is-got {
  color: #f6e3b4;
}
.card__seal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  border: 2px dashed #6f8a74;
  border-radius: 50%;
}
.is-got .card__seal {
  color: #fff4d0;
  background: #b0281c;
  border: 2px solid #f3c7a0;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 0 0 2px #b0281c;
}

.stamp-toast {
  position: absolute;
  left: 50%;
  top: max(64px, calc(env(safe-area-inset-top) + 56px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  color: var(--ink);
  background: #f6ecd2;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  line-height: 1.2;
  translate: -50% -160%;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.4s var(--ease-spring), opacity 0.3s ease;
}
.stamp-toast.is-in {
  translate: -50% 0;
  opacity: 1;
}
.stamp-toast__seal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  color: #fff4d0;
  background: #b0281c;
  border-radius: 50%;
  font-size: 18px;
}
.stamp-toast .small {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Billiards: the game, over the room ---------- */
.pool {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 40, 18, 0.92), rgba(14, 8, 3, 0.97));
  animation: panel-in 0.35s var(--ease-out);
}
.pool[hidden] {
  display: none;
}
.pool__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 12px 6px;
}
.pool__hud {
  flex: 1;
  min-width: 10em;
  font-family: var(--font-display);
  font-weight: 600;
  color: #f6e3b4;
  white-space: pre-wrap;
}
.pool__btn {
  padding: 0.3em 0.9em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.pool__btn:hover {
  background: var(--logo-yellow);
}
.pool__canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
}
.pool__talk {
  min-height: 1.6em;
  padding: 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--logo-yellow);
  text-align: center;
}
.pool__help {
  padding: 2px 12px max(12px, env(safe-area-inset-bottom));
  font-size: 0.85rem;
  color: #d9c79e;
  text-align: center;
}
.is-pool .study-nav,
.is-pool .walk,
.is-pool .your-cigar {
  display: none;
}

/* ---------- Twenty-one ---------- */
.hands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #1f5c3a;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  color: #f6e3b4;
}
.hand__who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.hand__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 62px;
}
.pcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 42px;
  height: 60px;
  padding: 3px 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: #fbf8ef;
  border: 2px solid var(--ink);
  border-radius: 6px;
  animation: deal 0.3s var(--ease-out);
}
.pcard--red {
  color: #b0281c;
}
.pcard span:last-child {
  align-self: flex-end;
  font-size: 1.3rem;
}
.pcard--back {
  background: repeating-linear-gradient(45deg, #7a1f1a 0 5px, #9a2f22 5px 10px);
}
.pcard--back span {
  visibility: hidden;
}
@keyframes deal {
  from { translate: 40px -20px; opacity: 0; rotate: 10deg; }
}
.twentyone-say {
  min-height: 1.4em;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
}
.panel .btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* ---------- The club photograph ---------- */
.room .club-photo {
  visibility: hidden;
}
.has-photo .room .club-photo {
  visibility: visible;
}
.flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fffbea;
  pointer-events: none;
  animation: flashbulb 1.4s ease-out forwards;
}
@keyframes flashbulb {
  0% { opacity: 0; }
  4% { opacity: 1; }
  100% { opacity: 0; }
}
.photo-print {
  padding: 12px 12px 8px;
  background: #efe3c6;
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(35, 31, 32, 0.4);
  rotate: -1.5deg;
}
.photo-print__img {
  position: relative;
  aspect-ratio: 600 / 320;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #a88a5c, #5e4426);
  border: 2px solid #3b2a10;
}
.photo-print__img svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: sepia(1) contrast(1.05) brightness(0.95);
}
.photo-print__img .is-blurred {
  filter: blur(2.5px);
}
.photo-print__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(40, 24, 8, 0.55));
}
.photo-print__cap {
  margin-top: 6px;
  font-family: var(--font-script);
  font-size: 1.25rem;
  text-align: center;
  color: #3b2a10;
}

/* ---------- Roasting a potato ---------- */
.roast {
  display: block;
  width: min(100%, 260px);
  margin: 4px auto 0;
  overflow: visible;
}
.roast__flames {
  opacity: 0;
  transition: opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.roast.is-in .roast__flames {
  opacity: 1;
  animation: flame 0.4s ease-in-out infinite alternate;
}
.roast__spud ellipse {
  transition: fill 0.2s linear;
}
.roast.is-in .roast__spud {
  animation: shake 0.12s linear infinite;
}
.roast__say {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-align: center;
}
.panel [hidden] {
  display: none !important;
}

/* ---------- The telephone ---------- */
.room .phone {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.room .phone.is-ringing {
  animation: phone-ring 0.09s linear infinite;
}
@keyframes phone-ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}
.room .phone.is-off .phone__ear {
  visibility: hidden;
}

/* The first time in: how to get about */
.study-hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px);
  max-width: calc(100% - 32px);
  padding: 0.45em 1em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  background: var(--logo-yellow);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  text-align: center;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, translate 0.4s var(--ease-spring);
}
.study-hint.is-in {
  translate: -50% 0;
  opacity: 1;
}

/* The minutes, in the members' book */
.minutes__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.minutes {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
}
.minutes li + li {
  margin-top: 4px;
}
.minutes__time {
  display: inline-block;
  min-width: 4.4em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Thunder makes the lights flicker */
.is-lightning .room .candle-glow {
  animation: lights-flicker 0.9s steps(1) 1;
}
@keyframes lights-flicker {
  0% { opacity: 1; }
  10% { opacity: 0.2; }
  20% { opacity: 0.9; }
  30% { opacity: 0.3; }
  45% { opacity: 1; }
}

/* ---------- Quiz night ---------- */
.quiz__q {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
}
.quiz__note {
  min-height: 2.6em;
  margin-top: 8px;
}
.panel .btn.is-right,
.panel .btn.is-right:disabled {
  opacity: 1;
  background: #97d700;
}
.panel .btn.is-wrong,
.panel .btn.is-wrong:disabled {
  opacity: 1;
  background: #ff8a7a;
}
.panel .btn--white {
  background: var(--white);
}

/* Picture tiles: the drinks in the globe bar, the cigars in the humidor */
.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.picks--drinks {
  grid-template-columns: repeat(3, 1fr);
}
/* the cigars one to a row, so their lengths show */
.picks--cigars {
  grid-template-columns: 1fr;
  gap: 6px;
}
.picks--cigars .pick {
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  text-align: left;
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  background: #fffaf0;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.pick:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--ink);
}
.pick:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: 2px;
}
.pick svg {
  width: 100%;
  height: 84px;
  overflow: visible;
}
.picks--cigars .pick svg {
  flex: none;
  width: 62%;
  height: 46px;
}
.pick.is-chosen {
  background: #ffe9a6;
}
@media (hover: hover) {
  .pick:hover {
    background: #fff3d0;
  }
}
/* a drink is poured: the glass fills from the bottom */
.pick__pour {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.9s ease-out 0.15s;
}
.pick.is-chosen .pick__pour {
  transform: scaleY(1);
}
/* a cigar is chosen: snipped, then lit, and it smokes */
.pick__cap {
  transition: translate 0.3s ease, opacity 0.3s ease;
}
.pick.is-chosen .pick__cap {
  translate: -8px 4px;
  opacity: 0;
}
.pick__ember,
.pick__smoke {
  opacity: 0;
  transition: opacity 0.4s ease 0.6s;
}
.pick.is-chosen .pick__ember {
  opacity: 1;
}
.pick.is-chosen .pick__smoke {
  opacity: 0.8;
}

@media (max-width: 600px) {
  /* on a phone the room's a narrow slice: the foreground would hide it */
  .fg {
    display: none;
  }
  .study-hint {
    border-radius: var(--radius-md);
    width: max-content;
  }
}

/* ---------- The cellar ---------- */
.blackout {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.blackout.is-on {
  opacity: 1;
}
.is-cellar .study-nav,
.is-cellar .fg {
  display: none;
}
.up-btn {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  padding: 0.4em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.up-btn[hidden],
[data-state="focus"] .up-btn {
  display: none;
}
.up-btn:hover {
  background: var(--logo-yellow);
}
.room .barrel__pour {
  visibility: hidden;
}
.room .barrel.is-pouring .barrel__pour {
  visibility: visible;
}
.room .mouse {
  transform-box: fill-box;
}
.room .mouse.is-running {
  animation: mouse-run 1.6s ease-in-out;
}
@keyframes mouse-run {
  0% { transform: translateX(0); }
  30% { transform: translateX(-260px); }
  45% { transform: translateX(-260px) scaleX(-1); }
  80% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0); }
}
.is-cellar-dark .room .cellar-candle-glow,
.is-cellar-dark .room .cellar-flame {
  visibility: hidden;
}
.is-cellar-dark .room .cellar-shade {
  opacity: 1;
}
.room .cellar-shade {
  transition: opacity 0.4s ease;
}

@media (max-width: 600px) {
  .stamp-toast {
    top: calc(max(12px, env(safe-area-inset-top)) + 96px);
    max-width: calc(100% - 24px);
  }
}

/* Pepper slips away and turns up somewhere else */
.room .pepper-pos {
  transition: opacity 0.6s ease;
}

/* While Truffle tells the story, the lights go down a little */
.room__shade {
  transition: background-color 1.5s ease;
}
.is-story .room__shade {
  background-color: rgba(10, 5, 2, 0.35);
}

/* A phone on its side: everything a little smaller */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .study-nav {
    bottom: max(6px, env(safe-area-inset-bottom));
    padding: 3px;
  }
  .study-nav button {
    padding: 0.2em 0.65em;
    font-size: 0.82rem;
  }
  .leave,
  .sound,
  .card-btn {
    top: max(8px, env(safe-area-inset-top));
    padding: 0.2em 0.7em;
    font-size: 0.82rem;
  }
  .card-btn {
    right: calc(max(12px, env(safe-area-inset-right)) + 96px);
  }
  .walk {
    width: 36px;
    height: 50px;
  }
  .study-hint {
    bottom: 52px;
    font-size: 0.85rem;
  }
  .panel {
    max-height: calc(100% - 56px);
    bottom: 8px;
  }
  .bubble {
    font-size: 0.85rem;
  }
}
[data-state="focus"] .study-hint {
  opacity: 0;
}

/* ---------- What you're wearing, in the corner ---------- */
.your-dress {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 58px);
  width: 76px;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.35));
  text-align: center;
}
.your-dress[hidden],
[data-state="focus"] .your-dress,
.is-pool .your-dress {
  display: none;
}
.your-dress svg {
  display: block;
  width: 100%;
  height: auto;
  background: #f6ecd2;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
}
.your-dress span {
  display: inline-block;
  margin-top: -10px;
  padding: 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  position: relative;
}
@media (max-width: 600px), (max-height: 520px) {
  .your-dress {
    width: 54px;
  }
}

/* ---------- The piano ---------- */
.keys {
  --bw: 4.2%;
  position: relative;
  height: 120px;
  margin: 6px 0 10px;
  touch-action: none;
}
.key {
  position: absolute;
  top: 0;
  padding: 0;
  border: 2px solid var(--ink);
  cursor: pointer;
}
.key--white {
  height: 100%;
  background: #fbf8ef;
  border-radius: 0 0 6px 6px;
}
.key--black {
  z-index: 1;
  width: var(--bw);
  height: 62%;
  background: #1b1b1b;
  border-radius: 0 0 4px 4px;
}
.key.is-down,
.key:active {
  background: var(--logo-yellow);
}

/* The cab outside, crossing the window */
.room .cab__body {
  visibility: hidden;
}
.room .cab__body.is-passing {
  visibility: visible;
  animation: cab 6.5s linear forwards;
}
@keyframes cab {
  from { transform: translateX(0); }
  to { transform: translateX(860px); }
}

/* The debating society */
.motion {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.3;
}

/* Only the area you're in is there at all */
.room .area--cellar,
.is-cellar .room .area--room {
  visibility: hidden;
}
.is-cellar .room .area--cellar {
  visibility: visible;
}

.debate {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}
.debate li {
  margin-top: 4px;
  animation: deal 0.3s var(--ease-out);
}

/* Stepped up to something with nothing to show but itself (the rules) */
.back-btn {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: none;
  padding: 0.4em 1.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.is-zoomed[data-state="focus"] .back-btn {
  display: block;
}
.back-btn:hover {
  background: var(--logo-yellow);
}