/* Modern UI — lobby */
@media (min-width: 800px) {
  .lobby {
    grid-template-columns: minmax(240px, 1fr) 2fr minmax(260px, 1fr);
    grid-template-rows: auto auto auto;
    grid-auto-rows: auto;
    grid-template-areas:
      'table  table  table'
      'side   app    puzzle'
      'side   vpanel tv';
  }
}
@media (max-width: 799px) {
  .lobby { grid-template-areas: 'table' 'app' 'puzzle' 'vpanel' 'side' 'tv'; }
}
.lobby under-left { display: none; }
/* Ad slot collapses when the ad script did not render anything */
#ucard-ad-container:has(#ucard-item-1:empty) { display: none; }

/* Quick-play block */
.lobby .sidebar-second { margin: 0; padding: var(--m-gap); background: var(--m-panel); justify-content: flex-start; }
.lobby .seekbuttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.lobby .seekbuttons > button.lobby-button { margin: 0; border-radius: var(--m-radius); padding: 16px 12px; font-size: 16px; }
.lobby .seekbuttons > button.lobby-button:hover { box-shadow: var(--m-shadow); filter: brightness(1.08); }
.lobby aside.sidebar-first { margin-top: 0; }
.lobby .chat { max-height: 420px; }
/* Coloured challenge buttons set background-color inline; the theme gradient was painting over it */
.lobby .seekbuttons > button[style*="background-color"] { background-image: none; text-shadow: none; }
@media (max-width: 799px) {
  .lobby .puzzle, .lobby .tv { width: 100%; max-width: 320px; justify-self: center; }
}

/* Guest call-to-action (client/lobby/guestCta.ts) */
.m-guest-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 4px; }
.m-guest-cta strong { font-size: 1.3em; }
.m-guest-cta span { opacity: 0.8; flex: 1 1 260px; }
.lobby .seekbuttons > .m-guest-cta button.m-guest-login { width: auto; padding: 12px 28px; background: var(--m-accent); color: #fff; font-weight: 700; text-shadow: none; }

/* Quick-play grid (client/lobby/quickPlay.ts) */
.m-quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.lobby .seekbuttons .m-quick button.m-quick-tc {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 76px; margin: 0; padding: 10px 6px;
  border: 1px solid var(--border-color); border-radius: var(--m-radius);
  background: var(--m-panel-2); color: var(--font-color);
  text-transform: none; text-shadow: none; font-family: inherit;
}
.lobby .seekbuttons .m-quick button.m-quick-tc:hover { border-color: var(--m-accent); box-shadow: var(--m-shadow); }
.m-quick-time { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.m-quick-label { font-size: 0.85rem; opacity: 0.7; }
@media (max-width: 799px) {
  .m-quick { grid-template-columns: repeat(2, 1fr); }
}