/* S.I.R.E. responsive layout refinement: non-destructive UI overlay. */
html { min-width: 0; }
body { min-width: 0; overflow-x: clip; }
#title-screen.title-screen { min-height: 100svh; min-height: 100dvh; box-sizing: border-box; }
#title-screen .title-card { box-sizing: border-box; max-width: 100%; min-width: 0; }
#title-screen h1 { overflow-wrap: normal; max-width: 100%; }
.rm-screen-card, #settings-panel, #clue-journal-panel,
#hint-panel, #onboarding-panel {
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rm-menu-grid, .rm-inventory-grid, .rm-completion-actions { min-width: 0; }
.rm-menu-row, .rm-inventory-item, .rm-screen-action { min-width: 0; overflow-wrap: anywhere; }
button, [role="button"], input, select { touch-action: manipulation; }
:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 3px solid #f3d48b;
  outline-offset: 3px;
}
@media (max-width: 720px) {
  #title-screen.title-screen {
    align-items: end;
    justify-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background-position: 64% center !important;
  }
  #title-screen .title-card {
    width: min(100%, 520px);
    margin: 0;
    padding: clamp(16px, 4vw, 28px);
    background: linear-gradient(180deg, rgba(4,6,9,.86), rgba(4,6,9,.97));
  }
  #title-screen .tagline { margin-block: 12px; }
  .rm-menu-grid, .rm-inventory-grid, .rm-completion-actions { grid-template-columns: minmax(0, 1fr); }
  .coop-controller-status { left: 8px; right: 8px; width: auto; max-width: none; text-align: center; font-size: 12px; }
}
@media (max-width: 380px), (max-height: 540px) {
  #title-screen.title-screen { overflow-y: auto; }
  #title-screen .title-card { padding: 12px; }
  #title-screen h1 { font-size: clamp(1.8rem, 9vw, 3.5rem) !important; line-height: .98; }
  .rm-screen-card { max-height: calc(100dvh - 12px); }
}
@media (prefers-reduced-motion: reduce) {
  #title-screen.title-screen { animation: none !important; }
}

/* Constrain tall title menus on shorter landscape viewports without hiding actions. */
#title-screen .title-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Act II: keep the vault progression control clear of the bottom adventure console. */
@media (max-width: 760px) {
  .act2-foundation-vault .act2-vault-descend-button {
    top: 14px;
    bottom: auto;
    right: 14px;
  }
}

/* iPhone-class portrait and landscape PWA: safe touch targets and reachable actions. */
@media (pointer: coarse) and (max-width: 900px) {
  #title-screen.title-screen { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  #title-screen .title-card { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #title-screen button, .rm-screen-action, .rm-screen-close,
  .rm-menu-row, .verb, .game-header button, .act2-vault-descend-button {
    min-height: 44px; touch-action: manipulation;
  }
  .rm-screen-card, #settings-panel, #clue-journal-panel {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    -webkit-overflow-scrolling: touch;
  }
  .command-console { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #title-screen.title-screen { align-items: center; overflow-y: auto; }
  #title-screen .title-card { max-height: calc(100dvh - 16px); padding: 12px 18px; }
  .coop-controller-status { font-size: 12px; }
}