.match-orientation-prompt {
  width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 24px; color: var(--paper); background: var(--ink); border: 0; border-top: 5px solid var(--yellow);
  font: var(--text-md)/1.5 var(--font-body);
}
.match-orientation-prompt::backdrop { background: rgb(var(--ink-rgb) / .85); }
.orientation-kicker { color: var(--yellow); font-size: var(--text-xs); font-weight: 700; margin: 0 0 16px; }
.match-orientation-prompt h2 { font: var(--text-2xl)/1.1 var(--font-display); margin: 0; }
.orientation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.orientation-actions button { min-height: 48px; padding: 12px 16px; color: var(--paper); background: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.orientation-actions #portrait-play { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.orientation-actions button:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* Reserve the perimeter for controls; the pitch stays a single touch surface. */
@media (max-width: 1100px), (pointer: coarse) {
  .ink-game .hud-layer .pause-btn { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); bottom: auto; left: auto; width: 48px; height: 48px; }
  .ink-game .sound-btn { bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); width: 48px; height: 48px; }
  .ink-game .hud-layer .turn-banner { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); right: auto; width: fit-content; max-width: calc(100% - 84px); min-height: 48px; display: flex; align-items: center; padding: 8px 12px; transform: none; }
  body:has(canvas.aiming) .legend-objective,
  body:has(canvas.aiming) #tutorial-hand { visibility: hidden; }
  .ink-game .hud-layer .turn-banner { font-size: var(--text-sm); line-height: 1.2; }
  .player-camera #camera-menu { max-width: 164px; font-size: var(--text-xs); }
  .player-camera { bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px)); right: max(12px, env(safe-area-inset-right)); width: 280px; max-width: calc(100% - 24px); }
  .player-camera #camera-panel { max-height: calc(100dvh - 230px); }
  .player-camera .camera-panel-heading { position: sticky; top: -12px; z-index: 1; background: var(--ink); padding-block: 8px; }
  .ink-game .replay-controls { bottom: max(132px, calc(env(safe-area-inset-bottom) + 120px)); }
  .ink-game .goal-banner { bottom: 136px; }
}
.touch-selection-status { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 25; pointer-events: none; color: var(--paper); background: var(--ink); border-left: 3px solid var(--yellow); padding: 4px 8px; font: var(--text-sm)/1.3 var(--font-body); }
.touch-selection-status:empty, body:not([data-screen="match"]) .touch-selection-status { display: none; }
@media (orientation: portrait) { .touch-selection-status { bottom: 136px; } }
@media (orientation: portrait) and (max-width: 1100px) {
  .ink-game .scoreboard, .ink-game .flick-meter { left: 12px; transform: none; width: calc(100% - 84px); max-width: 440px; }
  .ink-game .scoreboard { top: max(12px, env(safe-area-inset-top)); height: 48px; min-height: 48px; padding: 0 8px; gap: 4px; }
  .ink-game .score-digits { font-size: var(--text-2xl); }
  .ink-game .flick-meter { top: calc(max(12px, env(safe-area-inset-top)) + 48px); height: 24px; padding: 4px 8px; }
  .ink-game .legend-objective { top: calc(max(12px, env(safe-area-inset-top)) + 80px); width: calc(100% - 24px); max-width: 600px; font-size: var(--text-xs); }
}
@media (orientation: landscape) and (max-height: 600px) {
  .ink-game .scoreboard, .ink-game .flick-meter { left: max(12px, env(safe-area-inset-left)); transform: none; width: 210px; }
  .ink-game .scoreboard { top: max(8px, env(safe-area-inset-top)); height: 40px; min-height: 40px; padding: 4px 8px; gap: 4px; }
  .ink-game .score-digits { font-size: var(--text-xl); min-width: 62px; }
  .ink-game .team-name { font-size: var(--text-xs); }
  .ink-game .flick-meter { top: calc(max(8px, env(safe-area-inset-top)) + 40px); height: 24px; padding: 4px 8px; }
  .ink-game .legend-objective { top: max(8px, env(safe-area-inset-top)); bottom: auto; left: 234px; right: max(72px, calc(env(safe-area-inset-right) + 60px)); transform: none; width: auto; padding: 4px 8px; }
  .player-camera { bottom: max(8px, env(safe-area-inset-bottom)); right: max(72px, calc(env(safe-area-inset-right) + 60px)); width: 250px; }
  .player-camera #camera-panel { max-height: calc(100dvh - 84px); }
  .ink-game .hud-layer .turn-banner { bottom: max(8px, env(safe-area-inset-bottom)); right: auto; max-width: calc(100% - 352px); }
  .ink-game .sound-btn { bottom: max(8px, env(safe-area-inset-bottom)); }
  .ink-game .replay-controls { bottom: 64px; }
  .ink-game .goal-banner { bottom: 68px; }
  #film-frame { box-shadow: inset 0 0 55px 8px rgb(var(--vignette-rgb) / .15); }
}