/* Touch layouts share the same game commands and preserve browser zoom. */
button, summary, a, [role="button"] { touch-action: manipulation; }
select, option { color-scheme: dark; }
.battle-command-status { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0; border-block: 1px solid var(--line); margin: 16px 0 12px; }
.battle-command-status p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.battle-command-status strong { color: var(--gold); font-weight: 500; }
.battle-command-intent { flex-basis: 100%; color: var(--muted); }
.forge-controls .toolbar button[data-mold-undo] { min-height: 44px; }
.workshop-session { scroll-margin-top: 12px; }

@media (pointer: coarse), (max-width: 790px) {
  button, .toolbar button, .nav button, .game-management > summary, a.button, .lab-link { min-height: 44px; }
  .location-region-tabs button, .location-map-return button, button.location-travel-button,
  .atlas-heading button, .atlas-pagination button, .medicine-loadout-card > .toolbar button,
  .workshop-secondary button, .story-scene-influences > summary { min-height: 44px; }
  #app summary, #workshop-lab summary, dialog summary { min-height: 44px; padding-block: 10px; line-height: 1.6; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select,
  .atlas-filters input, .atlas-filters select, .lab-fields input, .lab-fields select { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
  input[type="range"] { min-height: 44px; }
  button:hover:not(:disabled) { transform: none; }
  button:active:not(:disabled), [role="button"]:active { filter: brightness(1.15); }
  .workshop-meter[data-alchemy-meter] { height: 56px; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .alchemy-session [data-alchemy-stop] { min-height: 52px; }
  .forge-mold { user-select: none; -webkit-user-select: none; }
  dialog { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 12px; }
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  .topbar .brand, .topbar > .toolbar { min-width: 0; }
  .topbar > .toolbar { margin-left: auto; }
  .game-management[open] > .toolbar { position: absolute; top: 100%; right: 0; width: calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin-top: 12px; max-height: calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-management .toolbar > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .game-management a.button { display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); text-align: center; text-decoration: none; font-size: 13px; }
  .game-management .toolbar > .button { grid-column: 1 / -1; }
  .panel#play-area { padding: 16px; scroll-margin-top: 10px; }
  .focus-shell .nav { gap: 4px; }
  .focus-shell .nav button { min-height: 44px; }
  .focus-shell .row > *, .section-head > *, .workshop-heading > * { min-width: 0; }
  .panel p, .panel h2, .panel h3, .card p, .stat strong, .stat small { overflow-wrap: anywhere; }
  .toolbar > button, .actions > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
  .panel select, .panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .lab-shell select { max-width: 100%; min-width: 0; }
  .battle-command-status { gap: 6px; display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px; background: #132224; border: 1px solid var(--line); border-radius: 8px; scroll-margin-top: 12px; }
  .battle-command-status p { font-size: 13px; line-height: 1.65; }
  .focus-shell .actions.battle-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .battle-actions button { min-height: 54px; padding: 10px 8px; font-size: 13px; }
  .battle-relics > summary, .battle-medicine > summary { font-size: 15px; color: var(--gold); }
  .battle-relics, .battle-medicine { padding: 6px 10px; margin-block: 12px; border-color: var(--line); border-radius: 8px; }
  .battle-grid { gap: 8px; }
  .battle-grid > .card { min-width: 0; padding: 10px; }
  .battle-grid .portrait { width: 44px; height: 44px; font-size: 26px; margin: 8px auto; }
  .battle-grid h3 { font-size: 15px; }
  .battle-grid p { font-size: 12px; line-height: 1.7; }
  .battle-grid .pill { padding: 5px; font-size: 11px; white-space: normal; }
  .battle-medicine .medicine-slot-grid button.medicine-slot { min-height: 120px; padding: 10px; }
  .battle-medicine .medicine-slot strong { font-size: 14px; }
  .battle-action-feed p { font-size: 13px; }
  .alchemy-session [data-alchemy-stop] { width: 100%; }
  .alchemy-session .workshop-secondary button { min-height: 44px; padding-inline: 18px; }
  .forge-canvas-frame { width: min(100%, 280px); }
  .forge-workbench { gap: 12px; }
  .forge-controls .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forge-controls .toolbar [data-mold-confirm], .forge-controls .toolbar [data-cmd="forgeAbandon"] { grid-column: 1 / -1; }
  .forge-controls .toolbar button { font-size: 13px; padding: 10px 8px; }
  .gold-affix { min-height: 48px; display: flex; gap: 10px; align-items: center; }
  #toast { bottom: max(16px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); padding: 12px 16px; font-size: 14px; line-height: 1.6; }
  .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  dialog:not(.relic-atlas-dialog) { width: calc(100vw - 24px); padding: 20px 16px; }
  dialog .toolbar { justify-content: flex-end; }
}

@media (max-width: 380px) {
  .focus-shell .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .focus-shell .nav button { font-size: 14px; }
  .topbar { flex-wrap: wrap; }
  .topbar > .toolbar { width: 100%; justify-content: flex-end; }
}