/* Layout and controls for the scrolling north–south match view. */
.arena {
  container-type: inline-size;
}
.pitch-shell {
  height: min(calc(100dvh - var(--match-chrome)), calc(100cqw * 820 / 790));
}
#pitch {
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.match-overlay {
  z-index: 2;
  overflow: auto;
}
.overlay-inner h2 {
  font-size: clamp(32px, 11cqw, 72px);
}
@container (max-width: 500px) {
  .controller-label {
    display: none;
  }
  .scoreboard {
    gap: 10px;
    padding-inline: 12px;
  }
  .clock {
    padding-left: 12px;
  }
}
.key-guide > summary {
  display: none;
}
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding: 12px 0;
  line-height: 1.45;
  font-size: 14px;
  color: var(--ink);
}
.controls > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
kbd {
  font-size: 12px;
  padding: 0;
}
.touch-controls button:active {
  background: var(--lime);
  color: var(--ink);
}
@media (max-width: 760px), (pointer: coarse) {
  #pitch {
    --camera-inset: 100;
  }
  .touch-controls {
    position: absolute;
    z-index: 1;
    inset: auto 10px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 12px;
    pointer-events: none;
    user-select: none;
  }
  .touch-controls button {
    pointer-events: auto;
    box-shadow: 0 2px 5px #10271d40;
  }
  .dpad {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 3px;
  }
  .dpad button {
    background: #e2e6d7e8;
    border: 1px solid #cfd6c3;
    color: var(--ink);
    font-size: 22px;
    touch-action: none;
  }
  [data-move="up"] {
    grid-area: 1 / 2;
  }
  [data-move="left"] {
    grid-area: 2 / 1;
  }
  [data-move="down"] {
    grid-area: 2 / 2;
  }
  [data-move="right"] {
    grid-area: 2 / 3;
  }
  .touch-actions {
    display: flex;
    gap: 5px;
  }
  .touch-actions button {
    padding: 0 11px;
    height: 48px;
    min-width: 44px;
    background: var(--ink);
    color: var(--paper);
    font:
      9px GameMono,
      monospace;
    touch-action: none;
  }
  .touch-actions [data-action="shoot"] {
    background: var(--lime);
    color: var(--ink);
  }
}
@media (max-width: 760px) {
  .arena {
    width: 100%;
  }
  .pitch-shell {
    /* Header, scoreboard, player bar and collapsed keyboard guide. */
    height: max(240px, calc(100dvh - 176px - env(safe-area-inset-bottom)));
  }
  #pitch {
    --camera-width: 580;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .key-guide > summary {
    display: list-item;
    padding: 7px 14px;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    color: var(--muted);
  }
  .controls {
    padding-inline: 14px;
    font-size: 12px;
  }
  .controls kbd {
    font-size: 10px;
  }
}
@container (max-width: 380px) {
  .scoreboard {
    gap: 6px;
    padding-inline: 10px;
  }
  .team-score {
    font-size: 18px;
    gap: 7px;
  }
  .score {
    font-size: 24px;
    gap: 8px;
  }
  .clock {
    padding-left: 8px;
  }
}
@media (max-height: 680px) {
  .overlay-inner {
    padding: 12px 6%;
  }
  .overlay-inner h2 {
    font-size: 24px;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
  }
  .overlay-inner p {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .overlay-inner .eyebrow,
  .overlay-footnote {
    display: none;
  }
  .overlay-inner .primary {
    padding: 10px 14px;
    min-height: 40px;
  }
}
@media (max-width: 380px) {
  .touch-controls {
    gap: 7px;
  }
  .touch-actions {
    gap: 3px;
  }
  .touch-actions button {
    padding: 0 6px;
    font-size: 8px;
  }
}