/* V1.27Beta-codex59 final overrides. Loaded after mobile-ui-fix.css. */

html body:not(.maintenance-mode) .card-vfx-idle::after {
  opacity: 0.2 !important;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.18) 48%, transparent 56%) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(255, 255, 255, 0.62) 46% 54%, transparent 68%) 18% 22% / 22px 1px no-repeat,
    linear-gradient(0deg, transparent 0 33%, rgba(255, 255, 255, 0.5) 46% 54%, transparent 68%) 18% 22% / 1px 22px no-repeat,
    linear-gradient(90deg, transparent 0 36%, rgba(130, 232, 255, 0.5) 47% 53%, transparent 66%) 78% 76% / 18px 1px no-repeat,
    linear-gradient(0deg, transparent 0 36%, rgba(130, 232, 255, 0.4) 47% 53%, transparent 66%) 78% 76% / 1px 18px no-repeat !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) {
    --select-frame-inner-y: clamp(104px, 13.8vh, 146px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout {
    left: 50vw !important;
    top: 50dvh !important;
    width: min(145dvh, calc(100vw - 8px)) !important;
    height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 16px)) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding-top: var(--select-frame-inner-y) !important;
    padding-bottom: var(--select-frame-inner-y) !important;
    background: var(--character-select-desktop-frame-art) center center / 100% 100% no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-select-layout::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect .character-scroll {
    position: relative !important;
    z-index: 2 !important;
  }
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="magic-assassin"] {
  --special-mode-copy-bg:
    radial-gradient(ellipse at 18% 0%, rgba(255, 186, 233, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(39, 16, 45, 0.86), rgba(13, 9, 25, 0.92));
  --special-mode-button-bg:
    radial-gradient(ellipse at 16% 0%, rgba(255, 255, 255, 0.9), transparent 43%),
    linear-gradient(180deg, rgba(255, 214, 247, 0.95), rgba(255, 119, 202, 0.86) 43%, rgba(118, 92, 224, 0.9) 70%, rgba(99, 214, 255, 0.86));
  --special-mode-button-border-a: rgba(255, 180, 230, 0.95);
  --special-mode-button-border-b: rgba(119, 223, 255, 0.92);
  --special-mode-button-text: #fff4ff;
  --special-mode-button-shadow:
    0 10px 20px rgba(74, 28, 111, 0.34),
    0 0 18px rgba(255, 111, 209, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(68, 35, 136, 0.38);
  --special-mode-story-color: rgba(205, 200, 216, 0.82);
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="devour-world"] {
  --special-mode-copy-bg:
    radial-gradient(ellipse at 18% 0%, rgba(255, 222, 128, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(42, 39, 24, 0.84), rgba(11, 22, 17, 0.92));
  --special-mode-button-bg:
    radial-gradient(ellipse at 16% 0%, rgba(255, 255, 235, 0.94), transparent 42%),
    linear-gradient(180deg, rgba(255, 237, 162, 0.98), rgba(232, 171, 68, 0.9) 42%, rgba(55, 139, 104, 0.9) 72%, rgba(255, 205, 92, 0.88));
  --special-mode-button-border-a: rgba(255, 222, 121, 0.95);
  --special-mode-button-border-b: rgba(98, 213, 159, 0.92);
  --special-mode-button-text: #fff7d5;
  --special-mode-button-shadow:
    0 10px 20px rgba(62, 46, 16, 0.34),
    0 0 18px rgba(93, 205, 148, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(74, 102, 49, 0.38);
  --special-mode-story-color: rgba(212, 209, 191, 0.82);
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog[data-mode="storm"] {
  --special-mode-copy-bg:
    radial-gradient(ellipse at 18% 0%, rgba(137, 238, 255, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(17, 34, 58, 0.86), rgba(9, 14, 28, 0.92));
  --special-mode-button-bg:
    radial-gradient(ellipse at 16% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(180deg, rgba(224, 253, 255, 0.97), rgba(118, 231, 255, 0.88) 40%, rgba(65, 110, 242, 0.88) 72%, rgba(240, 196, 106, 0.86));
  --special-mode-button-border-a: rgba(143, 238, 255, 0.95);
  --special-mode-button-border-b: rgba(240, 196, 106, 0.9);
  --special-mode-button-text: #f3fdff;
  --special-mode-button-shadow:
    0 10px 20px rgba(20, 65, 126, 0.34),
    0 0 18px rgba(126, 232, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(38, 75, 146, 0.38);
  --special-mode-story-color: rgba(202, 209, 220, 0.82);
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy {
  grid-template-rows: auto auto auto minmax(122px, auto) minmax(96px, 1fr) auto auto !important;
  gap: clamp(13px, 1.5vh, 18px) !important;
  background: var(--special-mode-copy-bg) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogName {
  margin: 0 0 clamp(4px, 0.8vh, 8px) !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogCharacter {
  margin: 0 0 clamp(12px, 1.7vh, 22px) !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogSkill {
  margin: clamp(2px, 0.5vh, 6px) 0 clamp(10px, 1.35vh, 16px) !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(16px, 1.42vw, 21px) !important;
  line-height: 1.72 !important;
  font-weight: 820 !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.42),
    0 0 12px rgba(126, 213, 255, 0.16) !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story {
  display: block !important;
  margin: clamp(6px, 0.9vh, 10px) 0 0 !important;
  color: var(--special-mode-story-color) !important;
  -webkit-text-fill-color: var(--special-mode-story-color) !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1.68 !important;
  font-weight: 560 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.32) !important;
}

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) :is(.mode-close, .mode-lock, #modeAccept, #modeReject) {
  min-width: clamp(112px, 9.6vw, 148px) !important;
  height: clamp(36px, 4.5vh, 44px) !important;
  min-height: clamp(36px, 4.5vh, 44px) !important;
  padding: 0 18px 2px !important;
  border: 1px solid rgba(244, 252, 255, 0.82) !important;
  border-left: 3px solid var(--special-mode-button-border-a) !important;
  border-right: 3px solid var(--special-mode-button-border-b) !important;
  border-radius: 0 !important;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important;
  color: var(--special-mode-button-text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  background: var(--special-mode-button-bg) !important;
  box-shadow: var(--special-mode-button-shadow) !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.28),
    0 0 10px rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

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

html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-lock {
  min-width: clamp(126px, 10vw, 158px) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-copy {
    height: clamp(258px, 33dvh, 306px) !important;
    max-height: clamp(258px, 33dvh, 306px) !important;
    grid-template-rows: auto minmax(68px, auto) minmax(72px, 1fr) auto auto !important;
    gap: 9px !important;
    padding: clamp(16px, 4.2vw, 22px) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-panel {
    grid-template-rows: minmax(0, 1fr) clamp(258px, 33dvh, 306px) !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogName {
    margin-bottom: 4px !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogCharacter {
    margin-bottom: 11px !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogSkill {
    margin-top: 3px !important;
    margin-bottom: 9px !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) #modeDialogDescription {
    font-size: clamp(14px, 3.7vw, 17px) !important;
    line-height: 1.62 !important;
    display: block !important;
    min-height: 64px !important;
    max-height: 96px !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) .mode-dialog-story {
    margin-top: 10px !important;
    transform: translateY(14px) !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.58 !important;
    max-height: 92px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) :is(.mode-close, .mode-lock, #modeAccept, #modeReject) {
    min-width: 88px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px 1px !important;
    font-size: 12px !important;
  }
}