/* ============================================================
   DRAFT RACER · the play readout
   ------------------------------------------------------------
   Loaded by base-empty.html (the race page) AFTER app.css, so
   these rules override the .player / .annotations / .distance
   rules that app.css was built from.

   WHY AN OVERRIDE FILE INSTEAD OF EDITING input.css:
   `make tailwind-build` currently regenerates app.css at ~53 KB
   against the 71 KB committed build — the content scan no longer
   resolves the class set it did when app.css was last built, so
   rebuilding silently drops ~18 KB of live styles across the
   WHOLE site, and the same image ships GoFFL. Until that scan is
   fixed, app.css cannot be safely regenerated, and this file is
   the seam. Anything here should move into input.css once a
   rebuild is provably lossless.
   ============================================================ */

/* --- the readout: yardage + the play's annotations ------------
   Every play carries at least one annotation and many carry two,
   three, or four ("Draw play" + "Second effort +1" + "Arm tackle
   -1"), so multiples are the normal case, not an edge case.

   They used to be two independently absolute boxes, and every
   .annotation carried translate-x-full — a transform of 100% of
   its OWN width. Three annotations were therefore each shifted
   right by a different amount, staggering them on top of one
   another, while the growing block drifted back across the team
   name and avatar.

   Now exactly one element is positioned — .playout — and it is
   anchored at left:100%, which IS the yard line, because .player
   is right-aligned and -translate-x-full so its right edge sits
   on the runner. Everything inside lays out in normal flow, so
   the readout can only ever grow away from the runner, never
   over it, no matter how many annotations a play has.
   -------------------------------------------------------------- */
.player .playout {
  position: absolute;
  top: 50%;
  left: 100%;
  display: flex;
  align-items: center;
  gap: 0.6vh;
  /* Four annotations on one line run ~800px — 70% of the field — so it
     would be sliced off by the edge for anyone past the 30 no matter
     which side it sits on. The cap wraps them onto a second row
     instead, roughly halving the width. It is in vh because the type
     is sized in vh, so the same number of characters fits at every
     viewport, and a wrapped row has to stay inside its own lane:
     twelve lanes over a ~90vh field is ~7.5vh each, and the type
     below is sized so three rows still clear that. */
  /* width MUST be stated. This box is absolutely positioned at
     left:100%, so the space between its left edge and the edge of its
     containing block is zero, and shrink-to-fit therefore collapses it
     to min-content — the widest single annotation — which put every
     annotation on a row of its own and stacked four of them across
     three neighbouring lanes. max-content restores the one-line
     preferred width; the cap then wraps it. */
  width: max-content;
  max-width: 40vh;
  margin-left: 0.8vh;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Downfield there is no room to the runner's right, so the readout
   moves to its left and reads back toward it. race.js decides by
   measuring the painted readout against the field edge rather than
   guessing at a yard number, because how much room a play needs
   depends on how many annotations it drew. */
.player.readout-left .playout {
  right: 100%;
  left: auto;
  justify-content: flex-end;
  margin-right: 0.8vh;
  margin-left: 0;
}
.player.readout-left .annotations {
  justify-content: flex-end;
}

.player .distance {
  position: static;
  width: auto;
  padding-left: 0;
  transform: none;
}

.player .annotations {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2vh 0.9vh;
  height: auto;
  transform: none;
}

/* Slightly smaller and much tighter than app.css's 2.5vh/normal. A
   wrapped readout has to fit between its neighbours, and at 2.5vh with
   default leading two rows alone nearly fill a lane — three rows landed
   on the teams above and below, which is the same defect as writing
   over the runner, just pointed in a different direction. */
.player .annotation {
  position: static;
  height: auto;
  padding-left: 0;
  font-size: 2vh;
  line-height: 1.1;
  transform: none;
}

/* The annotations of one play read as a sequence — the call, then
   what happened to it — so they get a separator rather than just
   whitespace, which at speed reads as one run-on phrase. */
.player .annotation + .annotation::before {
  content: "·";
  margin-right: 0.9vh;
  opacity: 0.6;
}

/* --- fluidity -------------------------------------------------
   The runner's transition was pinned at 1000ms while the tick
   interval is adjustable from 100ms to 5000ms, so the two only
   agreed at the default speed: everywhere else the runner either
   arrived early and sat still, or was still sliding when the next
   play landed on top of it. Driving the duration from --tick
   (set from playbackSpeed on the root) makes each move fill
   exactly one tick at ANY speed, so the motion is continuous
   instead of stepped.

   Restricting transition-property to `left` also matters: it was
   inheriting the CSS initial value `all`, so every incidental
   property change was being animated too.
   -------------------------------------------------------------- */
.player {
  transition-property: left;
  transition-duration: var(--tick, 1400ms);
  transition-timing-function: linear;
}

/* The readout used to pop in and vanish on a hard cut. One
   animation spanning the whole tick fades it in, holds it, and
   fades it out just as the tick ends — which is exactly when the
   element is removed, so the removal is never seen. Children are
   recreated every play, so this retriggers on its own. */
@keyframes drPlayLife {
  0% {
    opacity: 0;
    transform: translateX(-0.6vh);
  }
  12% {
    opacity: 1;
    transform: translateX(0);
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.player .distance-text,
.player .annotation {
  animation: drPlayLife var(--tick, 1400ms) ease-out both;
}

/* Motion is the whole point of the page, but the readout fading
   and the runner sliding are decoration on top of information
   that is also in the results table. */
@media (prefers-reduced-motion: reduce) {
  .player {
    transition-duration: 0ms;
  }
  .player .distance-text,
  .player .annotation {
    animation: none;
  }
}