/* Knock them all down: a fairground tin can alley on a white page. The colour is all in the booth: enamel-painted
   tins, a striped counter, a pine shelf, a cloth ball and a raffle ticket. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #2a1d1a;           /* the words */
  --muted: #8b7a72;         /* the line under them */
  --red: #d8333b;           /* the fairground red: the counter stripes, Throw, the ticket */
  --cream: #f8ecd4;         /* the cream of the stripes and of the ticket paper */
  --gold: #e9b13a;          /* the gold trim */
  --wood: #c98d55;          /* the pine shelf and the slingshot */
  --leather: #7c2f22;       /* the slingshot's leather wraps and pouch */
  --rubber: #3a2622;        /* the slingshot's bands */
  --w: min(340px, calc(100vw - 32px));   /* the game's width */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Anybody Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the game sits in the middle of the page; on a real page it goes wherever the promotion lives */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 16px;
}

.game {
  display: grid;
  justify-items: center;
  width: var(--w);
}

/* ---------------------------------------------------------------- the words above */
.game__head {
  text-align: center;
}

.game__title {
  margin: 0;
  font-size: 27px;
  font-weight: 820;
  font-stretch: 104%;
  line-height: 1;
  letter-spacing: -0.015em;
}

.game__rule {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 460;
  font-stretch: 100%;
}

/* ---------------------------------------------------------------- the booth */
/* the canvas holds the whole alley in its own units (340 by 320) and is drawn at the size it has */
.booth {
  position: relative;
  width: var(--w);
  aspect-ratio: 340 / 320;
  margin-top: 10px;
  border-radius: 14px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}

.booth.is-aiming {
  cursor: grabbing;
}

.booth.is-busy {
  cursor: default;
}

.booth:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

html[data-using='pointer'] .booth:focus-visible {
  outline: none;
}

.booth__scene,
.booth__fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.booth__fade {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the ticket */
/* GSAP moves .ticket; the paper inside keeps its own tilt */
.ticket {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 256px;
  margin-left: -128px;
  z-index: 2;
}

.ticket[hidden] {
  display: none;
}

.ticket__paper {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 16px 18px 14px;
  border-radius: 7px;
  color: var(--red);
  text-align: center;
  transform: rotate(-3deg);
  /* the paper, with a half-moon bitten out of each side as on a raffle ticket */
  background: linear-gradient(170deg, #fffaf0, var(--cream));
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 12px 14px rgba(60, 22, 14, 0.24)) drop-shadow(0 2px 2px rgba(60, 22, 14, 0.18));
}

/* the printed double border */
.ticket__paper::before {
  content: '';
  position: absolute;
  inset: 6px 14px;
  border: 1.5px solid var(--red);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2.5px var(--cream), inset 0 0 0 3.5px var(--red);
  pointer-events: none;
}

.ticket__star {
  position: absolute;
  top: 15px;
  width: 13px;
  height: 13px;
  fill: var(--gold);
}

.ticket__star--l {
  left: 30px;
}

.ticket__star--r {
  right: 30px;
}

.ticket__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 760;
  font-stretch: 130%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticket__prize {
  margin: 4px 0 0;
  font-size: 40px;
  font-weight: 900;
  font-stretch: 118%;
  white-space: nowrap;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.ticket__line {
  margin: 3px 0 0;
  color: #9a4a3c;
  font-size: 13px;
  font-weight: 520;
}

.ticket__code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px 8px 7px 12px;
  border: 1.5px dashed var(--red);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ticket__code-text {
  font-size: 16px;
  font-weight: 780;
  font-stretch: 112%;
  letter-spacing: 0.12em;
}

.ticket__copy {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: 0.04em;
}

.ticket__code:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ticket__code:hover .ticket__copy {
    background: var(--ink);
  }
}

/* ---------------------------------------------------------------- what is going on, and Throw */
.bar {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 12px;
}

.say {
  min-height: 44px;
  text-align: center;
}

.say__big {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  font-stretch: 104%;
  line-height: 1.2;
}

.say__small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 460;
}

/* Throw: a chunky fairground button that sits on its own darker edge and goes down when it is pressed */
.throw {
  --press: 0px;
  position: relative;
  padding: 0 0 5px;
  border: 0;
  border-radius: 999px;
  background: #8f1c22;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s;
}

.throw__face {
  display: block;
  padding: 13px 34px 12px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #e9474e, var(--red) 60%);
  box-shadow: inset 0 0 0 2px rgba(255, 236, 214, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.28);
  color: #fff6e6;
  transform: translateY(var(--press));
  transition: transform 0.12s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}

.throw__label {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: 0.02em;
  transition: font-stretch 0.45s cubic-bezier(0.34, 1.8, 0.5, 1);
}

@media (hover: hover) {
  .throw:hover .throw__face {
    --press: -1px;
  }

  .throw:hover .throw__label {
    font-stretch: 134%;
  }
}

.throw:active .throw__face,
.throw.is-pressed .throw__face {
  --press: 4px;
  transition-duration: 0.05s;
}

.throw[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}

.throw[aria-disabled='true'] .throw__face {
  --press: 0px;
}

.throw[aria-disabled='true'] .throw__label {
  font-stretch: 118%;
}

.throw:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

html[data-using='pointer'] .throw:focus-visible,
html[data-using='pointer'] .booth:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .throw__face,
  .throw__label {
    transition: none;
  }
}