/* A bot game's live board (web/tv/live-board.js): the running system, animated once per resolved turn.
   --flow-duration follows the bot game speed (1x, 2x, 4x); --flow-elapsed keeps a turn's animation in place across
   re-renders. Motion off and reduced motion show every moved item at rest, with its number. */
.live-board { position: relative; }
.live-presenter { margin: 4px 0 10px; }
.live-crews { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 8px; padding: 0; }
.live-crews li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid #294957; border-radius: 6px; background: #0c2838e8; }
.live-crews li.is-shown { border-color: var(--cyan); background: #123749; }
.live-crews .crew-vessel { width: 44px; height: 33px; }
.live-crews strong { font-size: clamp(16px, 1.3vw, 24px); }
.live-crews small { font-size: clamp(14px, 1.1vw, 20px); color: #cfe3ea; }
.bot-tag { font-size: 11px; font-weight: bold; letter-spacing: 1.5px; color: var(--ink); background: var(--orange); border-radius: 3px; padding: 3px 6px; white-space: nowrap; }
.live-caption { margin: 0 0 8px; font-size: clamp(15px, 1.2vw, 22px); color: var(--cyan); letter-spacing: 1px; }

/* Brewery: ships and orders run at the bot game's pace; bigger labels for the far side of the room. */
.live-board .map-voyage, .live-board .order-envelope { animation-duration: var(--flow-duration, 4.5s); animation-delay: var(--flow-elapsed, 0ms); }
.live-board .cargo-quantity { font-size: clamp(14px, 1.2vw, 20px); }
.live-board .order-envelope { font-size: clamp(13px, 1.1vw, 18px); }
.live-board .site-backlog { font-size: clamp(13px, 1.1vw, 18px); }
.live-board .site-order { font-size: clamp(11px, 0.9vw, 15px); }
.live-board .map-harbormaster p { font-size: clamp(14px, 1.1vw, 19px); }

/* Cannery: last round's moved crates hop one station down the line (station 5 to the dock). */
.crate-hop { position: absolute; top: 38%; left: 50%; width: 100%; display: flex; align-items: center; gap: 3px; pointer-events: none; z-index: 2;
  animation: crate-hop var(--flow-duration, 4.5s) ease-in-out both; animation-delay: var(--flow-elapsed, 0ms); }
.crate-hop .queue-crate { width: 22px; height: 22px; }
.crate-hop b { font-size: clamp(16px, 1.4vw, 26px); color: #ffd7a3; background: #071d2bee; border: 1px solid #f6bd72; border-radius: 4px; padding: 2px 7px; }
@keyframes crate-hop { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 80% { transform: translateX(55%); opacity: 1; } 100% { transform: translateX(55%); opacity: .9; } }
.crate-hop.to-dock { animation-name: crate-dock; }
@keyframes crate-dock { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 75% { transform: translateX(35%); opacity: 1; } 100% { transform: translateX(45%); opacity: 0; } }
.live-board .station-queue > strong { font-size: clamp(22px, 1.9vw, 34px); }
.live-board .station-sign span, .live-board .illustrated-station-status { font-size: clamp(12px, 1vw, 17px); }

/* Fishing: each crew's boats go out and come back with their catch; the lake gauge runs from start to end. */
.live-board .lake-boats { position: relative; }
.live-board .lake-boats .crew-vessel { animation: boats-out var(--flow-duration, 4.5s) ease-in-out both; animation-delay: var(--flow-elapsed, 0ms); }
@keyframes boats-out { 0% { transform: translateY(0); } 45% { transform: translateY(-34px) scale(.86); } 100% { transform: translateY(0); } }
.catch-float { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); white-space: nowrap; font-size: clamp(15px, 1.3vw, 24px); color: #bff6ff; background: #071d2bee; border: 1px solid var(--cyan); border-radius: 4px; padding: 2px 8px;
  animation: catch-float var(--flow-duration, 4.5s) ease-out both; animation-delay: var(--flow-elapsed, 0ms); }
@keyframes catch-float { 0%, 40% { opacity: 0; transform: translate(-50%, 10px); } 70%, 100% { opacity: 1; transform: translate(-50%, -14px); } }
.stock-gauge.gauge-moving > span { animation: gauge-run var(--flow-duration, 4.5s) ease-in-out both; animation-delay: var(--flow-elapsed, 0ms); }
@keyframes gauge-run { from { width: var(--gauge-from); } to { width: var(--gauge-to); } }
.live-board .lake-crew-label strong { font-size: clamp(22px, 1.8vw, 32px); }
.live-board .lake-crew-label p, .live-board .lake-crew-label span { font-size: clamp(13px, 1vw, 18px); }

.flow-paused .crate-hop, .flow-paused .lake-boats .crew-vessel, .flow-paused .catch-float, .flow-paused .stock-gauge > span,
.flow-paused .map-voyage, .flow-paused .order-envelope { animation-play-state: paused; }
.motion-off .crate-hop, .motion-off .lake-boats .crew-vessel, .motion-off .catch-float, .motion-off .stock-gauge.gauge-moving > span { animation: none; opacity: 1; }
.motion-off .crate-hop { transform: translateX(40%); }
@media (prefers-reduced-motion: reduce) {
  .crate-hop, .live-board .lake-boats .crew-vessel, .catch-float, .stock-gauge.gauge-moving > span { animation: none; opacity: 1; }
  .crate-hop { transform: translateX(40%); }
}

/* A bot game's one-line district setup, and bot crews everywhere else. */
.district-setup { display: grid; gap: 18px; }
.district-setup .live-crews li { font-size: 18px; }
.public-crew .bot-tag, .crew .bot-tag, .rank .bot-tag { margin-left: 8px; vertical-align: middle; }
.campaign-scoreboard .bot-tag, .map-label .bot-tag { font-size: 9px; padding: 2px 4px; margin-left: 6px; }

/* Keep the Harbormaster compact on the live board so the whole system fits a 1080p TV. */
.live-board .live-presenter .phase-guide { margin: 0; padding: 8px 16px; min-height: 0; }
.live-board .live-presenter .phase-guide .avatar-portrait { width: 84px; height: 84px; min-height: 0; flex: 0 0 84px; }
.live-board .live-presenter .phase-guide p { font-size: clamp(18px, 1.5vw, 28px); margin-top: 4px; }
.live-board .map-harbormaster { display: none; } /* the presenter above already speaks for him */
.live-board .title-row h1 { margin: 6px 0 10px; }

/* TV distance (playtest 2). Orders travel on their own row below the site cards (never over the map caption); the
   route notes are larger; the drawing footnotes (pile scale, rounding notes) are dropped from the live board. */
.live-board .map-orders { position: absolute; left: 12.5%; right: 12.5%; top: 31%; height: 30px; pointer-events: none; z-index: 2; }
.live-board .map-order-batch { height: 30px; }
.live-board .order-envelope { animation-name: live-order-upstream; }
@keyframes live-order-upstream { from { left: 66%; } to { left: 30%; } }
.motion-off .live-board .order-envelope { animation: none; left: 45%; }
.live-board .empty-route { font-size: clamp(15px, 1.2vw, 22px); color: #d3eef4; }
.live-board .map-legend { font-size: clamp(15px, 1.15vw, 21px); gap: 10px; }
.live-board .customer-dispatch { font-size: clamp(12px, 0.9vw, 16px); max-width: none; }
.live-board .customer-dispatch b { font-size: clamp(15px, 1.15vw, 21px); }
.live-board .push-direction, .live-board .rope-link span { font-size: clamp(14px, 1.05vw, 19px); }
.live-board .illustrated-dock span, .live-board .illustrated-dock p { font-size: clamp(13px, 1vw, 18px); }
.live-board .crate-scale, .live-board .lake-scene-key { display: none; }
@media (prefers-reduced-motion: reduce) { .live-board .order-envelope { animation: none; left: 45%; } }