/* Ferrycount: pixel grid. Square corners, no blur, everything on one coarse unit (--u). */

:root {
  --gx: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gt: max(6px, env(safe-area-inset-top, 0px));
  --gb: max(8px, env(safe-area-inset-bottom, 0px));
  --ctl: 340px;
  --line: 3px;
  --slot-h: clamp(78px, 10.6dvh, 104px);
  --pick-h: clamp(76px, 10dvh, 100px);
  --btn-h: clamp(52px, 7dvh, 64px);
  --head-h: clamp(56px, 7.4dvh, 76px);
  --u: max(22px, min(40px, calc((100dvw - 2 * var(--gx)) / 14), calc((100dvh - 500px - var(--gt) - var(--gb)) / 9)));
  --ctl-w: calc(var(--u) * 14);
}

@media (orientation: landscape) {
  :root {
    --u: max(22px, min(40px, calc((100dvw - var(--gx) - max(var(--gx), 68px) - var(--ctl) - 16px) / 14), calc((100dvh - var(--gt) - var(--gb) - 64px) / 9)));
    --ctl-w: var(--ctl);
  }
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--ak-font-body);
  color: var(--ak-ink);
  background-color: var(--ak-bg);
  /* The kit's washed sheet is the base. The play sheet below paints a cleaned copy of it. */
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

p { margin: 0; }

.play {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 2.2dvh, 22px);
  padding: var(--gt) var(--gx) var(--gb);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ak-bg) 74%, transparent), color-mix(in srgb, var(--ak-bg) 74%, transparent)),
    url('./art/bench-clean.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* The coarse sheet grid. JS sets --gx0 / --gy0 so the lines run through the board edges. */
.play::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ak-accent) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ak-accent) 22%, transparent) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  background-position: var(--gx0, 0px) var(--gy0, 0px);
}

.play > * { position: relative; }

/* ---------- top: logo and mute ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-w);
  height: var(--head-h);
  flex: none;
}

.logo {
  display: block;
  height: calc(var(--head-h) * 0.72);
  width: auto;
}

.mute {
  position: fixed;
  z-index: 5;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ak-surface);
  border: var(--line) solid var(--ak-outline);
  color: var(--ak-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.mute:active { transform: translateY(3px); }
.mute svg { display: block; fill: currentColor; }

/* ---------- board ---------- */

.stage {
  display: grid;
  gap: 6px;
  width: var(--ctl-w);
  flex: none;
}

.board {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 9);
}

.tags {
  display: grid;
  grid-template-columns: calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * 3);
  height: var(--u);
  align-items: center;
}

.tag {
  font-family: var(--ak-font-display);
  font-size: clamp(11px, calc(var(--u) * 0.5), 15px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--ak-ink);
}

.tag-mid { color: var(--ak-ink-muted); }

.field {
  position: relative;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 8);
  outline: var(--line) solid var(--ak-outline);
  background: var(--ak-ink-muted);
}

/* One painted strip of open water, two dirt banks, a wooden dock on each. */
.water,
.bank,
.dock,
.ghost,
.hull,
.piece img,
.tile img {
  image-rendering: pixelated;
}

.water {
  position: absolute;
  left: calc(var(--u) * 2.5);
  top: 0;
  width: calc(var(--u) * 9);
  height: 100%;
  background: url('./art/px-water.png') 0 0 / calc(var(--u) * 3) calc(var(--u) * 4) repeat;
}

.bank {
  position: absolute;
  top: 0;
  width: calc(var(--u) * 3);
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.bank-l { left: 0; background-image: url('./art/px-bank-l.png'); }
.bank-r { right: 0; background-image: url('./art/px-bank-r.png'); }

.dock {
  position: absolute;
  top: calc(var(--u) * 1.5);
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 5);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.dock-l { left: calc(var(--u) * 2.5); background-image: url('./art/px-dock-l.png'); }
.dock-r { left: calc(var(--u) * 10.7); background-image: url('./art/px-dock-r.png'); }

.ghost,
.piece,
.ferry {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)));
}

.ghost {
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  border: 3px dashed var(--ak-bg);
}

.ferry {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 4.6);
}

.hull {
  display: block;
  width: 100%;
  height: 100%;
}

.piece {
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
}

.piece img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(calc(var(--u) * 0.1) calc(var(--u) * 0.1) 0 color-mix(in srgb, var(--ak-ink) 50%, transparent));
}

.rower {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.rower img {
  position: absolute;
  inset: 0;
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ak-bg);
  border: var(--line) solid var(--ak-outline);
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  pointer-events: none;
}

.tile.t-grain { background: var(--ak-accent); }

/* Something went wrong with this piece: a gold plate behind it, hard ink edge. */
.piece::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.1);
  opacity: 0;
  background: var(--ak-accent-2);
  outline: 3px solid var(--ak-outline);
}

.piece.is-culprit::before,
.piece.is-stuck::before,
.piece.is-missing::before,
.piece.is-eaten::before { opacity: 1; }

.piece.is-eaten img { opacity: 0.4; }

.piece.is-eaten::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 3px), var(--ak-ink) calc(50% - 3px), var(--ak-ink) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(to top left, transparent calc(50% - 3px), var(--ak-ink) calc(50% - 3px), var(--ak-ink) calc(50% + 3px), transparent calc(50% + 3px));
}

.piece[data-id="ferryman"] { z-index: 4; }
.piece { z-index: 3; }
.ferry { z-index: 2; }
.dock { z-index: 1; }
.ghost { z-index: 0; }

/* the short scene when a rule breaks */
.fx {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 0.3);
  height: calc(var(--u) * 0.3);
  background: var(--ak-bg);
  border: 2px solid var(--ak-ink);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)));
}

.spark.is-grain { background: var(--ak-accent-2); }

.bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 0.25);
  background: var(--ak-bg);
  border: var(--line) solid var(--ak-outline);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)));
}

.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(var(--u) * 0.3);
  height: calc(var(--u) * 0.3);
  margin: -3px 0 0 calc(var(--u) * -0.15);
  background: var(--ak-ink);
}

.bubble svg { display: block; width: 100%; height: 100%; fill: var(--ak-ink); }

.stamp {
  position: absolute;
  z-index: 6;
  left: calc(var(--u) * 3.4);
  top: 50%;
  width: calc(var(--u) * 5.2);
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.4);
  transform: translateY(-50%);
  background: var(--ak-ink);
  color: var(--ak-bg);
  border: var(--line) solid var(--ak-bg);
  outline: var(--line) solid var(--ak-ink);
}

.stamp[hidden] { display: none; }
.stamp svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- controls ---------- */

.ctl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--ctl-w);
  flex: none;
}

.plan {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  border-top: var(--line) solid var(--ak-outline);
  border-left: var(--line) solid var(--ak-outline);
  background: var(--ak-surface);
}

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--slot-h);
  padding: 0;
  background: var(--ak-surface);
  border: 0;
  border-right: var(--line) solid var(--ak-outline);
  border-bottom: var(--line) solid var(--ak-outline);
  cursor: pointer;
  touch-action: manipulation;
}

.slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 6px;
  font-family: var(--ak-font-display);
  font-size: 19px;
  line-height: 1;
  color: var(--ak-ink);
}

.slot-top svg { display: block; fill: currentColor; }

.slot-top { flex: none; }

.slot-body {
  position: relative;
  flex: 1;
  display: block;
  min-height: 0;
}

.slot-body .tile {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-width: 0;
  border-top: var(--line) solid var(--ak-outline);
}

.slot-empty {
  display: block;
  width: 100%;
  height: 100%;
  border: var(--line) dashed var(--ak-ink-muted);
  border-width: var(--line) 0 0;
}

.slot.is-selected { background: var(--ak-accent-2); }
.slot.is-selected .slot-empty { border-style: solid; border-color: var(--ak-ink); }

/* The broken crossing: ink block, gold number and a gold cross. */
.slot.is-broken {
  background: var(--ak-ink);
  color: var(--ak-accent-2);
}

.slot.is-broken .slot-top { color: var(--ak-accent-2); }
.slot.is-broken .slot-body .tile { border-top-color: var(--ak-accent-2); }

.slot.is-flag {
  background: var(--ak-accent-2);
}

.slot.is-run {
  background: var(--ak-accent-2);
}

.slot.is-lit { background: var(--ak-accent-2); }

.slot:focus-visible,
.pick:focus-visible,
.btn:focus-visible,
.mute:focus-visible {
  outline: 3px dashed var(--ak-ink);
  outline-offset: -6px;
  z-index: 2;
}

.btn:focus-visible { outline-offset: 3px; }
.mute:focus-visible { outline-offset: 3px; }

/* coach: teaching words, hint, or the one-line how-to. Always on screen. */

.band {
  min-height: calc(114px + 1.5dvh);
  padding-top: 24px;
  display: flex;
  align-items: flex-start;
}

.coach {
  width: 100%;
  padding: 8px 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ak-ink);
}

.coach.is-idle {
  font-size: 17px;
  font-weight: 600;
  color: var(--ak-ink);
  background: var(--ak-surface);
  border: var(--line) solid var(--ak-outline);
}

.coach.is-wrong {
  font-weight: 700;
  background: var(--ak-accent-2);
  color: var(--ak-ink);
  border: var(--line) solid var(--ak-outline);
  border-left: 8px solid var(--ak-outline);
}

.coach.is-teach,
.coach.is-hint {
  position: relative;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border-left: 8px solid var(--ak-accent-2);
}

.coach.is-teach {
  padding-left: 46px;
}

.coach.is-teach::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 26px;
  height: 21px;
  margin-top: -10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23C4A04A' d='M5 0h1v1H5zM4 1h3v1H4zM3 2h5v1H3zM2 3h7v1H2zM1 4h9v1H1zM4 5h3v4H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.coach.is-teach[data-dir="down"]::before { transform: rotate(180deg); }

.picker {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: var(--pick-h);
  padding: 0;
  background: var(--ak-surface);
  border: var(--line) solid var(--ak-outline);
  font-family: var(--ak-font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ak-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.pick .tile { width: 46px; height: 46px; flex: none; }
.pick:active { transform: translateY(3px); }
.pick[aria-pressed="true"] { background: var(--ak-accent-2); }
.pick.is-suggest { background: var(--ak-accent-2); outline: 4px solid var(--ak-ink); outline-offset: 2px; }

.nobody {
  display: grid;
  place-items: center;
  background: var(--ak-bg);
}

.nobody svg { display: block; fill: var(--ak-ink); }

.acts {
  display: flex;
  gap: 8px;
  width: 100%;
}

.btn {
  min-height: var(--btn-h);
  padding: 0 14px;
  border: var(--line) solid var(--ak-outline);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active { transform: translateY(3px); background: var(--ak-btn-active); }
.btn-main { flex: 1; }
.btn-quiet {
  background: var(--ak-surface);
  color: var(--ak-ink);
}

.btn[hidden] { display: none; }
.btn[aria-disabled="true"] {
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  border-style: dashed;
}

#hint { flex: none; min-width: 96px; }

/* teaching: ring on the target, arrow in the lane beside it */

.is-target {
  outline: 5px solid var(--ak-ink);
  outline-offset: 0;
  z-index: 3;
}

.picker.is-target { outline-offset: 4px; }

.slot.is-target::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 28px;
  height: 22px;
  margin-left: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath fill='%231C1814' d='M5 0h1v1H5zM4 1h3v1H4zM3 2h5v1H3zM2 3h7v1H2zM1 4h9v1H1zM4 5h3v4H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.slot.is-target::after { top: calc(100% + 7px); }

/* ---------- phases ---------- */

.play[data-phase="run"] .picker,
.play[data-phase="run"] .acts {
  opacity: 0.45;
  pointer-events: none;
}

.play[data-phase="run"] .plan { pointer-events: none; }

.play[data-phase="ended"] .band,
.play[data-phase="ended"] .picker,
.play[data-phase="ended"] .acts { display: none; }

.play[data-phase="ended"] .plan { pointer-events: none; }

/* ---------- ending ---------- */

.end {
  display: grid;
  gap: 8px;
  width: 100%;
}

.end[hidden] { display: none; }

.end-top {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--ak-ink);
  color: var(--ak-accent-2);
  border: var(--line) solid var(--ak-ink);
}

.end-word:empty { display: none; }
.end-word svg { display: block; width: 100%; height: auto; fill: currentColor; }

.end-says {
  padding: 8px 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--ak-surface);
  border: var(--line) solid var(--ak-outline);
  color: var(--ak-ink);
}

.end-says:focus { outline: none; }

.end-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ak-font-display);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ak-accent-2);
}

.caret {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--ak-accent-2);
}

.end-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.end-btns #again { flex: 1 1 100%; }
.end-btns #fix,
.end-btns #settings { flex: 1 1 calc(50% - 4px); }
.end-btns .btn[hidden] { display: none; }

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

@media (orientation: landscape) {
  .play {
    display: grid;
    grid-template-columns: calc(var(--u) * 14) var(--ctl);
    grid-template-rows: 48px auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 16px;
    row-gap: 4px;
    padding-right: max(var(--gx), 68px);
  }

  .top { grid-column: 1; grid-row: 1; height: 48px; width: 100%; }
  .stage { grid-column: 1; grid-row: 2 / span 2; align-self: center; width: 100%; }
  .ctl { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: var(--ctl); }
  .band { min-height: 114px; padding-top: 24px; padding-bottom: 0; }
  .coach { padding: 6px 10px; }
  .btn { min-height: 48px; }
  .pick { height: 76px; }
  .plan { --slot-h: 78px; }
  .slot { height: 78px; }
  .ctl { align-self: start; padding-top: 4px; }
  .end { gap: 6px; }
  .end-top { gap: 6px; padding: 6px 10px; }
  .end-word svg { width: auto; height: 40px; margin: 0; }
  .end-btns .btn { font-size: 16px; letter-spacing: 0.04em; }
  .end-btns #again { font-size: 19px; }
  .end-says { padding: 6px 10px; font-size: 17px; }
  .end-prompt { font-size: 15px; }
}

@media (max-height: 700px) and (orientation: portrait) {
  :root {
    --slot-h: 76px;
    --pick-h: 70px;
    --btn-h: 48px;
  }
  .play { gap: 4px; }
  .ctl { gap: 6px; }
  .stage { gap: 4px; }
  .band { min-height: 0; padding-top: 22px; padding-bottom: 0; }
  .coach { padding: 5px 10px; }
  .coach.is-teach { padding-left: 46px; }
  .coach.is-idle { font-size: 16px; }
  .top { height: 48px; }
  .end { gap: 6px; }
  .end-top { gap: 6px; padding: 6px 10px; }
  .end-word svg { width: auto; height: 40px; margin: 0; }
  .end-says { padding: 6px 10px; font-size: 17px; }
  .end-prompt { font-size: 15px; }
  .end-btns { gap: 6px; }
  .end-btns .btn { font-size: 16px; letter-spacing: 0.04em; min-height: 48px; }
  .end-btns #again { font-size: 19px; }
}

@media (max-height: 760px) and (orientation: portrait) {
  .band { min-height: 0; padding-bottom: 6px; }
}

/* ---------- motion: whole steps only ---------- */

@media (prefers-reduced-motion: no-preference) {
  .water { animation: drift 14s steps(8) infinite; }
  .hull { animation: bob 3.2s steps(1) infinite; }

  /* waiting for the next slot: he breathes, the oar rises a step behind */
  .play[data-phase="plan"] .rower-body { animation: breathe 2.6s steps(1) infinite; }
  .play[data-phase="plan"] .rower-oar { animation: breathe-oar 2.6s steps(1) infinite; }

  .field.is-rowing .rower-oar { animation: stroke 420ms steps(1) infinite; }
  .field.is-rowing .rower-body { animation: lean 840ms steps(1) infinite; }
  .field.is-rowing .hull { animation: none; }

  .spark { animation: spark 520ms steps(4, end) forwards; }
  .bubble { animation: pop 240ms steps(2, end) both; }
  .piece.pounce img { animation: crouch 160ms steps(1) 1; }

  .is-target { animation: ring 900ms steps(1) infinite; }

  .slot.settle .tile,
  .slot.settle .slot-empty { animation: settle 240ms steps(3, end); }

  .piece.hop { animation: hop 320ms steps(2, end); }

  .ferry.refuse { animation: refuse 320ms steps(4, end); }

  .ltr { animation: stamp 240ms steps(3, end) both; animation-delay: calc(var(--i) * 140ms); }

  .caret { animation: blink 1000ms steps(1) infinite; }
  .end-prompt { animation: none; }

  .slot.is-lit { transition: none; }
}

@keyframes drift {
  to { background-position: 0 calc(var(--u) * 4); }
}

@keyframes bob {
  0%, 49% { translate: 0 0; }
  50%, 100% { translate: 0 calc(var(--u) * 0.1); }
}

@keyframes breathe {
  0%, 49% { translate: 0 0; }
  50%, 100% { translate: 0 calc(var(--u) * -0.1); }
}

@keyframes breathe-oar {
  0%, 24% { translate: 0 0; }
  25%, 74% { translate: 0 calc(var(--u) * -0.1); }
  75%, 100% { translate: 0 0; }
}

@keyframes stroke {
  0% { translate: 0 calc(var(--u) * -0.2); }
  50% { translate: 0 calc(var(--u) * 0.2); }
}

@keyframes lean {
  0% { translate: 0 0; }
  50% { translate: 0 calc(var(--u) * 0.1); }
}

@keyframes spark {
  from { translate: 0 0; opacity: 1; }
  to { translate: calc(var(--dx) * var(--u)) calc(var(--dy) * var(--u)); opacity: 0; }
}

@keyframes pop {
  from { scale: 0.5; }
  to { scale: 1; }
}

@keyframes crouch {
  from { translate: 0 calc(var(--u) * 0.2); }
  to { translate: 0 0; }
}

@keyframes ring {
  0%, 100% { outline-width: 5px; }
  50% { outline-width: 2px; }
}

@keyframes settle {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes hop {
  0% { translate: 0 0; }
  50% { translate: 0 calc(var(--u) * -0.25); }
  100% { translate: 0 0; }
}

@keyframes refuse {
  0%, 100% { translate: 0 0; }
  25% { translate: calc(var(--u) * 0.25) 0; }
  75% { translate: calc(var(--u) * -0.25) 0; }
}

@keyframes stamp {
  0% { transform: translateY(-5px); opacity: 0; }
  34% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}