/* ==========================================================================
   Desktop & landscape tablet (a window wider than 900px, taller than a phone
   held sideways): everything fits one screen. Real browser windows are short
   (1366×768 screens leave ~650px), so the game, its dialogs and New Game are
   laid out to fit without scrolling. Loaded last; phones are never affected.
   ========================================================================== */
@media (min-width: 901px) and (min-height: 561px) and (orientation: landscape) {

  /* ---------- Game screen ---------- */
  .screen--game { gap: 8px; }
  .game-topbar .round-badge { padding-block: 2px; }
  .turn-banner { padding-block: 5px; }
  .event-strip { margin: -2px 0 -2px; }
  /* A slimmer action bar: the prompt and the buttons on one line. */
  .action-bar { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 6px 10px 8px; }
  .action-bar .btn { flex: 0 0 auto; min-width: 150px; min-height: 50px; }
  .turn-prompt { flex: 1 1 auto; padding: 6px 12px; font-size: 1.1rem; }
  .cpu-status { flex: 1 1 100%; }
  .action-bar:has(.cpu-status:not([hidden])) { flex-wrap: wrap; }
  /* The side columns never push the board: they shrink (and scroll inside, as a last resort). */
  .game-layout { grid-template-rows: auto minmax(0, 1fr); }
  .hud { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px; margin: -6px; scrollbar-width: none; }
  .hud::-webkit-scrollbar { display: none; }
  .action-bar .btn { min-height: 46px; }
  /* Toasts bottom-left, above the action bar: over empty table, never the board or the banner. */
  body[data-active-screen='game'] .toast-stack {
    top: auto;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px);
    left: max(14px, env(safe-area-inset-left));
    width: min(380px, 30vw);
    justify-items: start;
    transform: none;
  }

  /* Achievement pop-ups bottom-right, mirroring the toasts: over empty table, clear of the HUD. */
  body[data-active-screen='game'] .achievement-pops {
    top: auto;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px);
    right: max(14px, env(safe-area-inset-right));
    width: min(320px, 24vw);
  }

  /* ---------- Build / upgrade panel: every choice in one row ---------- */
  .build-panel { width: min(1180px, calc(100vw - 32px)); padding: 14px 16px; }
  .build-panel__body { gap: 10px; }
  .build-panel__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .build-option__art { width: 70%; max-width: 96px; }

  /* ---------- Results: one screen ---------- */
  .results { width: min(1180px, calc(100vw - 32px)); padding: 12px 18px 14px; }
  .results__head { gap: 0; margin-bottom: 8px; }
  .results__trophy, .results__kicker { display: none; }
  .results__title { font-size: clamp(1.4rem, 3.4vh, 2rem); }
  .results__formula { font-size: 0.78rem; }
  .results__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
  .result-card { gap: 4px; padding: 8px 10px 10px; }
  .result-card__city-value { font-size: 1.4rem; }
  .result-card { min-width: 0; }
  .result-card__stats { gap: 0 8px; padding: 4px 8px; font-size: 0.8rem; line-height: 1.2; }
  .result-card__best-art { width: 30px; }
  .match-stats { margin-bottom: 10px; }
  .results__awards { margin-bottom: 10px; }
  .results__awards-title { margin-bottom: 4px; font-size: 1.05rem; }
  .awards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
  .award { padding: 4px 8px 4px 4px; }
  .award__detail { display: none; }
  /* "Challenge a friend": seed and its two buttons on one line, then the three actions. */
  .results__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-bottom: 10px; }
  .results__share .results__awards-title { margin: 0; }
  .results__share-actions { flex: 0 1 auto; width: auto; flex-wrap: nowrap; }
  .results__share-actions .btn { flex: 0 0 auto; }
  .results__share-actions .btn, .results__actions .btn { min-height: 46px; }
  .share-fallback { grid-column: 1 / -1; justify-self: center; }

  /* ---------- New Game: options on top, the table below, Start always on screen ---------- */
  [data-screen='setup'] .page-header,
  [data-screen='setup'] .page-body { width: min(1240px, 100%); }
  .setup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      'mode table rules'
      'seed table rules'
      'footer table rules'
      'players players players';
    align-items: start;
    gap: 14px 16px;
    padding-bottom: 12px;
  }
  .setup__mode { grid-area: mode; flex-direction: column; align-items: flex-start; gap: 6px; }
  .setup__table { grid-area: table; }
  .setup__rules { grid-area: rules; }
  .setup__seed { grid-area: seed; }
  .setup__players { grid-area: players; gap: 14px; }
  .setup__footer { grid-area: footer; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; text-align: center; }
  .setup__summary { font-size: 0.92rem; }
  .setup__table, .setup__rules { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 12px 10px; }
  .setup > fieldset.paper { margin-top: 10px; padding-top: 22px; }
  .rule-option, .table-option { min-height: 0; padding: 6px 10px; }
  .rule-option__blurb, .table-option__blurb { font-size: 0.8rem; line-height: 1.25; }
  .setup__seed { gap: 6px; padding-inline: 12px; }
  .setup__seed:not(.is-invalid) .setup__seed-hint { display: none; }
  .seed-row { flex-wrap: nowrap; gap: 6px; }
  .seed-row__input { flex: 1 1 0; width: 0; min-width: 0; }
  .setup > fieldset { min-width: 0; }
  .seed-row .btn { flex: none; min-height: 40px; padding-inline: 4px; border-width: 12px; border-image-width: 12px; font-size: 0.88rem; }
  .seed-row .btn .btn__icon { display: none; }
  .seat-card { gap: 6px; padding: 10px 12px 10px; }
  .seat-card__label { display: none; } /* the name box says "Mayor name" itself */
  .controller-option { min-height: 38px; }
  .seat-card__join { margin-top: 0; padding-top: 4px; }
  .setup__footer .btn { min-height: 52px; }

  /* ---------- Settings: two columns ---------- */
  /* Sound and Help on the left; Controls, Display, then the game version and the note on the
     right: two columns of about the same height (the page order, and so the tab order, stays
     Sound → Controls → Display → Help → Check for Updates). */
  .settings-panel {
    width: min(1040px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 26px;
    grid-template-areas: 'sound controls' 'sound display' 'help footer';
  }
  .settings-panel .settings-sound { grid-area: sound; }
  .settings-panel .settings-controls { grid-area: controls; }
  .settings-panel .settings-display { grid-area: display; }
  .settings-panel .settings-help { grid-area: help; }
  /* Its one row ("First-game tips · Replay Tutorial") says it all: the heading stays for screen readers. */
  .settings-panel .settings-help legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .settings-panel .settings-footer { grid-area: footer; }

  /* ---------- How To Play: icon beside the title, tighter cards ---------- */
  .howto-grid { gap: 14px; }
  .howto-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; padding: 14px 16px; font-size: 0.93rem; line-height: 1.38; }
  .howto-card > * { grid-column: 1 / -1; }
  .howto-card > .howto-card__icon { grid-column: 1; width: 40px; margin: 0; align-self: center; }
  .howto-card > .howto-card__icon + h3 { grid-column: 2; align-self: center; margin: 0; }

  /* ---------- Statistics: the career numbers in one row ---------- */
  .career { gap: 12px; }
  .career__panel { padding: 12px 16px 14px; }
  .career__heading { margin-bottom: 8px; }
  .career__stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
  .career-stat { padding: 6px 10px; }
  .career-stat dt { font-size: 0.72rem; }
  .career-stat dd strong { font-size: 1.25rem; }
}

@media (min-width: 1200px) and (min-height: 561px) and (orientation: landscape) {
  .howto-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .howto-card { padding: 18px 16px 16px; }
}

/* Short desktop windows: tighter still. */
@media (min-width: 901px) and (min-height: 561px) and (max-height: 760px) and (orientation: landscape) {
  /* Compact player cards: cash on its own line, then blocks and income (property is in the inspector). */
  .player-card { gap: 4px; padding: 7px 10px 8px; }
  .player-card__token { width: 30px; }
  .player-card__stats { grid-template-columns: 1fr 1fr; gap: 3px 4px; }
  .stat--cash { grid-column: 1 / -1; }
  .stat--property { display: none; }
  .stat { grid-template-columns: 18px 1fr; padding: 1px 5px; }
  .stat__icon { width: 18px; }
  .stat dt { display: none; }
  .stat--cash { grid-template-columns: 18px auto 1fr; }
  .stat--cash dt { display: block; }
  .hud { gap: 10px; }
  .screen--game { gap: 6px; padding-block: 8px; }
  .results__formula, .results__share .results__awards-title { display: none; }
  .result-card__breakdown, .result-card__best { display: none; }
  .result-card__ribbons li { font-size: 0.66rem; }
  .build-option__art { max-width: 76px; }
  .build-panel__hint { display: none; }
  .seat-card__head { gap: 8px; }
  .seat-card__token { width: 34px; }
  .seat-card__seat { font-size: 1.2rem; }
  .seat-card__flag { display: none; }
  .seat-card { gap: 5px; padding-block: 8px; }
  .seat-card__join { padding-top: 2px; }
  .setup .text-input { min-height: 40px; padding-block: 6px; }
  .screen--page .ribbon-title { padding: 4px 28px 6px; font-size: 1.6rem; }
  .screen--page .page-header .btn--icon { width: 46px; min-height: 46px; }
  .screen--page { gap: 12px; }
  .setup { padding-bottom: 0; }
  .settings-panel { padding-block: 14px 16px; gap: 12px; }
  .settings-footer { gap: 4px; }
  .setting-row { min-height: 42px; padding-block: 3px; }
  .setup > fieldset.paper { margin-top: 8px; }
  .setup { gap: 10px 14px; }
  [data-screen='setup'] { gap: 10px; padding-top: max(8px, env(safe-area-inset-top)); }
}