/* =====================================================================
   Armando — Fenix Stadium's screen (HELP-105, zTAY4rtfh36jPp3e1zfg).

   Only the layout the design system leaves to the page: the ground and
   'Who is doing what' side by side from 1280 px (the list 360 px), the
   list under the ground from 600 to 1279 px, the ground at 16:10 of its
   column, full screen, and the SidePanel fixed at the right. Every
   component is bundle.css's; the ground itself is the scene's, with its
   own tokens (stadium-scene.css). Design-system tokens only.
   ===================================================================== */

.pf-st { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1280px) {
  .pf-st { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Without WebGL the list is the screen (frame S4): the ground's column keeps only its lines. */
.pf-st[data-ground="off"] { grid-template-columns: minmax(0, 1fr); }

.pf-st-ground { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf-st-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pf-st-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-st-hintrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.pf-st-hint { margin: 0; color: var(--neutral-600); }
.pf-st-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-st-alerts { display: flex; flex-direction: column; gap: 8px; }
.pf-st-state[hidden], .pf-st-alerts[hidden], .pf-st-hintrow[hidden], .pf-st-replay[hidden], .pf-st-timeline[hidden],
.pf-st-replay__msg[hidden], .pf-st-stage[hidden], .pf-st-list__state[hidden], .pf-st-rows[hidden], .pf-st-side[hidden],
.pf-st-row__where[hidden], .pf-st .pf-field[hidden], .pf-st .pf-btn[hidden] { display: none; }

/* The ground: 16:10 of its column; the scene draws into the canvas. */
.pf-st-stage { position: relative; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-xl); background: var(--neutral-100); }
.pf-st-stage > canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* The hover tip over a ball, a bucket or the scoreboard. */
.pf-st-tip { position: absolute; z-index: var(--z-tooltip); max-width: 320px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--neutral-900); color: var(--neutral-0); box-shadow: var(--elevation-2); pointer-events: none; }
.pf-st-tip[hidden] { display: none; }

/* Full screen: the ground covers the window, the LoadLine and the buttons on top. */
.pf-st-ground--full { position: fixed; inset: 0; z-index: var(--z-overlay); padding: 16px; background: var(--neutral-50); }
.pf-st-ground:fullscreen { padding: 16px; background: var(--neutral-50); }
.pf-st-ground--full .pf-st-stage { flex: 1 1 auto; aspect-ratio: auto; }

/* Replay: above the ground, in a white panel. */
.pf-st-replay { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: var(--border-default); border-radius: var(--radius-xl); background: var(--neutral-0); }
.pf-st-replay__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.pf-st-replay__row > .pf-st-period { width: 200px; }
.pf-st-replay__row > .pf-legenda { margin: 0 0 8px; }
.pf-st-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf-st-timeline > .pf-tl { flex: 1 1 360px; min-width: 240px; }

/* Who is doing what. */
.pf-st-list { min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-xl); background: var(--neutral-0); }
.pf-st-list__h { margin: 0; padding: 14px 12px 10px; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 700; color: var(--neutral-900); }
.pf-st-list__state { padding: 0 12px 12px; }
.pf-st-rows { margin: 0; padding: 0; list-style: none; }
.pf-st-row { padding: 10px 12px; border-top: var(--border-hairline); }
.pf-st-row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.pf-st-row__top > .pf-cell { flex: 1 1 0; min-width: 0; }
.pf-st-row__top > .pf-st-row__state { flex: none; }
/* The sub-label wraps rather than cut off the area after the role (HELP-14 story 9, Z3). */
.pf-st-row .pf-cell__sub { white-space: normal; }
.pf-st-row__area { font-weight: 600; color: var(--neutral-800); }
.pf-st-who { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; color: var(--neutral-900); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-st-who:hover { text-decoration: underline; }
.pf-st-who:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: 0 0 0 2px var(--brand-gold), var(--focus-ring); }
.pf-st-who[aria-expanded="true"] { color: var(--brand-burgundy); }
.pf-st-row__lines { padding-left: 28px; }
.pf-st-row__lines > p { margin: 2px 0 0; color: var(--neutral-600); }
.pf-st-row__lines > .pf-st-row__bucket { margin-top: 6px; }
.pf-st-sep { padding: 12px 12px 4px; border-top: var(--border-hairline); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-600); }
.pf-st-refs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
/* A run's label is words, not an id: the body face, still a RefLink panel. */
.pf-st-ref--words { font-family: inherit; }

/* The SidePanel: fixed at the right over the page, not modal; bundle.css gives it the full width below 600 px. */
.pf-st-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-popover); }
.pf-st-side__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-st-side__label { color: var(--neutral-600); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-st-side__note { padding: 0 24px 14px; }
.pf-st-side__foot { flex: none; }
.pf-st-side .pf-side__section p { margin: 0 0 4px; }
.pf-st-hist time { margin-right: 6px; font-variant-numeric: tabular-nums; }
.pf-st-runlines { margin-top: 6px; }