/* Keep the question, map and answer controls together on phones. */
@media (max-width: 600px) {
  body:has(#game:not([hidden])) > header {
    height: 56px;
    min-height: 56px;
    padding: 6px 12px;
  }
  #game {
    --mobile-map-height: clamp(260px, calc(100svh - 350px), 500px);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 8px;
    height: auto;
    min-height: 0;
    padding: 0 12px 16px;
    background: #fff;
    align-items: start;
  }
  #game .quiz-panel { display: contents; }
  #game .quiz-top-actions {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 40px;
    margin: 0;
    gap: 8px;
    flex-wrap: nowrap;
  }
  #game .quiz-top-actions #course-label { font-size: 10px; letter-spacing: 0; }
  #game .quiz-top-actions #home-button { min-height: 40px; font-size: 11px; padding: 8px 0; }
  #game:not(.learning) .course-heading {
    grid-column: 6;
    grid-row: 2;
    align-self: center;
  }
  #game #question-number { white-space: nowrap; font-size: 11px; }
  #game:not(.learning) .question { grid-column: 1 / 6; grid-row: 2; padding: 0 0 8px; }
  #game:not(.learning) .question #question-prompt { font-size: 10px; margin: 0 0 3px; }
  #game:not(.learning) .question h1 { font-size: 24px; margin: 0; line-height: 1.35; }
  #game:not(.learning) .question .question-help { display: none; }
  #game:not(.learning) .progress { grid-column: 1 / -1; grid-row: 3; margin: 0 0 8px; height: 3px; }

  #game .map-shell {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-inline: -12px;
    height: var(--mobile-map-height);
    min-height: 0;
    border-block: 1px solid var(--line);
  }
  #game .map-toolbar { top: 8px; left: 10px; right: 10px; }
  #game .map-toolbar button { min-height: 44px; font-size: 11px; padding: 10px 12px; }
  #game .map-caption { bottom: 20px; left: 10px; padding: 5px 8px; }
  #game .leaflet-control-zoom { margin-right: 10px !important; margin-bottom: 44px !important; }
  #game .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }

  #game:not(.learning) #feedback { grid-column: 1 / -1; grid-row: 5; margin: 0; padding: 8px 0; font-size: 12px; }
  #game:not(.learning) .sub-actions {
    grid-column: 1 / 5;
    grid-row: 6;
    margin: 0;
    gap: 8px;
  }
  #game:not(.learning) #next:not([hidden]) + .sub-actions { grid-column: 1 / 5; }
  #game:not(.learning) #defer-question,
  #game:not(.learning) #next { grid-column: 5 / 7; grid-row: 6; }
  #game:not(.learning) .sub-actions button,
  #game:not(.learning) #defer-question,
  #game:not(.learning) #next { min-height: 48px; padding: 10px 4px; font-size: 12px; line-height: 1.5; }
  #game:not(.learning) .score-row {
    grid-column: 1 / -1;
    grid-row: 8;
    margin: 14px 0 0;
    padding: 10px 0;
    gap: 22px;
  }
  #game:not(.learning) .score-row > div { display: flex; align-items: baseline; gap: 6px; }
  #game:not(.learning) .score-row span { margin: 0; font-size: 9px; }
  #game:not(.learning) .score-row strong { font-size: 17px; }
  #game:not(.learning) .place-search { grid-column: 1 / -1; grid-row: 9; border: 0; margin: 0; padding-top: 10px; }
  #game:not(.learning) .quiz-navigation { grid-column: 1 / -1; grid-row: 10; margin-top: 8px; }
  #game .quiz-navigation button, #game .place-search-links a { min-height: 44px; }

  /* Island insets stay available without separating the map from its controls. */
  #game .map-shell.has-insets { display: contents; }
  #game .has-insets #map-stage {
    grid-column: 1 / -1;
    grid-row: 4;
    height: var(--mobile-map-height);
    min-height: 0;
    margin-inline: -12px;
    border-block: 1px solid var(--line);
  }
  #game #inset-rail {
    grid-column: 1 / -1;
    grid-row: 7;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    overflow: auto;
    padding: 10px 0;
    margin-top: 12px;
    border: 0;
    background: transparent;
  }
  #game .inset-guide { flex: 0 0 120px; align-self: center; }
  #game .inset-card { flex: 0 0 170px; }
  #game .inset-map { height: 140px; }
  #game .inset-jump { min-height: 44px; }

  /* Study starts with the map; the long checklist is below it. */
  #game.learning #study-panel { display: contents; }
  #game.learning #study-panel > .eyebrow { display: none; }
  #game.learning #study-panel > h1 { grid-column: 1 / 4; grid-row: 2; font-size: 21px; margin: 0; align-self: center; }
  #game.learning #return-quiz { grid-column: 4 / 7; grid-row: 2; padding: 10px 6px; min-height: 44px; font-size: 12px; }
  #game.learning #study-search { grid-column: 1 / -1; grid-row: 3; margin: 10px 0; }
  #game.learning #study-description { grid-column: 1 / -1; grid-row: 6; font-size: 11px; margin: 12px 0 0; }
  #game.learning .study-directory { grid-column: 1 / -1; grid-row: 8; margin: 16px 0 0; padding-top: 16px; }
  #game.learning #study-directory-course { margin-bottom: 10px; }
  #game.learning #study-place-list { max-height: 50svh; }
  #study-search select, #study-filter { font-size: 16px; }

  /* Flags use the same question-first layout, with all choices close to the flag. */
  #game .map-shell.flag-mode { height: auto; min-height: 0; }
  #game .flag-mode #flag-game { height: auto; min-height: 0; padding: 60px 12px 16px; }
  #game .flag-question > p { display: none; }
  #game #flag-image { height: clamp(90px, 17svh, 140px); max-width: 75%; margin: 0 0 18px; }
  #game #flag-choices { gap: 8px; }
  #game #flag-choices button { min-height: 48px; padding: 10px; font-size: 13px; }
  #game .flag-mode #study-flags { padding: 64px 12px 12px; max-height: var(--mobile-map-height); }
  #game #study-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}