:root { --classroom-reach: 0; }

/* The upper quarter holds teacher controls and readouts, away from children's game targets. */
@media (min-width: 1000px) and (min-height: 600px) and (orientation: landscape) {
  .stage:is(:fullscreen, .window-expanded) {
    --classroom-reach: .25;
    --classroom-top: 25dvh;
  }

  body.stage-mode .stage:is(:fullscreen, .window-expanded) .stage-hud {
    padding-top: 70px;
  }

  body.stage-mode .stage:is(:fullscreen, .window-expanded) .board {
    position: absolute;
    inset: max(var(--classroom-top), 250px) 0 70px;
  }

  body.stage-mode .stage:is(:fullscreen, .window-expanded) .game-bottom {
    margin-top: auto;
  }

  body.stage-mode .stage:is(:fullscreen, .window-expanded) .stage-controls {
    position: absolute;
    z-index: 7;
    inset: 0 0 auto;
    height: 62px;
    padding: 8px 18px;
  }

  body.stage-mode .stage:is(:fullscreen, .window-expanded) .stage-overlay,
  .word-express .stage:is(:fullscreen, .window-expanded) .stage-overlay {
    top: var(--classroom-top);
    bottom: 0;
  }

  .word-express .stage:is(:fullscreen, .window-expanded) .stage-controls {
    top: 0;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid #d7d9bd;
  }

  .word-express .stage:is(:fullscreen, .window-expanded) .hud {
    top: 76px;
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) {
    --classroom-top: 20dvh;
    padding-inline: clamp(24px, 3vw, 96px);
    padding-top: calc(var(--classroom-top) + 16px);
    background: linear-gradient(#edf4ec 0 var(--classroom-top), #fffcf4 var(--classroom-top));
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) > .stage-controls {
    position: absolute;
    top: 14px;
    right: 22px;
    left: auto;
    justify-content: flex-end;
    margin: 0;
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) .play-heading {
    position: absolute;
    top: 104px;
    left: clamp(24px, 3vw, 96px);
    right: clamp(24px, 3vw, 96px);
    padding-right: 0;
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) .card-number {
    font-size: clamp(28px, 1.5vw, 64px);
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) .card-word {
    font-size: clamp(12px, min(calc(140cqi / var(--letters)), 22cqi), 64px);
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) .play-controls {
    position: absolute;
    top: 14px;
    right: 310px;
    border: 0;
    padding: 0;
  }

  .pair-matching .stage:is(:fullscreen, .window-expanded) .pause-overlay {
    top: var(--classroom-top);
  }
}