/* Present mode (PLA-51): full screen overlay. Everything is scoped to .present / .pr-*. */
html.present-open, html.present-open body { overflow: hidden; }
.present { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); background: var(--navy-dark, #1E2D45); color: #fff; font-family: var(--font-body, system-ui, sans-serif); }
.present[hidden] { display: none; }
.pr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-brand { display: flex; align-items: center; gap: 8px; opacity: .6; font: 800 15px var(--font-display, 'Arial Narrow', sans-serif); text-transform: uppercase; letter-spacing: .06em; }
.pr-mark { height: 18px; }
.pr-stage { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.pr-court { width: 100%; height: 100%; display: block; }
.pr-info { text-align: center; }
.pr-title { margin: 0; font: 800 clamp(22px, 4.2vmin, 40px)/1.1 var(--font-display, 'Arial Narrow', sans-serif); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.pr-summary { margin: 6px auto 0; max-width: 60ch; font-size: clamp(15px, 2.4vmin, 22px); line-height: 1.35; color: rgba(255,255,255,.85); overflow-wrap: anywhere; }
.pr-controls { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 10px; }
.pr-btn { min-height: 64px; min-width: 64px; padding: 0 20px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; font: 700 clamp(18px, 3vmin, 26px) var(--font-body, system-ui, sans-serif); cursor: pointer; touch-action: manipulation; }
.pr-btn:hover:not(:disabled) { background: rgba(255,255,255,.18); border-color: #fff; }
.pr-btn:focus-visible { outline: 4px solid var(--yellow, #F2C200); outline-offset: 2px; }
.pr-btn:disabled { opacity: .35; cursor: not-allowed; }
.pr-play { background: var(--red, #E8473A); border-color: var(--red, #E8473A); }
.pr-play:hover:not(:disabled) { background: var(--red-dark, #C93A2E); border-color: var(--red-dark, #C93A2E); }
.pr-exit { min-height: 48px; min-width: 88px; padding: 0 22px; font-size: 18px; }
.pr-speed { min-width: 88px; }
.pr-controls [hidden] { display: none; }

/* Short landscape screens (phones): court on the left, info and controls in a column on the right. */
@media (orientation: landscape) and (max-height: 540px) {
  .present { grid-template-columns: minmax(0, 1fr) minmax(190px, 30%); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 14px; }
  .pr-bar { grid-column: 1 / -1; }
  .pr-stage { grid-column: 1; grid-row: 2 / 4; }
  .pr-info { grid-column: 2; grid-row: 2; align-self: center; text-align: left; overflow: auto; }
  .pr-controls { grid-column: 2; grid-row: 3; grid-template-columns: 1fr 1fr; }
  .pr-play, .pr-speed { grid-column: 1 / -1; }
  .pr-play { order: -1; }
  .pr-btn { min-height: 52px; }
  .pr-exit { min-height: 44px; }
}
/* Narrow portrait: keep the four controls on two rows so they stay big. */
@media (max-width: 460px) {
  .pr-controls { grid-template-columns: 1fr 1fr; }
  .pr-play, .pr-speed { grid-column: 1 / -1; }
  .pr-play { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .pr-btn { transition: none; } }