/* /dave: game night, in the app's own colors. DESIGN.md §8. Dave's rules: no boxes, no pills, no letter-spaced caps. */

html { background: var(--night); overflow-x: clip; }
body {
  background: var(--night);
  color: var(--napkin);
  font-family: var(--dave-ui);
  font-weight: 500;
  overflow-x: clip;
  --focus: var(--lemon);
}
::selection { background: var(--lemon); color: var(--dave-ink); }
html:not(.js) .js-only { display: none !important; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }

.skip { font-family: var(--dave-ui); font-style: normal; background: var(--napkin); color: var(--dave-ink); }

/* Squiggle underlines under the key words of a headline. */
.squig { position: relative; white-space: nowrap; }
.squig::after {
  content: "";
  position: absolute;
  left: -.02em;
  right: -.02em;
  bottom: .05em;
  height: .19em;
  background: var(--sq, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4.2C2.5 1 7.5 1 10 4.2S17.5 7.4 20 4.2' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4.2C2.5 1 7.5 1 10 4.2S17.5 7.4 20 4.2' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
  pointer-events: none;
}
.squig--olive { --sq: var(--olive); }
.squig--pimento { --sq: var(--pimento); }

/* ---------- The jar: eight layers, one for each game, with Dave riding the top ---------- */

.jar {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  isolation: isolate;
  overflow: hidden;
}
.liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.dave-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(16px, env(safe-area-inset-top)) 20px 0;
}
.dave-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 900 20px/1 var(--dave-display);
}
.dave-brand img { width: 32px; height: 32px; border-radius: 22.5%; }
.dave-top-links { display: flex; gap: 20px; font-size: 16px; font-weight: 600; }
.jar-copy {
  position: relative;
  z-index: 3;
  padding: 7svh 20px 0;
  max-width: 900px;
}
.jar-head {
  font: 900 clamp(42px, 6.6vw, 100px)/1.04 var(--dave-display);
  letter-spacing: -0.01em;
  color: var(--napkin);
  max-width: 11em;
}
.jar-line {
  margin-top: 22px;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.4;
  max-width: 30em;
}
.jar-under {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.4;
  color: rgb(255 244 226 / .78);
}
.jar-controls {
  margin-top: 18px;
  display: flex;
  gap: 22px;
}
.text-btn {
  min-height: 32px;
  font: 600 15px/1 var(--dave-ui);
  color: rgb(255 244 226 / .82);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
}
.text-btn:hover { color: var(--napkin); }
.text-btn[hidden] { display: none; }

.jar-fill {
  position: relative;
  flex: 1 0 46svh;
  /* Without JavaScript: the eight layers, still. The canvas draws over this. */
  background: linear-gradient(to bottom,
    transparent 0 32%,
    var(--pimento) 32% 40.5%,
    var(--lemon) 40.5% 49%,
    var(--plum) 49% 57.5%,
    var(--sky) 57.5% 66%,
    var(--cobalt) 66% 74.5%,
    var(--guava) 74.5% 83%,
    var(--peel) 83% 91.5%,
    var(--mint) 91.5% 100%);
}
.has-liquid .jar-fill { background: none; }
.floater {
  position: absolute;
  z-index: 1;
  left: 64%;
  top: 32%;
  height: 22vh;
  min-height: 130px;
  aspect-ratio: 1267 / 1270;
  translate: 0 -68%;
  rotate: -4deg;
  will-change: transform;
}
.has-liquid .floater { translate: none; rotate: none; }
.floater img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) {
  .dave-top { padding: 22px 6vw 0; }
  .jar-copy { padding: 4.5svh 6vw 0; max-width: 1100px; }
  .jar-head { font-size: clamp(44px, 4.9vw, 84px); max-width: 15em; }
  .jar-line { max-width: 36em; }
  .jar-fill { flex-basis: 50svh; }
  .floater { left: 70%; }
}

/* Apple's badge is the primary action. */
.cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.badge { display: inline-block; line-height: 0; transition: translate 200ms var(--ease-out); }
.badge:hover { translate: 0 -2px; }
.badge img { height: 56px; width: auto; }

/* ---------- Meet Dave ---------- */

.meet {
  position: relative;
  padding: 11vh 20px 16vh;
}
.meet-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  align-items: center;
}
.meet p {
  margin-top: 22px;
  max-width: 30em;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.45;
}
.meet-dave { width: min(220px, 48vw); justify-self: end; rotate: 5deg; }
.meet-dave img { width: 100%; }
@media (min-width: 900px) {
  .meet { padding: 14vh 6vw 20vh; }
  .meet-inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 6vw; }
  .meet-dave { width: 280px; }
}

/* ---------- One section per game, in its own color ---------- */

.game, .night, .tab, .rules { position: relative; }
.wave {
  position: absolute;
  max-width: none;
  left: 0;
  top: -47px;
  width: 200%;
  height: 48px;
  fill: var(--c);
  pointer-events: none;
  animation: drift 21s linear infinite;
  transform-origin: 0 100%;
}
@keyframes drift { to { transform: translateX(-50%); } }

.game { background: var(--c); color: var(--on); padding: 12vh 0 15vh; }
/* Dave ink on pimento is 4.49:1; a slightly deeper ink clears 4.5:1 for body-size text. */
.game--pimento { --c: var(--pimento); --on: #160E1B; }
.game--lemon { --c: var(--lemon); --on: var(--dave-ink); }
.game--plum { --c: var(--plum); --on: var(--napkin); }
.game--sky { --c: var(--sky); --on: var(--dave-ink); }
.game--cobalt { --c: var(--cobalt); --on: var(--napkin); }
.game--guava { --c: var(--guava); --on: var(--dave-ink); }
.game--peel { --c: var(--peel); --on: var(--dave-ink); }
.game--mint { --c: var(--mint); --on: var(--dave-ink); }
.game:nth-child(2) .wave { animation-delay: -4s; }
.game:nth-child(3) .wave { animation-delay: -9s; }
.game:nth-child(4) .wave { animation-delay: -2s; }
.game:nth-child(5) .wave { animation-delay: -13s; }
.game:nth-child(6) .wave { animation-delay: -7s; }
.game:nth-child(7) .wave { animation-delay: -17s; }
.game:nth-child(8) .wave { animation-delay: -11s; }

.game-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .game-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 5vw;
    padding: 0 6vw;
  }
  .game-inner--flip .game-text { order: 2; }
}
.game-name { font: 600 18px/1.2 var(--dave-ui); }
.game-head {
  margin-top: 14px;
  font: 900 clamp(40px, 6vw, 84px)/1.04 var(--dave-display);
  letter-spacing: -0.01em;
}
.game-line {
  margin-top: 30px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.4;
  max-width: 28em;
}
.how-title { margin-top: 34px; font: 600 18px/1.2 var(--dave-ui); }
.how {
  margin-top: 10px;
  counter-reset: how;
  max-width: 32em;
}
.how li {
  counter-increment: how;
  position: relative;
  padding: 10px 0 10px 46px;
  font-size: 18px;
  line-height: 1.45;
}
.how li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 2px;
  font: 900 36px/1 var(--dave-display);
}
.game-meta { margin-top: 22px; font: 600 18px/1.4 var(--dave-ui); }

/* The phone, the napkin and the mascot */
.game-art {
  position: relative;
  min-height: 460px;
  display: grid;
  justify-items: center;
}
.phone {
  position: relative;
  z-index: 1;
  width: min(260px, 60vw);
  rotate: 3deg;
}
.game-inner--flip .phone { rotate: -3deg; }
.phone img {
  width: 100%;
  border-radius: 11.5% / 5.3%;
  box-shadow: 0 0 0 1px rgb(34 23 42 / .25), 16px 26px 44px rgb(20 10 30 / .38);
}
.game-art--two .phone--back {
  position: absolute;
  z-index: 0;
  width: min(210px, 46vw);
  left: 4%;
  top: 8%;
  rotate: -7deg;
}
.napkin-wrap {
  position: relative;
  z-index: 2;
  margin-top: -84px;
  margin-left: 18%;
  width: min(330px, 84vw);
  filter: drop-shadow(10px 16px 18px rgb(20 10 30 / .3));
}
.game-inner--flip .napkin-wrap { margin-left: 0; margin-right: 18%; }

.napkin {
  position: relative;
  margin: 0;
  padding: 30px 28px 32px;
  background: var(--napkin);
  color: var(--dave-ink);
  font: 600 20px/1.35 var(--dave-display);
  rotate: -3deg;
  clip-path: polygon(0 3%, 7% 0, 15% 2%, 24% .5%, 33% 2.5%, 45% .5%, 56% 2%, 66% 0, 77% 2%, 88% .5%, 100% 2.5%, 99% 30%, 100% 62%, 99% 97%, 90% 100%, 79% 98%, 67% 100%, 55% 98.5%, 43% 100%, 32% 98%, 21% 100%, 10% 98%, 0 99.5%, 1% 64%, 0 33%);
  --focus: var(--pencil);
}
.napkin--b { rotate: 5deg; clip-path: polygon(0 1.5%, 9% 0, 19% 2.5%, 28% .5%, 39% 2%, 50% 0, 61% 2.5%, 72% .5%, 83% 2%, 93% 0, 100% 2%, 100% 35%, 99% 70%, 100% 98.5%, 92% 100%, 81% 97.5%, 70% 99.5%, 58% 98%, 47% 100%, 36% 97.5%, 25% 99.5%, 13% 98%, 3% 100%, 0 70%, 1% 36%); }
.napkin--c { rotate: -5deg; clip-path: polygon(1% 2%, 12% .5%, 22% 2.5%, 31% 0, 43% 2%, 53% .5%, 63% 2.5%, 74% 0, 86% 2%, 100% .5%, 99% 33%, 100% 66%, 99% 99%, 87% 98%, 76% 100%, 64% 98.5%, 52% 100%, 41% 98%, 29% 100%, 18% 98.5%, 7% 100%, 0 98%, 1% 66%, 0 34%); }
.cards li em, .card-label { font-style: italic; font-weight: 600; }
.card-label { display: block; margin-bottom: 6px; font-size: 16px; color: var(--dave-ink-soft); }
.cards li .card-label + * { margin-top: 0; }
.cards li > .card-label:not(:first-child) { margin-top: 12px; }
.card-label--top { margin-bottom: 10px; }
.cards--dial li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cards--dial .to { font-family: var(--dave-ui); font-weight: 700; }
.cards--options .q { display: block; margin-bottom: 10px; }
.cards--options .opt { display: block; font: 500 16px/1.4 var(--dave-ui); padding: 3px 0; }
.cards--options b { font: 900 17px var(--dave-display); margin-right: 4px; }
.napkin.is-out { animation: flip-out 160ms var(--ease-in-out) forwards; }
.napkin.is-in { animation: flip-in 160ms var(--ease-out); }
@keyframes flip-out { to { transform: perspective(700px) rotateY(90deg); } }
@keyframes flip-in { from { transform: perspective(700px) rotateY(-90deg); } }

.deal {
  display: inline-block;
  margin: 18px 0 0 28px;
  min-height: 32px;
  font: 700 17px/1 var(--dave-ui);
  color: var(--on);
  position: relative;
  padding-bottom: 8px;
}
.deal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4.2C2.5 1 7.5 1 10 4.2S17.5 7.4 20 4.2' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4.2C2.5 1 7.5 1 10 4.2S17.5 7.4 20 4.2' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
}

.mascot { position: absolute; z-index: 3; pointer-events: none; }
.mascot img { width: 100%; }
/* Where Dave stands beside the phone: top right, bottom left, top left. */
.mascot--tr { width: 130px; right: 2%; top: -30px; rotate: 6deg; }
.mascot--bl { width: 120px; left: 2%; bottom: 10px; rotate: -5deg; }
.mascot--tl { width: 125px; left: 0; top: -10px; rotate: -6deg; }
@media (max-width: 899px) {
  .game-art { min-height: 0; }
  .mascot--tr { width: 96px; right: 0; top: -40px; }
  .mascot--bl { width: 96px; left: -4px; bottom: 60px; }
  .mascot--tl { width: 96px; left: -4px; top: -40px; }
  .napkin-wrap { margin-left: 8%; }
  .game-inner--flip .napkin-wrap { margin-right: 8%; }
}

/* ---------- Night sections ---------- */

.night { background: var(--night); color: var(--napkin); --c: var(--night); }
.night-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14vh 20px;
}
@media (min-width: 900px) { .night-inner { padding: 16vh 6vw; } }
.night-head {
  font: 900 clamp(38px, 5vw, 72px)/1.02 var(--dave-display);
  letter-spacing: -0.01em;
}
.night p { margin-top: 20px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 32em; }
.night strong, .rules strong, .heat-desc strong { font-weight: 800; }
.how-much .night-inner { padding-bottom: 8vh; }

/* Words on one side, art (and Dave) on the other. */
.split { display: grid; gap: 48px; align-items: center; }
.split-art { position: relative; display: grid; justify-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6vw; } }
.whole-jar { width: min(400px, 80vw); }
.whole-jar img { width: 100%; border-radius: 6%; }
.mascot--br { width: 130px; right: 2%; bottom: -10px; rotate: 6deg; }
@media (max-width: 899px) { .mascot--br { width: 100px; right: 0; } }

/* Heat */
.heat .night-inner { padding-top: 8vh; }
.heat-inner { display: grid; gap: 48px; }
@media (min-width: 900px) { .heat-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; } }
.picker {
  position: relative;
  margin: 36px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.picker label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 10px 12px 14px;
  font: 900 clamp(28px, 2.7vw, 40px)/1 var(--dave-display);
  color: rgb(255 244 226 / .62);
  transition: color 200ms linear;
}
.picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.picker label:has(input:checked) { color: var(--dave-ink); }
.picker label:has(input:focus-visible) { outline: 2px solid var(--lemon); outline-offset: 4px; }
/* Without JavaScript each word paints its own stroke. With it, one stroke slides between them. */
.picker label::before {
  content: "";
  position: absolute;
  inset: 2px -4px;
  z-index: -1;
  background: var(--pimento);
  clip-path: polygon(3% 12%, 30% 4%, 62% 6%, 97% 2%, 100% 40%, 96% 92%, 64% 97%, 30% 94%, 2% 98%, 0 52%);
  opacity: 0;
}
.picker label:has(input:checked)::before { opacity: 1; }
.js .picker label::before { display: none; }
.picker-marker {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: var(--mw, 0);
  height: var(--mh, 0);
  translate: var(--mx, 0) var(--my, 0);
  display: none;
  transition: translate 360ms var(--ease-out), width 360ms var(--ease-out);
}
.js .picker-marker { display: block; }
.picker-marker svg { width: 100%; height: 100%; }
.picker-marker path { fill: var(--pimento); }
.heat-card { display: none; }
.heat:has(input[value="chill"]:checked) [data-heat="chill"],
.heat:has(input[value="spicy"]:checked) [data-heat="spicy"],
.heat:has(input[value="unhinged"]:checked) [data-heat="unhinged"] { display: block; }
.heat-desc { font: 600 18px/1.4 var(--dave-ui); color: rgb(255 244 226 / .85); }
.heat-card .napkin { margin-top: 18px; max-width: 420px; font-size: 22px; }
.heat-card .napkin p { margin: 0; font-size: inherit; line-height: 1.35; color: inherit; }
.dave-says { margin-top: 22px !important; padding-right: 120px; font: italic 600 19px/1.4 var(--dave-display) !important; }
.heat-cards { position: relative; }
.heat-cards .mascot { width: 110px; top: auto; right: 0; bottom: -24px; }
.napkin--redacted { display: grid; gap: 12px; padding-top: 34px; }
.redact {
  display: block;
  height: 22px;
  width: 92%;
  background: var(--dave-ink);
  clip-path: polygon(0 18%, 12% 4%, 40% 10%, 72% 0, 100% 12%, 98% 86%, 70% 100%, 38% 90%, 10% 98%, 1% 82%);
}
.redact--2 { width: 100%; }
.redact--3 { width: 64%; }
.redact-note { margin-top: 10px !important; font: 600 16px/1.4 var(--dave-ui) !important; color: var(--dave-ink-soft) !important; }

.crew .night-inner { padding-top: 6vh; }
.crew-list { margin-top: 26px; display: grid; gap: 18px; max-width: 34em; }
.crew-list li {
  position: relative;
  padding-left: 34px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45;
}
.crew-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 18px;
  height: 10px;
  background: var(--olive);
  clip-path: polygon(0 30%, 40% 0, 100% 20%, 95% 80%, 55% 100%, 5% 85%);
}

/* ---------- The tab ---------- */

.tab { background: var(--lemon); color: var(--dave-ink); --c: var(--lemon); padding: 12vh 0 16vh; }
.tab-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  gap: 48px;
  justify-items: start;
}
@media (min-width: 900px) {
  .tab-inner { grid-template-columns: 1fr 1fr; align-items: start; padding: 0 6vw; gap: 6vw; }
  .tab-copy { position: sticky; top: 16vh; }
}
.printer { position: relative; width: min(370px, 88vw); justify-self: center; }
.slot {
  position: relative;
  z-index: 2;
  display: block;
  height: 16px;
  margin: 0 -14px;
  background: var(--dave-ink);
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgb(255 255 255 / .12), 0 8px 14px rgb(0 0 0 / .18);
}
.paper-roll { position: relative; overflow: hidden; margin-top: -8px; padding-bottom: 24px; }
.receipt {
  position: relative;
  padding: 34px 26px 44px;
  background: var(--napkin);
  color: var(--dave-ink);
  font-family: var(--dave-display);
  filter: drop-shadow(6px 12px 12px rgb(60 40 0 / .22));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px));
}
.printer.is-waiting .receipt { transform: translateY(-101%); }
.printer.is-printing .receipt { transform: none; transition: transform 1.4s steps(28, end); }
.mono { font-family: var(--mono); font-weight: 500; }
.r-title { text-align: center; font: italic 900 38px/1 var(--dave-display); }
.r-game { margin-top: 10px; text-align: center; font: 700 20px/1.2 var(--dave-display); }
.r-date { margin-top: 6px; text-align: center; font-size: 14px; color: var(--dave-ink-soft); }
.receipt hr {
  margin: 18px 0;
  height: 2px;
  border: 0;
  background: radial-gradient(circle, var(--dave-ink-soft) .9px, transparent 1.3px) 0 50% / 7px 2px repeat-x;
}
.r-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; }
.r-lines dt { font: 600 19px/1.2 var(--dave-display); }
.r-lines dd { margin: 0; font-size: 17px; }
.r-total dt { font-weight: 900; font-size: 22px; }
.r-total dd { font-size: 20px; font-weight: 700; }
.r-note { margin-top: 10px; font: italic 700 18px/1.35 var(--dave-display); }
.r-foot { font-size: 13px; line-height: 1.6; color: var(--dave-ink-soft); text-align: center; }

/* ---------- House rules ---------- */

.rules { background: var(--napkin-deep); color: var(--dave-ink); --c: var(--napkin-deep); padding: 14vh 20px 18vh; }
.napkin--big {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 44px 52px;
  rotate: -1.5deg;
  filter: none;
}
.rules-head { font: 900 clamp(38px, 5vw, 64px)/1 var(--dave-display); }
.rules-list { margin-top: 26px; }
.rules-list li {
  padding: 13px 0 13px 40px;
  position: relative;
  font: 500 19px/1.4 var(--dave-ui);
  border-bottom: 1.5px dashed rgb(34 23 42 / .22);
}
.rules-list li:last-child { border-bottom: 0; }
.rules-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 20px;
  height: 11px;
  border-left: 3px solid var(--olive-deep);
  border-bottom: 3px solid var(--olive-deep);
  rotate: -48deg;
  translate: 0 -4px;
}

.rules-inner { position: relative; max-width: 640px; margin: 0 auto; }
.mascot--rules { width: 130px; right: -100px; top: -70px; rotate: 8deg; }
@media (max-width: 899px) { .mascot--rules { width: 88px; right: -8px; top: -78px; } }

/* ---------- Closing ---------- */

.closing-inner { position: relative; padding-bottom: 22vh; }
.closing-head {
  font: 900 clamp(40px, 5.8vw, 86px)/1 var(--dave-display);
  letter-spacing: -0.01em;
  max-width: 12em;
}
.closing .cta { margin-top: 38px; }
.closing-dave {
  position: absolute;
  right: 4vw;
  bottom: 0;
  width: min(200px, 34vw);
  rotate: 6deg;
  transform-origin: 50% 100%;
}
.closing-dave img { width: 100%; }
@media (max-width: 899px) { .closing-dave { right: 12px; bottom: 12px; } }

/* ---------- Footer (also on support and policies) ---------- */

.dave-foot {
  background: var(--night);
  color: var(--napkin);
  padding: 44px 20px max(44px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 244 226 / .12);
}
@media (min-width: 900px) { .dave-foot { padding: 48px 6vw; } }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font: 600 17px/1.4 var(--dave-ui);
}
.foot-small {
  margin-top: 18px;
  font: 500 15px/1.5 var(--dave-ui);
  color: rgb(255 244 226 / .72);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wave { animation: none; }
  .napkin.is-out, .napkin.is-in { animation: none; }
  .printer.is-printing .receipt { transition: none; }
  .picker-marker { transition: none; }
  .badge { transition: none; }
}