/* Phone first (base styles). Tablet and laptop get more room, bigger art and side-by-side layouts. */

/* ----- Tablet portrait and up ----- */
@media (min-width: 700px) {
  #app { max-width: 820px; }
  html { font-size: 17px; }
  .screen { padding-left: 32px; padding-right: 32px; }
  .seasons { gap: 22px; max-width: 640px; }
  .season-card { min-height: 360px; }
  .ho-list { grid-template-columns: repeat(8, 1fr); }
  .ho-frame { width: min(100%, 56vh); }
  .ho-scene.big { width: 160%; }
  .clue, .after .page { max-width: 640px; margin-left: auto; margin-right: auto; }
  .tray { width: 100%; padding-left: 0; padding-right: 0; }
  .receipt { width: min(420px, 100%); }
  .strip { font-size: 1.1rem; padding: 20px 16px; }
  .shelf { width: min(460px, 100%); }
  .books { height: 300px; }
  .wheel { transform: scale(1.2); margin: 30px 0; }
  .padlock { transform: scale(1.2); transform-origin: top center; }
  .face { width: 76px; height: 76px; }
  .suspect canvas, .suspect img { width: 120px; height: 120px; }
  .log { max-height: 40vh; }
  .qs, .ev { gap: 16px; }
  .ev { grid-template-columns: repeat(3, 1fr); }
  .pin { font-size: .95rem; padding: 18px 12px 14px; }
  .intro-art { aspect-ratio: 16 / 9; }
  .finale-art { max-height: 46vh; object-fit: cover; }
  .sheet-card { grid-template-columns: 160px 1fr; }
  .sheet-card canvas { width: 160px; height: 160px; }
}

/* ----- Landscape tablet and laptop: two columns where it helps ----- */
@media (min-width: 1000px) and (orientation: landscape) {
  #app { max-width: 1180px; }
  /* Chapter: instructions on the left, the activity on the right */
  .chapter-screen {
    display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto auto auto 1fr;
    column-gap: 36px; align-items: start; min-height: 100vh;
  }
  .ch-head, .ch-text, .hint { grid-column: 1; }
  .ch-body { grid-column: 2; grid-row: 1 / span 4; }
  .ch-head { flex-direction: column; }
  .ch-head h2 { font-size: 2rem; }
  .ch-text { font-size: 1.1rem; }
  .ho-frame { width: min(100%, 66vh); }
  .act-scene { display: grid; grid-template-columns: 1fr 190px; gap: 16px; align-items: start; }
  .act-scene .ho-list { grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; }
  .act-scene .ho-frame { grid-column: 1; grid-row: 1; }
  .act-talk { display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
  .act-talk .cast { grid-template-columns: 1fr; grid-row: 1 / span 2; }
  .act-talk .who { flex-direction: row; text-align: left; gap: 12px; }
  .act-talk .facts { grid-column: 2; }
  .act-board .cork { max-width: 820px; }
  .uv { width: min(100%, 72vh); }
  /* Crowd: the clue card sits beside the crowd */
  .crowd-screen {
    display: grid; grid-template-columns: 1fr 360px; grid-template-rows: auto auto 1fr;
    column-gap: 24px; height: 100vh; padding-bottom: 24px;
  }
  .crowd-head, .chips, .crowd { grid-column: 1; align-self: stretch; }
  .tray { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; padding: 0; }
  .intro-art { aspect-ratio: 21 / 9; }
  .page.intro { max-width: 900px; margin: 0 auto; }
  .finale { max-width: 760px; margin: 0 auto; }
}