/* Narrative roadside events and the voyage promise are real stop branches,
   with their existing choice guards, previews and saved outcomes intact. */
.exp-modal:is(.modal-event,.modal-voyage) { background: var(--pm-ui-surface); color: var(--pm-ui-text); border: 0; border-radius: 24px; box-shadow: 0 12px 40px var(--pm-ui-shadow); padding: 0; gap: 0; overflow: hidden; width: min(760px,100%); }
.exp-modal.exp-illustrated:is(.modal-event,.modal-voyage) { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: clamp(88px,14dvh,116px) minmax(0,1fr); height: min(760px,100%); max-height: 100%; }
.exp-modal:is(.modal-event,.modal-voyage) > .exp-location-art { grid-column: 1; grid-row: 1; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
.exp-modal:is(.modal-event,.modal-voyage) > .exp-location-art > img { width: 100%; height: 100%; object-fit: cover; animation: none; transform: none; }
.exp-modal:is(.modal-event,.modal-voyage) > .exp-dialog-body { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; min-height: 0; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; box-sizing: border-box; padding: 16px; background: var(--pm-ui-surface); text-align: left; scroll-padding-block: 16px; }
.exp-modal:is(.modal-event,.modal-voyage) > .exp-icon-button { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; min-height: 44px; z-index: 6; border: 0; border-radius: 50%; background: var(--pm-ui-surface); color: var(--pm-ui-text); box-shadow: 0 3px 12px var(--pm-ui-shadow); }
.exp-modal:is(.modal-event,.modal-voyage) .exp-story-symbol { display: none; }
.exp-modal:is(.modal-event,.modal-voyage) .exp-eyebrow { color: var(--pm-ui-muted); font-size: 13px; line-height: 1.4; letter-spacing: 0; }
.exp-modal:is(.modal-event,.modal-voyage) h2 { margin: 0; color: var(--pm-ui-text); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.exp-modal:is(.modal-event,.modal-voyage) :is(.exp-dialogue,.voyage-choice > p) { margin: 0; max-width: none; color: var(--pm-ui-text) !important; font-size: 15px !important; line-height: 1.5 !important; }
.exp-modal.modal-event .exp-event-choices { display: flex; flex-direction: column; gap: 10px; width: 100%; flex: none; }
.exp-modal.modal-event .exp-event-choices .exp-choice { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; min-height: 48px; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--pm-ui-surface-raised); color: var(--pm-ui-text); box-shadow: none; text-align: left; white-space: normal; }
.exp-modal.modal-event .exp-choice strong { color: var(--pm-ui-text); font-size: 16px; line-height: 1.35; }
.exp-modal.modal-event .exp-choice small { color: var(--pm-ui-muted); font-size: 14px; line-height: 1.45; }
.exp-modal.modal-event .event-health-preview { display: grid; gap: 4px; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.exp-modal.modal-event .event-health-preview > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; line-height: 1.4; color: var(--pm-ui-muted); }
.exp-modal.modal-event .event-health-preview b { color: var(--pm-ui-text); font-size: 14px; }
.exp-modal.modal-event .event-choice-note { color: var(--pm-ui-muted); font-size: 13px; line-height: 1.4; }
.exp-modal.modal-event .event-choice-warning { color: var(--pm-ui-danger); font-size: 14px; line-height: 1.45; }
.exp-modal.modal-event .exp-choice.event-choice-risk { background: var(--pm-ui-danger-surface); }
.exp-modal.modal-event .exp-choice.event-choice-risk strong { color: var(--pm-ui-danger); }
.exp-modal.modal-event .exp-choice:disabled { opacity: .65; }
.exp-modal.modal-event .rescue-companion-preview { display: flex; gap: 12px; align-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--pm-ui-text); }
.exp-modal.modal-event .rescue-companion-preview img { width: 64px; height: 96px; flex: none; border-radius: 8px; object-fit: cover; }
.exp-modal.modal-event .rescue-companion-preview strong { color: var(--pm-ui-text); font-size: 16px; }
.exp-modal.modal-event .rescue-companion-preview small { color: var(--pm-ui-muted); font-size: 13px; }
.exp-modal.modal-event .rescue-companion-preview .exp-link { min-height: 44px; font-size: 14px; color: var(--pm-ui-text); }
.exp-modal.modal-voyage .voyage-choice { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; text-align: left; }
.exp-modal.modal-voyage .voyage-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; width: 100%; }
.exp-modal.modal-voyage .voyage-options > article { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pm-ui-text); }
.exp-modal.modal-voyage .voyage-options .exp-upgrade-icon { width: 36px; height: 36px; border: 0; border-radius: 0; background: transparent; color: var(--pm-ui-text); }
.exp-modal.modal-voyage .voyage-options h3 { margin: 0; font-size: 19px; line-height: 1.25; color: var(--pm-ui-text); }
.exp-modal.modal-voyage .voyage-options p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pm-ui-muted); }
.exp-modal.modal-voyage .voyage-options .exp-button { min-height: 48px; margin-top: auto; border: 0; border-radius: 999px; background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); font-size: 15px; box-shadow: none; }
.exp-modal:is(.modal-event,.modal-voyage) :is(button,summary):focus-visible { outline: 3px solid var(--pm-ui-focus); outline-offset: 3px; }
@media (min-width: 700px) { .exp-modal.modal-voyage .voyage-options { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-height: 500px) and (min-width: 600px) {
 .exp-modal.exp-illustrated:is(.modal-event,.modal-voyage) { grid-template-columns: 116px minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 100%; }
 .exp-modal:is(.modal-event,.modal-voyage) > .exp-dialog-body { grid-column: 2; grid-row: 1; }
 .exp-modal:is(.modal-event,.modal-voyage) h2 { font-size: 22px; }
}