/* Short landscape: preserve the approved art, but spend the viewport on play.
   CSS flow only. Puzzle input/coordinates, timers, saves and rewards unchanged. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px) {
  .app-shell:has(.stage[data-screen="manual"] .manual-play-layout) {
    width: calc(100vw - 12px);
    max-width: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .stage[data-screen="manual"]:has(.manual-play-layout) {
    height: calc(100vh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    aspect-ratio: auto;
  }
  /* The same navigation/save reminder already lives in the manual footer.
     Do not reserve another 48px for it during short-landscape puzzle play.
     Actual global notices still retain their own rail rather than covering play. */
  .app-shell:has(.stage[data-screen="manual"] .manual-play-layout) > .status-rail:not(:has(.toast.show)) { display: none; }
  .app-shell:has(.stage[data-screen="manual"] .manual-play-layout):has(.toast.show) .stage {
    height: calc(100vh - 66px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 66px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .stage[data-screen="manual"] .manual-shell:has(> .manual-play-layout) {
    inset: 6px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 4px 9px;
    font-size: 12px;
  }
  .manual-shell:has(> .manual-play-layout) > .manual-header {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 4px 7px;
    min-width: 0;
  }
  .manual-shell:has(> .manual-play-layout) .manual-header h2 { font-size: 20px; line-height: 1.1; }
  .manual-shell:has(> .manual-play-layout) .manual-energy {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    gap: 2px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-energy-heading { font-size: 12px; }
  .manual-shell:has(> .manual-play-layout) .manual-energy-number { font-size: 14px; }
  .manual-shell:has(> .manual-play-layout) .manual-energy-track { height: 16px; }
  .manual-shell:has(> .manual-play-layout) .manual-header > .manual-roadmap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li {
    display: block;
    padding: 3px 1px;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
  }
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li > span,
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li > small { display: none; }
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li:not(:last-child)::after { right: -8px; top: 0; }
  .manual-shell:has(> .manual-play-layout) > .manual-play-layout { display: contents; }
  .manual-shell:has(> .manual-play-layout) .manual-playarea {
    grid-column: 1;
    grid-row: 1 / -1;
    min-width: 0;
    min-height: 0;
    padding: 3px 8px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-grid-frame.is-link > .manual-grid { inset: 6%; }
  .manual-shell:has(> .manual-play-layout) .manual-sidebar {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 5px 7px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-sidebar:has(.manual-details[open]) { overflow: hidden; }
  .manual-shell:has(> .manual-play-layout) .manual-essential-controls .manual-button { min-height: 44px; font-size: 12px; }
  .manual-shell:has(> .manual-play-layout) .manual-details > summary { min-height: 40px; padding-block: 11px; font-size: 12px; }
  .manual-shell:has(> .manual-play-layout) > .manual-footer {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    margin: 0;
    padding: 3px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-footer .manual-button {
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-footer [data-manual-nav="explore"] { grid-column: 1; grid-row: 1; }
  .manual-shell:has(> .manual-play-layout) .manual-footer [data-manual-nav="settings"] { grid-column: 2; grid-row: 1; }
  .manual-shell:has(> .manual-play-layout) .manual-footer [data-manual-command="withdraw"] { grid-column: 3; grid-row: 1; }
  .manual-shell:has(> .manual-play-layout) .manual-footer-notice { grid-column: 1 / -1; grid-row: 2; }
  .manual-shell:has(> .manual-play-layout) .manual-footer-notice:not(.is-notice) { display: none; }
}

/* Very short landscape: current station is already named in the title.
   Put the other two route cards beside it and keep the energy bar below,
   freeing enough height for both 44px bubble action rows. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 380px) {
  .manual-shell:has(> .manual-play-layout) > .manual-header {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
  }
  .manual-shell:has(> .manual-play-layout) .manual-header-title { grid-column: 1; grid-row: 1; }
  .manual-shell:has(> .manual-play-layout) .manual-energy { grid-column: 1 / -1; grid-row: 2; }
  .manual-shell:has(> .manual-play-layout) .manual-header > .manual-roadmap {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    align-self: center;
  }
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li.current { display: none; }
  .manual-shell:has(> .manual-play-layout) .manual-header .manual-roadmap li::after { display: none; }
}