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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  font-family: var(--ak-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ak-ink);
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
}

button {
  font-family: inherit;
  touch-action: manipulation;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.play {
  --pad-top: max(6px, env(safe-area-inset-top, 0px));
  --pad-bot: max(8px, env(safe-area-inset-bottom, 0px));
  --pad-x: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 420px);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bot);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.mute {
  position: absolute;
  top: var(--pad-top);
  right: max(4px, env(safe-area-inset-right, 0px));
  z-index: 9;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  color: var(--ak-ink);
  box-shadow: var(--ak-shadow);
  cursor: pointer;
}

.mute-icon {
  width: 22px;
  height: 22px;
}

.mute.is-muted .wave {
  display: none;
}

.mute.is-muted::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 3px;
  background: var(--ak-accent-2);
  transform: rotate(-35deg);
}

.top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-right: 52px;
}

.play-logo {
  height: 44px;
  width: auto;
  max-width: 42%;
  object-fit: contain;
}

.turn {
  min-width: 0;
}

.turn-who {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.turn-sub {
  margin: 2px 0 0;
  color: var(--ak-ink-muted);
  font-size: 14px;
}

.goal {
  margin: 0;
  font-size: 14px;
  color: var(--ak-ink);
}

.voice {
  margin: 0;
  min-height: 40px;
  padding: 6px 8px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
  font-size: 15px;
}

.voice.is-invite {
  font-family: var(--ak-font-display);
  font-weight: 700;
  color: var(--ak-accent);
}

.sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 14px;
  background: color-mix(in srgb, var(--ak-surface) 90%, transparent);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}

.figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 10px;
}

.figure-amount {
  position: relative;
  min-width: 0;
}

.figure-total {
  text-align: right;
}

.kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.amount {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: clamp(42px, 13vw, 68px);
  line-height: 1;
  color: var(--ak-ink);
}

.total {
  display: block;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 0.9;
  color: var(--ak-ink);
}

.total.is-hot,
.total.is-match {
  color: var(--ak-accent);
}

.extras {
  margin: 2px 0 0;
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--ak-ink-muted);
}

.headline-block {
  display: block;
  width: min(132px, 72%);
  height: 9px;
  margin-top: 12px;
  background: var(--ak-accent-2);
  transform: translate(7px, 0) rotate(-3deg);
  transform-origin: left center;
}

.headline-block.is-set {
  transform: none;
}

.rule {
  height: 8px;
  flex: 0 0 auto;
  background: var(--ak-accent);
  box-shadow: var(--ak-shadow);
}

.row-label,
.pile-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.taken,
.pile {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.taken {
  min-height: 52px;
  padding: 2px;
  background: color-mix(in srgb, var(--ak-bg) 72%, transparent);
  border: 2px dashed var(--ak-outline);
}

.taken:empty::before {
  content: "Tap a coin";
  color: var(--ak-ink-muted);
  font-size: 14px;
  line-height: 48px;
}

.pile {
  container-type: inline-size;
  flex: 1 1 auto;
  min-height: 0;
  align-content: flex-start;
  padding-top: 2px;
}

.coin {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(48px, 17cqi, 74px);
  height: clamp(48px, 17cqi, 74px);
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ak-radius);
  background: transparent;
  cursor: pointer;
}

.coin img {
  width: var(--art, 84%);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg));
}

.coin[data-kind="quarter"] { --art: 100%; }
.coin[data-kind="nickel"] { --art: 86%; }
.coin[data-kind="penny"] { --art: 78%; }
.coin[data-kind="dime"] { --art: 64%; }

.coin.is-next {
  border-color: var(--ak-accent);
  background: var(--ak-choice-bg);
}

.coin.is-next::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--ak-accent);
}

.coin:active {
  background: var(--ak-choice-bg);
}

.coin:disabled,
.btn-check:disabled {
  opacity: 1;
  cursor: default;
}

.taken .coin {
  width: 48px;
  height: 48px;
}

.taken[data-count="1"] .coin,
.taken[data-count="2"] .coin,
.taken[data-count="3"] .coin,
.taken[data-count="4"] .coin {
  width: 72px;
  height: 72px;
}

.taken .coin img {
  transform: none;
}

.pile[data-crowd="1"] .coin {
  width: 48px;
  height: 48px;
}

.compare {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ak-ink);
}

.scrap {
  position: absolute;
  right: -2px;
  bottom: 8px;
  width: 34px;
  height: 24px;
  background: var(--ak-surface);
  border: 2px solid var(--ak-outline);
  box-shadow: var(--ak-shadow);
  transform: rotate(14deg);
  pointer-events: none;
}

.actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.btn-check,
.btn-hint,
.btn-go,
.btn-alt {
  min-height: 48px;
  border-radius: var(--ak-radius);
  border: 2px solid var(--ak-outline);
  box-shadow: var(--ak-shadow);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.btn-check,
.btn-go {
  flex: 1 1 auto;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

.btn-check:active,
.btn-go:active {
  background: var(--ak-btn-active);
}

.btn-hint,
.btn-alt {
  background: var(--ak-surface);
  color: var(--ak-choice-ink);
}

.btn-hint {
  min-width: 72px;
}

.btn-hint:active,
.btn-alt:active,
.mute:active {
  background: var(--ak-choice-bg);
}

.coin:focus-visible,
.btn-check:focus-visible,
.btn-hint:focus-visible,
.btn-go:focus-visible,
.btn-alt:focus-visible,
.mute:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 2px;
}

.end {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.why,
.result-card {
  background: var(--ak-surface);
  border: 2px solid var(--ak-outline);
  border-radius: var(--ak-radius);
  box-shadow: var(--ak-shadow);
}

.why {
  margin: 0;
  padding: 8px;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ak-ink);
}

.result-card {
  padding: 8px;
  border-color: var(--ak-accent);
}

.result-says {
  margin: 0 0 8px;
  font-family: var(--ak-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ak-ink);
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-actions .btn-go,
.result-actions .btn-alt {
  width: 100%;
}

.play.is-ended .pile,
.play.is-ended .pile-label,
.play.is-ended .actions,
.play.is-ended .goal,
.play.is-ended .voice,
.play.is-example .pile,
.play.is-example .pile-label {
  display: none;
}

.play.is-example .taken {
  flex: 0 0 auto;
  min-height: 96px;
}

.play.is-example .taken .coin {
  width: 88px;
  height: 88px;
}

.play.is-ended .sheet {
  flex: 0 1 auto;
}

.play.is-ended .taken {
  border-style: solid;
}

.play.is-ended .taken:empty::before {
  content: "None in the row";
}

.fx {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.fx i {
  position: absolute;
  width: 10px;
  height: 14px;
  opacity: 0;
}

@media (max-height: 700px) {
  .play-logo {
    height: 36px;
  }

  .turn-who {
    font-size: 18px;
  }

  .amount {
    font-size: 40px;
  }

  .goal,
  .voice {
    font-size: 14px;
  }

  .voice {
    min-height: 0;
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .coin.in-pile img {
    animation: rock 2.6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
  }

  .scrap {
    animation: curl 3.4s ease-in-out infinite;
  }

  .voice.is-invite {
    animation: invite 1.8s ease-in-out infinite;
  }

  .coin:active img {
    transform: rotate(var(--tilt, 0deg)) scale(0.9);
  }

  .taken .coin:active img {
    transform: scale(0.9);
  }

  .btn-check:active,
  .btn-hint:active,
  .btn-go:active,
  .btn-alt:active,
  .mute:active {
    transform: scale(0.97);
  }

  .btn-check.is-ready {
    animation: ready 0.9s ease-in-out infinite;
  }

  .turn.is-cue {
    animation: cue 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .coin.is-next::after {
    animation: point 0.8s ease-in-out infinite;
  }

  .fx i {
    animation: burst 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .rule.is-chase {
    background-image: linear-gradient(
      90deg,
      var(--ak-accent),
      var(--ak-ink),
      var(--ak-accent),
      var(--ak-accent)
    );
    background-size: 200% 100%;
    box-shadow: 0 0 0 3px var(--ak-accent), var(--ak-glow);
    animation: chase 0.7s linear 2;
  }

  @keyframes rock {
    0%,
    100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
    50% { transform: rotate(calc(var(--tilt, 0deg) + 5deg)) translateY(-3px); }
  }

  @keyframes curl {
    0%,
    100% { transform: rotate(14deg) translateY(0); }
    50% { transform: rotate(18deg) translateY(-2px); }
  }

  @keyframes invite {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
  }

  @keyframes ready {
    0%,
    100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }

  @keyframes cue {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  @keyframes point {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }

  @keyframes burst {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); }
  }

  @keyframes chase {
    0% { background-position: 0 0; }
    100% { background-position: 200% 0; }
  }
}