/* Compact status, replay controls and the on-demand match library. */
.training-strip { min-height: 40px; display: grid; grid-template-columns: minmax(230px,1fr) minmax(230px,.8fr) auto; align-items: center; gap: 20px; padding: 4px 22px; background: #171c18; border-bottom: 1px solid #2e3930; }
.training-indicator { display: flex; align-items: center; gap: 8px; min-width: 0; }
.training-indicator>span { height: 6px; width: 6px; flex: none; border-radius: 50%; background: #788578; }
.training-indicator>div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.training-indicator strong { font-size: 11px; font-weight: 500; color: #bac6b9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.training-indicator small { display: none; }
.training-strip.is-running .training-indicator>span { background: var(--cyan); box-shadow: 0 0 0 3px #9de3c612; }
.training-strip.is-running .training-indicator strong { color: #c2e5ca; }
.training-strip.is-unknown .training-indicator>span { background: var(--gold); }
.training-phase { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #90a48c; white-space: nowrap; }
.phase-track { display: block; width: 38px; height: 3px; border-radius: 3px; background: #344735; overflow: hidden; }
.phase-track>span { display: block; height: 100%; background: #b0ca95; }
.training-progress { display: grid; grid-template-columns: auto minmax(60px,1fr); align-items: center; gap: 9px; }
.training-progress-label { display: flex; align-items: center; gap: 10px; color: #94aa95; font-size: 10px; font-variant-numeric: tabular-nums; }
.training-progress-label strong { font-weight: 500; color: #c3d8bd; }
.training-progress-meta { display: none; }
.progress-track { height: 4px; border-radius: 4px; background: #354139; overflow: hidden; }
.progress-track>span { display: block; height: 100%; width: 0; border-radius: inherit; background: #9bc799; transition: width .3s; }
.training-strip .button { padding: 3px 9px; min-height: 30px; font-size: 11px; border-color: transparent; background: transparent; }
.selected-run-progress { padding: 13px 15px; border: 1px solid #405541; background: #1d2a1f; border-radius: 7px; margin-bottom: 15px; }
.selected-run-progress>div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 8px; }
.selected-run-progress strong { font-weight: 500; }
.selected-run-progress span { color: #97ad96; font-size: 11px; }
.arena-grid { display: block; min-width: 0; }
.arena-panel { display: flex; flex-direction: column; overflow: visible; border-radius: 10px; }
.arena-panel>.panel-heading { flex: none; padding: 5px 14px; min-height: 49px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: #202524; }
.arena-heading-actions { display: flex; align-items: center; gap: 8px; }
.arena-heading-actions .source-badge { overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.source-badge { display: inline-block; padding: 3px 7px; border: 1px solid #6a5d43; border-radius: 4px; background: #393225; color: #e6c994; font-size: 10px; font-weight: 500; white-space: nowrap; }
.source-badge.model { background: #23362c; border-color: #496551; color: #b5d9b7; }
.icon-control, .toggle-control, .text-control { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; color: #b9c8bc; background: #252c27; font-size: 12px; line-height: 1; white-space: nowrap; }
.icon-control { font-size: 17px; }
.icon-control:hover, .toggle-control:hover, .text-control:hover { background: #344038; border-color: #647565; color: #f0f4e9; }
.icon-control[aria-pressed=true], .toggle-control.is-active { background: #354b3a; border-color: #5d7a5e; color: #d3edce; }
.arena-stage { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #1c2420; }
.arena-stage-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 14px; color: #8d9d90; font-size: 10px; }
.match-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
#match-title { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-square { width: 5px; height: 5px; background: var(--cyan); border-radius: 1px; }
#match-seed { font-size: 9px; white-space: nowrap; }
.scoreboard { display: flex; align-items: center; justify-content: center; flex: none; height: 48px; gap: 17px; }
.scoreboard strong { font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.team-name { font-size: 11px; font-weight: 550; min-width: 60px; }
.team-name:first-child { text-align: right; }
.team-cyan { color: var(--cyan); }
.team-coral { color: var(--coral); }
.score-divider { color: #657969; font-size: 18px; }
.canvas-wrap { position: relative; min-height: 0; flex: 1; margin: 0 8px; aspect-ratio: auto; touch-action: none; overflow: hidden; }
#arena-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#arena-canvas.is-dragging { cursor: grabbing; }
#kitchen3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.arena-stage-bottom { display: flex; justify-content: space-between; gap: 10px; flex: none; min-height: 21px; padding: 3px 13px; color: #8b9c8d; font-size: 10px; }
.arena-stage-bottom>span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#match-tick { flex: none; font-size: 9px; color: #708477; }
.stage-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; flex-direction: column; background: #17211ded; color: #9aaf9f; font-size: 13px; }
.loading-orbit { display: block; width: 28px; height: 28px; border: 1px solid #526954; border-top-color: var(--cyan); border-radius: 50%; animation: orbit 1s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
/* Progress and primary actions stay close to the picture. */
.spectator-controls { position: relative; flex: none; padding: 4px 10px 8px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: #202624; z-index: 5; }
.timeline-row { display: flex; align-items: center; gap: 12px; height: 25px; }
.play-time { flex: none; font-size: 10px; color: #b6c6b6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline-track { flex: 1; min-width: 40px; height: 25px; display: flex; align-items: center; position: relative; }
input[type=range] { appearance: none; -webkit-appearance: none; min-width: 30px; min-height: 4px; height: 4px; width: 100%; padding: 0; border: 0; border-radius: 4px; background: #47554b; accent-color: var(--cyan); position: relative; z-index: 2; }
input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #bbebce; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #bbebce; cursor: pointer; }
#timeline-markers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.timeline-mark { position: absolute; bottom: 2px; width: 2px; height: 4px; background: #d7ba80; border-radius: 1px; opacity: .8; }
.frame-counter { min-width: 58px; text-align: right; font-size: 10px; color: #8b9f8d; font-variant-numeric: tabular-nums; }
.transport-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.transport-main, .transport-options, .secondary-transport, .zoom-controls { display: flex; align-items: center; gap: 5px; }
.transport-main .play-button { width: 48px; min-height: 40px; padding: 7px 10px; color: #203628; background: #badbb9; border: 1px solid #badbb9; border-radius: 6px; font-size: 17px; font-weight: 700; }
.transport-main .play-button:hover { background: #d5eccd; }
.transport-options { margin-right: 4px; }
.control-label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #a0b19f; white-space: nowrap; }
.control-label select { padding: 6px 8px; min-height: 40px; max-width: 170px; font-size: 12px; }
.transport-options .control-label { font-size: 0; gap: 0; }
.transport-options select { width: 86px; }
/* The disclosure is an anchored tool drawer, not another permanent row. */
.spectator-more { margin-left: auto; }
.more-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid #48574a; border-radius: 6px; background: #28332a; color: #bfd0bd; font-size: 12px; list-style: none; }
.more-toggle::-webkit-details-marker { display: none; }
.spectator-more[open]>.more-toggle { color: #e6f2df; border-color: #82a27c; background: #3b523c; }
.more-controls { position: absolute; right: 8px; bottom: calc(100% + 8px); width: min(540px,calc(100vw - 40px)); max-height: min(70dvh,600px); overflow-y: auto; padding: 16px; border: 1px solid #637361; border-radius: 10px; background: #252f27; box-shadow: 0 12px 44px #0007; z-index: 30; }
.more-section { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid #3e4f3f; }
.more-section-label { font-size: 12px; font-weight: 550; color: #c4d7be; }
.secondary-transport .icon-control { font-size: 15px; }
.camera-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.camera-row>.more-section-label { flex-basis: 100%; }
.zoom-controls>span { min-width: 45px; text-align: center; font-size: 11px; color: #a7bda5; }
.render-label { font-size: 11px; color: #a3c19e; }
.camera-help, .keyboard-hint { width: 100%; font-size: 11px; color: #93aa8f; }
.spectator-roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #3e4f3f; }
.roster-agent { min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px; text-align: left; border: 1px solid #4b6249; border-radius: 7px; background: #2c3b2c; }
.roster-agent:hover, .roster-agent.is-followed { border-color: #a6dba0; background: #354e34; }
.roster-agent.is-out { opacity: .45; }
.roster-avatar { display: grid; place-items: center; width: 28px; height: 30px; flex: none; border-radius: 7px; background: var(--cyan); color: #24442e; font-size: 12px; font-weight: 650; }
.roster-agent[data-team="1"] .roster-avatar { background: var(--coral); color: #55352a; }
.roster-agent>span:last-child { min-width: 0; }
.roster-agent strong { display: block; font-size: 12px; font-weight: 500; color: #d1dfc9; }
.roster-agent small { display: block; font-size: 10px; color: #a6baa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Archives and the event list are useful on demand, not between the match and controls. */
.match-library { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.match-library>summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 10px 15px; color: #bac8b8; font-size: 12px; list-style: none; }
.match-library>summary:before { content: '›'; font-size: 18px; color: #879b84; margin-right: 2px; }
.match-library>summary>span:first-child { margin-right: auto; }
.match-library>summary::-webkit-details-marker { display: none; }
.match-library[open]>summary:before { transform: rotate(90deg); }
.details-hint { color: #7d927a; font-size: 11px; }
.library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 12px; }
.library-grid>.panel { border-radius: 7px; }
.archive-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px 12px; font-size: 12px; color: #a9baa4; }
.archive-filter select { font-size: 11px; max-width: 190px; }
.replay-list { max-height: 330px; min-height: 66px; overflow-y: auto; }
.replay-item { display: block; width: 100%; padding: 12px 15px; text-align: left; border-top: 1px solid var(--line-soft); border-left: 2px solid transparent; background: transparent; }
.replay-item:hover { background: #263329; }
.replay-item.is-active { background: #2d3d2d; border-left-color: #b3d5a2; }
.replay-item-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.replay-item-top strong { font-weight: 500; }
.replay-item-top>span { color: #b0c4a8; font-variant-numeric: tabular-nums; }
.replay-item-bottom { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; color: #849c7f; }
.replay-item .replay-type { color: #b0cc9c; }
.replay-step-progress { min-width: 0; overflow-wrap: anywhere; }
.replay-step-progress+span { flex: none; }
.baseline-button { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 12px; padding: 10px 12px; border: 1px solid #495f44; border-radius: 7px; background: #283526; text-align: left; color: #bbd2ad; font-size: 12px; }
.baseline-button>span:first-child { font-size: 21px; }
.baseline-button>span:last-child { margin-left: auto; }
.baseline-button small { display: block; margin-top: 2px; font-size: 10px; color: #8ca47f; }
.curriculum-demo { margin: 0 15px 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.curriculum-demo label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #b1c0a7; }
.curriculum-demo select { font-size: 11px; max-width: 200px; }
.curriculum-demo>small { display: block; font-size: 10px; color: #849c7f; margin-top: 7px; }
.event-list { padding: 0 10px 12px; max-height: 390px; overflow-y: auto; }
.event-list p { color: #8fa487; font-size: 12px; padding: 0 6px; }
.event-jump { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #b0c1a5; font-size: 12px; }
.event-jump>span:first-child { flex: none; color: #d6be8b; font-size: 11px; font-variant-numeric: tabular-nums; }
.event-jump:hover, .event-jump.is-current { background: #34422f; border-color: #596a4e; color: #d9e4ce; }
.replay-footnote { padding: 3px 15px 13px; color: #8fa585; font-size: 11px; line-height: 1.7; }
.rules-panel { max-width: 1040px; margin: 0 auto; }
.rules-panel ol { margin: 0; padding: 0 25px 10px 40px; color: #b6c6ac; font-size: 13px; line-height: 1.9; }
.rules-panel li { padding-left: 4px; margin-bottom: 10px; }
.rules-panel li::marker { color: #8caf7d; }
.legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: #a7b99c; }
.legend>span { display: flex; align-items: center; gap: 7px; }
.legend-dot { width: 7px; height: 7px; border-radius: 2px; }
.kitchen-credits { margin: 0 20px 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.9; color: #89a17d; }
.kitchen-credits a { color: #b7ccaa; text-decoration: underline; text-decoration-color: #56734a; }
/* Cooperative orders use the same compact ticket language as race orders. */
.scenario-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 12px; font-size: 11px; color: #b5c9aa; }
.scenario-info strong { font-weight: 500; }
.scenario-info span { font-size: 10px; color: #8fa681; text-align: right; }
.kitchen-orders { flex: none; margin: 3px 8px 7px; padding: 7px; border: 1px solid #465740; border-radius: 7px; background: #263125; }
.orders-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 11px; color: #c7d0b4; }
.orders-heading strong { font-size: 10px; font-weight: 500; }
.order-tickets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.order-ticket { min-width: 0; overflow: hidden; border-radius: 4px; color: #3e4d35; background: #e7e2cb; }
.ticket-title, .ticket-ingredients, .ticket-deadline { display: flex; align-items: center; gap: 4px; padding: 0 7px; }
.ticket-title { justify-content: space-between; padding-top: 4px; }
.ticket-title strong { font-size: 10px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-title>span { font-size: 9px; color: #8f906f; }
.ticket-ingredients { margin: 2px 0; font-size: 16px; }
.ticket-ingredients small { margin-left: auto; color: #7d8765; font-size: 9px; }
.ticket-deadline { justify-content: space-between; margin: 2px 0 4px; font-size: 9px; color: #7d8260; }
.ticket-deadline small { font-size: 8px; border: 1px solid #bdc3a0; border-radius: 3px; padding: 0 3px; }
.ticket-progress { height: 3px; background: #cad1ab; }
.ticket-progress>span { display: block; height: 100%; background: #839f6d; }
.order-ticket.is-urgent .ticket-progress>span { background: #bd8052; }
@media(max-width:700px) {
  .training-strip { min-height: 36px; padding: 3px 11px; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .training-indicator strong { font-size: 10px; }
  .training-indicator>div { gap: 5px; }
  .training-phase { display: none; }
  .training-progress { display: none; }
  .training-strip .button { min-height: 28px; font-size: 10px; padding: 3px 6px; }
  .arena-panel>.panel-heading { min-height: 47px; padding: 1px 8px; gap: 5px; flex-wrap: nowrap; }
  .arena-panel>.panel-heading h2 { font-size: 12px; white-space: nowrap; }
  .arena-heading-actions { gap: 4px; }
  .arena-heading-actions .source-badge { max-width: 105px; font-size: 9px; padding: 3px 5px; }
  .arena-heading-actions #theatre-toggle { display: none; }
  .icon-control, .toggle-control, .text-control { min-width: 44px; min-height: 44px; padding: 8px 10px; }
  .arena-stage-top { display: none; }
  .arena-stage-bottom { display: none; }
  .canvas-wrap { margin-inline: 4px; }
  .spectator-controls { padding: 2px 5px 5px; }
  .timeline-row { height: 24px; gap: 8px; }
  .play-time { font-size: 10px; }
  .frame-counter { font-size: 9px; min-width: 45px; }
  .transport-row { gap: 4px; }
  .transport-main { gap: 4px; }
  .transport-main .play-button { min-height: 44px; width: 44px; }
  .transport-main #play-restart { min-width: 44px; }
  .transport-options { margin-right: 0; }
  .transport-options select { width: 66px; min-height: 44px; font-size: 11px; padding-inline: 5px; }
  .more-toggle { min-height: 44px; padding-inline: 10px; font-size: 12px; }
  .spectator-more { margin-left: auto; }
  .more-controls { width: calc(100vw - 32px); padding: 14px; bottom: calc(100% + 6px); right: 2px; }
  .more-section { gap: 8px; }
  .more-section-label { font-size: 12px; }
  .camera-row { gap: 9px; }
  .control-label select { min-height: 44px; max-width: 160px; }
  .spectator-roster { gap: 6px; }
  .roster-agent { padding: 7px; }
  .roster-agent strong { font-size: 11px; }
  .roster-agent small { font-size: 10px; }
  .match-library { margin-top: 8px; }
  .match-library>summary { min-height: 44px; padding: 10px 12px; }
  .details-hint { display: none; }
  .library-grid { grid-template-columns: 1fr; padding: 0 8px 8px; }
  .archive-filter { padding-inline: 12px; font-size: 11px; }
  .replay-item { padding-inline: 12px; }
  .event-jump { min-height: 44px; }
  .selected-run-progress { padding: 12px; }
  .selected-run-progress>div:first-child { font-size: 11px; flex-wrap: wrap; }
  .scenario-info { padding: 5px 8px; font-size: 10px; }
  .scenario-info span { font-size: 9px; }
  .kitchen-orders { margin-inline: 4px; padding: 5px; }
  .ticket-title, .ticket-ingredients, .ticket-deadline { padding-inline: 4px; }
  .ticket-title>span, .ticket-ingredients small { display: none; }
  .ticket-title strong { font-size: 9px; }
  .ticket-deadline { font-size: 8px; }
  .rules-panel ol { padding-left: 30px; padding-right: 18px; font-size: 12px; }
}

/* Human kitchen scenario selectors remain inside the existing replay library. */
.curriculum-demo label+label{margin-top:8px}.curriculum-demo select{min-height:36px}