/* Compact lobby layout only (phones, tablets, short windows). Desktop geometry
   lives in lobby.css; dialogs keep their own intentional scrolling. Every action
   stays visible without scrolling; targets are 44px, 36px on short screens. */
@media (max-width: 999px), (max-height: 649px) {
  #menu { --menu-pad-x: 0px; grid-template-rows: 44px minmax(0, 1fr) 44px; gap: 6px; overflow: hidden;
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(#060805eb, #060805cc 60%, #060805e6); }
  #menu .topbar { height: 44px; min-height: 0; padding: 0; }
  #menu .brand { font-size: 13px; }
  #menu .brand-mark { height: 26px; padding: 0 8px; }
  #menu .fullscreen-button { min-height: 44px; padding: 0 8px; font-size: 13px; letter-spacing: .1em; }
  #menu .home-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 20px; align-content: start; align-items: start; min-height: 0; padding: 0; overflow: visible; }
  #menu .home-intro { grid-column: 1; grid-row: 1; gap: 2px; width: auto; }
  #menu .home-intro .eyebrow { font-size: 11px; letter-spacing: .22em; }
  #menu .home-intro h1 { font-size: 22px; line-height: 1.05; }
  #menu .home-intro h1::after { width: 40px; height: 2px; margin-top: 6px; }
  #menu #home-description { display: none; }
  #menu .home-card { grid-column: 1; grid-row: 2; gap: 4px; width: 100%; min-height: 0; }
  #menu .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #menu .home-actions #create-room { grid-column: 1 / -1; }
  #menu .home-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px 0 0; }
  #menu .home-card #resume-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0 0 4px; }
  #menu .home-card button, #menu .home-card #resume-actions button { justify-content: center; min-width: 0; min-height: 44px; padding: 5px; font-size: 15px; line-height: 1.1; letter-spacing: .03em; text-align: center; background: #ece7d812; overflow-wrap: anywhere; }
  #menu .home-card :where(#create-room, #resume) { font-size: 16px; }
  #menu .home-card button:is([data-selected=true], :hover, :focus-visible):not(:disabled) { transform: none; }
  #menu .home-card #notice { margin: 0; padding: 4px 8px; font-size: 13px; line-height: 1.15; }
  #menu .lobby-help, #menu .lobby-empty, #menu .lobby-column-heading, #menu .lobby-rules { display: none; }
  #menu .lobby-panel { grid-column: 2; grid-row: 1 / 3; align-self: start; gap: 4px; width: 100%; min-height: 0; overflow: visible; }
  #menu .lobby-map { aspect-ratio: auto; height: clamp(50px, 16vh, 140px); margin: 0; }
  #menu .lobby-map::before { display: none; }
  #menu .lobby-map figcaption { padding: 20px 10px 6px; }
  #menu .lobby-map figcaption span:first-child { font-size: 18px; }
  #menu #lobby-map-mode { font-size: 12px; }
  #menu[data-state=room] .lobby-map { display: none; }
  #menu #lobby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; padding: 8px; border-top-width: 2px; }
  #menu .room-heading { grid-column: 1 / -1; align-items: center; min-height: 44px; gap: 4px; letter-spacing: .14em; }
  #menu .room-heading strong { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
  #menu .room-heading #lobby-code { font-size: 16px; letter-spacing: .06em; }
  #menu .room-heading button { min-height: 44px; padding: 0 6px; font-size: 12px; letter-spacing: .06em; }
  #menu #lobby-status { grid-column: 1 / -1; font-size: 14px; line-height: 1.15; }
  #menu #lobby-players { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 2px 0; overflow: visible; }
  #menu .lobby-member, #menu[data-tournament=true] .lobby-member { min-height: 26px; padding: 2px 6px; gap: 3px; font-size: 14px; line-height: 1.1; }
  #menu .lobby-member-status { font-size: 9px; letter-spacing: 0; }
  #menu .ready-choice { min-height: 44px; gap: 6px; padding: 0 8px; font-size: 15px; line-height: 1.1; }
  #menu .lobby-panel button.primary, #menu #bracket-open { min-width: 0; min-height: 44px; padding: 4px; font-size: 14px; line-height: 1.1; letter-spacing: .03em; overflow-wrap: anywhere; }
  #menu[data-tournament=true] #lobby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menu[data-tournament=true] #lobby > #share-invite { grid-column: auto; }
  #menu .lobby-player-count { padding: 3px 6px; font-size: 12px; letter-spacing: .12em; }
  #menu:not([data-state=room]) .home-content { grid-template-columns: minmax(0, 600px); grid-template-rows: auto auto minmax(0, 1fr); justify-content: center; }
  #menu:not([data-state=room]) .lobby-panel { grid-column: 1; grid-row: 3; }
  #menu:not([data-state=room]) .home-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A lone last tile fills its row instead of leaving a hole. */
  #menu .home-tools > button:last-child:nth-child(odd) { grid-column: span 2; }
  #menu:not([data-state=room]) .home-tools > button:last-child:nth-child(odd) { grid-column: auto; }
  #menu:not([data-state=room]) .home-tools > button:last-child:nth-child(3n+2) { grid-column: span 2; }
  #menu .home-footer { height: 44px; min-height: 0; padding: 0; gap: 8px; background: none; border: 0; }
  #menu .home-footer > p { font-size: 13px; line-height: 1.1; }
  #menu .home-footer > p span { padding: 0 3px; }
  #menu .menu-prompts { display: none; }
  #menu .install-area { flex-shrink: 0; }
  #menu .install-area > [data-install] { min-height: 44px; padding: 0 8px; font-size: 13px; letter-spacing: .08em; }
}
@media (max-width: 599px) and (orientation: portrait) {
  #menu .home-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; }
  #menu .home-intro { grid-column: 1; grid-row: 1; }
  #menu .home-card { grid-column: 1; grid-row: 2; }
  #menu .lobby-panel { grid-column: 1; grid-row: 3; }
  #menu .home-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menu .lobby-member, #menu[data-tournament=true] .lobby-member { min-height: 28px; }
  #menu:not([data-state=room]) .home-content { align-content: center; }
  #menu:not([data-state=room]) .lobby-map { height: clamp(80px, 22vh, 180px); }
  #menu .home-tools > button:last-child:nth-child(odd) { grid-column: auto; }
  #menu .home-tools > button:last-child:nth-child(3n+2) { grid-column: span 2; }
}
/* Tall phones have room to explain the flow under the map. */
@media (max-width: 599px) and (orientation: portrait) and (min-height: 780px) {
  #menu[data-state=home] .lobby-empty { display: grid; gap: 8px; padding: 10px 12px; }
  #menu[data-state=home] .lobby-empty li span { font-size: 13px; }
  #menu[data-state=home] .lobby-empty li b { font-size: 15px; }
  #menu[data-state=home] .lobby-empty p { display: none; }
}
@media (max-height: 599px) and (max-width: 999px), (max-height: 499px) {
  #menu { grid-template-rows: 36px minmax(0, 1fr) 36px; gap: 4px; }
  #menu .topbar, #menu .home-footer { height: 36px; }
  #menu .fullscreen-button, #menu .install-area > [data-install] { min-height: 36px; }
  #menu .home-content { gap: 4px 12px; }
  #menu .home-intro .eyebrow, #menu .home-intro h1::after { display: none; }
  #menu .home-intro h1 { font-size: 16px; }
  #menu .home-card button, #menu .home-card #resume-actions button { min-height: 36px; font-size: 14px; }
  #menu .home-card :where(#create-room, #resume) { font-size: 14px; }
  #menu .home-card, #menu .home-tools { gap: 3px; }
  #menu .lobby-map { display: none; }
  #menu .room-heading, #menu .room-heading button, #menu .ready-choice, #menu .lobby-panel button.primary, #menu #bracket-open { min-height: 36px; }
  #menu #lobby-status { font-size: 13px; }
  #menu #lobby { padding: 4px 6px; border-top-width: 1px; }
  #menu .lobby-panel button.primary, #menu #bracket-open { font-size: 12px; }
  #menu .lobby-member, #menu[data-tournament=true] .lobby-member { min-height: 22px; font-size: 14px; }
  #menu .lobby-player-count { font-size: 11px; }
  #menu .home-footer > p { font-size: 12px; }
}
@media (max-height: 499px) and (orientation: landscape) {
  #menu .home-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menu .home-actions #create-room { grid-column: auto; }
  #menu[data-invite-failed=true] .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}