/* Fit the live table around Safari safe areas without stretching its artwork. */
.game-shell { padding-left:max(5px,env(safe-area-inset-left,0px)); padding-right:max(5px,env(safe-area-inset-right,0px)); }
.match-summary { display:flex; flex-direction:column; gap:3px; flex-shrink:0; min-width:0; }
.match-summary .players-bar { width:100%; }
.game-shell .match-identity { min-width:0; }
.game-shell .match-identity>strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.game-shell .game-status { pointer-events:none; }
.reaction-menu { display:flex; gap:8px; justify-content:center; }
.reaction-menu button { min-width:44px; min-height:44px; }
/* Input fields remain 16px to prevent Safari's keyboard zoom from shifting controls. */
dialog input,dialog select,dialog textarea,.shell input,.shell textarea { font-size:16px; }
@media (max-width:559px) and (max-height:660px) {
 .match-summary { gap:2px; }
 .game-shell .arena-venue-banner { min-height:30px; padding:2px 6px; }
 .game-shell .arena-emblem { font-size:18px; }
 .game-shell .arena-venue-banner strong { font-size:11px; }
 .game-shell .arena-venue-banner small { font-size:8px; }
 .game-shell .reaction-controls { min-height:44px; margin:0; gap:3px; }
 .game-shell .reaction-controls button { min-height:44px; min-width:44px; padding:2px; }
 .game-shell .cue-hint { font-size:8px; }
}
/* Rotate short phones to a wide table, with all status beside it. */
@media (min-width:560px) and (max-height:499px) {
 .game-shell { display:grid; max-width:1100px; min-height:0; height:100dvh; overflow:hidden;
  grid-template-columns:minmax(158px,22%) minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 28px 60px; gap:3px; }
 .game-shell>.topbar { grid-column:1/-1; grid-row:1; height:44px; min-height:44px; }
 .game-shell>.match-summary { grid-column:1; grid-row:2; min-height:0; overflow-y:auto; overscroll-behavior:contain; gap:5px; }
 .game-shell .players-bar { flex-direction:column; max-height:none; min-height:0; padding:2px; gap:4px; }
 .game-shell .player-block,.game-shell .player-block.current,.game-shell .player-block.right { width:100%; min-height:48px; padding:13px 4px 3px; }
 .game-shell .turn-timer { width:36px; min-width:36px; height:36px; align-self:center; }
 .game-shell .game-objective { font-size:9px; text-align:left; padding:3px; }
 .game-shell .arena-venue-banner { min-height:30px; padding:3px; gap:3px; }
 .game-shell .arena-venue-banner strong { font-size:10px; }
 .game-shell .arena-match-fee { padding-left:3px; }
 .game-shell .arena-emblem { display:none; }
 .game-shell>.arena-stage { grid-column:2; grid-row:2; height:100%; grid-template-columns:44px minmax(0,1fr) 50px; gap:3px; }
 .game-shell .arena-meter { height:100%; min-height:0; padding-top:4px; gap:2px; }
 .game-shell .arena-meter .control-label { font-size:8px; }
 .game-shell .cue-boost { min-height:0; font-size:7px; }
 .game-shell>.potted-row { grid-column:1/-1; grid-row:3; min-height:0; }
 .game-shell>.hand { grid-column:1; grid-row:4; min-height:0; padding:2px; gap:2px; align-self:center; }
 .game-shell .card { height:43px; padding:2px; font-size:12px; }
 .game-shell .card span:last-child { font-size:18px; }
 .game-shell>.cue-controls { grid-column:2; grid-row:4; width:100%; max-width:none; min-height:0; margin:0; gap:8px; }
 .game-shell>.reaction-controls { display:none; } /* Reactions remain available in the Game Menu. */
}
@media (prefers-reduced-motion:reduce) {
 .game-shell *,dialog { scroll-behavior:auto; }
 .game-shell .mascot-reaction { animation:none; }
}