/* One game and one set of controls, arranged for wider browser windows. */
@media (min-width: 600px) {
  body { display: block; background: var(--ground); }
  .phone { max-width: 1600px; height: 100dvh; border: 0; box-shadow: none; overflow: clip; }
  .app-header .header-home { margin-right: auto; }

  /* The lobby is a page; gameplay and its overlays retain their fitted panels. */
  .phone:has(#lobby.on):not(:has(.sheet.on, #help.on)) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    container-type: normal;
  }
  .phone:has(#lobby.on):not(:has(.sheet.on, #help.on)) #lobby {
    position: relative;
    inset: auto;
  }
  #lobby > .scroll {
    flex: none;
    overflow: visible;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px 24px calc(var(--dock-height) + 24px);
  }
  .phone:has(#lobby.on):not(:has(.sheet.on, #help.on)) :is(.game-nav, .nav-scroll-button) { position: fixed; }
  .phone:has(#lobby.on):not(:has(.sheet.on, #help.on)) .game-nav { max-width: 1600px; margin-inline: auto; }
  #rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #rooms .room { height: 100%; margin: 0; }
}

@media (min-width: 960px) {
  .phone {
    max-width: 1600px;
    height: 100dvh;
    border: 0;
  }

  .app-header { padding-inline: 24px; gap: 16px; }
  .app-header .header-home { margin-right: auto; }
  .app-header .header-try { flex-basis: 140px; }
  .phone .game-nav button, .phone.in-round .game-nav button { flex: 1 0 72px; gap: 4px; }
  .game-nav { padding-inline: 12px; }

  #lobby > .scroll { padding: 28px 28px calc(var(--dock-height) + 28px); }
  #lobby .lobby-intro { max-width: 560px; }
  #lobby #solo-practice { width: auto; }
  #rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #rooms .room { height: 100%; margin: 0; align-content: start; }
  #rooms .room-copy { min-width: 0; }
  #lobby .room-private { margin-block: 20px; }
  #lobby .lobby-replay { min-height: 76px; }
  #launch > .scroll { width: 100%; max-width: 760px; margin-inline: auto; padding-top: 48px; }
  #waiting-scroll { padding: 24px; }
  #waiting .waiting-room { max-width: 760px; margin-inline: auto; }

  #game-market {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
      "connection connection"
      "practice practice"
      "tickers tickers"
      "chart trade"
      "chart indicators"
      "sync sync";
    grid-template-rows: auto auto auto auto 1fr auto;
    align-content: start;
    column-gap: 16px;
    padding: 12px 16px;
  }
  #connection-notice { grid-area: connection; }
  #practice-controls { grid-area: practice; }
  #chart-view-sync-note { grid-area: sync; }
  #game-market [data-widget="tabs"] { grid-area: tickers; margin-bottom: 12px; }
  #game-market [data-widget="chart-wrap"] { grid-area: chart; align-self: start; }
  #game-market [data-widget="trade-panel"] { grid-area: trade; align-self: start; }
  #game-market [data-widget="market-details"] { grid-area: indicators; align-self: start; margin-top: 12px; }
  #game-market .game-widget { border: 1px solid var(--line); border-radius: var(--r-sm); }
  #game-market .game-widget[hidden] { display: none; }
  #game-market #chart-wrap {
    min-height: 360px;
    border-radius: var(--r-sm);
  }
  #game-market .stock-tickers { display: flex; align-items: center; }
  #game-market .stock-ticker-tools { display: grid; flex: 0 0 112px; gap: 4px; padding: 6px 8px; }
  #game-market .stock-ticker-tools > span { display: none; }
  #game-market .stock-ticker-tools select { max-width: none; width: 100%; }
  #game-market .tabs { flex: 1; min-width: 0; border: 0; }
  #game-market .tab { flex: 1 0 77px; }
  #game-market #trade-panel { border: 0; border-radius: var(--r-sm); padding: 16px; }
  #game-market #trade-controls { display: block; }
  #game-market #trade-controls > .buys { margin-bottom: 12px; }
  #game-market #trade-controls > .order-size-mode { flex-direction: row; gap: 6px; margin-bottom: 8px; }
  #game-market #trade-controls > .order-size-mode button { width: auto; min-height: 44px; padding-inline: 12px; }
  #game-market #trade-controls > .qtyrow { display: grid; grid-template-columns: minmax(116px, 1fr) 76px 88px; margin-bottom: 12px; }
  #game-market #trade-controls .qtyrow > * { grid-area: auto; }
  #game-market #order-presets { font: var(--control-emphasis); }
  #game-market .trade-account-summary { gap: 12px; padding-block: 12px; }
  #game-market .indicator-bar { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 12px; }
  #game-market .indicator-heading > span:last-child { display: none; }
  #game-market .indicator-bar button { flex: 1 0 86px; }

  /* With both side panels closed, the same chart reclaims their column. */
  #game-market:not(:has([data-widget="trade-panel"]:not([hidden]), [data-widget="market-details"]:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "connection" "practice" "tickers" "chart" "sync";
    grid-template-rows: auto auto auto 1fr auto;
  }
  #game.chart-expanded #game-market {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "connection" "practice" "chart" "sync";
    grid-template-rows: auto auto 1fr auto;
  }

  .stocks-toolbar { grid-template-columns: 160px 160px 200px 44px; justify-content: start; gap: 12px; padding: 12px 24px; }
  #stocks-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 16px; padding: 16px 24px; }
  #stocks-list .stock-card { width: 100%; margin: 0; padding: 16px; }
  #stocks-list .stock-candlesticks { height: 140px; }
  #positions-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 16px; padding: 16px 24px; }
  #positions-list .position-card { margin: 0; }
  #positions-sheet > .pad { max-width: 440px; width: 100%; margin-inline: auto; }
  #help > .scroll, #stats-scroll, #lb-live, #results-scroll { width: 100%; max-width: 900px; margin-inline: auto; }
  .sheet-head { padding-inline: 24px; }
  #watch-dialog { width: min(1200px, calc(100vw - 48px)); height: calc(100dvh - 48px); border-radius: var(--r); }
  .watch-scroll { padding-inline: 24px; }
  .watch-candles { max-height: 56dvh; }
  .watch-library, .watch-roster-list { max-width: 900px; margin-inline: auto; }
}

@media (min-width: 1200px) {
  .phone .game-nav button, .phone.in-round .game-nav button { flex-direction: row; gap: 8px; }
}