/* Successor to r61: retain its large short-landscape puzzle board, and use
   the available viewport for the other manual phases too. No artwork stretch. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px),
       (orientation: portrait) and (max-width: 639px) {
  .app-shell:has(.stage[data-screen="manual"]) {
    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"] {
    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;
  }
  .app-shell:has(.stage[data-screen="manual"]) > .status-rail:not(:has(.toast.show)) { display: none; }
  .app-shell:has(.stage[data-screen="manual"]):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 { inset: 6px; font-size: 12px; gap: 6px; }
  .stage[data-screen="manual"] .manual-footer { min-height: 52px; padding: 3px; gap: 4px; }
  .stage[data-screen="manual"] .manual-footer .manual-button,
  .stage[data-screen="manual"] .manual-summary-actions .manual-button,
  .stage[data-screen="manual"] .manual-result-actions .manual-button,
  .stage[data-screen="manual"] .manual-map-actions .manual-button { min-height: 44px; font-size: 12px; }
  .stage[data-screen="manual"] .manual-footer-notice:not(.is-notice) { display: none; }
  .stage[data-screen="manual"] .manual-footer-notice.is-notice { font-size: 12px; }
  .stage[data-screen="manual"] .manual-summary { width: 100%; }
}

/* Portrait fallback is a real readable one-column layout, not a squeezed
   desktop two-column panel. The same compact details behavior is shared by
   the UI matchMedia query, including focus/inert restoration on rotation. */
@media (orientation: portrait) and (max-width: 639px) {
  .stage[data-screen="manual"] .manual-shell { font-size: 13px; }
  .stage[data-screen="manual"] .manual-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 5px 8px; border-width: 1px; }
  .stage[data-screen="manual"] .manual-header h2 { font-size: 23px; line-height: 1.1; }
  .stage[data-screen="manual"] .manual-header .manual-kicker { display: none; }
  .stage[data-screen="manual"] .manual-energy { width: 100%; min-width: 0; max-width: none; margin: 0; gap: 3px; }
  .stage[data-screen="manual"] .manual-energy-track { height: 18px; }
  .stage[data-screen="manual"] .manual-energy-heading { font-size: 12px; }
  .stage[data-screen="manual"] .manual-energy-caption > small { font-size: 11px; }
  .stage[data-screen="manual"] .manual-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .stage[data-screen="manual"] .manual-roadmap li { display: block; min-width: 0; padding: 4px 1px; font-size: 11px; line-height: 1.25; text-align: center; border-width: 1px; }
  .stage[data-screen="manual"] .manual-roadmap li > span,
  .stage[data-screen="manual"] .manual-roadmap li > small { display: none; }
  .stage[data-screen="manual"] .manual-roadmap li:not(:last-child)::after { right: -8px; top: 0; font-size: 18px; }
  .stage[data-screen="manual"] .manual-play-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  .stage[data-screen="manual"] .manual-playarea { padding: 4px; border-width: 2px; gap: 0; }
  .stage[data-screen="manual"] .manual-board-instruction { display: none; }
  .stage[data-screen="manual"] .manual-grid-frame { width: auto; height: min(100%, calc(100vw - 62px)); max-width: 100%; flex: 0 0 auto; padding: 4px; border-width: 3px; }
  .stage[data-screen="manual"] .manual-grid-frame.is-link > .manual-grid { inset: 6%; }
  .stage[data-screen="manual"] .manual-grid { gap: 2px; }
  .stage[data-screen="manual"] .manual-tile { border-width: 1px; }
  .stage[data-screen="manual"] .manual-sidebar { max-height: 220px; overflow: auto; padding: 6px 8px; gap: 4px; border-width: 2px; border-radius: 5px; }
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-details[open]) { overflow: hidden; min-height: 220px; }
  .stage[data-screen="manual"] .manual-objective { padding-bottom: 3px; border-bottom-width: 1px; }
  .stage[data-screen="manual"] .manual-objective h3 { display: none; }
  .stage[data-screen="manual"] .manual-objective-line > p,
  .stage[data-screen="manual"] .manual-objective label { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
  .stage[data-screen="manual"] .manual-objective strong { font-size: 22px; }
  .stage[data-screen="manual"] .manual-objective label b { font-size: 24px; }
  .stage[data-screen="manual"] .manual-objective progress { height: 7px; }
  .stage[data-screen="manual"] .manual-essential-controls { gap: 4px; }
  .stage[data-screen="manual"] .manual-essential-controls .manual-button { min-height: 44px; font-size: 12px; }
  .stage[data-screen="manual"] .manual-message { font-size: 12px; min-height: 22px; padding: 3px 5px; }
  .stage[data-screen="manual"] .manual-details { flex: 0 0 auto; min-height: 40px; margin-top: auto; }
  .stage[data-screen="manual"] .manual-details > summary { min-height: 40px; padding: 10px 2px; font-size: 12px; }
  .stage[data-screen="manual"] .manual-details[open] { position: absolute; z-index: 5; top: var(--manual-objective-bottom, 48px); bottom: 5px; left: 5px; right: 5px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper) var(--ui-panel-readable) center / 140% 174%; padding: 0 7px; }
  .stage[data-screen="manual"] .manual-bubble-frame { width: auto; height: 100%; flex: 0 1 auto; }
  .stage[data-screen="manual"] .manual-ammo { gap: 6px; }
  .stage[data-screen="manual"] .manual-ammo > span { display: flex; gap: 4px; font-size: 11px; }
  .stage[data-screen="manual"] .manual-ammo .manual-tile-icon { width: 26px; height: 26px; }
  .stage[data-screen="manual"] .manual-footer { flex-wrap: wrap; }
  .stage[data-screen="manual"] .manual-footer .manual-button { flex: 1 1 0; padding: 5px 3px; white-space: normal; }
  .stage[data-screen="manual"] .manual-footer-notice.is-notice { order: 1; flex-basis: 100%; }
  .stage[data-screen="manual"] .manual-paper { padding: 8px; border-width: 2px; border-radius: 5px; }
  .stage[data-screen="manual"] .manual-map,
  .stage[data-screen="manual"] .manual-result-layout { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stage[data-screen="manual"] .manual-map-main { gap: 6px; padding: 8px; }
  .stage[data-screen="manual"] .manual-map-info { max-height: 32%; }
  .stage[data-screen="manual"] .manual-summary { gap: 6px; }
  .stage[data-screen="manual"] .manual-summary-content { gap: 8px; }
  .stage[data-screen="manual"] .manual-earned { padding: 8px; }
  .stage[data-screen="manual"] .manual-choice-heading,
  .stage[data-screen="manual"] .manual-result-heading { padding: 6px; }
  .stage[data-screen="manual"] .manual-choice-heading h2,
  .stage[data-screen="manual"] .manual-result-heading h2 { font-size: 24px; }
  .stage[data-screen="manual"] .manual-choice-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stage[data-screen="manual"] .manual-perk-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 3px 8px; padding: 7px; text-align: left; }
  .stage[data-screen="manual"] .manual-perk-art { grid-column: 1; grid-row: 1 / -1; width: 64px; height: 64px; max-height: 100%; min-height: 0; }
  .stage[data-screen="manual"] .manual-perk-card h3 { font-size: 18px; }
  .stage[data-screen="manual"] .manual-perk-card p { font-size: 13px; }
  .stage[data-screen="manual"] .manual-perk-card small { font-size: 11px; line-height: 1.3; }
  .stage[data-screen="manual"] .manual-card-choose { grid-column: 2; padding: 5px; font-size: 12px; text-align: center; }
  .stage[data-screen="manual"] .manual-choice-owned { max-height: 12%; padding: 5px; }
  .stage[data-screen="manual"] .manual-choice-owned .manual-perks > ul { flex-wrap: wrap; }
  .stage[data-screen="manual"] .manual-result-layout { grid-template-rows: minmax(100px, 34%) minmax(0, 1fr); }
  .stage[data-screen="manual"] .manual-result-stations > ol li { padding: 5px 0; }
  .stage[data-screen="manual"] .manual-result-stations .manual-tile-icon { width: 28px; height: 28px; }
  .stage[data-screen="manual"] .manual-result-body { gap: 7px; }
  /* The rest of the game still uses scaled rem units in portrait. A manual
     page now fills the viewport, so its temporary commission stamp must use
     actual CSS pixels too. The existing collision-aware placement still
     hides it when no readable safe rectangle exists; never shrink to fit. */
  .stage[data-screen="manual"] .commission-feedback-anchor { width: min(70%, 260px); }
  .stage[data-screen="manual"] .commission-feedback-paper { padding: 6px 8px; border-width: 2px; box-shadow: 3px 3px 0 var(--shadow); font-size: 12px; line-height: 1.3; }
  .stage[data-screen="manual"] .feedback-stamps { gap: 4px; margin-top: 4px; }
  .stage[data-screen="manual"] .feedback-stamps > i { width: 20px; height: 20px; border-width: 1px; }
}

/* The rules disclosure is an interactive target at every supported size. */
.stage[data-screen="manual"] .manual-details > summary { min-height: 44px; }