/*
 * Poster look: big flat slabs, square corners, no shadows, one huge numeral.
 * Everything is sized from --u (px per design unit), taken from both the width and
 * the height of the visible screen, so the whole board fits either way up.
 * The balance is drawn straight on: the beam turns a few degrees in the page plane,
 * the pans only rise and fall, and every coin stays upright and flat.
 */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --aw: calc(100vw - var(--safe-l) - var(--safe-r));
  --ah: calc(100vh - var(--safe-t) - var(--safe-b));
  --u: min(calc(var(--aw) / 390), calc(var(--ah) / 760), 1.45px);
  --ak-backdrop-layer:
    linear-gradient(color-mix(in srgb, var(--ak-bg) 86%, transparent), color-mix(in srgb, var(--ak-bg) 86%, transparent)),
    url("art/drawer-felt.jpg");
  --text: 16px;
  --text-teach: 18px;
}

@supports (width: 1dvw) {
  :root {
    --aw: calc(100dvw - var(--safe-l) - var(--safe-r));
    --ah: calc(100dvh - var(--safe-t) - var(--safe-b));
  }
}

@media (orientation: landscape) {
  :root {
    --u: min(calc(var(--aw) / 760), calc(var(--ah) / 350), 1.45px);
  }
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: var(--text);
  line-height: 1.35;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

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

/* ---- frame ---- */

.app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  touch-action: manipulation;
}

.mute {
  position: fixed;
  z-index: 25;
  top: max(12px, var(--safe-t));
  left: max(12px, var(--safe-l));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  cursor: pointer;
}
.mute:active { background: var(--ak-btn-active); }
.mute .mute-slash { display: none; }
.mute[aria-pressed="true"] .mute-slash { display: inline; }
.mute[aria-pressed="true"] .mute-wave { display: none; }

.bar {
  position: absolute;
  z-index: 1;
  top: var(--safe-t);
  left: var(--safe-l);
  right: var(--safe-r);
  display: flex;
  justify-content: center;
  align-items: center;
  height: max(60px, calc(var(--u) * 60));
  padding: 0 72px;
  pointer-events: none;
}

.logo {
  margin: 0;
  display: block;
  background: var(--ak-btn-fill);
  padding: calc(var(--u) * 4) calc(var(--u) * 14);
  line-height: 0;
}
.logo img {
  display: block;
  height: calc(var(--u) * 34);
  width: auto;
}

/* ---- layout (portrait: the board sits above the controls) ---- */

.stage {
  --coin: max(48px, calc(var(--u) * 56));
  --sp: calc(var(--u) * 6);
  --pad: calc(var(--u) * 8);
  --tray: calc(var(--coin) * 2 + var(--sp) + var(--u) * 22);
  --plate: calc(var(--coin) * 3 + var(--sp) * 2 + var(--pad) * 2);
  /* the balance */
  --gapw: calc(var(--u) * 78);
  --sw: calc(var(--tray) * 2 + var(--gapw));
  --span: calc(var(--sw) - var(--tray));
  --lift: calc(var(--span) * 0.0782);
  --beamy: calc(var(--u) * 28);
  --chain: calc(var(--u) * 20);
  display: grid;
  width: min(100%, calc(var(--u) * 390 - 16px));
  padding-top: max(calc(var(--u) * 56), calc(60px - var(--safe-t)));
  grid-template-columns: 1fr var(--plate);
  grid-template-areas:
    "count pile"
    "scale scale"
    "ledger ledger"
    "coach coach"
    "actions actions";
  gap: calc(var(--u) * 3) calc(var(--u) * 10);
  align-items: stretch;
}

.board, .panel { display: contents; }

.count { grid-area: count; }
.pile { grid-area: pile; }
.scale { grid-area: scale; }
.ledger { grid-area: ledger; }
.coach { grid-area: coach; }
.actions { grid-area: actions; }

/* the giant numeral: weighings left */

.count {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--plate);
  padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 6);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  overflow: hidden;
}
.count-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
}
.count-num {
  display: block;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight, 700);
  font-size: calc(var(--u) * 150);
  line-height: 0.8;
  text-align: left;
  margin-left: calc(var(--u) * -4);
}

/* the nest of nine */

.pile {
  display: grid;
  grid-template-columns: repeat(3, var(--coin));
  grid-auto-rows: var(--coin);
  gap: var(--sp);
  padding: var(--pad);
  background: var(--ak-btn-fill);
  align-content: center;
  justify-content: center;
}

.slot {
  position: relative;
  width: var(--coin);
  height: var(--coin);
  border: 2px dashed var(--ak-choice-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ak-btn-ink);
  font-weight: 700;
  font-size: var(--text);
}
.slot.has-coin { border-color: transparent; }
.slot.has-coin .slot-num { visibility: hidden; }

/* ---- coins ---- */

.coin {
  position: absolute;
  inset: -2px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.coin img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.coin-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: calc(var(--coin) * 0.5);
  line-height: 1;
  color: var(--ak-ink);
  pointer-events: none;
}
/* the reverse of the light coin: a stamp that says "this one rises" */
.coin-back {
  position: absolute;
  left: 17%;
  top: 17%;
  width: 66%;
  height: 66%;
  visibility: hidden;
  pointer-events: none;
}
.coin.is-stamped .coin-num { visibility: hidden; }
.coin.is-stamped .coin-back { visibility: visible; }

.coin::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -6);
  border-radius: 50%;
  border: 0 solid transparent;
  pointer-events: none;
}
.coin.is-selected { transform: scale(1.1); }
.coin.is-selected::after {
  border: calc(var(--u) * 5) solid var(--ak-accent-2);
  outline: 2px solid var(--ak-ink);
}
.coin.is-odd::after {
  inset: calc(var(--u) * -8);
  border: calc(var(--u) * 7) solid var(--ak-accent-2);
  outline: 3px solid var(--ak-ink);
}
.coin.is-named::after {
  inset: calc(var(--u) * -7);
  border: calc(var(--u) * 4) dashed var(--ak-btn-ink);
}
.is-over .coin { cursor: default; }

/* ---- the balance: stand, beam, two hanging pans ---- */

.scale {
  --k: 0;
  position: relative;
  width: var(--sw);
  height: calc(var(--beamy) + var(--chain) + var(--tray) + var(--u) * 6);
  justify-self: center;
}

.post {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--beamy) - var(--u) * 9);
  bottom: 0;
  width: calc(var(--u) * 10);
  margin-left: calc(var(--u) * -5);
  background: var(--ak-btn-fill);
}
.post::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin-left: calc(var(--u) * -10);
  border-radius: 50%;
  background: var(--ak-btn-fill);
  border: calc(var(--u) * 4) solid var(--ak-accent-2);
}
.post::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--u) * 54);
  height: calc(var(--u) * 8);
  margin-left: calc(var(--u) * -27);
  background: var(--ak-btn-fill);
}

.beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--beamy) - var(--u) * 6);
  width: calc(var(--span) + var(--u) * 30);
  height: calc(var(--u) * 12);
  margin-left: calc((var(--span) + var(--u) * 30) / -2);
  background: var(--ak-accent-2);
  transform: rotate(calc(var(--k) * 9deg));
}
.cap {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  margin-top: calc(var(--u) * -14);
  border-radius: 50%;
  background: var(--ak-btn-fill);
  border: calc(var(--u) * 3) solid var(--ak-accent-2);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.cap-l { left: calc(var(--u) * 1); }
.cap-r { right: calc(var(--u) * 1); }

.pan {
  position: absolute;
  z-index: 1;
  top: var(--beamy);
  width: var(--tray);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pan-left {
  left: 0;
  transform: translateY(calc(var(--k) * var(--lift) * -1));
}
.pan-right {
  right: 0;
  transform: translateY(calc(var(--k) * var(--lift)));
}
.hanger {
  display: block;
  width: calc(var(--tray) * 0.78);
  height: var(--chain);
}

.tray {
  position: relative;
  width: var(--tray);
  height: var(--tray);
}
.tray::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("art/tray.png") center / 100% 100% no-repeat;
}
/* a coin is chosen: both pans light up, so the next tap is plainly a pan */
.scale.is-ready .tray::before {
  filter: drop-shadow(0 0 calc(var(--u) * 8) var(--ak-accent-2)) drop-shadow(0 0 calc(var(--u) * 3) var(--ak-accent-2));
}
.tray-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.tray-slots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, var(--coin));
  grid-auto-rows: var(--coin);
  gap: var(--sp);
  align-content: center;
  justify-content: center;
  pointer-events: none;
}
.tray-slots .slot { pointer-events: none; }
.tray-slots .coin { pointer-events: auto; }

.verdict {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--beamy) + var(--chain) + var(--tray) / 2);
  background-image: url("art/verdict-sign.png");
  background-repeat: no-repeat;
  background-color: var(--ak-accent-2);
  --vw: calc(var(--u) * 50);
  width: var(--vw);
  height: calc(var(--vw) * 150 / 100);
  margin-left: calc(var(--vw) / -2);
  margin-top: calc(var(--vw) * 150 / 100 / -2);
  background-size: calc(var(--vw) * 384 / 100) auto;
}
.verdict[data-v="left"]  { background-position: calc(var(--vw) * -48 / 100) calc(var(--vw) * -40 / 100); }
.verdict[data-v="level"] { background-position: calc(var(--vw) * -144 / 100) calc(var(--vw) * -40 / 100); }
.verdict[data-v="right"] { background-position: calc(var(--vw) * -238 / 100) calc(var(--vw) * -40 / 100); }
.verdict[data-v="idle"] {
  width: calc(var(--u) * 58);
  height: calc(var(--u) * 35);
  margin-left: calc(var(--u) * -29);
  margin-top: calc(var(--u) * -17);
  background-size: 100% 100%;
}

/* the weighings, in a two-line tag below the beam */

.ledger {
  justify-self: center;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 3) calc(var(--u) * 22);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  clip-path: polygon(calc(var(--u) * 12) 0, 100% 0, 100% 100%, calc(var(--u) * 12) 100%, 0 50%);
}
.ledger-row {
  margin: 0;
  font-size: var(--text);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.ledger-row b { font-weight: 800; }
.ledger-row.is-unused { font-weight: 400; }

/* ---- one message box: teaching caption + next step, or what went wrong ---- */

.coach {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 10);
  align-items: center;
  align-content: start;
  row-gap: calc(var(--u) * 3);
  min-height: calc(var(--text) * 1.3 * 2 + 8px);
  padding: calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 10);
  background: var(--ak-surface);
  border-left: calc(var(--u) * 8) solid var(--ak-btn-fill);
}
.coach.is-teaching {
  min-height: calc(var(--text-teach) * 1.3 * 3 + var(--text) * 1.3 + 14px);
  border-left-color: var(--ak-accent);
}
.coach.is-empty {
  background: transparent;
  border-left-color: transparent;
}
.coach-words { display: contents; }
.coach-main { grid-column: 1; }
.coach .btn-hint { grid-column: 2; grid-row: 1; align-self: start; }
.coach-main {
  margin: 0;
  font-size: var(--text-teach);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ak-ink);
}
.coach-now {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ak-ink);
}
.coach.is-teaching .coach-now { font-size: var(--text); font-weight: 800; }
.coach-now.is-bad {
  padding-left: calc(var(--u) * 8);
  border-left: calc(var(--u) * 5) solid var(--ak-accent);
}
.btn-hint {
  min-width: max(68px, calc(var(--u) * 72));
  padding: 0 calc(var(--u) * 6);
}
.btn-hint[aria-pressed="true"] {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

/* guide ring + arrow */

.pointer {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.ring {
  position: absolute;
  border: 4px solid var(--ak-accent-2);
  outline: 3px solid var(--ak-ink);
}
.ring.is-round { border-radius: 50%; }
.arrow {
  position: absolute;
  width: 32px;
  height: 32px;
}
.arrow[data-dir="up"] { transform: rotate(180deg); }
.arrow[data-dir="left"] { transform: rotate(90deg); }
.arrow[data-dir="right"] { transform: rotate(-90deg); }

/* ---- buttons ---- */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: calc(var(--u) * 8);
}

.btn {
  min-height: max(48px, calc(var(--u) * 54));
  padding: 0 calc(var(--u) * 10);
  border: 3px solid var(--ak-btn-fill);
  border-radius: 0;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: var(--text);
  line-height: 1.15;
  cursor: pointer;
}
.btn:active {
  background: var(--ak-btn-active);
  color: var(--ak-btn-ink);
}
.btn.is-ready {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}
.btn.is-ready:active { background: var(--ak-btn-active); }
.btn-clear { border-color: var(--ak-choice-border); }
.btn-check.is-ready { border-color: var(--ak-accent-2); }

@media (hover: hover) {
  .btn:hover { background: var(--ak-btn-hover); color: var(--ak-btn-ink); }
}

.is-over .actions .btn { cursor: default; }

/* ---- landscape: board on one side, controls and status on the other ---- */

@media (orientation: landscape) {
  .stage {
    --coin: max(48px, calc(var(--u) * 48));
    --sp: calc(var(--u) * 5);
    --pad: calc(var(--u) * 7);
    --tray: calc(var(--coin) * 2 + var(--sp) + var(--u) * 18);
    --gapw: calc(var(--u) * 52);
    --beamy: calc(var(--u) * 26);
    --chain: calc(var(--u) * 20);
    width: min(100%, calc(var(--u) * 760 - 16px));
    padding-top: 0;
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 258);
    grid-template-areas: "board panel";
    gap: 0 calc(var(--u) * 12);
    align-items: center;
  }

  .board {
    grid-area: board;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "pile scale"
      "pile ledger";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
    gap: calc(var(--u) * 8) calc(var(--u) * 10);
    padding-top: calc(var(--u) * 54);
    min-width: 0;
  }
  .board .pile { grid-area: pile; }
  .board .scale { grid-area: scale; }
  .board .ledger { grid-area: ledger; }

  .panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 8);
    justify-content: center;
    min-width: 0;
  }

  .count {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--u) * 6);
    min-height: calc(var(--u) * 92);
    height: calc(var(--u) * 92);
    margin-right: 58px;
    padding: calc(var(--u) * 6) calc(var(--u) * 10);
  }
  .count-label {
    order: 2;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding-bottom: calc(var(--u) * 6);
    text-align: right;
  }
  .count-num {
    order: 1;
    font-size: calc(var(--u) * 88);
    margin-left: calc(var(--u) * -2);
  }

  .coach {
    grid-template-columns: 1fr;
    align-items: start;
    gap: calc(var(--u) * 6);
  }
  .coach.is-teaching { min-height: 0; }
  .coach .btn-hint {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
  }

  .actions {
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: calc(var(--u) * 6);
  }
  .btn { padding: 0 3px; }

  .verdict { --vw: calc(var(--u) * 40); }
  .verdict[data-v="idle"] {
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 27);
    margin-left: calc(var(--u) * -22);
    margin-top: calc(var(--u) * -13);
  }

  .bar {
    right: auto;
    width: calc(var(--aw) - var(--u) * 272);
    justify-content: flex-start;
    padding: 0 0 0 72px;
  }
}

/* ---- the ending poster ---- */

.poster {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: start;
  padding:
    max(calc(var(--safe-t) + 64px), 72px)
    max(var(--safe-r), 20px)
    max(var(--safe-b), 20px)
    max(var(--safe-l), 20px);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  overflow: hidden;
  touch-action: manipulation;
}
.poster-kicker {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.poster-num {
  margin: 0;
  align-self: center;
  justify-self: center;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight, 700);
  font-size: min(48vh, 74vw, 520px);
  line-height: 0.85;
  color: var(--ak-btn-ink);
}
@supports (width: 1dvw) {
  .poster-num { font-size: min(48dvh, 74dvw, 520px); }
}
.poster-bar {
  width: 100%;
  height: 12px;
  margin: 0 0 14px;
  background: var(--ak-accent-2);
}
.poster-text { width: 100%; }
.poster-says {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
}
.poster-reason {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}
.poster-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}
.poster .btn { min-height: 56px; font-size: 18px; }
.btn-another {
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  border-color: var(--ak-choice-bg);
}
.btn-change {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border-color: var(--ak-btn-ink);
}
.btn-another:active, .btn-change:active {
  background: var(--ak-btn-active);
  color: var(--ak-btn-ink);
}
@media (hover: hover) {
  .btn-another:hover { background: var(--ak-surface); color: var(--ak-ink); }
  .btn-change:hover { background: var(--ak-btn-hover); }
}

/* sideways the table stays in view; the verdict slides in over the controls */
@media (orientation: landscape) {
  .poster {
    inset: 0 0 0 auto;
    width: calc(var(--safe-r) + var(--u) * 276);
    min-width: 250px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 10px;
    padding: 14px max(var(--safe-r), 12px) 14px 14px;
  }
  .poster-num {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    font-size: min(120px, 34vh);
  }
  .poster-kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding-top: 6px;
    padding-right: 54px;
    font-size: 17px;
    line-height: 1.2;
  }
  .poster-bar { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 10px; height: 8px; }
  .poster-text { grid-column: 1 / -1; grid-row: 3; }
  .poster-says { font-size: 17px; line-height: 1.3; }
  .poster-reason { font-size: 15px; margin-top: 6px; line-height: 1.3; }
  .poster-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .poster .btn { min-height: 52px; font-size: 16px; padding: 0 4px; }
}
@media (orientation: landscape) {
  @supports (width: 1dvw) {
    .poster-num { font-size: min(120px, 34dvh); }
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  .coin {
    transition: transform 140ms ease-out;
  }
  .coin.is-settling {
    animation: settle 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .coin.is-odd::after {
    animation: odd-pulse 900ms ease-in-out infinite alternate;
  }
  .is-solved .coin {
    animation: settle 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .coin.is-flipping {
    animation: flip 600ms ease-in-out both;
    animation-delay: 0ms;
  }
  .coin.is-flipping .coin-num {
    animation: face-front 600ms steps(1, end) both;
  }
  .coin.is-flipping .coin-back {
    animation: face-back 600ms steps(1, end) both;
  }
  .scale.is-ready .tray::before {
    animation: glow 1100ms ease-in-out infinite alternate;
  }
  .ring {
    animation: ring-pulse 1000ms ease-in-out infinite alternate;
  }
  .arrow {
    animation: arrow-nudge 1000ms ease-in-out infinite alternate;
  }
  .poster.is-flooding {
    animation: flood 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .poster.is-flooding .poster-num {
    animation: swell 760ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .poster.is-flooding .poster-text,
  .poster.is-flooding .poster-kicker,
  .poster.is-flooding .poster-bar {
    animation: rise-in 420ms 380ms ease-out both;
  }
  .verdict.is-new {
    animation: stamp 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes settle {
    0% { transform: scale(1.28); }
    60% { transform: scale(0.94); }
    100% { transform: scale(1); }
  }
  @keyframes flip {
    0% { transform: scaleX(1); }
    42% { transform: scaleX(0.04); }
    58% { transform: scaleX(0.04); }
    80% { transform: scaleX(1.12); }
    100% { transform: scaleX(1); }
  }
  @keyframes face-front {
    0% { visibility: visible; }
    50% { visibility: hidden; }
    100% { visibility: hidden; }
  }
  @keyframes face-back {
    0% { visibility: hidden; }
    50% { visibility: visible; }
    100% { visibility: visible; }
  }
  @keyframes odd-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
  }
  @keyframes glow {
    from { filter: drop-shadow(0 0 calc(var(--u) * 3) var(--ak-accent-2)) drop-shadow(0 0 calc(var(--u) * 1) var(--ak-accent-2)); }
    to { filter: drop-shadow(0 0 calc(var(--u) * 9) var(--ak-accent-2)) drop-shadow(0 0 calc(var(--u) * 3) var(--ak-accent-2)); }
  }
  @keyframes ring-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
  }
  @keyframes arrow-nudge {
    from { margin-top: 0; }
    to { margin-top: 5px; }
  }
  @keyframes flood {
    from { clip-path: circle(0 at var(--fx, 50%) var(--fy, 50%)); }
    to { clip-path: circle(150vmax at var(--fx, 50%) var(--fy, 50%)); }
  }
  @keyframes swell {
    from { transform: scale(0.1); }
    to { transform: scale(1); }
  }
  @keyframes rise-in {
    from { transform: translateY(24px); }
    to { transform: translateY(0); }
  }
  @keyframes stamp {
    from { transform: scale(1.35); }
    to { transform: scale(1); }
  }
  @keyframes slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  @media (orientation: landscape) {
    .poster.is-flooding {
      animation: slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .poster.is-flooding .poster-num {
      animation: swell 620ms 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
      transform-origin: left top;
    }
  }
}