/* The same board, status controls and keyboard fit the available phone height. */
@media(max-width:720px), (max-height:560px) {
  body.active-game-layout .standard-active-game {padding-bottom:max(4px,env(safe-area-inset-bottom))}
  body.active-game-layout .standard-active-game .standard-gameplay-grid {
    width:var(--fit-board-width,min(340px,94vw)); max-width:100%;
  }
  body.relay-active-layout .standard-active-game .relay-grid-shell {
    width:var(--fit-board-width,min(340px,94vw)); max-width:100%;
  }
  body.relay-active-layout .relay-grid-shell .standard-gameplay-grid {width:100%}
  body.active-game-layout .standard-active-game .tile {font-size:var(--fit-letter-size,clamp(26px,8vw,38px))}
  body.active-game-layout .rounds-active-game .rounds-phone-hud,
  body.relay-active-layout .relay-phone-hud {
    grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:3px;width:min(350px,100%);
  }
  body.active-game-layout .rounds-active-game .rounds-phone-power-status {gap:0}
  body.active-game-layout .rounds-active-game .rounds-phone-power-status .rounds-power-status-label {
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
  body.active-game-layout .standard-active-game .relay-power-strip {gap:2px;flex-wrap:nowrap}
  body.active-game-layout .standard-active-game .relay-power-icon-button {
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:5px;
    border-width:2px;box-sizing:border-box;
  }
  /* The inner artwork retains its existing compact dimensions. */
  body.active-game-layout .standard-active-game .relay-power-art {flex-shrink:0}
}

/* Short landscape: rearrange the existing phone board/HUD/keyboard as two
   adjacent groups. No alternate controls, duplicate timers or new game shell. */
@media(min-width:600px) and (max-height:560px) {
  body.active-game-layout .app-shell {padding:2px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
  body.active-game-layout .topbar {height:42px;min-height:42px}
  body.active-game-layout .standard-active-game {
    display:grid;grid-template-columns:minmax(160px,1fr) minmax(300px,1.3fr);
    column-gap:16px;row-gap:3px;align-items:center;max-width:900px;
  }
  body.active-game-layout .daily-game-head,
  body.active-game-layout .relay-play-header {grid-column:1/-1;grid-row:1;margin:0 0 2px;min-height:0}
  body.active-game-layout .rounds-active-game>.standard-gameplay-stage {grid-column:1;grid-row:2/4}
  body.active-game-layout .relay-stage-wrap {grid-column:1;grid-row:2/4;margin:0}
  body.active-game-layout .standard-gameplay-stage {display:flex;flex-direction:column;align-items:center}
  body.active-game-layout .standard-active-game .desktop-gameplay-status {display:none!important}
  body.active-game-layout .rounds-active-game .rounds-phone-hud {display:grid;grid-column:2;grid-row:2;margin:0 auto}
  body.active-game-layout .rounds-phone-power-status {display:flex;align-items:center;justify-content:center}
  body.active-game-layout .rounds-phone-hud-timer {text-align:right}
  body.active-game-layout .rounds-active-game>.standard-game-keyboard {grid-column:2;grid-row:3;width:100%;margin:0}
  body.active-game-layout .relay-keyboard-wrap {grid-column:2;grid-row:2/4;align-self:center;width:100%;margin:0}
  body.active-game-layout .relay-phone-hud {display:grid;margin:0 auto 3px}
  body.active-game-layout .standard-game-keyboard {width:100%;gap:3px;margin:0}
  body.active-game-layout .standard-game-keyboard .key-row {gap:3px}
  body.active-game-layout .standard-game-keyboard .key:not(.action) {height:40px!important;min-height:40px!important;font-size:13px}
  body.active-game-layout .standard-game-keyboard .desktop-keyboard-actions {display:none}
  body.active-game-layout .standard-game-keyboard .phone-keyboard-actions {display:grid;grid-template-columns:1fr 1.7fr;gap:4px}
  body.active-game-layout .phone-edit-split {display:flex;gap:3px}
  body.active-game-layout .phone-edit-split>.key {flex:1;max-width:none}
  body.active-game-layout .phone-keyboard-actions>.key.action {height:38px;min-height:38px;max-width:none}
  body.active-game-layout .phone-keyboard-actions>.phone-score-bank,
  body.active-game-layout .standard-game-keyboard>.phone-game-timer {display:none!important}
  body.active-game-layout .daily-round-ended {grid-column:2;grid-row:2/4}
  body.active-game-layout [data-ended-reveal-keyboard] {grid-column:2;grid-row:3}
  body.active-game-layout .rounds-active-game:has([data-ended-reveal-keyboard]) .daily-round-ended {grid-column:1/-1;grid-row:4}
  body.active-game-layout .standard-active-game .standard-gameplay-grid {gap:2px;margin:0 auto}
  body.active-game-layout .standard-active-game .guess-row {gap:2px}
  body.active-game-layout .standard-active-game .standard-gameplay-grid,
  body.relay-active-layout .standard-active-game .relay-grid-shell {
    width:var(--fit-board-width,min(270px,calc((100svh - 96px) * .80)));
  }
}