/* CoinParty — components (step 4).
 *
 * BEM, mobile-first from 360px, every value from variables.css. The vocabulary here
 * is this site's own: the generator maps its canonical class names onto these through
 * `site.ui` in tools/site-data/coinpartycom/site.mjs, so no two of our domains ship
 * the same HTML skeleton.
 *
 * House style: cut paper. Solid 2px outlines, hard offset shadows, no blur, no glass.
 * The one dark region is the game cabinet, which is a lit fairground booth.
 */

/* ================================================================ skip link */

.jump-link {
  position: absolute;
  top: -100%;
  left: var(--s-3);
  z-index: var(--z-modal);
  padding: var(--s-2) var(--s-4);
  color: var(--c-ink);
  font-weight: var(--w-bold);
  text-decoration: none;
  background: var(--c-lime);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.jump-link:focus {
  top: var(--s-3);
}

/* ================================================================ header */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--c-paper);
  border-bottom: var(--border) solid var(--c-line-strong);
}

/* The bunting strip: a paper garland along the top edge, drawn from a gradient. */
.topbar::before {
  content: '';
  display: block;
  height: 6px;
  background: var(--g-bunting);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.75rem;
  padding-block: var(--s-2);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: auto;
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-decoration: none;
}

.mark img,
.mark svg {
  width: 2rem;
  height: 2rem;
}

.mark__accent {
  color: var(--c-magenta);
}

/* The header row has four things competing for 360px: wordmark, burger, the purse
 * that the economy injects, and the CTA. The purse wins on a phone — it carries the
 * balance and opens the bonus panel — so the CTA stands down until there is room.
 * The hero on every page carries a Play Free button anyway. */
/* Two-class selector on purpose: the CTA also carries `.pill`, which is declared
 * later in this file and would otherwise win the display battle at equal
 * specificity and put the button back on a 360px header. */
.topbar .topbar__cta {
  display: none;
  padding-inline: var(--s-3);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .topbar .topbar__cta {
    display: inline-flex;
    padding-inline: var(--s-5);
  }
}

/* ---------------------------------------------------------------- nav */

.menu {
  position: fixed;
  inset: 3.75rem 0 auto;
  display: none;
  padding: var(--s-4);
  background: var(--c-booth);
  border-bottom: var(--border) solid var(--c-line-strong);
}

.menu[data-open='true'] {
  display: block;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
}

.menu__item {
  position: relative;
}

.menu__link {
  display: block;
  padding: var(--s-3) var(--s-3);
  font-weight: var(--w-medium);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.menu__link:hover,
.menu__link[aria-current='page'] {
  color: var(--c-magenta);
  background: var(--c-paper-deep);
}

.menu__link[aria-current='page'] {
  font-weight: var(--w-bold);
}

.menu__link--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
}

.menu__caret {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: var(--s-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.menu__drop {
  display: none;
  padding-left: var(--s-4);
  margin: 0;
}

.menu__link--toggle[aria-expanded='true'] + .menu__drop {
  display: block;
}

.menu__droplink {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-plum);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.menu__droplink:hover {
  color: var(--c-magenta);
  background: var(--c-paper-deep);
}

.toggler {
  display: inline-flex;
  flex: none;                 /* never squeezed by the purse next to it */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-sm);
}

.toggler__bar {
  display: block;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
}

@media (min-width: 62rem) {
  .toggler {
    display: none;
  }

  .menu {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
  }

  .menu__list {
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
  }

  .menu__drop {
    position: absolute;
    top: calc(100% + var(--s-2));
    left: 0;
    z-index: var(--z-sticky);
    display: none;
    min-width: 13rem;
    padding: var(--s-2);
    background: var(--c-booth);
    border: var(--outline);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
  }
}

/* ================================================================ buttons */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-5);
  font-weight: var(--w-bold);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border: var(--outline);
  border-radius: var(--r-pill);
}

.pill--main {
  color: var(--c-booth);       /* 7.10 on magenta */
  background: var(--c-magenta);
  box-shadow: var(--sh-1);
}

.pill--main:hover {
  color: var(--c-booth);
  background: var(--c-magenta-deep);
}

.pill--main:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}

.pill--plain {
  color: var(--c-ink);         /* 17.86 on booth */
  background: var(--c-booth);
}

.pill--plain:hover {
  color: var(--c-ink);
  background: var(--c-paper-deep);
}

.pill[aria-disabled='true'],
.pill:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* ================================================================ tags */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem var(--s-3);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink);          /* every tag fill is a light one — see brand.md §6 */
  background: var(--c-paper-deep);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.tag--age {
  background: var(--c-booth);
}

.tag--new {
  background: var(--c-lime);     /* 11.85 with ink */
}

.tag--hot {
  background: var(--c-sun);      /* 8.61 with ink */
}

.tag--classic {
  background: var(--c-booth);
}

.tag--ways {
  background: var(--c-lime);
}

/* ================================================================ sections */

.block {
  padding-block: var(--s-6);
}

.block + .block {
  padding-top: 0;
}

.block__title {
  margin-bottom: var(--s-3);
}

/* Confetti rule under every section heading — three snips of paper. */
.block__title::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 6px;
  margin-top: var(--s-3);
  background: var(--g-brand);
  border-radius: var(--r-pill);
}

.block__lead {
  max-width: var(--prose-max);
  margin-bottom: var(--s-5);
  font-size: var(--t-md);
  color: var(--c-plum);
}

.block__more {
  display: inline-block;
  margin-top: var(--s-4);
  font-weight: var(--w-bold);
}

/* ================================================================ hero */

.marquee {
  position: relative;
  padding: var(--s-7) var(--s-5);
  margin-block: var(--s-5);
  text-align: center;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.marquee::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--g-bunting);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.marquee__title {
  margin-bottom: var(--s-4);
}

.marquee__lead {
  max-width: 42rem;
  margin-inline: auto;
  font-size: var(--t-md);
  color: var(--c-plum);
}

.marquee__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.marquee__note {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-plum);
}

.marquee .tag {
  margin-bottom: var(--s-4);
}

/* ================================================================ stalls (features) */

.stall-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 36rem) {
  .stall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .stall-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stall {
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.stall__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--s-3);
  font-size: var(--t-md);
  background: var(--c-lime);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.stall__title {
  margin-bottom: var(--s-2);
}

.stall__text {
  color: var(--c-plum);
}

/* ================================================================ booths (game cards) */

.booth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 36rem) {
  .booth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .booth-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.booth {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.booth__art-link {
  position: relative;
  display: block;
}

.booth__art {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-bottom: var(--outline);
}

.booth__tags {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.booth__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
}

.booth__title {
  font-size: var(--t-md);
}

.booth__title a {
  color: var(--c-ink);
  text-decoration: none;
}

.booth__title a:hover {
  color: var(--c-magenta);
  text-decoration: underline;
}

.booth__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-plum);
}

.booth__cta {
  margin-top: auto;
}

/* ================================================================ arcade (game stage) */

.arcade {
  padding-block: var(--s-6);
}

.arcade__stage {
  position: relative;
  /* Not `overflow: hidden`. The renderer sizes the canvas to the room left by the
   * header and the controls; clipping here hid the Spin button on a desktop instead
   * of letting the layout be wrong visibly. Nothing needs clipping — the canvas
   * carries its own radius and the overlay is positioned inside. */
  /* Explicit colour under the gradient: a gradient is a background *image*, so
   * without this the computed background-color stays transparent and anything
   * inspecting contrast — a tool or a browser feature — sees the light page
   * behind cream text and reads it as unreadable. */
  background-color: var(--c-night);
  background-image: var(--g-night);
  border: var(--outline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* The cabinet is the one dark surface on the site: a lit booth after dark.
 * Height is never fixed — the slot must fit whole on any screen (INSTRUCTIONS). */
/* No max-height here either: core/games/renderer.mjs measures the header and the
 * cabinet chrome and sizes the canvas to what is left, so a CSS cap can only fight
 * that calculation. The one job left to CSS is the padding and the colour. */
.cabinet {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 12rem;
  padding: var(--s-3);
  color: var(--c-night-text);
}

.cabinet canvas {
  border-radius: var(--r-md);
}

/* Everything below lives inside the cabinet, on Night Fair. Cream text clears
 * 17.65:1 there; the two accent readouts clear 12.24 and 12.43. */
.cabinet__board {
  width: 100%;
}

.cabinet__board:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.cabinet__canvas {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.cabinet__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  width: 100%;
  margin-top: var(--s-3);
}

.cabinet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.cabinet__stat-label {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-glow-sun);
}

.cabinet__stat-value {
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--c-night-text);
}

.cabinet__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.cabinet__coin {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-night-text);
}

.cabinet__coin-label {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
}

.cabinet__select {
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink);
  background: var(--c-paper);
  border: var(--border) solid var(--c-glow-lime);
  border-radius: var(--r-pill);
}

.cabinet__spin {
  min-width: 8rem;
}

.cabinet__note,
.cabinet__live {
  width: 100%;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  text-align: center;
  color: var(--c-night-text);
}

.cabinet__live {
  min-height: 1.5rem;
  font-weight: var(--w-bold);
  color: var(--c-glow-lime);
}

.arcade__art {
  width: 100%;
  height: auto;
}

.arcade__overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  padding: var(--s-3);
  background: linear-gradient(180deg, rgba(21, 14, 36, 0) 0%, rgba(21, 14, 36, 0.92) 70%);
}

.arcade__label {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: 0.03em;
  color: var(--c-glow-sun);      /* 12.24 on night */
}

.arcade__note {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-plum);
}

.arcade__fallback {
  padding: var(--s-4);
  color: var(--c-plum);
  background: var(--c-paper-deep);
  border: var(--hairline);
  border-radius: var(--r-md);
}

/* ================================================================ tables */

.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--outline);
  border-radius: var(--r-md);
}

/* Two tables, two situations, and they must not share a min-width.
 * `.board-table` always ships inside `.scroller`, so it may be wider than the
 * viewport and scroll inside its own box. `.specs` — the game parameters table —
 * ships bare, so a min-width on it pushes the whole page sideways on a phone.
 * That is exactly what it did at 360px before this rule was split. */
.scroller > .board-table {
  min-width: 30rem;
}

.specs {
  width: 100%;
  border: var(--outline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.specs,
.board-table {
  background: var(--c-booth);
}

.specs th,
.specs td {
  overflow-wrap: anywhere;
}

.specs th[scope='row'] {
  width: 40%;
}

.specs th,
.specs td,
.board-table th,
.board-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--hairline);
}

.specs th,
.board-table th {
  font-weight: var(--w-bold);
  background: var(--c-paper-deep);
}

.specs tr:last-child th,
.specs tr:last-child td,
.board-table tr:last-child th,
.board-table tr:last-child td {
  border-bottom: 0;
}

.specs caption,
.board-table caption {
  padding-bottom: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-plum);
  text-align: left;
}

/* ================================================================ FAQ */

.asks {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.asks__item {
  overflow: hidden;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.asks__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4);
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  text-align: left;
  background: none;
  border: 0;
}

.asks__q::after {
  content: '+';
  flex: none;
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--c-magenta);
}

.asks__item[open] .asks__q::after,
.asks__q[aria-expanded='true']::after {
  content: '–';
}

.asks__q::-webkit-details-marker {
  display: none;
}

.asks__a {
  padding: 0 var(--s-4) var(--s-4);
  color: var(--c-plum);
}

.asks__a > * + * {
  margin-top: var(--s-3);
}

/* ================================================================ prose */

.copy {
  max-width: var(--prose-max);
}

.copy > * + * {
  margin-top: var(--s-4);
}

.copy h2,
.copy h3 {
  margin-top: var(--s-6);
}

.copy ul,
.copy ol {
  padding-left: var(--s-5);
}

.copy li + li {
  margin-top: var(--s-2);
}

.copy--article {
  font-size: var(--t-md);
}

/* ================================================================ steps */

.howto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  counter-reset: howto;
}

@media (min-width: 48rem) {
  .howto {
    grid-template-columns: repeat(3, 1fr);
  }
}

.howto__step {
  position: relative;
  padding: var(--s-5);
  padding-top: var(--s-6);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
  counter-increment: howto;
}

.howto__step::before {
  content: counter(howto);
  position: absolute;
  top: calc(var(--s-4) * -1);
  left: var(--s-4);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-weight: var(--w-bold);
  color: var(--c-ink);
  background: var(--c-sun);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.howto__title {
  margin-bottom: var(--s-2);
}

.howto__text {
  color: var(--c-plum);
}

/* ================================================================ voices (reviews) */

.voices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 48rem) {
  .voices {
    grid-template-columns: repeat(3, 1fr);
  }
}

.voice {
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.voice__stars {
  margin-bottom: var(--s-3);
  font-size: var(--t-md);
  letter-spacing: 0.1em;
  color: var(--c-warn);
}

.voice__text {
  margin-bottom: var(--s-3);
}

.voice__author {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--c-plum);
}

/* ================================================================ callout */

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  margin-block: var(--s-6);
  text-align: center;
  background: var(--c-lime);      /* fill-only colour; all text on it is ink */
  border: var(--outline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.callout__title {
  color: var(--c-ink);
}

.callout__title::after {
  display: none;
}

.callout__text {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--c-ink);
}

.callout__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

/* ================================================================ routes (link grid) */

.routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 48rem) {
  .routes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.routes__item {
  display: flex;
}

.route {
  display: block;
  width: 100%;
  padding: var(--s-4);
  color: var(--c-ink);
  text-decoration: none;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.route:hover {
  color: var(--c-ink);
  background: var(--c-paper-deep);
}

.route__title {
  margin-bottom: var(--s-1);
  font-weight: var(--w-bold);
  color: var(--c-magenta);
}

.route__text {
  font-size: var(--t-sm);
  color: var(--c-plum);
}

/* ================================================================ desk (contact) */

.desk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 48rem) {
  .desk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.desk {
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.desk__title {
  margin-bottom: var(--s-2);
  font-size: var(--t-md);
}

.desk__value {
  font-weight: var(--w-bold);
  overflow-wrap: anywhere;
}

.desk__note {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-plum);
}

/* ================================================================ clips (article cards) */

.clips {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 48rem) {
  .clips {
    grid-template-columns: repeat(2, 1fr);
  }
}

.clip {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.clip__title a {
  color: var(--c-ink);
  text-decoration: none;
}

.clip__title a:hover {
  color: var(--c-magenta);
}

.clip__meta {
  font-size: var(--t-sm);
  color: var(--c-plum);
}

.clip__text {
  color: var(--c-plum);
}

.clip__more {
  margin-top: auto;
  font-weight: var(--w-bold);
}

/* ================================================================ breadcrumbs */

.trail {
  padding-top: var(--s-4);
  font-size: var(--t-sm);
}

.trail__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.trail__item + .trail__item::before {
  content: '›';
  margin-right: var(--s-2);
  color: var(--c-plum);
}

.trail__link {
  color: var(--c-teal);
}

.trail__current {
  color: var(--c-plum);
}

/* ================================================================ legal pages */

.doc {
  padding-block: var(--s-6);
}

.doc__title {
  margin-bottom: var(--s-5);
}

/* ================================================================ self-check */

.check {
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.check__set {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0;
  margin: 0;
  border: 0;
}

.check__row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.check__box {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.15rem;
  accent-color: var(--c-magenta);
}

.check__result {
  margin-top: var(--s-4);
  padding: var(--s-4);
  font-weight: var(--w-medium);
  background: var(--c-paper-deep);
  border-radius: var(--r-md);
}

/* ================================================================ play timer */

.clock {
  padding: var(--s-5);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.clock__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.clock__status {
  font-weight: var(--w-bold);
}

/* ================================================================ modals */

.sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: var(--s-4);
  background: rgba(27, 18, 48, 0.72);
}

.sheet[data-open='true'] {
  display: grid;
}

/* app.mjs sets this on <body> while a dialog is open. Without it the page keeps
 * scrolling behind the age gate, which on a phone reads as a broken overlay. */
body.is-locked {
  overflow: hidden;
}

.sheet__panel {
  width: min(30rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s-6);
  text-align: center;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lift);
}

.sheet__badge {
  margin-bottom: var(--s-4);
}

.sheet__title {
  margin-bottom: var(--s-3);
}

.sheet__title::after {
  display: none;
}

.sheet__text {
  color: var(--c-plum);
}

.sheet__text + .sheet__text {
  margin-top: var(--s-3);
}

.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.sheet--age .sheet__panel {
  border-color: var(--c-magenta);
}

/* ================================================================ cookie bar */

.crumbs-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-cookie);
  background: var(--c-booth);
  border-top: var(--border) solid var(--c-line-strong);
}

.crumbs-bar[hidden] {
  display: none;
}

.crumbs-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-4);
}

@media (min-width: 48rem) {
  .crumbs-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.crumbs-bar__text {
  font-size: var(--t-sm);
  color: var(--c-plum);
}

/* ================================================================ toasts */

.pops {
  position: fixed;
  inset: auto var(--s-4) var(--s-4) auto;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(22rem, calc(100vw - var(--s-6)));
  pointer-events: none;
}

.pop {
  padding: var(--s-4);
  pointer-events: auto;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}

.pop__title {
  font-weight: var(--w-bold);
}

.pop__text {
  font-size: var(--t-sm);
  color: var(--c-plum);
}

/* ================================================================ economy chrome */
/* Written now so step 7 has a vocabulary to mount into: the wallet chip, the level
 * bar, the daily gift and the Lucky Spin wheel. Five mechanics, no more (ia.md §10). */

.purse {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-pill);
}

/* The level bar needs 8rem to mean anything, which is a third of a 360px header.
 * On a phone the level number alone does the job; the full bar lives in the panel
 * the purse opens. */
.purse .levelbar {
  min-width: 0;
}

.purse .levelbar__track {
  display: none;
}

@media (min-width: 62rem) {
  .purse .levelbar__track {
    display: block;
    min-width: 5rem;
  }
}

/* Ready-to-collect: the purse picks up the carnival gold until the gift is taken. */
.purse--ready {
  background: var(--c-sun);
}

.purse__coins,
.purse__ribbons {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.purse__icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-pill);
}

.purse__icon--coin {
  background: var(--c-sun);
}

.purse__icon--ribbon {
  background: var(--c-magenta);
}

.levelbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 8rem;
}

.levelbar__track {
  flex: 1;
  height: 0.6rem;
  overflow: hidden;
  background: var(--c-paper-deep);
  border: var(--hairline);
  border-radius: var(--r-pill);
}

.levelbar__fill {
  height: 100%;
  background: var(--g-brand);
}

.levelbar__label {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
}

.wheel {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
}

.wheel__dial {
  width: min(18rem, 80vw);
  aspect-ratio: 1;
  border: var(--border) solid var(--c-line-strong);
  border-radius: 50%;
  box-shadow: var(--sh-2);
}

.wheel__status {
  font-weight: var(--w-bold);
  text-align: center;
}

.gift {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  text-align: center;
  background: var(--c-booth);
  border: var(--outline);
  border-radius: var(--r-md);
}

.gift__ladder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.gift__day {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  background: var(--c-paper-deep);
  border: var(--outline);
  border-radius: var(--r-sm);
}

.gift__day--done {
  background: var(--c-lime);
}

.gift__day--today {
  background: var(--c-sun);
}

/* Nickname and avatar. A text field and a set of buttons — and nothing that could
 * be mistaken for a sign-in: there is no password input anywhere on this site. */
.who__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
}

.who__label {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
}

.who__input {
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  color: var(--c-ink);
  background: var(--c-paper);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.who__avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.who__avatar {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  text-transform: capitalize;
  color: var(--c-ink);
  background: var(--c-paper-deep);
  border: var(--outline);
  border-radius: var(--r-pill);
}

.who__avatar--on {
  background: var(--c-lime);
}

/* ================================================================ compliance strip */

.smallprint {
  padding-block: var(--s-4);
  background: var(--c-paper-deep);
  border-top: var(--hairline);
}

.smallprint__text {
  max-width: 60rem;
  margin-inline: auto;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--c-ink);          /* 16.81-equivalent: small print must stay readable */
  text-align: center;
}

/* ================================================================ footer */

.footbar {
  margin-top: var(--s-7);
  background: var(--c-booth);
  border-top: var(--border) solid var(--c-line-strong);
}

.footbar__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-block: var(--s-6);
}

@media (min-width: 36rem) {
  .footbar__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .footbar__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footbar__col {
  min-width: 0;
}

.footbar__head {
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-magenta);
}

.footbar__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
}

.footbar__link {
  color: var(--c-ink);
  text-decoration: none;
}

.footbar__link:hover {
  color: var(--c-magenta);
  text-decoration: underline;
}

.footbar__copy,
.footbar__operator {
  padding-bottom: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-plum);
}

.footbar__operator {
  padding-bottom: var(--s-6);
}