/* V1.28Beta-special-mode-portrait-expansion1
   Give every selectable special-form dialog a genuinely portrait-shaped art
   viewport. The left artwork grows vertically; the copy column is reflowed
   into the same taller shell instead of being pushed or clipped. */

html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
  [data-mode="storm"],
  [data-mode="magic-assassin"],
  [data-mode="devour-world"]
) {
  --special-mode-top-band: 56px !important;
  --special-mode-panel-x: 42px !important;
  --special-mode-panel-bottom: 24px !important;
  --special-mode-panel-gap: 24px !important;
  --special-mode-copy-pad-x: 22px !important;
  --special-mode-copy-pad-top: 20px !important;
  --special-mode-action-h: 42px !important;
  --special-mode-action-gap: 16px !important;
  --special-mode-detail-min: 132px !important;
  --special-mode-detail-max: 176px !important;
  --special-mode-lore-gap: 18px !important;
  --special-mode-story-max: 72px !important;
}

html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
  [data-mode="storm"],
  [data-mode="magic-assassin"],
  [data-mode="devour-world"]
) .mode-dialog-shell {
  box-sizing: border-box !important;
  width: min(96vw, 1180px) !important;
  height: min(92dvh, 820px) !important;
  max-width: min(96vw, 1180px) !important;
  max-height: min(92dvh, 820px) !important;
}

html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
  [data-mode="storm"],
  [data-mode="magic-assassin"],
  [data-mode="devour-world"]
) .mode-dialog-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
  [data-mode="storm"],
  [data-mode="magic-assassin"],
  [data-mode="devour-world"]
) .mode-dialog-art {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  margin-block: -10px !important;
  align-self: stretch !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  background-position-x: 50% !important;
}

html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
  [data-mode="storm"],
  [data-mode="magic-assassin"],
  [data-mode="devour-world"]
) .mode-dialog-copy {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--special-mode-copy-pad-top) var(--special-mode-copy-pad-x) var(--special-mode-action-gap) !important;
}

@media (min-width: 721px) and (max-height: 720px) {
  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) {
    --special-mode-top-band: 50px !important;
    --special-mode-panel-x: 32px !important;
    --special-mode-panel-bottom: 18px !important;
    --special-mode-panel-gap: 20px !important;
    --special-mode-detail-min: 104px !important;
    --special-mode-detail-max: 132px !important;
    --special-mode-story-max: 54px !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) {
    --special-mode-top-band: 48px !important;
    --special-mode-panel-x: 9px !important;
    --special-mode-panel-bottom: 9px !important;
    --special-mode-panel-gap: 6px !important;
    --special-mode-top-button-h: 32px !important;
    --special-mode-copy-pad-x: 9px !important;
    --special-mode-copy-pad-top: 8px !important;
    --special-mode-copy-h-mobile: clamp(202px, 24.6dvh, 212px) !important;
    --special-mode-action-h: 32px !important;
    --special-mode-action-gap: 5px !important;
    --special-mode-name-gap: 3px !important;
    --special-mode-name-h: 21px !important;
    --special-mode-skill-gap: 5px !important;
    --special-mode-detail-min: 50px !important;
    --special-mode-detail-max: 56px !important;
    --special-mode-lore-gap: 2px !important;
    --special-mode-story-gap: 2px !important;
    --special-mode-story-max: 0px !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-shell {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) var(--special-mode-copy-h-mobile) !important;
    padding: var(--special-mode-top-band) var(--special-mode-panel-x) var(--special-mode-panel-bottom) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-art {
    width: 100% !important;
    height: auto !important;
    margin-block: -3px !important;
    background-size: auto 100% !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-copy {
    height: var(--special-mode-copy-h-mobile) !important;
    max-height: var(--special-mode-copy-h-mobile) !important;
    padding: var(--special-mode-copy-pad-top) var(--special-mode-copy-pad-x) var(--special-mode-action-gap) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogName {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 0.98 !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogCharacter {
    min-height: var(--special-mode-name-h) !important;
    padding-inline: 8px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogSkill {
    min-height: 23px !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-detail-frame.mode-dialog-detail-frame {
    min-height: var(--special-mode-detail-min) !important;
    max-height: var(--special-mode-detail-max) !important;
    padding: 6px 7px !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-story {
    display: none !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-close,
  html body:not(.maintenance-mode) #modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-lock {
    top: 8px !important;
    height: var(--special-mode-top-button-h) !important;
    min-height: var(--special-mode-top-button-h) !important;
  }
}

/* Mobile hard cap:
   the legacy special-dialog sheet uses a deliberately high-specificity layout.
   Keep the expanded portrait, but make every supporting text/button row fit
   inside short 19.5:9 screens without relying on clipped overflow. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) {
    --special-mode-top-band: 48px !important;
    --special-mode-panel-x: 9px !important;
    --special-mode-panel-bottom: 9px !important;
    --special-mode-panel-gap: 6px !important;
    --special-mode-top-button-h: 32px !important;
    --special-mode-copy-pad-x: 9px !important;
    --special-mode-copy-pad-top: 6px !important;
    --special-mode-copy-pad-bottom: 4px !important;
    --special-mode-copy-h-mobile: 202px !important;
    --special-mode-action-h: 32px !important;
    --special-mode-name-gap: 3px !important;
    --special-mode-name-h: 21px !important;
    --special-mode-skill-gap: 4px !important;
    --special-mode-detail-gap: 4px !important;
    --special-mode-bottom-gap: 4px !important;
    --special-mode-detail-min: 48px !important;
    --special-mode-detail-max: 52px !important;
    --special-mode-story-max: 0px !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-shell {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 24px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) var(--special-mode-copy-h-mobile) !important;
    padding: var(--special-mode-top-band) var(--special-mode-panel-x) var(--special-mode-panel-bottom) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-art {
    margin-block: -3px !important;
    background-size: auto 100% !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-copy {
    height: var(--special-mode-copy-h-mobile) !important;
    max-height: var(--special-mode-copy-h-mobile) !important;
    padding: var(--special-mode-copy-pad-top) var(--special-mode-copy-pad-x) var(--special-mode-copy-pad-bottom) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogName {
    padding-block: 1px 2px !important;
    font-size: clamp(25px, 6.8vw, 29px) !important;
    line-height: 0.98 !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogCharacter {
    min-height: var(--special-mode-name-h) !important;
    padding-inline: 8px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) #modeDialogSkill {
    min-height: 23px !important;
    padding: 2px 8px 3px 7px !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-detail-frame.mode-dialog-detail-frame {
    box-sizing: border-box !important;
    min-height: var(--special-mode-detail-min) !important;
    max-height: var(--special-mode-detail-max) !important;
    padding: 5px 7px !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-story {
    display: none !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-dialog-prompt {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-close,
  html body:not(.maintenance-mode) #modeDialog#modeDialog#modeDialog#modeDialog.mode-dialog:is(
    [data-mode="storm"],
    [data-mode="magic-assassin"],
    [data-mode="devour-world"]
  ) .mode-lock {
    top: 8px !important;
    height: var(--special-mode-top-button-h) !important;
    min-height: var(--special-mode-top-button-h) !important;
  }
}