/* ===========================================================================
   THE BIG SHOTS on /watch/<Name> -- js/player-channel/shot-moments.js.

   A port of the app's ShotMomentHost (mobile/src/match/ShotMomentHost.tsx):
   the same three weights, the same colours, the same timings. Read that file
   for why each looks the way it does; this one only says how it is drawn.

     gold    perfect rack, golden break -- full screen, a hit, a shake
     red     scratch, bad break         -- a stamp
     slate   dry break                  -- quiet, no shake
     pill    the 11 down                -- over the top of the picture

   SIZED IN cqmin OF THE LAYER, which covers the match: on the monitor beside
   the table that is the whole screen, in a window it is the board. One set of
   numbers fills both.

   --hit is the impact frame in ms, set per moment by the script. Everything
   that "goes off on the hit" is delayed by it, and the sound plays on it.
   ========================================================================= */

.pc-mo {
  --gold: #ffc933;
  --gold-deep: #c98a00;
  --red: #ff3b3b;
  --slate: #8fa3b8;
  --hit: 540ms;

  position: absolute;
  inset: 0;
  z-index: 30;
  container-type: size;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  font-family: "Barlow Condensed", "Josefin Sans", "Arial Narrow", sans-serif;
  transition: opacity 260ms ease-in;
}

.pc-mo.is-leaving {
  opacity: 0;
}

.pc-mo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The balls come from the shared rail renderer, which sizes them for a row of
   balls in a line of text. Here each one fills the slot it is given. */
.pc-mo .ov-ball,
.pc-mo-toast .ov-ball {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.pc-mo-backdrop,
.pc-mo-flash,
.pc-mo-vignette {
  position: absolute;
  inset: 0;
}

.pc-mo-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@keyframes pc-mo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================================================================
   Gold: the golden break and the perfect rack
   ========================================================================= */

.pc-mo--bonus {
  pointer-events: auto;
  cursor: pointer;
}

.pc-mo--bonus .pc-mo-backdrop {
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(255, 201, 51, 0.42), rgba(201, 138, 0, 0.14) 45%, rgba(0, 0, 0, 0) 100%),
    rgba(8, 6, 0, 0.94);
  animation: pc-mo-fade-in 160ms ease-out both;
}

.pc-mo--bonus .pc-mo-stage {
  animation: pc-mo-shake-y 280ms linear var(--hit) both;
}

.pc-mo--bonus.is-perfect .pc-mo-stage {
  animation: pc-mo-shake-xy 280ms linear var(--hit) both;
}

.pc-mo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- The run, for the perfect rack ---------------------------------------- */

.pc-mo-run {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8cqmin;
  margin-bottom: 2.2cqmin;
  animation: pc-mo-run-bob 500ms ease-out var(--hit) both;
}

.pc-mo-run-ball {
  width: 6.4cqmin;
  height: 6.4cqmin;
  animation: pc-mo-pop 140ms linear both;
  animation-delay: calc(160ms + var(--i) * 80ms);
}

.pc-mo-run-arrow {
  margin-left: 0.8cqmin;
  font-size: 5.4cqmin;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

@keyframes pc-mo-pop {
  0% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pc-mo-run-bob {
  0%, 100% { transform: none; }
  40% { transform: translateY(-1.2cqmin); }
}

/* --- The ball, and everything that goes off when it lands ----------------- */

.pc-mo-anchor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24cqmin;
  height: 24cqmin;
}

.pc-mo:not(.is-perfect) .pc-mo-anchor {
  width: 26cqmin;
  height: 26cqmin;
}

.pc-mo-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230cqmax;
  height: 230cqmax;
  margin: -115cqmax 0 0 -115cqmax;
  opacity: 0;
  animation:
    pc-mo-rays-in 400ms ease-out var(--hit) forwards,
    pc-mo-spin 9s linear var(--hit) infinite;
}

.is-perfect .pc-mo-rays {
  --rays: 0.95;
}

@keyframes pc-mo-rays-in {
  to { opacity: var(--rays, 0.75); }
}

@keyframes pc-mo-spin {
  to { transform: rotate(360deg); }
}

.pc-mo-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  margin: -50% 0 0 -50%;
  border-radius: 50%;
  border: 1cqmin solid var(--gold);
  opacity: 0;
  animation: pc-mo-ring 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--hit) both;
}

.pc-mo-ring.is-2 {
  border-color: #fff3c4;
  animation-duration: 800ms;
  animation-delay: calc(var(--hit) + 140ms);
}

@keyframes pc-mo-ring {
  0% { opacity: 0; transform: scale(0.6); }
  8% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(5); }
}

.pc-mo-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4cqmin;
  height: 1.4cqmin;
  margin: -0.7cqmin 0 0 -0.7cqmin;
  border-radius: 0.3cqmin;
  background: var(--gold);
  opacity: 0;
  animation: pc-mo-spark 850ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--hit) both;
}

.is-perfect .pc-mo-spark {
  animation-duration: 1100ms;
}

.pc-mo-spark.is-white { background: #fff; }
.pc-mo-spark.is-big { width: 2cqmin; height: 2cqmin; margin: -1cqmin 0 0 -1cqmin; }

/* Out along their angle, with a little gravity as they go. */
@keyframes pc-mo-spark {
  0% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(1.2); }
  5% { opacity: 1; }
  60% { transform: translate(calc(var(--sx) * 0.6cqmin), calc(var(--sy) * 0.48cqmin)) rotate(45deg) scale(0.8); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(var(--sx) * 1cqmin), calc(var(--sy) * 1cqmin + 8cqmin)) rotate(45deg) scale(0.3); }
}

/* The 11, dropped in from above and spinning; it squashes on the hit. */
.pc-mo-drop {
  position: relative;
  width: 100%;
  height: 100%;
  animation: pc-mo-drop 380ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation-delay: calc(var(--hit) - 380ms);
}

@keyframes pc-mo-drop {
  from { transform: translateY(-70cqh) rotate(-540deg); }
  to { transform: none; }
}

.pc-mo-eleven {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  animation: pc-mo-squash 520ms ease-out var(--hit) both;
}

@keyframes pc-mo-squash {
  0% { transform: none; }
  20% { transform: scale(1.18, 0.84); }
  45% { transform: scale(0.95, 1.06); }
  70% { transform: scale(1.03, 0.98); }
  100% { transform: none; }
}

.pc-mo-halo {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: rgba(255, 201, 51, 0.28);
  box-shadow: 0 0 6cqmin 2cqmin rgba(255, 201, 51, 0.7);
  opacity: 0;
  animation:
    pc-mo-fade-in 300ms ease-out var(--hit) forwards,
    pc-mo-breathe 1400ms ease-in-out calc(var(--hit) + 300ms) infinite;
}

@keyframes pc-mo-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* --- The words ------------------------------------------------------------ */

.pc-mo-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3cqmin;
  opacity: 0;
  animation: pc-mo-slam 520ms cubic-bezier(0.2, 1.4, 0.4, 1) var(--hit) both;
}

.pc-mo-title span {
  display: block;
  padding: 0 1cqmin;
  font-size: 13cqmin;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffe27a;
  text-shadow: 0 0 4cqmin rgba(255, 170, 0, 0.95);
}

.is-perfect .pc-mo-title span {
  font-size: 12cqmin;
}

@keyframes pc-mo-slam {
  0% { opacity: 0; transform: scale(2.6); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* A glint across the title once it has landed. Not clipped by the title --
   that would cut its glow into a hard-edged box -- so it fades in and out
   within the words instead. */
.pc-mo-shine {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 5cqmin;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: rotate(18deg);
  animation: pc-mo-shine 700ms ease-in-out both;
  animation-delay: calc(var(--hit) + 420ms);
}

@keyframes pc-mo-shine {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 5cqmin); opacity: 0; }
}

.pc-mo-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.4cqmin;
  animation: pc-mo-rise 380ms ease-out both;
  animation-delay: calc(var(--hit) + 180ms);
}

@keyframes pc-mo-rise {
  from { opacity: 0; transform: translateY(3cqmin); }
  to { opacity: 1; transform: none; }
}

.pc-mo-sub {
  font-family: "Josefin Sans", sans-serif;
  font-size: 2.6cqmin;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.pc-mo-pill {
  margin-top: 2cqmin;
  padding: 1.1cqmin 3.6cqmin;
  border-radius: 999px;
  border: 0.4cqmin solid #fff3c4;
  font-size: 3.8cqmin;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1200;
  background: var(--gold);
  box-shadow: 0 0 3cqmin rgba(255, 201, 51, 0.9);
  animation: pc-mo-pill 380ms ease-out both;
  animation-delay: calc(var(--hit) + 180ms);
}

@keyframes pc-mo-pill {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Never a full white frame. */
.pc-mo--bonus .pc-mo-flash {
  background: #fff4cf;
  opacity: 0;
  animation: pc-mo-flash 570ms ease-out var(--hit) both;
}

@keyframes pc-mo-flash {
  0% { opacity: 0; }
  9% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes pc-mo-shake-y {
  0%, 100% { transform: none; }
  20% { transform: translateY(1cqmin); }
  40% { transform: translateY(-0.7cqmin); }
  60% { transform: translateY(0.4cqmin); }
  80% { transform: translateY(-0.2cqmin); }
}

@keyframes pc-mo-shake-xy {
  0%, 100% { transform: none; }
  14% { transform: translate(1.8cqmin, -0.9cqmin); }
  28% { transform: translate(-1.4cqmin, 0.8cqmin); }
  42% { transform: translate(1.1cqmin, -0.6cqmin); }
  57% { transform: translate(-0.8cqmin, 0.4cqmin); }
  71% { transform: translate(0.5cqmin, -0.2cqmin); }
  86% { transform: translate(-0.2cqmin, 0); }
}

/* ===========================================================================
   Red: the scratch and the bad break
   ========================================================================= */

.pc-mo--foul .pc-mo-backdrop {
  background: rgba(12, 0, 0, 0.6);
  animation: pc-mo-fade-in 140ms ease-out both;
}

/* Red pressing in from the edges on the hit. */
.pc-mo--foul .pc-mo-vignette {
  background: radial-gradient(75% 75% at 50% 50%, rgba(255, 59, 59, 0) 30%, rgba(255, 59, 59, 0.45) 80%, rgba(122, 0, 0, 0.9) 100%);
  opacity: 0;
  animation: pc-mo-vignette 580ms ease-out var(--hit) both;
}

@keyframes pc-mo-vignette {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

.pc-mo--foul .pc-mo-stage {
  animation: pc-mo-shake-x 240ms linear var(--hit) both;
}

@keyframes pc-mo-shake-x {
  0%, 100% { transform: none; }
  17% { transform: translateX(1.4cqmin); }
  33% { transform: translateX(-1.1cqmin); }
  50% { transform: translateX(0.8cqmin); }
  67% { transform: translateX(-0.5cqmin); }
  83% { transform: translateX(0.2cqmin); }
}

.pc-mo-prop {
  --size: 26cqmin;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size) * 1.6);
  height: var(--size);
  margin-bottom: 1.2cqmin;
}

/* --- The scratch: the cue ball rolls to the lip and drops in --------------- */

.pc-mo-pocket {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * 0.62);
  height: calc(var(--size) * 0.26);
  margin: calc(var(--size) * 0.02) 0 0 calc(var(--size) * -0.31);
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 0.4cqmin #3a3a3a;
}

.pc-mo-cue {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * 0.42);
  height: calc(var(--size) * 0.42);
  margin: calc(var(--size) * -0.21) 0 0 calc(var(--size) * -0.21);
}

.pc-mo-cue.is-scratch {
  animation: pc-mo-scratch 560ms ease-in-out 140ms both;
}

@keyframes pc-mo-scratch {
  0% { transform: translate(calc(var(--size) * -0.5), calc(var(--size) * -0.126)) rotate(-300deg) scale(1); opacity: 1; }
  60% { transform: translate(0, calc(var(--size) * -0.126)) rotate(0) scale(1); }
  70% { transform: translate(0, calc(var(--size) * -0.105)) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(0, calc(var(--size) * 0.063)) scale(0.45); opacity: 0; }
}

/* --- The racks: a nine-ball diamond on its side ---------------------------- */

.pc-mo-rack {
  --ball: calc(var(--size) * 0.22);
  --step: calc(var(--ball) * 0.88);

  position: relative;
  width: calc(var(--step) * 4 + var(--ball));
  height: calc(var(--ball) * 3);
}

.pc-mo-rack-ball,
.pc-mo-rack-cue {
  position: absolute;
  width: var(--ball);
  height: var(--ball);
}

.pc-mo-rack-ball {
  left: calc(var(--col) * var(--step));
  top: calc(var(--ball) + var(--row) * var(--ball));
}

.pc-mo-rack-cue {
  top: var(--ball);
}

/* A bad break: the cue ball comes in and stops dead; the rack twitches. */
.pc-mo-rack.is-nudge .pc-mo-rack-ball {
  animation: pc-mo-nudge 560ms ease-in-out 140ms both;
}

@keyframes pc-mo-nudge {
  0%, 30% { transform: none; }
  50% { transform: translate(calc(var(--nx) * 0.15cqmin), calc(var(--ny) * 0.15cqmin)); }
  100% { transform: translate(calc(var(--col) * 0.5 * 0.15cqmin), calc(var(--ny) * 0.6 * 0.15cqmin)); }
}

.pc-mo-rack.is-nudge .pc-mo-rack-cue {
  left: calc(var(--ball) * -1.2);
  animation: pc-mo-nudge-cue 560ms ease-in-out 140ms both;
}

@keyframes pc-mo-nudge-cue {
  0% { opacity: 0; transform: translateX(calc(var(--size) * -0.5)); }
  10% { opacity: 1; }
  30% { transform: none; }
  100% { opacity: 1; transform: translateX(calc(var(--ball) * -0.25)); }
}

.pc-mo-slash {
  position: absolute;
  left: -15%;
  top: calc(var(--ball) * 1.5 - 0.6cqmin);
  width: 130%;
  height: 1.2cqmin;
  border-radius: 0.6cqmin;
  background: var(--red);
  box-shadow: 0 0 1.6cqmin var(--red);
  transform-origin: center;
  opacity: 0;
  animation: pc-mo-slash 150ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 700ms both;
}

@keyframes pc-mo-slash {
  from { opacity: 0; transform: rotate(-24deg) scaleX(0); }
  to { opacity: 1; transform: rotate(-24deg) scaleX(1); }
}

/* --- The stamp ------------------------------------------------------------ */

.pc-mo-stamp {
  padding: 0.8cqmin 3.6cqmin;
  border: 0.8cqmin solid var(--red);
  border-radius: 2cqmin;
  font-size: 11cqmin;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red);
  background: rgba(20, 0, 0, 0.75);
  text-shadow: 0 0 2.4cqmin rgba(255, 59, 59, 0.7);
  opacity: 0;
  animation: pc-mo-stamp 150ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  animation-delay: calc(var(--hit) - 150ms);
}

@keyframes pc-mo-stamp {
  0% { opacity: 0; transform: scale(3) rotate(-7deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-7deg); }
}

.pc-mo-plate {
  margin-top: 2.8cqmin;
  padding: 1.4cqmin 3.2cqmin;
  border-radius: 999px;
  border: 0.3cqmin solid rgba(255, 59, 59, 0.8);
  font-family: "Josefin Sans", sans-serif;
  font-size: 2.8cqmin;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(20, 0, 0, 0.9);
  animation: pc-mo-fade-in 260ms ease-out both;
  animation-delay: calc(var(--hit) + 120ms);
}

/* ===========================================================================
   Slate: the dry break
   ========================================================================= */

.pc-mo--dry .pc-mo-backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: pc-mo-fade-in 140ms ease-out both;
}

.pc-mo--dry .pc-mo-prop {
  height: calc(var(--size) * 1.1);
}

/* The cue ball, fast into the head of the rack, then drawn back off the hit. */
.pc-mo-rack.is-dry .pc-mo-rack-cue {
  left: calc(var(--ball) * -1.05);
  animation:
    pc-mo-dry-cue 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 140ms both,
    pc-mo-dry-back 800ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--hit) forwards;
}

@keyframes pc-mo-dry-cue {
  0% { opacity: 0; transform: translateX(calc(var(--size) * -0.6)); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes pc-mo-dry-back {
  from { transform: none; }
  to { transform: translateX(calc(var(--ball) * -0.9)); }
}

/* Every ball moves, none of them drops. */
.pc-mo-rack.is-dry .pc-mo-rack-ball {
  animation: pc-mo-spread 800ms cubic-bezier(0.215, 0.61, 0.355, 1) var(--hit) both;
}

@keyframes pc-mo-spread {
  from { transform: none; }
  to { transform: translate(calc(var(--dx) * var(--ball)), calc(var(--dy) * var(--ball))) rotate(var(--spin)); }
}

/* Chalk dust where the cue ball met the rack. */
.pc-mo-puff {
  position: absolute;
  left: calc(var(--ball) * -0.3);
  top: calc(var(--ball) * 0.7);
  width: calc(var(--ball) * 1.6);
  height: calc(var(--ball) * 1.6);
  border-radius: 50%;
  background: rgba(220, 230, 240, 0.35);
  opacity: 0;
  animation: pc-mo-puff 600ms ease-out var(--hit) both;
}

@keyframes pc-mo-puff {
  0% { opacity: 0; transform: scale(0.4); }
  10% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* The verdict only once the balls have stopped and plainly none dropped. */
.pc-mo-drybox {
  padding: 0.8cqmin 3.6cqmin;
  border: 0.6cqmin solid var(--slate);
  border-radius: 2cqmin;
  font-size: 10cqmin;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dbe5ef;
  background: rgba(10, 14, 20, 0.8);
  animation: pc-mo-dry-label 320ms cubic-bezier(0.34, 1.9, 0.64, 1) both;
  animation-delay: calc(var(--hit) + 520ms);
}

@keyframes pc-mo-dry-label {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

.pc-mo-plate.is-slate {
  border-color: var(--slate);
  background: rgba(10, 14, 20, 0.9);
  animation-delay: calc(var(--hit) + 520ms);
}

/* ===========================================================================
   Slate again: the miss
   ========================================================================= */

.pc-mo--miss .pc-mo-backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: pc-mo-fade-in 160ms ease-out both;
}

/* The target sits left of centre; the arrow lands well up and to the right of
   it -- clear of every ring, so nobody reads it as a near thing. Everything is
   placed from the middle of the prop, in units of --size. */
.pc-mo-prop.is-target {
  --size: 24cqmin;
  width: calc(var(--size) * 2.4);
  height: calc(var(--size) * 1.35);
}

.pc-mo-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  transform: translate(calc(var(--size) * -0.42), calc(var(--size) * 0.08));
}

.pc-mo-target svg {
  position: absolute;
  inset: 0;
}

.pc-mo-bull {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
}

.pc-mo-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * 1.9);
  height: calc(var(--size) * 1.9);
  margin: calc(var(--size) * -0.95) 0 0 calc(var(--size) * -0.95);
  animation: pc-mo-arrow-fly 300ms linear both;
  animation-delay: calc(var(--hit) - 300ms);
}

@keyframes pc-mo-arrow-fly {
  0% { transform: translate(calc(var(--size) * -0.9500 + -50.000cqw), calc(var(--size) * 0.5500)); }
  20.0% { transform: translate(calc(var(--size) * -0.8872 + -48.000cqw), calc(var(--size) * 0.5016)); }
  40.0% { transform: translate(calc(var(--size) * -0.6988 + -42.000cqw), calc(var(--size) * 0.3564)); }
  55.0% { transform: translate(calc(var(--size) * -0.4751 + -34.875cqw), calc(var(--size) * 0.1840)); }
  70.71% { transform: translate(calc(var(--size) * -0.1650 + -25.000cqw), calc(var(--size) * -0.0550)); }
  80.0% { transform: translate(calc(var(--size) * 0.0548 + -18.000cqw), calc(var(--size) * -0.1572)); }
  90.0% { transform: translate(calc(var(--size) * 0.3217 + -9.500cqw), calc(var(--size) * -0.2813)); }
  100% { transform: translate(calc(var(--size) * 0.6200 + 0.000cqw), calc(var(--size) * -0.4200)); }
}

.pc-mo-arrow svg {
  overflow: visible;
}

/* Stuck, and shivering on its point. */
.pc-mo-arrow-twang {
  width: 100%;
  height: 100%;
  transform: rotate(-14deg);
  animation: pc-mo-twang 700ms linear var(--hit) both;
}

@keyframes pc-mo-twang {
  0% { transform: rotate(-14deg); }
  12% { transform: rotate(-4deg); }
  26% { transform: rotate(-22deg); }
  40% { transform: rotate(-8deg); }
  55% { transform: rotate(-18deg); }
  72% { transform: rotate(-12deg); }
  100% { transform: rotate(-14deg); }
}

.pc-mo-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size) * 0.056);
  height: calc(var(--size) * 0.02);
  margin: calc(var(--size) * -0.01) 0 0 calc(var(--size) * -0.028);
  border-radius: 1px;
  background: #d9b98a;
  opacity: 0;
  animation: pc-mo-chip 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--hit) both;
}

@keyframes pc-mo-chip {
  0% {
    opacity: 0;
    transform: translate(calc(var(--size) * 0.62), calc(var(--size) * -0.42)) rotate(var(--deg));
  }
  10% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(var(--size) * (0.62 + var(--cx))), calc(var(--size) * (-0.42 + var(--cy)))) rotate(var(--deg));
  }
}

.pc-mo-drybox.is-miss {
  padding: 0.8cqmin 5.2cqmin;
  border-color: #c9d3dd;
  animation: pc-mo-dry-label 300ms cubic-bezier(0.34, 1.7, 0.64, 1) both;
  animation-delay: calc(var(--hit) + 300ms);
}

.pc-mo--miss .pc-mo-plate.is-slate {
  animation-delay: calc(var(--hit) + 300ms);
}

/* ===========================================================================
   The pill: the 11 down
   ========================================================================= */

/* Over the top of the picture, which is no container: its unit is the
   screen's, at the same scale as the board. */
.pc-mo-toast {
  --cqmin: min(1vh, 0.5625vw);

  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: calc(var(--cqmin) * 1.4);
  padding: calc(var(--cqmin) * 0.7) calc(var(--cqmin) * 2.8) calc(var(--cqmin) * 0.7) calc(var(--cqmin) * 0.8);
  border-radius: 999px;
  border: calc(var(--cqmin) * 0.25) solid rgba(255, 201, 51, 0.8);
  background: rgba(14, 12, 4, 0.94);
  box-shadow: 0 0 calc(var(--cqmin) * 2) rgba(255, 201, 51, 0.5);
  font-size: calc(var(--cqmin) * 3.4);
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  animation: pc-mo-toast-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: opacity 260ms ease-in, transform 260ms ease-in;
}

.pc-mo-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, -60%);
}

@keyframes pc-mo-toast-in {
  from { opacity: 0; transform: translate(-50%, -160%); }
  to { opacity: 1; transform: translateX(-50%); }
}

.pc-mo-toast-ball {
  width: calc(var(--cqmin) * 6);
  height: calc(var(--cqmin) * 6);
  animation: pc-mo-toast-roll 520ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.pc-mo-toast-ball svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes pc-mo-toast-roll {
  from { transform: translateX(-120%) rotate(-360deg); }
  to { transform: none; }
}

.pc-mo-toast-text {
  font-family: "Barlow Condensed", "Josefin Sans", sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffe27a;
}

.pc-mo-toast-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: calc(var(--cqmin) * 3);
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-200%) rotate(20deg);
  animation: pc-mo-toast-shine 650ms ease-in-out 300ms both;
}

@keyframes pc-mo-toast-shine {
  from { transform: translateX(-200%) rotate(20deg); }
  to { transform: translateX(calc(var(--cqmin) * 60)) rotate(20deg); }
}

/* ===========================================================================
   Reduced motion: the moment still comes and goes, and still says what it
   says. Nothing shakes, flies or spins.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .pc-mo .pc-mo-stage,
  .pc-mo .pc-mo-rays,
  .pc-mo .pc-mo-spark,
  .pc-mo .pc-mo-ring,
  .pc-mo .pc-mo-shine,
  .pc-mo .pc-mo-halo,
  .pc-mo-toast-shine {
    animation: none !important;
  }

  .pc-mo .pc-mo-spark,
  .pc-mo .pc-mo-ring,
  .pc-mo .pc-mo-rays {
    display: none;
  }
}