/* The race track.
   Built out from the hand-made board in the original styles.css -- same green
   board-game language (inset rails, vertical START/FINISH plates, cut corner),
   but rebuilt as six addressable lanes so horses can actually be positioned
   along it. Horses are the masked silhouette from app.css; nothing is drawn. */

.game-box {
  --lane-h: 62px;
  /* The dark line that divides one lane from the next. */
  --lane-rail: 2px;
  --gate-w: 70px;
  --plate-w: clamp(46px, 7vw, 92px);
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--plate-w) var(--gate-w) 1fr var(--plate-w);
  grid-template-areas:
    "start upper upper finish"
    "start gate  track finish"
    "start lower lower finish";
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.gb-upper,
.gb-lower {
  background: #1f7a3d;
  height: 34px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.gb-upper { grid-area: upper; border-bottom: 3px solid #0e4a22; }
.gb-lower { grid-area: lower; border-top: 3px solid #0e4a22; }

.gb-start,
.gb-finish {
  /* Upright stacked capitals, like the plates on a board. Without
     `text-orientation: upright` the glyphs themselves rotate on their side. */
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: grid;
  place-items: center;
  background: #1f7a3d;
  color: #7c1310;
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 26px);
  letter-spacing: clamp(2px, 0.6vw, 7px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.gb-start { grid-area: start; border-right: 4px solid #0e4a22; }
.gb-finish { grid-area: finish; border-left: 4px solid #0e4a22; }

/* Starting stalls. */
.gb-gate {
  grid-area: gate;
  background: repeating-linear-gradient(
    #23241f 0 2px,
    #3a3c33 2px 4px,
    #2b2d26 4px 8px
  );
  border-right: 3px solid #0e4a22;
  position: relative;
}
.gb-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--lane-h) - 2px),
    rgba(255, 255, 255, 0.5) calc(var(--lane-h) - 2px) var(--lane-h)
  );
}

.gb-track {
  grid-area: track;
  position: relative;
  background: #2f6b3c;
  overflow: hidden;
}

/* One lane per runner. */
.lane {
  position: relative;
  height: var(--lane-h);
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.055) 0 2px,
    transparent 2px calc(100% / 12)
  ),
  linear-gradient(#3b7d4a, #2d6338);
  border-bottom: var(--lane-rail) solid rgba(0, 0, 0, 0.45);
}
.lane:nth-child(even) { filter: brightness(0.94); }
.lane:last-child { border-bottom: none; }

/* Finish line, inside the track so horses run onto it. */
.gb-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
  background:
    repeating-linear-gradient(
      to bottom,
      #fff 0 10px,
      #1a1a1a 10px 20px
    );
  opacity: 0.9;
  z-index: 3;
}

/* A running horse. `--pos` is 0..1 along the lane.
   Anchored to the FLOOR of the lane, not its middle: the silhouette is a
   board-game piece on a post, and the post has to meet the board or the horse
   reads as hovering. Everything that moves it pivots from the base of that
   post for the same reason. */
.runner {
  --pos: 0;
  --sprite-w: 78px;
  position: absolute;
  /* Negative by exactly the rail width: `bottom: 0` is the inside of the
     lane's border, which leaves the post floating two pixels clear of the
     line it should be standing on. */
  bottom: calc(-1 * var(--lane-rail));
  left: calc(var(--pos) * (100% - var(--sprite-w) - 14px));
  transform-origin: 50% 100%;
  transition: left 0.75s cubic-bezier(0.34, 0.9, 0.5, 1);
  z-index: 2;
}
.runner.finished { filter: drop-shadow(0 0 10px var(--brass)); }

/* A stumble rocks the piece on its post; a surge lifts it off the board. */
.runner.stumbled { animation: stumble 0.65s ease-out; }
.runner.surged { animation: surge 0.65s ease-out; }

@keyframes stumble {
  30% { transform: rotate(-11deg); }
  60% { transform: rotate(4deg); }
}
@keyframes surge {
  25% { transform: translateY(-14%) scale(1.06); }
  70% { transform: translateY(-4%) scale(1.02); }
}

/* Distance ticks. */
.gb-track .furlongs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  z-index: 1;
}
.gb-track .furlongs span {
  flex: 1;
  border-right: 1px dashed rgba(255, 255, 255, 0.13);
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.28);
  padding: 2px 0 0 3px;
}
.gb-track .furlongs span:last-child { border-right: none; }

/* ---------- race HUD ---------- */

.race-hud {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.stage-counter {
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* Per-horse run-dice strip under the track. */
.rundice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.rundice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--rail);
  border-left: 4px solid var(--team, var(--rail-strong));
  border-radius: var(--r-md);
}
.rundice .rd-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--team);
  width: 42px;
  flex: 0 0 auto;
}
.rundice .rd-faces { display: flex; gap: 3px; }
.rundice .face { width: 21px; height: 21px; font-size: 0.72rem; border-radius: 4px; }
.rundice .rd-move {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.rundice .rd-move small { color: var(--chalk-faint); font-size: 0.7rem; }

/* Commentary ticker. */
.callout {
  margin-top: 0.9rem;
  min-height: 2.6rem;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--rail);
  border-radius: var(--r-md);
  font-family: var(--font-head);
  letter-spacing: 0.4px;
  color: var(--chalk-dim);
}
.callout strong { color: var(--chalk); }

/* Result table after the line. */
.result-strip { margin-top: 1.1rem; }
.result-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.result-row .place {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--chalk-faint);
  text-align: center;
}
.result-row.win { background: rgba(216, 180, 90, 0.12); border-radius: var(--r-sm); }
.result-row.win .place { color: var(--brass); }

@media (max-width: 720px) {
  .game-box { --lane-h: 48px; --gate-w: 40px; }
  .runner { --sprite-w: 58px; }
}