@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders-display-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- colours: a sunny deli counter, and the same counter late at night ---------- */

:root {
  --wall: #f6eedd;
  --wall-2: #efe2c6;
  --ink: #1d1a17;
  --muted: #5b4f45;
  --line: rgba(29, 26, 23, 0.16);
  --grout: rgba(29, 26, 23, 0.075);
  --tomato: #e0371f;
  --tomato-text: #c22d16;
  --action: #d4321a;
  --action-edge: #9d200c;
  --action-ink: #ffffff;
  --amber: #ffcf4a;
  --board: #1d1a17;
  --green: #2f9e5b;
  --card: #fff8e9;
  --card-2: #f6ead0;
  --card-ink: #1d1a17;
  --card-red: #ad2712;
  --counter-top: #e4d5b6;
  --counter-top-2: #d3c19c;
  --check-a: #1d1a17;
  --check-b: #f6eedd;
  --shadow: rgba(52, 30, 12, 0.32);
  --glow: 0;
  --chip: rgba(255, 255, 255, 0.6);
  --play-bg: #fbe6c2;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #15110f;
    --wall-2: #1d1714;
    --ink: #f6eedd;
    --muted: #cbbca5;
    --line: rgba(246, 238, 221, 0.15);
    --grout: rgba(246, 238, 221, 0.045);
    --tomato-text: #ff6a4d;
    --action: #ff6a4d;
    --action-edge: #b8361d;
    --action-ink: #1d1a17;
    --card: #f7ecd3;
    --card-2: #e9dab9;
    --counter-top: #3a2f27;
    --counter-top-2: #2a221d;
    --check-a: #0c0a09;
    --check-b: #cdbf9f;
    --shadow: rgba(0, 0, 0, 0.6);
    --glow: 1;
    --chip: rgba(255, 255, 255, 0.05);
    --play-bg: #1f1915;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --wall: #15110f;
  --wall-2: #1d1714;
  --ink: #f6eedd;
  --muted: #cbbca5;
  --line: rgba(246, 238, 221, 0.15);
  --grout: rgba(246, 238, 221, 0.045);
  --tomato-text: #ff6a4d;
  --action: #ff6a4d;
  --action-edge: #b8361d;
  --action-ink: #1d1a17;
  --card: #f7ecd3;
  --card-2: #e9dab9;
  --counter-top: #3a2f27;
  --counter-top-2: #2a221d;
  --check-a: #0c0a09;
  --check-b: #cdbf9f;
  --shadow: rgba(0, 0, 0, 0.6);
  --glow: 1;
  --chip: rgba(255, 255, 255, 0.05);
  --play-bg: #1f1915;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wall);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  overflow-x: clip;
}

main {
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-synthesis: none;
}

/* ---------- top bar ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font: 900 1.65rem/1 var(--display);
  letter-spacing: 0.005em;
  text-decoration: none;
}

/* a tiny red ticket, torn top and bottom */
.mark {
  width: 0.62em;
  height: 0.86em;
  background: radial-gradient(circle at 50% 50%, var(--wall) 0 0.09em, transparent 0.1em) 0 0 / 100% 100%, var(--tomato);
  rotate: -8deg;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 0.155em 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 0.155em 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 0.155em 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 0.155em 51% repeat-x;
}

/* the theme switch: a little cream ticket stub, notched at both ends; the chosen icon is punched
   through in tomato. It is paper, so it stays cream in both themes. */
.theme {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 9px;
  border-radius: 4px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%), linear-gradient(#fff8e9, #f3e5c6);
  box-shadow: inset 0 0 0 1px rgba(29, 26, 23, 0.22);
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) right / 51% 100% no-repeat;
  rotate: -1.5deg;
}

.theme-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b4f45;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.theme-btn + .theme-btn::before {
  /* the perforation between the icons */
  content: "";
  position: absolute;
  left: -4px;
  top: 2px;
  bottom: 2px;
  border-left: 1.5px dashed rgba(29, 26, 23, 0.3);
}

.theme-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-btn:hover {
  color: #c42e17;
}

/* chosen from the root's theme, so it is right before app.js runs */
:root:not([data-theme]) .theme-btn[data-theme-value="system"],
:root[data-theme="light"] .theme-btn[data-theme-value="light"],
:root[data-theme="dark"] .theme-btn[data-theme-value="dark"] {
  background: #c42e17;
  color: #fff8e9;
  box-shadow: inset 0 1.5px 2px rgba(60, 6, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.theme-btn:focus-visible {
  outline: 2px solid #1d1a17;
  outline-offset: 1px;
  border-radius: 50%;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 36px;
}

h1 {
  font-size: clamp(3.05rem, 14.2vw, 8.4rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 .accent {
  color: var(--tomato-text);
}

.lede {
  margin: 12px 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
}

/* ---------- the deli counter scene (all sizes in em of --u) ---------- */

.art {
  display: flex;
  justify-content: center;
}

.scene {
  --u: calc(min(100vw - 32px, 520px) / 34);
  position: relative;
  width: 34em;
  height: 30em;
  font-size: var(--u);
  isolation: isolate;
}

.tiles {
  position: absolute;
  inset: -1em -1em 5em;
  background-image:
    linear-gradient(var(--grout) 0.09em, transparent 0.09em),
    linear-gradient(90deg, var(--grout) 0.09em, transparent 0.09em);
  background-size: 3.4em 3.4em;
  background-position: 0.4em 0.6em;
  -webkit-mask: radial-gradient(70% 70% at 55% 45%, #000 30%, transparent 78%);
  mask: radial-gradient(70% 70% at 55% 45%, #000 30%, transparent 78%);
  z-index: -2;
}

.scene::before {
  /* the board's glow on the wall at night */
  content: "";
  position: absolute;
  right: -2em;
  top: -1em;
  width: 22em;
  height: 18em;
  background: radial-gradient(closest-side, rgba(255, 190, 70, 0.22), transparent);
  opacity: var(--glow);
  z-index: -1;
  pointer-events: none;
}

/* NOW SERVING board */

.board {
  position: absolute;
  left: 17.4em;
  top: 0;
  width: 16.6em;
}

.wire {
  position: absolute;
  top: -2em;
  width: 0.14em;
  height: 4.7em;
  background: linear-gradient(90deg, #6d6760, #c9c3ba, #6d6760);
}

.wire--l {
  left: 2.6em;
}

.wire--r {
  right: 2.6em;
}

.wire::after {
  content: "";
  position: absolute;
  bottom: -0.3em;
  left: -0.28em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e9e4dc, #7a746c);
}

.board-face {
  position: relative;
  margin-top: 2.6em;
  padding: 0.85em 1em 1.05em;
  border-radius: 0.7em;
  background: linear-gradient(#2a2420, #171311 70%);
  box-shadow:
    inset 0 0 0 0.22em #0d0b0a,
    inset 0 0.35em 0.2em rgba(255, 255, 255, 0.07),
    0 1.3em 1.6em -0.7em var(--shadow),
    0 0 calc(var(--glow) * 3.5em) rgba(255, 180, 60, 0.22);
}

.board-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  color: var(--amber);
  font: 800 1.2em/1 var(--display);
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-shadow: 0 0 calc(var(--glow) * 0.5em) rgba(255, 190, 60, 0.8);
}

.bell {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #6b2418;
  box-shadow: inset 0 -0.08em 0.1em rgba(0, 0, 0, 0.5);
}

.board.is-calling .bell {
  background: #ff5a3c;
  box-shadow: 0 0 0.6em #ff5a3c, inset 0 0.06em 0.08em rgba(255, 255, 255, 0.6);
}

.flaps {
  display: flex;
  justify-content: center;
  gap: 0.28em;
}

.flap {
  --flap-top: linear-gradient(#3b332d, #2c2521);
  --flap-bottom: linear-gradient(#2a231f, #201b18);
  --flap-ink: var(--amber);
  position: relative;
  display: block;
  width: 0.62em;
  height: 1.14em;
  font: 800 4.6em/1 var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--flap-ink);
  perspective: 3em;
}

.half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}

.half.top {
  top: 0;
  border-radius: 0.07em 0.07em 0 0;
  background: var(--flap-top);
  transform-origin: 50% 100%;
}

.half.bottom {
  bottom: 0;
  border-radius: 0 0 0.07em 0.07em;
  background: var(--flap-bottom);
  transform-origin: 50% 0;
}

.half b {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.14em;
  line-height: 1.14em;
  text-align: center;
  font-weight: inherit;
  text-shadow: 0 0 calc(var(--glow) * 0.18em) rgba(255, 190, 60, 0.75);
}

.half.top b {
  top: 0;
}

.half.bottom b {
  bottom: 0;
}

.flap::after {
  /* the hinge, with a pin at each side */
  content: "";
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  top: calc(50% - 0.012em);
  height: 0.024em;
  background: #0b0908;
  box-shadow: 0 0.012em 0 rgba(255, 255, 255, 0.06);
  z-index: 3;
}

.flap .leaf {
  z-index: 2;
}

/* the dispenser */

.dispenser {
  position: absolute;
  left: 0.6em;
  top: 1.4em;
  width: 15em;
  height: 22.8em;
}

.pole {
  position: absolute;
  left: 7.05em;
  top: 12em;
  width: 1.1em;
  height: 10.4em;
  background: linear-gradient(90deg, #7d7973, #f3f1ed 35%, #b8b3ab 62%, #6e6a64);
}

.base {
  position: absolute;
  left: 4.1em;
  bottom: -0.2em;
  width: 7em;
  height: 1.5em;
  border-radius: 50%;
  background: radial-gradient(60% 70% at 45% 35%, #f4f1ec, #a19b92 60%, #5f5a54);
  box-shadow: 0 0.4em 0.6em -0.2em var(--shadow);
}

.body {
  position: absolute;
  left: 0.4em;
  top: 0;
  width: 14.2em;
  height: 12.6em;
  border-radius: 7.1em 7.1em 1.8em 1.8em / 6.6em 6.6em 1.8em 1.8em;
  background:
    radial-gradient(55% 40% at 30% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
    radial-gradient(130% 95% at 45% 8%, #f5553a 0%, var(--tomato) 42%, #b9240e 82%, #8a1906 100%);
  box-shadow:
    inset -0.9em -1.1em 1.6em rgba(70, 8, 0, 0.35),
    inset 0.5em 0.4em 1em rgba(255, 170, 140, 0.4),
    0 1.4em 1.8em -0.8em var(--shadow);
  transform-origin: 50% 100%;
}

.cap {
  position: absolute;
  left: 5.6em;
  top: -0.9em;
  width: 3em;
  height: 1.5em;
  border-radius: 1.5em 1.5em 0.3em 0.3em;
  background: radial-gradient(70% 90% at 40% 30%, #ffffff, #b6b0a7 60%, #6c665f);
  z-index: -1;
}

.gloss {
  position: absolute;
  left: 2em;
  top: 1.3em;
  width: 4.2em;
  height: 2.4em;
  border-radius: 50%;
  border-top: 0.42em solid rgba(255, 255, 255, 0.75);
  rotate: -24deg;
  filter: blur(0.08em);
}

.plate {
  position: absolute;
  left: calc(3em / 1.55);
  top: calc(3.7em / 1.55);
  width: calc(8.2em / 1.55);
  padding: 0.36em 0 0.4em;
  border-radius: 0.4em;
  background: linear-gradient(#fffaf0, #f3e6c9);
  box-shadow: inset 0 0 0 0.1em rgba(29, 26, 23, 0.85), 0 0.13em 0.2em rgba(70, 8, 0, 0.35);
  color: #1d1a17;
  display: grid;
  justify-items: center;
  font: 900 1.55em/0.92 var(--display);
  letter-spacing: 0.06em;
}

.mouth {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 10.3em;
  height: 1.05em;
  border-radius: 0.5em;
  background: linear-gradient(#060505, #2c2622);
  box-shadow: inset 0 0.25em 0.3em #000, 0 0.3em 0 -0.05em #f0ece5, 0 0.42em 0 -0.05em #8b857d;
}

/* the counter */

.counter {
  position: absolute;
  left: -2em;
  right: -2em;
  bottom: 0;
  height: 6.4em;
  z-index: -1;
}

.counter-top {
  position: absolute;
  inset: 0 0 auto;
  height: 3.4em;
  background: linear-gradient(var(--counter-top-2), var(--counter-top) 40%);
  border-bottom: 0.5em solid transparent;
  border-image: linear-gradient(#f6f3ee, #9d978f) 1;
  border-radius: 0.3em 0.3em 0 0;
}

.counter-front {
  position: absolute;
  inset: 3.9em 0 0;
  background: repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 2.5em 2.5em;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.counter-top {
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* where the tickets come out: everything above the slot is hidden in the dispenser */

.chute {
  position: absolute;
  inset: 12.25em 0 0;
  clip-path: inset(0 -8em -8em -8em);
  z-index: 2;
}

/* ---------- tickets: cream card, torn top and bottom ---------- */

.ticket {
  position: absolute;
  left: 2.3em;
  top: -0.5em;
  width: 11.6em;
  height: 6.4em;
  filter: drop-shadow(0 0.25em 0.3em var(--shadow));
  transform-origin: 50% 50%;
  will-change: transform;
}

.tk-card {
  --z: 0.62em;
  position: absolute;
  inset: 0;
  display: flex;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%),
    linear-gradient(var(--card), var(--card-2));
  color: var(--card-ink);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--z) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) 51% repeat-x;
}

.tk-stub {
  position: relative;
  flex: 0 0 2.2em;
  display: grid;
  place-items: center;
  border-right: 0.12em dashed rgba(29, 26, 23, 0.3);
}

.tk-link {
  writing-mode: vertical-rl;
  rotate: 180deg;
  color: var(--card-red);
  font: 700 0.86em/1 var(--text);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tk-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.3em 0 0.2em;
}

.tk-no {
  align-self: flex-start;
  margin: 0 0 -0.1em 0.55em;
  color: var(--card-red);
  font: 800 1.15em/1 var(--display);
  letter-spacing: 0.05em;
}

.tk-num {
  display: flex;
  font: 900 3.9em/1 var(--display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  color: var(--card-ink);
}

/* a ticket lying on the counter (spots are set by app.js; these are the still ones) */

.ticket.is-lying {
  transform: translate(12.6em, 10.4em) perspective(30em) rotateX(58deg) rotate(-9deg) scale(1);
}

/* the play's ticket, once torn: dropped into view, big and readable */

.ticket.is-yours.is-out {
  z-index: 3;
}

.tk-num .flap {
  --flap-top: var(--card);
  --flap-bottom: var(--card-2);
  --flap-ink: var(--card-ink);
  font: inherit;
  width: 0.5em;
  height: 1.06em;
  perspective: 2.4em;
}

.tk-num .flap .half b {
  height: 1.06em;
  line-height: 1.06em;
  text-shadow: none;
}

.tk-num .flap::after {
  display: none;
}

.tk-num .half.top {
  background: linear-gradient(var(--card), color-mix(in srgb, var(--card), var(--card-2) 50%));
}

.tk-num .half.bottom {
  background: linear-gradient(color-mix(in srgb, var(--card), var(--card-2) 50%), var(--card-2));
}

.tk-up {
  position: absolute;
  right: -0.7em;
  top: -1.1em;
  padding: 0.35em 0.6em 0.4em 0.5em;
  border-radius: 0.4em;
  background: var(--green);
  color: #10140f;
  font: 800 1.3em/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  rotate: 8deg;
  box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.25);
  opacity: 0;
  scale: 0.4;
}

.tk-up::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.3em;
  border-inline: 0.32em solid transparent;
  border-bottom: 0.46em solid currentColor;
  vertical-align: 0.06em;
}

.ticket.is-up .tk-up {
  opacity: 1;
  scale: 1;
}

/* ---------- play ---------- */

.play {
  position: relative;
  padding-block: 44px 52px;
  background: var(--play-bg);
}

.play::before {
  /* a strip of deli floor */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background: repeating-conic-gradient(var(--check-a) 0 25%, var(--check-b) 0 50%) 0 0 / 14px 14px;
}

.play-grid {
  display: grid;
  gap: 18px;
}

.play-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-top: 10px;
}

h2 {
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.55em 1.2em 0.6em;
  border: 0;
  border-radius: 0.6em;
  background: var(--action);
  color: var(--action-ink);
  font: 800 1.35rem/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.22em 0 var(--action-edge), 0 0.5em 0.9em -0.3em var(--shadow);
  transition: translate 0.12s, box-shadow 0.12s;
}

.btn:hover {
  translate: 0 -1px;
  box-shadow: 0 calc(0.22em + 1px) 0 var(--action-edge), 0 0.6em 1em -0.3em var(--shadow);
}

.btn:active,
.btn[aria-disabled="true"] {
  translate: 0 0.16em;
  box-shadow: 0 0.06em 0 var(--action-edge), 0 0.2em 0.4em -0.2em var(--shadow);
}

.btn[aria-disabled="true"] {
  cursor: default;
}

.btn--big {
  font-size: 1.7rem;
  padding: 0.5em 1.3em 0.55em;
}

.btn--line {
  background: var(--wall);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 0 0.22em 0 var(--ink);
}

.btn--line:hover {
  box-shadow: inset 0 0 0 2px var(--ink), 0 calc(0.22em + 1px) 0 var(--ink);
}

.btn--line:active,
.btn--line[aria-disabled="true"] {
  box-shadow: inset 0 0 0 2px var(--ink), 0 0.06em 0 var(--ink);
}

.btn--line .inv-done,
.btn--line.is-done .inv-ask {
  display: none;
}

.btn--line.is-done .inv-done {
  display: inline;
}

.btn--line.is-done::before {
  content: "";
  width: 0.7em;
  height: 0.38em;
  margin-top: -0.2em;
  border-left: 0.14em solid currentColor;
  border-bottom: 0.14em solid currentColor;
  rotate: -45deg;
}

.art--play {
  margin-top: 4px;
}

.scene--play {
  height: 30em;
}

.scene--play .board {
  left: 19.6em;
  width: 14.4em;
}

.scene--play .board .flap {
  font-size: 3.9em;
}

.scene--play .board-label {
  font-size: 1.05em;
}

.scene--play .dispenser {
  font-size: 0.8em;
  left: 0.6em;
  top: 1.6em;
  height: 29.4em;
}

.scene--play .pole {
  height: 17.6em;
}

.scene--play .chute {
  inset: calc(1.6em + 10.95em * 0.8) 0 0;
}

.scene--play .ticket {
  font-size: 0.8em;
  left: calc(2.9em / 0.8);
  top: -0.5em;
}

.scene--play .ticket.is-yours.is-out {
  transform: translate(10.1em, 14.2em) perspective(30em) rotateX(0deg) rotate(-4deg) scale(1.62);
}

.friends {
  position: absolute;
  right: 0;
  top: 12.2em;
  width: 10.4em;
  display: grid;
  gap: 0.6em;
  z-index: 4;
}

.friend {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  overflow: hidden;
  border-radius: 0.7em;
  background: var(--wall);
  box-shadow: 0 0 0 0.12em var(--line), 0 0.4em 0.7em -0.3em var(--shadow);
  opacity: 0;
  translate: 4em 0;
}

.friend.is-in {
  opacity: 1;
  translate: 0 0;
}

.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: #c42e17;
  color: #fff;
  font: 900 1.25em/1 var(--display);
}

.friend:nth-child(2) .avatar {
  background: #2f6fd6;
}

.friend:nth-child(3) .avatar {
  background: #8a4fd0;
}

.friend-text {
  display: grid;
  gap: 0.1em;
  min-width: 0;
}

.friend-name {
  font: 700 1.2em/1.1 var(--text);
}

.friend-sub {
  color: var(--muted);
  font: 500 0.98em/1.2 var(--text);
  white-space: nowrap;
}

.play-status {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.play-line {
  margin: 0;
  min-height: 1.1em;
  font: 900 clamp(1.9rem, 8vw, 2.6rem)/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.play-line b {
  color: var(--tomato-text);
  font-weight: inherit;
}

.play-note {
  margin: 0;
  max-width: 40ch;
  color: var(--muted);
  font-size: 0.98rem;
}

.js .play-note {
  display: none;
}

.js .play-note.is-shown {
  display: block;
}

/* ---------- steps ---------- */

.steps {
  padding-block: 48px 28px;
}

.step-list {
  display: grid;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 9.6rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  align-items: start;
}

.step h3 {
  grid-column: 2;
  align-self: end;
  margin-top: 10px;
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.step p {
  grid-column: 2;
  margin: 6px 0 0;
  color: var(--muted);
}

.mini {
  grid-row: 1 / span 2;
  position: relative;
  height: 7.4rem;
  font-size: 0.72rem;
}

.mini-mouth {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.3em;
  border-radius: 1.6em 1.6em 0.7em 0.7em;
  background:
    radial-gradient(40% 70% at 26% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
    radial-gradient(130% 160% at 45% 0%, #f5553a, var(--tomato) 48%, #a51f0b);
  box-shadow:
    inset -0.4em -0.4em 0.7em rgba(70, 8, 0, 0.35),
    0 0.6em 0.9em -0.5em var(--shadow);
  z-index: 2;
}

.mini-mouth::after {
  content: "";
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.38em;
  height: 0.7em;
  border-radius: 0.4em;
  background: linear-gradient(#060505, #2c2622);
  box-shadow: inset 0 0.18em 0.2em #000, 0 0.22em 0 -0.04em #f0ece5, 0 0.32em 0 -0.04em #8b857d;
}

.mini .ticket {
  left: 1.3em;
  top: 1.5em;
  width: 10.8em;
  height: 6em;
}

.mini .tk-num {
  font-size: 3.6em;
}

.mini .ticket.is-torn {
  transform: translate(0.4em, 2.6em) rotate(-5deg);
}

.step:nth-child(2) .mini .ticket.is-torn {
  transform: translate(0.6em, 2.4em) rotate(4deg);
}

.step:nth-child(3) .mini .ticket.is-torn {
  transform: translate(0.2em, 2.7em) rotate(-2deg);
}

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

.foot {
  padding-block: 28px 40px;
  text-align: center;
}

.foot-line {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}

.foot-line a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 0.18em;
}

/* ---------- 404 ---------- */

.nf {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding-block: 6px 40px;
  text-align: center;
}

.nf h1 {
  font-size: clamp(2.6rem, 11vw, 5.6rem);
  max-width: 12ch;
}

.scene--nf .ticket.is-lying {
  transform: translate(11em, 9.2em) perspective(30em) rotateX(50deg) rotate(-7deg) scale(1.08);
}

.art--nf {
  padding-top: 40px;
}

.motion .scene--nf .ticket.is-lying:not(.is-tearing) {
  transform: translate(0em, -6.6em) perspective(30em) rotateX(0deg) rotate(0deg) scale(1);
}

/* ---------- wider screens ---------- */

@media (min-width: 640px) {
  .wrap {
    padding-inline: 32px;
  }

  .scene {
    --u: calc(min(100vw - 64px, 520px) / 34);
  }

  .step-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .step {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-content: start;
  }

  .step h3,
  .step p {
    grid-column: 1;
  }

  .mini {
    grid-row: auto;
    height: 9.6rem;
    width: 12.4em;
    font-size: 0.88rem;
  }
}

@media (min-width: 960px) {
  .bar {
    padding-block: 18px;
  }

  .hero {
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
    gap: 40px;
    min-height: min(calc(100vh - 130px), 720px);
    padding-bottom: 56px;
  }

  h1 {
    font-size: clamp(5rem, 8.6vw, 8.6rem);
  }

  .lede {
    margin-top: 26px;
    font-size: 1.25rem;
  }

  .scene {
    --u: 15.6px;
  }

  .play {
    padding-block: 72px 80px;
  }

  .play-grid {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 28px;
  }

  .play-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    gap: 26px;
  }

  .art--play {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .scene--play {
    --u: 16px;
  }

  .play-status {
    grid-column: 1;
    grid-row: 2;
    align-content: start;
  }

  .play-line {
    font-size: 3rem;
  }

  .steps {
    padding-block: 80px 40px;
  }
}

@media (min-width: 960px) {
  .scene.scene--nf {
    --u: 12.6px;
  }

  .nf h1 {
    font-size: 4.8rem;
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .scene {
    --u: 16.4px;
  }
}