/* Game views only: the hub and its scrolling game list keep their original layout. */
#game-container,
#game-container.mp-lobby-view {
  height:100%;
  padding:clamp(8px,2vh,20px) 12px 8px;
  overflow:hidden;
}
#game-container #game-content { height:100%; min-height:0; }
/* Move only the lobby down; shrink the spacer before clipping short-screen controls. */
#game-container.mp-lobby-view #game-content { display:flex; flex-direction:column; }
#game-container.mp-lobby-view #game-content::before { content:""; flex:0 1 15vh; min-height:0; }
#game-container.mp-lobby-view .mp-lobby { flex:0 0 auto; margin:0 auto; }

#game-container .mp-lobby { padding:0 8px; }
/* Lobby vertical separation is5%roomier; horizontal gaps/control sizes stay unchanged. */
#game-container .mp-lobby .mp-eyebrow { margin-bottom:6.3px; }
#game-container .mp-lobby h2 { font-size:clamp(22px,4vh,28px); line-height:1.15; margin-bottom:8.4px; max-width:none; }
#game-container .mp-intro { display:none; }
#game-container .mp-seats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10.5px; }
#game-container .mp-seat { gap:8px; padding:8px; min-height:56px; }
#game-container .mp-seat > div { min-width:0; flex:1; }
#game-container .mp-seat strong { font-size:12px; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game-container .mp-seat small { font-size:10px; margin-top:3.15px; white-space:nowrap; }
#game-container .mp-slot { width:18px; font-size:22px; }
#game-container .mp-presence { width:5px; height:5px; }
#game-container .mp-invitation { margin-bottom:10.5px; }
#game-container .mp-lobby .mp-label { margin-bottom:8.4px; }
#game-container .mp-lobby .mp-share { margin:6.3px 0 0; }
#game-container .mp-share button { min-height:44px; padding:6px; }
#game-container .mp-primary { min-height:44px; }
#game-container .mp-skins { margin-bottom:10.5px; }
#game-container #gift-picker { padding:6.3px 0 8.4px; margin-top:0; }
#game-container .gift-label { font-size:13px; margin:0 0 6.3px; }
#game-container .gift-hint { font-size:11px; margin-bottom:6.3px; }
#game-container .mp-connection { margin:6px 0; line-height:1.4; }
#game-container .mp-lobby > .mp-connection:last-child { display:none; }
#game-container .mp-error { margin:6px 0; min-height:0; line-height:1.4; }
#game-container .mp-error:empty { display:none; }
#game-container .mp-lobby .mp-connection,
#game-container .mp-lobby .mp-error { margin:6.3px 0; }

#game-container .tic-tac-toe { --board-limit:min(320px,calc(100vh - 160px)); }
#game-container .mp-match { --board-limit:min(320px,calc(100vh - 280px)); }
#game-container .ttt-board {
  width:min(100%,var(--board-limit));
  aspect-ratio:1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  margin:0 auto 10px;
}
#game-container .ttt-cell { min-width:0; min-height:0; font-size:clamp(24px,6vh,36px); }
#game-container .ttt-status { font-size:16px; min-height:28px; margin-bottom:8px; }
#game-container .ttt-score { font-size:12px; gap:12px; margin-bottom:8px; }
#game-container .ttt-btn { min-height:44px; padding:8px 16px; }
#game-container .mp-match .mp-eyebrow { margin-bottom:8px; }
#game-container .mp-opponent { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px; }
#game-container .mp-clock { margin:4px 0 8px; }
#game-container .mp-clock:empty { display:none; }

/* Compact game controls; skin choices use the same one-row strip at every height. */
@media (max-height:700px) {
  #game-container .mp-eyebrow { display:none; }
  #game-container .mp-seat { min-height:48px; padding:6px; }
  #game-container .mp-match { --board-limit:min(320px,calc(100vh - 200px)); }
  #game-container .mp-match .ttt-status { min-height:24px; font-size:15px; }
}
@media (max-height:550px) {
  #game-container .mp-invitation { display:grid; grid-template-columns:minmax(0,1fr) 66px 84px; gap:6px; position:relative; }
  #game-container .mp-invitation .mp-label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  #game-container #mp-invite { min-width:0; }
  #game-container .mp-invitation .mp-share { display:contents; }
  #game-container .mp-lobby .gift-label { display:none; }
  #game-container #mp-ready + .mp-connection { display:none; }
}